Adding CSS to HTML

CSS can be added to an HTML document using an external stylesheet, internal CSS, or inline CSS. Each method connects CSS styles with HTML in a different way.

External stylesheets are commonly used to control the appearance of multiple webpages, while internal and inline CSS can be useful when styles apply to a single document or element.

External CSS

External CSS is stored in a separate file, usually with a .css filename extension. The stylesheet is connected to an HTML document using a <link> element inside the document's <head> element.

<link rel="stylesheet" href="styles.css">

The CSS rules are written in the external stylesheet.

h1 {
  color: blue;
}
p {
  color: #333333;
  font-size: 18px;
}

A single external stylesheet can be linked to many HTML documents, making it easier to apply and maintain consistent styles throughout a website.

Internal CSS

Internal CSS is written inside a <style> element, which is normally placed inside the HTML document's <head> element.

<head>
  <style>
    h1 {
      color: blue;
    }
    p {
      color: #333333;
      font-size: 18px;
    }
  </style>
</head>

Internal CSS applies to the document containing the <style> element. It can be useful when a page needs styles that are not shared with other pages.

Inline CSS

Inline CSS is written directly on an HTML element using the style attribute.

<h1 style="color: blue;">Learning CSS</h1>

Inline CSS applies directly to that element. It can be useful for specific situations, but using large amounts of inline CSS can make a webpage more difficult to maintain because the presentation rules are mixed directly into the HTML markup.

Which Method Should You Use?

External stylesheets are generally the most practical method for styling a website because the same CSS file can be used by multiple webpages. Updating the stylesheet can update the appearance of every page that links to it.

Internal CSS is useful when styles are needed only for one document. Inline CSS is useful when a style needs to be applied directly to a particular element, but it should generally be used selectively rather than as the primary method for styling a website.

The next tutorials examine external stylesheets, internal CSS, and inline CSS individually so you can see how each method works in more detail.

Order of CSS Styles

When more than one CSS rule applies to the same element, the browser uses the CSS cascade to determine which declaration is applied. The location of the CSS is only one part of that process.

External stylesheets and internal <style> elements are processed in the order they appear in the document. When competing declarations otherwise have the same priority and specificity, a declaration that appears later can override one that appears earlier.

<link rel="stylesheet" href="styles.css">
<style>
p {
  color: blue;
}
</style>

In this example, an equally specific color declaration in the internal CSS can override the same property from the external stylesheet because the internal CSS appears later.

Inline styles normally take precedence over normal author declarations written in stylesheets. However, CSS priority is also affected by factors such as importance, cascade layers, specificity, and source order. These concepts are covered in more detail in the CSS Cascade and CSS Specificity tutorials.

CSS Methods Example

The following example uses internal CSS to style a heading and paragraph. Internal CSS is used here so the complete example can be contained in one HTML document.

<style>
h1 {
  color: blue;
}
p {
  color: #333333;
  font-size: 18px;
}
</style>

<h1>Adding CSS to HTML</h1>
<p>CSS controls the appearance of HTML content.</p>

Play in Editor

Although this example uses internal CSS, the same CSS rules could be placed in an external stylesheet. The declarations could also be applied directly to individual elements with the style attribute, although that would mix the CSS with the HTML markup.