CSS

Today we’re going to create a top navigation menu and side menu in CSS. This is like any website menu that we would see on most websites.

Inline Menu

This is an example of a website menu:

We can see that the menu is entirely inline and is actually really just an unordered list. Consider the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#menu {
     background-color:#4c4c4c;
     height:30px;
     font-size:30px;
     font-weight:700;
     padding:5px 0px;
}

#menu ul {list-style:none;}

#menu li {
     display:inline;
     padding:0px 10px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="menu">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
     </ul>
</div>

The CSS is setting the styles for the navigation menu… We have our ID selector #menu that is creating a background of #4c4c4c (grey), a height of 30px, a font size of 30px, a font weight of 700 (in other words, bold), and a padding of 5px that applies to the top and bottom ONLY.

#menu ul is basically saying that all <ul> elements inside of the ID #menu will have a list-style of none.

#menu li is saying that all <li> elements within the ID #menu will be displayed as inline elements (no breaks before or after the element, refer to the Display Property for more information) and will apply a 10px padding to the left and right sides ONLY.

Vertical Menu

A vertical menu is a menu that is, well, vertical.

Side Menus are easier to make than inline menus. Consider the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

#side-nav {
     background-color:#4c4c4c;
     display:block;
     width:150px;
}

#side-nav ul {
     list-style-image:url("images/bullet.png");
     margin:10px;
}

#side-nav li {
     padding:5px 0px;
     border-bottom:1px solid #3b3b3b;
}

#side-nav.no-border {border:none;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="side-nav">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li class="no-border"><a href="url">Link</a></li>
     </ul>
</div>

So we have our ID selector side-nav that is creating the background color of #4c4c4c (grey), displaying the selector as a block element and a width of 150px. Note: since only the width is defined, we can have an unlimited height.

Next, we have our selector that is saying that all <ul> elements within the side-nav selector will have a list style image of “bullet.png” and will have a 10px margin around all sides.

Finally, we have our selector that is saying all <li> elements within the side-nav selector will have a top and bottom padding of 5px ONLY and a bottom border that is 1px wide, solid, and the color #3b3b3b. There is something interesting, however; there is an additional selector defined that states a border is none which we used on the last <li> element of our vertical menu. This will make the menu look better, or at least more symmetrical.

menu.zip
Size: 4.46 KB

Pseudo-classes are little snippets of code that will add additional effects to some selectors.

Pseudo-classes

The syntax for Pseudo-classes is very much like the syntax for css:

1
2
3
4
5
6
7
8
9

selector {property:value;} /*CSS Syntax*/
selector:pseudo-class { /*Pseudo-class Syntax*/
     property:value;
     property:value;
}

:link, :visited, :active, :hover

A very widely used example of Pseudo-classes is adding styles to links. Consider the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

a:link, a:visited {
     text-decoration:underline;
     color:#ff9300;
}

a:hover {
     text-decoration:none;
     color:#ff9300;
}

These are called “global link styles”, these are styles that will apply to any and all links on a page where this code is. We have our pseudo-classes a:link, a:visited, a:hover and each is doing something different.

1. a:link

a:link sets the styles for an unvisited link:

1
2
3
4
5
6
7

a:link {
     color:red;
     font-weight:bold;
}

2. a:visited

a:visited sets the styles for a visited link:

1
2
3
4
5
6
7

a:visited {
     color:blue;
     font-weight:bold;
}

3. a:hover

a:hover sets the styles for links that you mouse over:

1
2
3
4
5
6
7
8
9

a:hover {
     color:aqua;
     font-weight:bold;
     text-decoration:unerline;
}

4. a:active

This sets the styles for a link that is currently active:

1
2
3
4
5
6
7
8
9

a:active {
     color:coral;
     font-weight:bold;
     text-decoration:unerline;
}

Order

Order is key when using these particular pseudo-classes. When you write these styles you must follow the correct order to make it all work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

a:link { /*This must be first*/
     color:red;
     font-weight:bold;
}
a:visited {  /*This must be second*/
     color:coral;
     font-weight:bold;
}
a:hover {  /*This must be third*/
     text-decoration:unerline;
     color:blue;
     font-weight:bold;
}
a:active { /*This must be last*/
     color:green;
     font-weight:bold;
}

We can also group the pseudo-classes together like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

a:link, a:visited {
     text-decoraton:none;
     color:#ff9300;
}

a:hover, a:active {
     text-decoration:unerline;
     color:coral;
}

Like other CSS selectors, we can add a class selector to the Pseudo-classes, this would enable us to apply these styles any where on our web page if we desired it to be so.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

selector.class:pseudo-class {
     property:value;
     property:value;
}

a.fancy:link, a.fancy:visited {
     text-decoration:underline;
     color:#ff9300;
}

This class fancy will make a link and you visit that link that we create, it will be underlined and be that atomicpages orange color.

:first-child

The first-child pseudo-class is as it sounds. This will apply any styles that you define to the first-child element of a parent element. Consider the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:normal 11px Verdana, "Times New Roman", sans serif;
     color:#fff;
}

p:first-child {
     color:blue;
     text-decoration:underline;
     font-weight:700;
}

We can use the first-child pseudo-class in some very helpful ways too! If, for instance, you wanted to apply a style that would make the first paragraph unique, we could use the first-child pseudo-class to achieve this goal. Consider the following:

1
2
3
4
5
6
7

.fancy p:first-child {
     color:red;
     font-style:italic;
}

This would set the first paragraph of the class “fancy” to be red and italic and all subsequent paragraphs to be whatever we set the styles to.

If you want to see pseudo classes in action feel free to click on the green download button below to see these examples in action!

pseudo-classes.zip
Size: 1.88 KB