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: #. **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. .. sourcecode:: html Content... #. **Internal**: One or more CSS style rules are placed within the ``head`` element at the start of the HTML document. The `` Note that the syntax for the CSS rules follows the format we used on the previous page. .. _link-external-css: #. **External**: The CSS style rules are placed in a separate file. This document only contains CSS code, and it is saved with a ``.css`` extension. The external CSS file must be linked to the HTML document in the ``head`` element. External CSS is great when we have large amounts of rules that apply to the whole page. We can also *reuse* an external CSS document by linking it to multiple webpages. The general syntax for this is: .. sourcecode:: html :linenos: My Web Page Let's step through what's going on in line 3: #. ```` is the HTML tag that tells the browser to connect a webpage and a separate, named file. #. ``rel`` describes how the link *relates* to the page. In this case, the linked file provides style instructions, so we set ``rel`` to the value ``"stylesheet"``. #. ``type`` tells the browser what kind of content is saved within the linked file. ``type`` should be set to ``"text/css"`` for all style sheets. This tells the browser to expect CSS syntax when it opens the file. #. ``href`` provides the path to the CSS document as well as its name. The path tells the browser where to look for the file it needs to open. In this case, ``href="style.css"`` tells the browser, "Look in the same folder as the HTML file, and open the document called ``style.css``." .. admonition:: Note The ``href`` path can describe where a file is stored on a computer, or it can be a web address where the CSS code can be accessed. 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. #. Inline CSS receives the highest importance. It overrules any other styling. #. Internal CSS comes next in importance. #. External CSS receives the lowest level of importance. The different CSS selectors also follow a specific order: #. ``id`` styling rules receive higher importance. #. ``class`` styling rules come next. #. ``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. .. admonition:: 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. .. sourcecode:: html :linenos:
Outer section...
Inner section...
Innermost section...
Inner section...
Outer section...
**Output** .. figure:: figures/nested-styles.png :alt: 3 nested sections. The inner sections show background colors different from the outer style rule. .. admonition:: 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. 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. .. raw:: html #. On line 7, use the ```` 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*. #. 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 ``
  • `` tag. Which style rule gets applied (``element``, ``class``, or ``id``)? #. Inside ```` and below the ```` tag, add the following code. This is an example of *internal CSS*: .. sourcecode:: html :lineno-start: 8 What level of importance does the internal ``li`` selector receive compared to the external ``li``, ``class``, and ``id`` rules? #. 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``? #. Use inline styling to add a border to one of the ``
    `` 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? Check Your Understanding ------------------------ .. admonition:: Question What is the order of importance for CSS style rules? .. raw:: html
    1. Internal > External > Inline
    2. Inline > Internal > External
    3. Inline > External > Internal
    4. External > Internal > Inline

    .. Answer = b .. admonition:: Question What is the order of importance for CSS selectors? .. raw:: html
    1. element > class > id
    2. element > id > class
    3. class > id > element
    4. class > element > id
    5. id > element > class
    6. id > class > element

    .. Answer = f .. admonition:: 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? .. sourcecode:: html

    This is some text...

    .. raw:: html
    1. red
    2. blue
    3. yellow
    4. orange

    .. Answer = c