Frontend Engineering, Volume II

CSS: Example 2e—Project Outline Links

© 2013, Martin Rinehart


When we left our HTML project, we had an outline-style set of alternate navigation links in the lower-left corner. Built with nested ordered lists, it looked like this:

Outline-style navigation links from our HTML project.

That doesn't look as good as it could with CSS. This is what a little CSS can do:

Outline-style navigation links styled with CSS.

That's more than a little better, isn't it? Your project is to create something similar in your own project. And our constraint is to create it by adding to the style sheet, not the HTML page.

Choosing Elements

A very good way to begin a page-improvement project is to write a selector that chooses the elements you want to style. Take a look at the HTML that created that navigation outline:

<ol type='I'>

    <li><b>Locating Our Scientists</b>
        <ol type='A'>
            <li><a href=...>In Time</a></li>
            <li><a href=...>In Space</a></li>
        </ol>
    </li>

    <li><b>Details About Our Scientists</b>
        <ol type='A'>
            <li><a href='sci-rev/galileo.html'>Galileo</a>
                <a href=...>Newton's words</a></li>
            <li><a href=...>Kepler</a>
                <a href=...>Newton's words</a></li>
            <li><a href=...>Descartes</a>
                <a href=...>Newton's words</a></li>
            <li><a href=...>Fermat</a>
                <a href=...>Newton's words</a></li>
            <li><a href=...>Newton</a>
                <a href=...>about himself</a></li>
        </ol>
    </li>

</ol>

The <li> Elements

The elements we want to style are the second level <li> elemnts: <li> elements that are themselves descendants of other <li> elements. Let's test a selector with a nice, bright background.

Add this to your style sheet:

        li li {
            background-color: red;
        }

You'll immediately see that you've got the right elements, but being block elements they extend the full width of the page, which is too far. You just want enough space to contain the text of one or two links. So let's cut them back a bit.

        li li {
            background-color: red;
            position: relative;
            width: 300px;
        }

Your width property would be ignored if you didn't specify a position property. This is the subject of Chapter 3. For now, just include position: relative as a funny way of saying, "Please don't ignore my width specification."

If you've got this right, it will make the correct elements stand out. This is the result we got:

Outline nav list items selected.

The Links

We also need to style the <a> elements in those list-item elements. That calls for a descendant of a descendant, like this:

    li li a {
        background-color: pink;
    }

Now our outline links look like this:

Links selected within outline list items.

Styling the Selected Elements

Add the following declaration groups with some styles that you like. One simple, worthwhile goal would be to make yours look better than ours. For inspiration, we give you the styles we chose.

Feedback: MartinRinehart at gmail dot com

# # #