Creating External Style Rules

Available Files

The following files are available for download:

Download Exercise Files

Learn more about using exercise files.

The real benefit of using external style sheets is that one external style sheet can be written and applied across multiple pages or an entire Web site using the <link> element. For example, if a design requires the same font size to be applied throughout a Web site, linking the pages to one style sheet assures this consistency.

Creating Accessible, Hidden Content

When we create web pages, the page's main content is not usually the first part of the page. When a visitor using a screen reader comes to our page, the first thing that they usually hear is the list of our navigation links. For this reason, it's important to provide a means to skip the navigation and go directly to the content of the page. This allows someone using a screen reader to move straight to the content of the page, just like someone using a standard web browser. These skip navigation links should be the first thing that appears after the <body> tag. Our page has this built-in already:


<body>
    <a href="#main">Skip Navigation</a>
        <header class="jumbohead">
            <h1>Get Out &amp; Ride!</h1>
            <p>Bicycle Touring in the American Midwest</p>
            <p><a class="button-large" href="about.html">Learn More</a></p>
            </header>
            <nav class="main-nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="schedule.html">Schedule</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="faq.html">Help</a></li>
            </ul>
        </nav>
        <div id="main-wrapper">
            <article id="main" class="main_content">
                <section class="question-list">
                    <h1>Frequently Asked Questions</h1>

You can see that the hyperlink links to the #main id. The #main id is associated with the <article> element that holds the page's main content.

Having the Skip Navigation link visible isn't necessarily a bad thing, but a lot of designers would prefer to have it hidden so they can align content to the absolute top of the browser's viewport. Since it is the first thing that follows <body>, it will prevent that sort of vertical alignment. The solution has several parts:

Use CSS positioning to remove the link from normal document flow: This allows all the other content to begin at the upper left corner of the viewport.
Use CSS to make the Skip Navigation hyperlink appear as a single pixel in the upper left of the viewport.

Let's open our style sheet now.

Step1. Switch to your code editor.

Step2. To open the style sheet, press:

Control key+O, Double-Click the css folder, Double-Click style.css

The style sheet opens in the code editor.

We will create a class called .auralText and assign it to the hyperlink so it becomes invisible.

Step3. To find the location for our .auralText class,

scroll to the end of the style sheet

We want this class to be defined at the absolute bottom of the stylesheet so that it overrides any other rule affecting hyperlinks in our document.

Step4. To add the .auralText class, add:


/*
 * Accessibly Hiding Content
 */
.auralText {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
}

Step5. Save style.css.

Let's look at each of the properties in this example one-by-one:

Property	Purpose
position: absolute;	Removes the hyperlink from normal document flow.
clip: rect(1px, 1px, 1px, 1px);	Forces the hyperlink to display in a 1px square box
height: 1px;	Makes the hyperlink 1px tall
width: 1px;	Makes the hyperlink 1px wide
overflow: hidden;	Hides any text that would flow outside of the box defined in the clip property

Essentially, we're telling the link to be a specific size (1px) and appear in a specific location (top of the page). By making the box around this link so small, it'll virtually be invisible to the naked eye.

There are several other techniques that allow this same effect. To read more about Skip Navigation links, see WebAIM's page about "Skip Navigation" links.

We also have to add the class to our skip navigation link.

Step6. Activate index.html in the code editor.

Step7. To add the .auralText class to our skip navigation link, type:


<body>
    <a href="#main" class="auralText">Skip Navigation</a>
    <header class="jumbohead">

Let's preview our changes in the browser.

Step8. Save and refresh index.html.

The page is refreshed and we see the Skip Navigation link is now visually hidden.

UITS IT Training Content Library

Creating External Style Rules

Available Files

Need help with the available files?

Creating Accessible, Hidden Content