15.3. Linking CSS to HTML

To use CSS, we need to apply our style rules to a set of HTML code. There are three different places to add CSS in an HTML file:

  1. Inline: The CSS gets placed inside individual HTML tags. This is a good place to add some quick, specific styling to a small number of elements.

    There is no selector in inline CSS. Instead, the style attribute is used. With inline CSS, the styling rule only applies to that one HTML element.

    <tag style="declaration block">Content...</tag>
    
  2. Internal: One or more CSS style rules are placed within the head element at the start of the HTML document. The <style> tags wrap the CSS content.

    Internal CSS works great when we have a small number of style rules that we need to apply to the whole document. The general syntax is:

     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <head>
       <title>My Web Page</title>
       <style>
          selector {
             property: value;
             property: value;
             /* Other property assignments */
          }
    
          selector {
             property: value;
             property: value;
          }
    
          /* Other CSS rules */
       </style>
    </head>
    

    Note that the syntax for the CSS rules follows the format we used on the previous page.

15.3.1. CSS Order of Importance

Since CSS instructions can be placed in three locations, it’s not hard to create conflicting style rules. If an external CSS file sets a heading text to blue, while an internal rule sets the color to red, which one wins? To deal with cases like this, browsers follow a specific order when applying styles.

  1. Inline CSS receives the highest importance. It overrules any other styling.

  2. Internal CSS comes next in importance.

  3. External CSS receives the lowest level of importance.

The different CSS selectors also follow a specific order:

  1. id styling rules receive higher importance.

  2. class styling rules come next.

  3. element level styling rules receive the lowest importance.

Finally, nesting HTML elements inside others affects their styling. Any rules for the internal element override the rules on the outer element.

Example

The following HTML code nests 3 section elements. Note how the style rules for the inner elements get applied instead of the outermost color choice.

1
2
3
4
5
6
7
8
9
<section style="background-color:lightblue">
   Outer section...
   <section style="background-color:yellow">
      Inner section...
      <section style="background-color:white">Innermost section...</section>
      Inner section...
   </section>
   Outer section...
</section>

Output

3 nested sections. The inner sections show background colors different from the outer style rule.

Tip

This order of importance is actually quite useful. We use it to our advantage whenever we need to override a more general style rule with one designed for a specific element.

15.3.2. Try It!

The editor below contains some plain HTML and a style.css file. Follow the instructions below the code to practice adding CSS style rules to the document. Also, pay attention to how the order of importance affects how the rules get applied.

  1. On line 7, use the <link> tag to connect the style.css file to the HTML code. Properly done, you will see the plain webpage change quite a bit. This is an example of bringing in external CSS.

  2. Note that the li selector from style.css affects all list elements on the page. On line 15, add BOTH class="small-red-text" and id="large-blue-item" to the <li> tag. Which style rule gets applied (element, class, or id)?

  3. Inside <head></head> and below the <link> tag, add the following code. This is an example of internal CSS:

     8
     9
    10
    11
    12
    13
    <style>
       li {
          color: green;
          text-decoration: underline wavy;
       }
    </style>
    

    What level of importance does the internal li selector receive compared to the external li, class, and id rules?

  4. Add a section selector to the internal CSS. Set the background to a color of your choice. Does this internal rule override the font, text color, and border rules set in style.css?

  5. Use inline styling to add a border to one of the <section> tags. One fun option is style="border:4px double blue".

    4px sets the border thickness to 4 pixels. double refers to the border type (solid, dashed, and dotted are also options).

    Does this inline CSS affect the section properties set by the internal and external style rules?

15.3.3. Check Your Understanding

Question

What is the order of importance for CSS style rules?

  1. Internal > External > Inline
  2. Inline > Internal > External
  3. Inline > External > Internal
  4. External > Internal > Inline

Question

What is the order of importance for CSS selectors?

  1. element > class > id
  2. element > id > class
  3. class > id > element
  4. class > element > id
  5. id > element > class
  6. id > class > element

Question

In the head element of an HTML file, an internal CSS rule sets the text color for all p elements to blue. The HTML file also links to external CSS that defines an id selector to make red text (#red-text).

Given the following HTML code, what color will the text be on the screen?

<p id="red-text" style="color: yellow">This is some text...</p>
  1. red
  2. blue
  3. yellow
  4. orange