CSS How To

How To Add CSS to HTML

Cascading Style Sheets (CSS) are used to format the layout and appearance of web pages. This guide explains the three primary methods for incorporating CSS into your HTML documents.

Understanding CSS Integration

When a browser renders an HTML document, it also reads any associated CSS rules to apply styling. There are three ways to provide these rules:

• External CSS: Styles are defined in a separate .css file.
• Internal CSS: Styles are defined within a <style> element in the HTML document’s <head> section.
• Inline CSS: Styles are applied directly to individual HTML elements using the style attribute.

1. External CSS

This is the most common and recommended method for most projects. With an external stylesheet, you can manage the styles for an entire website from a single file. This promotes consistency, maintainability, and better organization.

To use an external stylesheet, you link to it from the <head> section of your HTML page(s):

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

The mystyle.css file would contain your CSS rules (without any HTML tags):

mystyle.css

body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
}

h1 {
  color: navy;
  margin-left: 20px;
}

.special-text {
  font-style: italic;
  color: darkgreen;
}

Advantages: Centralized styling, easier maintenance, improved page load times (browser caches the .css file).

	Important: Do not add a space between a property value and its unit (e.g., margin-left: 20 px; is incorrect). The correct syntax is margin-left: 20px;.

2. Internal CSS (Embedded Styles)

Internal CSS is used when a single HTML page has a unique style that won’t be reused on other pages. Styles are defined within a <style> element, placed inside the <head> section of the HTML document.

<head>
  <meta charset="UTF-8">
  <title>Unique Page Style</title>
  <style>
    body {
      background-color: linen;
    }
    h1 {
      color: maroon;
      margin-left: 40px;
    }
    p {
      font-size: 1.1em;
    }
  </style>
</head>
<body>
  <h1>This heading is styled by internal CSS.</h1>
  <p>This paragraph also uses internal styles.</p>
</body>

Advantages: Useful for single-page specific styles. No extra HTTP request for a CSS file.

Disadvantages: Styles are not reusable across multiple pages, making sitewide changes more difficult.

3. Inline CSS

Inline styles are applied directly to a single HTML element using the style attribute. This method is generally discouraged for extensive styling because it mixes content (HTML) with presentation (CSS), making maintenance harder and overriding other styles with high specificity.

Use inline styles sparingly, typically for very specific, dynamic styling (e.g., set by JavaScript) or for quick testing.

<h1 style="color:blue; margin-left:30px; text-align:center;">This is an Inline Styled Heading</h1>
<p style="color:green; font-size:12px;">This paragraph has inline styles too.</p>

Disadvantages: Highest specificity (can be hard to override), poor maintainability, no reusability, bloats HTML.

The Cascade and Specificity: How Styles are Applied

When multiple CSS rules target the same element, the browser uses a system called the cascade and specificity to determine which rule takes precedence.

Cascading Order (general precedence from lowest to highest):

1. Browser default styles (user agent stylesheet).
2. External stylesheets (linked via <link>).
3. Internal stylesheets (within <style> tags in the <head>).
4. Inline styles (applied via the style attribute on an element).

Example: If an external stylesheet defines h1 { color: navy; } and an internal stylesheet on the same page defines h1 { color: orange; }, the h1 elements will be orange because internal styles generally override external styles for the same selector and property if linked correctly.

Specificity:

Within the same origin (e.g., all your own CSS), more specific selectors will override less specific ones. For example:

• An ID selector (e.g., #myElement) is more specific than a class selector (e.g., .myClass).
• A class selector is more specific than an element selector (e.g., p).
• Chained selectors (e.g., div.myClass p) are more specific than single selectors.

!important: You can add !important to a CSS property value to make it override almost any other declaration. However, use !important sparingly as it can make debugging styles very difficult. It’s often a sign of poorly structured CSS.

Example of !important:

p {
  color: blue !important; /* This will likely override other color rules for <p> */
}

#special-paragraph {
  color: red; /* Even an ID selector might be overridden by !important on a p selector */
}

Note: If an external stylesheet is linked after an internal <style> block in the HTML <head>, the rules in the external stylesheet might override the internal ones if they have the same specificity, due to the order of appearance.

Best Practice: Use External Stylesheets

For most web development, external stylesheets are the preferred method. They offer the best balance of organization, maintainability, and performance (due to caching). Reserve internal styles for page-specific tweaks and inline styles for rare, highly specific cases.