HTML CSS

HTML Styles with CSS

CSS (Cascading Style Sheets) is the language used to describe the presentation and styling of HTML documents. It controls layout, colors, fonts, spacing, and more.

Why Use CSS?

While HTML structures the content, CSS defines how it looks. Separating structure (HTML) from presentation (CSS) offers several advantages:

• Maintainability: Change the look of an entire website by editing one CSS file.
• Consistency: Ensure a consistent appearance across multiple pages.
• Accessibility: Well-structured HTML with separate CSS is easier for assistive technologies to parse.
• Performance: Browsers can cache external CSS files, speeding up page loads.
• Cleaner Code: HTML focuses on content structure, making it easier to read and manage.

Avoid using deprecated HTML attributes like <font>, <center>, bgcolor, etc. All styling should be done with CSS.

Ways to Add CSS to HTML

There are three primary methods to apply CSS styles:

1. External CSS (Recommended)

Styles are defined in a separate .css file (e.g., styles.css). This file is then linked to the HTML document(s) using the <link> tag within the <head> section.

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Styled Heading</h1>
    <p>Styled paragraph.</p>
</body>
</html>

CSS (styles.css):

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: navy;
}

p {
  color: #333;
  line-height: 1.6;
}

This is the best practice for most websites as it provides the best separation of concerns and maintainability.

2. Internal CSS

Styles are defined within a <style> element placed inside the <head> section of the HTML document. This method is suitable for single-page websites or specific styles unique to one page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: lightyellow;
        }
        h1 {
            color: maroon;
            text-align: center;
        }
        p {
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <h1>Internal Style Example</h1>
    <p>This paragraph is styled by the internal CSS.</p>
</body>
</html>

3. Inline CSS

Styles are applied directly to individual HTML elements using the style attribute. This method should be used sparingly, as it mixes presentation with structure and makes maintenance harder. It’s sometimes useful for unique, single-element styling or dynamically applying styles with JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue; text-decoration: underline;">Blue Underlined Heading</h1>
    <p style="color: green; font-style: italic;">This paragraph has inline styles.</p>
</body>
</html>

Basic CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value; /* This is a declaration */
  another-property: another-value;
}

• Selector: Points to the HTML element(s) you want to style (e.g., h1, p, .my-class, #my-id).
• Declaration Block: Contains one or more declarations enclosed in curly braces {}.
• Declaration: Consists of a CSS property name (e.g., color, font-size, background-color) followed by a colon :, then a value (e.g., blue, 16px, #ffffff), and ends with a semicolon ;.

Common CSS Properties

• color: Sets the text color.
• background-color: Sets the background color of an element.
• font-family: Specifies the font for text.
• font-size: Sets the size of the text (e.g., 16px, 1.2em, 120%).
• text-align: Aligns text horizontally (left, right, center, justify).
• width, height: Set the dimensions of an element.
• margin: Controls the space outside an element’s border.
• padding: Controls the space inside an element’s border, between the border and the content.
• border: Sets the border’s width, style (solid, dashed, etc.), and color.

Example combining several properties:

.button {
  display: inline-block; /* Allows setting width/height/padding */
  padding: 10px 20px;
  margin: 5px;
  background-color: dodgerblue;
  color: white;
  border: none;
  border-radius: 5px; /* Rounded corners */
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  cursor: pointer; /* Changes mouse cursor on hover */
}

Selectors: Targeting Elements

Element Selector: Selects all elements of a specific type.

`p { color: gray; }` /* Styles all <p> elements */

Class Selector: Selects elements with a specific class attribute. Starts with a period (.). Can be applied to multiple elements.

HTML: `<p class="highlight">Highlighted text.</p>`<br>CSS: `.highlight { background-color: yellow; }`

ID Selector: Selects a single element with a specific id attribute. Starts with a hash (#). An ID must be unique within a page.

HTML: `<div id="main-content">...</div>`<br>CSS: `#main-content { border: 1px solid black; }`

Guideline	Use class for styling multiple elements that share the same style. Use id for styling a single, unique element on the page (often used for layout sections or JavaScript hooks).

The CSS Box Model

Every HTML element can be visualized as a box. The CSS Box Model describes how the dimensions (width, height), padding, border, and margin of an element are calculated and relate to each other:

• Content: The actual content of the box, where text and images appear.
• Padding: Clears an area around the content. It’s inside the border. Transparent.
• Border: A border that goes around the padding and content.
• Margin: Clears an area outside the border. It separates the element from other elements. Transparent.

Understanding the box model is fundamental for controlling layout and spacing.

div.box {
  width: 300px;
  padding: 20px;
  border: 5px solid red;
  margin: 15px;
  background-color: lightblue;
}

(Note: The total width occupied by this box would be width + padding-left + padding-right + border-left + border-right + margin-left + margin-right)

Chapter Summary

• Use CSS for all presentation and styling.
• Prefer External CSS using the <link> element in <head> for maintainability.
• Use Internal CSS (<style> in <head>) for single-page styles.
• Use Inline CSS (style attribute) sparingly.
• CSS rules consist of a selector and declarations (property: value;).
• Use classes (.classname) to style groups of elements.
• Use IDs (#idname) to style unique elements.
• Understand the CSS Box Model (content, padding, border, margin) for layout control.
• Avoid deprecated HTML styling tags and attributes.

To learn CSS in much more detail, check out dedicated CSS tutorials and resources like the MDN Web Docs.

Relevant HTML Tags

Tag	Description
	Links an external resource (like a CSS file) to the document.
	Contains internal CSS style information.