Understanding External Style Sheets

Available Files

The following files are available for download:

Download Exercise Files

Learn more about using exercise files.

In HTML5 & CSS: The Basics, we saw and used inline and embedded style sheets.

Inline stylesheets exist within the element's style attribute and can only effect that specific element.

Embedded style sheets exist within the <head> element of a page and can only affect the look and feel of the page on which they are embedded.

A simple example of embedded style looks like this:


<!doctype html>
<html>
    <head>
        <title>Example Style Sheet</title>
        <meta charset="UTF-8"/>
        <style>
            p {
                color: blue;
            }
        </style>
    </head>

Unlike embedded style, an external style sheet collects styles in a separate document and allows a designer to associate the style rules to one or more pages. To use external style sheets, users must:

Create an additional text file with the extension.css (e.g. style.css).
Link the new text file to the pages where the style rules should be applied.

Often, external and embedded style sheets are used together to target specific needs.

Linking a Style Sheet to a Web Page

The linking we described above is done with the <link> element. The <link>element creates a relationship between an HTML file and another resource, such as a style sheet. Consider the following <link> element:


<link rel="stylesheet" href="main-style.css"/>

The <link> element specifies that a relationship (rel) is to be created to an external file. Then, just like an anchor element, the href attribute creates a hypertext reference to that file.

Understanding CSS Resets

You may have noticed there is already a linked style sheet in our document:


<link rel="stylesheet" href="css/normalize.css"/>

This is what's commonly referred to as a CSS reset. CSS resets are a way to ensure that all browsers display all parts of our content the same, from the beginning. For example, some things that may not be the same across all browsers are font sizes, margins, headings, and default line heights. The reset we are using is normalize.css. You can find the project on GitHub's Normalize.css download page.

Many developers today will rely on someone else's CSS reset project to handle this functionality instead of reinventing a wheel that others have already, more completely created. Some resets will barely affect anything while others will affect nearly everything. Today's reset file is a middle-ground between the two. The main reason that we chose this reset for today is that it accomplishes the task of resetting inconsistent properties across browsers (margin, padding, font-size, etc.) with a relatively small file size.

We have another existing external style sheet that we'll be using to start today. This style sheet brings us some basic formatting style including background colors, borders, font sizes, hyperlink colors, etc. This file is namedstyle.css. Let's link it to our FAQ document now.

Step1. If necessary, switch back to your code editor.

Step2. To link to the style sheet, type:


<head>
        <title>Get Out &amp; Ride!</title>
        <meta charset="UTF-8"/>
        <meta name="description" content="Get out &amp; ride classic touring routes throughout the mid-western United States with our guided tours"/>
        <meta name="keywords" content="bicycle, tour, bike, touring, cycling, guided tours, fully-supported"/>
        <link rel="stylesheet" href="css/normalize.css"/>
        <link rel="stylesheet" href="css/style.css"/>
</head>

Our style sheet is now associated with our page. Let's refresh in the browser to see how it looks.

Step3. Save and refresh index.html.

The page is refreshed and we see the changes coming from our newly-linked style sheet.

Understanding CSS Overrides

One other concept that we need to review is that of a CSS override. A CSS override is simply when one rule takes precedence over another. For example, consider the following rules:


p, h1, h2, h3, h4, h5, h6 { 
 font-family: Georgia, 'Times New Roman', Times, serif;
 color: black;
}

p {
 color: blue;
 border: 1px solid red;
}

In this example, we see that the first rule sets the font family and color for all paragraphs and headings. In the second rule, appearing later in the style sheet, we change the color of the text in paragraphs to blue and add a 1px, solid, red border. This is a simple example of a CSS override.

This concept also applies to the order in which style sheets are linked to a document. Today, since we are using a normalization style sheet to make our elements behave consistently across browsers, we need to have our custom style sheet, style.css, be linked after normalize.css:


<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/style.css"/>

This allows the rules we write in style.css to properly override the styles in normalize.css if there are rule conflicts.

Now that we have our style sheets linked, let's add some comments to describe what to expect from each style sheet.

Documenting Code with Comments

A comment is a way to add information to your source code that is ignored by the browser. For example, we can label our two CSS links so we can remember what they are later. There are two types of comments we will encounter today, CSS comments and HTML comments.

An HTML comment looks like this:


<!-- I am an HTML Comment -->

Anything between the opening () of the comment is ignored by the web browser.

CSS comments look like this:


/* I am a single-line CSS comment */
/* I am a comment that appears on
 multiple
 lines!
*/

In CSS, there is only one kind of comment, the block comment. In the case of both the single line and multiple line comment, everything between the opening (/*) and closing (*/) comment markers is ignored.

NOTE: CSS comments only work in CSS code blocks whereas HTML comments only work in HTML code blocks.

Let's add an HTML comment to each of our CSS links.

Step1. To add some descriptive comments, type:


<!-- Reset the default display of elements across browsers -->
<link rel="stylesheet" href="css/normalize.css"/>
<!-- Main style rules for display of the page -->
<link rel="stylesheet" href="css/style.css"/>

Our style sheets are now identified so we can remember what they do when we come back to our code later.

Step2. Save index.html.

The code in the <head> element of our document should look like this:


<head>
        <title>Get Out &amp; Ride!</title>
        <meta charset="UTF-8"/>
        <meta name="author" content="Your Name Here"/>
        <meta name="description" content="Get out &amp; Ride classic touring routes throughout the mid-western United States with our guided tours!"/>
        <meta name="keywords" content="bicycle, tour, bike, touring, cycling, guided tours, fully-supported"/>
        <!-- Reset the default display of elements across browsers -->
        <link rel="stylesheet" href="css/normalize.css"/> 
        <!-- Main style rules for display of the page -->
        <link rel="stylesheet" href="css/style.css"/>     
</head>

Now that we've got our style sheets linked and identified, let's begin working on the structure of our page.

UITS IT Training Content Library