The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout

By: Sheri German

Page 1 of 3

Set for printing

Next

In this installment of the HTML5 CSS Starter Page series, we are going to style all the links for the layout. We'll style buttons for the sidebar, and decorate each button with a different musical symbol - all without additional markup - by using attribute selectors. Then we'll style global link styles for other regions of the layout.

Download the files for the tutorial by clicking the icon at the bottom of any page. Be sure to define a Dreamweaver site and point it to the start folder in the support_files folder.

Creating the Sidebar1 Buttons

In this section we'll create the base buttons. First we'll remove the bullets from the links in the nav element's unordered list. We'll also add some top and bottom margin.

  1. Create a Compound rule with the name .sidebar1 nav ul in (This document only). This will apply only to unordered lists in the nav element in the sidebar1 div.
  2. Select the Box category on the left.
  3. Deselect Same for all under Margin.
  4. Type 10 (pixels) next to Top.
  5. Type 15 (pixels) next to Bottom.
  6. Select the List category on the left.
  7. Select None from the List-style-type dropdown menu.

    .sidebar1 nav ul {
    margin-bottom: 15px;
    margin-top: 10px;
    list-style: none;
    }

    Unordered list edits
    Image 1: Removing the bullets from links in lists

Next we'll set the text size for the list items and add a bottom border to set the links off from each other.

  1. Create a Compound selector with the name .sidebar1 nav ul li.
  2. Select the Type category on the left.
  3. In the field next to Font-size, type 90 and select percent as the unit of measurement.
  4. Select the Border category on the left.
  5. Deselect Same for all for Style, Width, and Color.
  6. Next to Bottom, set the following:
    • Style: Solid
    • Width: 1 pixel
    • Color: #BCA74B

    .sidebar1 nav ul li {
    font-size: 90%;
    border-bottom: 1px solid #BCA74B;
    }

Finally we'll turn the links in lists into the look of buttons.

  1. Create a Compound selector named .sidebar1 nav ul a , nav ul a:visited. This is a group selector that will create styles for both the initial and visited states of links.
  2. Select the Type category on the left.
  3. In the Color field, type #775533.
  4. In the Font-size field, type 110 and select percent as the unit of measurement.
  5. For Font-weight, select Bold from the dropdown menu.
  6. Under Text-decoration, check the box for None.
  7. Select the Block category on the left.
  8. From the Display dropdown menu, select Block.
  9. Select the Box category on the left.
  10. In the Width field, type 280 (pixels).
  11. Deselect Same for all for Padding and set these values.
    • Top: 8 pixels
    • Right: 5 pixels
    • Bottom: 8 pixels
    • Left: 35 pixels

    .sidebar1 nav ul a, nav ul a:visited {
    color: #775533;
    font-size: 110%;
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 8px 5px 8px 35px;
    width: 280px;
    }

    Base buttons
    Image 2: The base buttons before adding unique images to each link

Page 1 of 3 1 2 3 Next


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
HTML5, attribute selectors