Selectors in action - step by step tutorial

Step 12 - styling the <a> element

Display: block

Now, we want to make the <a> element into a block. This is done by changing it to "display: block" with a descendant selector. We can then add a width and padding and other styles to make it into a box shape.

#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
}

Text decoration

Text decoration is set to none - to remove underlines. We will also color the text black.

#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: #000;
}

Background image

A background image is added to the <a> element. This image is set to 140px wide and will repeat down the page. To do this we set the background-repeat to the y axis only. No matter how long the list item, the background will always grow under it.

#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: #000;
background-image: url(nav_base.jpg);
background-repeat: repeat-y;
}

View step 12 »

Go to Step 13 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org