Including CSS

Tomasz Bogusz

There are three basic ways of including CSS into an HTML document:

  • inline,

  • internal, and

  • external.

Further, styling rules for a given HTML come also from user-agent defaults (aka user-agent style sheets) and user overrides.

Inline CSS

An inline CSS styling is placed in the style attribute of a given HTML element.

<p style="font-size: 24px; color: red">
  I like horses!
</p>

The inline CSS styling applies only to the relevant element and with regards to some properties to elements nested within it. No other elements of the HTML document are affected.

Using CSS inline styling intertwines the presentational aspects of CSS with structural aspects of HTML and therefore is discouraged in favor of internal or external CSS inclusion.

Internal CSS

The Internal CSS means placing CSS styling rules in a style element which is nested in the head element.

Internal CSS styling rules are applicable to all selected elements of an HTML document.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-size: 24px;
        color: red;
      }
    </style>
  </head>
  <body>
    <p>
      ...
    <p>
    <p>
      ...
    <p>
  </body>
<html>

The styling rules defined in the style element apply to all p elements of the presented HTML document.

External CSS

The external CSS means placing CSS styling rules in a document separated from the styled HTML document and linking it using a link element placed in the head.

The styling rules defined in the linked CSS document are applicable to all selected elements of an HTML document

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="foo.css">
  </head>
  <body>
    <p>
      ...
    <p>
    <p>
      ...
    <p>
  </body>
<html>

The external CSS files should use the *.css extension. The CSS styling rules in the external file must include selectors and applicable properties.

p {
  font-size: 24px;
  color: red;
}

CSS Inclusion Rules Precedence

A given HTML element styling rules can come simultaneously from the inline CSS, internal CSS and external CSS.

In case of a styling rule conflict inline CSS has precedence over both internal CSS and external CSS.

The precedence of internal and external CSS depends on the order of their inclusion with the last included having the highest precedence.

p {
  font-size: 28px;
  color: blue;
  text-decoration: underline;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="foo.css">
    <style>
      p {
        font-size: 24px;
        color: red;
      }
    </style>
  </head>
  <body>
    <p style="font-size: 18px;">
      ...
    </p>
  </body>
<html>

The p element in the above example shall have the text that is a) underlined (from the external CSS), b) red (from the internal CSS) and c) with the font size of 18px (from the inline CSS).

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-size: 24px;
        color: red;
      }
    </style>
    <link rel="stylesheet" href="foo.css">
  </head>
  <body>
    <p style="font-size: 18px;">
      ...
    </p>
  </body>
<html>

The p element in the above example shall have the text that is a) underlined (from the external CSS), b) blue (again from the external CSS) and c) with the font size of 18px (from the inline CSS).