13. Styling a list

Most web sites have a navigation menu and most of the time those menus are held within a list structure of some description. Because of this, being able to style a list is a pretty important CSS trick to learn. With style sheets alone, we’re going to transform our list as in the picture below:

Okay, so we’ll start by re-styling the “ul” tag, but we only want to restyle the one being used inside our “nav” tag. If we changed all “ul” tags then every time we tried to put a list in our page it would look like a menu? In order to create a menu list only we could have created a Class selector but I’m going to take this opportunity to show you a new type of selector.

Descendant Selectors
A “descendant selector” basically allows us to apply a rule to a tag only when it is inside another tag. This can be a pretty handy trick and perfect for our list inside this menu. So let’s restyle our “ul” tag with the following rule:

nav ul {
   padding          : 0px 0px 0px 0px;
   margin           : 0px 0px 0px 0px;
   list-style       : none;

This may look similar to when you set up a rule for multiple selectors but without the comma between “nav” and “ul” it is a very different selector. This selector says, apply this rule to any “ul” tag that is inside a “nav” tag.

You probably noticed my use of the “list-style” property. Well as you can imagine, not all lists look the same and sometimes you may not want them to have bullets at all. This property allows you to alter the style of your list. Rather than show you all 22 different types, just note the one I’ve used is “none” and if you want to see some others, check this out.

So now let’s alter the items within our list, you can see they have a border around them and are looking pretty groovy, here’s my new rule:

nav li {
   margin           : 0px 0px 5px 0px;
   padding          : 5px 5px 5px 5px;
   border-style     : solid solid solid solid;
   border-width     : 1px 1px 1px 1px;
   border-color     : #df3a01 #df3a01 #df3a01 #df3a01;
   text-align       : center;
   background-color : #faac58;

Note the use of “descendant selectors” again and we’ve also incorporated a few more properties.

border-style, border-width, border-color
Any object you put into your HTML page can have a border. What sort of border you ask? Just about anything! And with CSS3 you can add all sorts of effects to the border too. In this tutorial we’ll stick with basic styles but again, if you’re keen to see what you can do with this property, check this out.

Okay, so our menu is looking more menu-esque…but how do we get it to link to other pages…in fact, what about our other pages?!?

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>