Nested Elements
"Nested" elements are elements that occur within another element. In the example on this page anchor tags (<a>) occur within li tags. You can recognize a nested tag because it occurs between the opening and closing tags of another element.
To style the nested tag specifically it is necessary to either assign a class to it or in this case use the tag it is nested inside first when specifying it in your css.
To make a link found inside a list item red the coding is as follows:
li a { color: red; }
If you wanted to be totally specific you could write
html body ul li a { color: red; }
There is no need to do this though because of the cascading nature of style sheets. If you didn't include the li tag though, you'd be styling every link on your page.
Link Styling Tips
Using horizontal or vertical list for navigation bars is a good way to produce navigation features. They provide an inherently solid layout and can be styled with different colours, borders and sizes.
With all this choice it can be easy to go overboard and produce garish, ugly navigation elements. Sticking to the colour palette you've already selected and going with your lighter shade for a hover colour is a good idea. Another effective design is to have the links hover with an underlining.
Neither option will win any innovative design awards but it is essential to remember that the most effective navigation schemes are the ones that are easy to see and that work. So long as people recognize your links for what they are the colour they hover is largely incidental. Having said that it is an excellent idea to give people some sort of visual clue that they have encountered a link.
Lists
List are an excellent way to organize data in a web page and they can be styled in exactly the same way as other elements. Few people, however, use them for organizing links.
Using an ordered list for this purpose is a simple, effective and appropriate use of the <ul> tag. In conjunction with adding some style the instructions this section looks at how to generate a navigation bar using lists.
-
Create a short 5 item unordered list with a hyperlink as the contents of each list item.
<p class="style1">This class will have these characteristics: margin: 20px; padding: 0; border: 1px</p>
<p class="style2">This class will have these characteristics: margin: 0; padding: 20px; border: 1px</p>
<ul>
<li><a href="http://www.cbc.ca">CBC</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
<li><a href="http://www.bbc.co.uk">BBC</a></li>
<li><a href="http://www.ask.com">Ask</a></li>
<li><a href="http://www.cnn.com">CNN</a></li>
</ul> -
Go to your browser and open or refresh your .html file. You should see a vertical list of 5 bullet pointed links 30px or so in from the left page edge.
-
Open your .css file and enter this ul styling:
p.style2 { margin: 0;
padding:20px;
border: 1px dashed; }
ul { margin: 0;
padding: 0;
list-style-type: none; }
li { display: inline;
margin: 0;}The first command moves the list to the side of the page and the second command makes the list run horizontally rather than vertically.
-
Go to your browser and open or refresh your .html file. Your list should should now be a horizontal, bullet free line of links at the left hand side of the page.
-
Now that your list has the correct orientation you can style the links. The following code is an example of how to create a box with a border around the link when you hover over it. Notice the css commands use nested elements.
ul { margin: 0;
padding: 0;
list-style-type: none; }
li { display: inline; }
li a { margin: 0;
padding: 4px;}
li a:hover { background-color: #999;
color: #fff;
border: 1px solid #000; } -
Go to your browser and open or refresh your .html file. Your links should now hover grey with a black box around them. This does not represent an attractive design choice, it is only intended as an example of what is possible. NOTE: what happens to the words to the right of a link when you mouse over it?
-
The reason for this movement is the that the link padding has been set at 4px but with a 1px border added to the hover styling the block goes from having a padding of 4px on the right to a padding of 4px + a border of 1px for 5px total. This explains the movement and is fixed by adding a padding command to the hover styling and making padding + border match the padding for the element; in this case 4px:
li a { margin: 0;
padding: 4px;}
li a:hover { background-color: #999;
color: #fff;
border: 1px solid #000; }
padding:3px }
That concludes the introduction to using css. In the program most aspects of css have been introduced but none have been fully explored due to the enormous breadth of styles available.
Experimenting with different attributes and classes give you a better understanding of the sort of things you'd like to be able to do and the chances are very good someone will have done it before. If a closer examination of the information at htmlHQ doesn't give you the instructions you're looking for please feel free to contact us, info@jazplanet.com and we'll help you out.
If email isn't fast enough for you there will be instructions hiding out somewhere on the internet that will tell you exactly what you want to know. Webdeveloper.com is an excellent place to start. Search their forums carefully though before you post a question.