Picking up from Friday with our CSS layout:

1- Let’s add a header section above our 3-columns

2- Ok, we’ve done our layout, what about adding some styling?

How could we incorporate this:

body
{
background-color:#d0e4fe;
background-image:url(dogs.gif);
background-repeat:repeat;
background-position:center;
}
h1
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:3em;
}
h2
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:2em;
}
p
{
font-family:Times New Roman;
font-size:1em;
}

3- Time for more practice with div tags and let’s also add a class.

Click here to download your practice file

Right click on the page, go to View Page Source

Copy and paste all of the code into Notepad++

Save it as csspractice3.html

Now open csspractice3.html in Firefox and close the original tab

Try creating your own class by renaming “funky”, changing the font, font-weight, font-size, and color, and applying it in the body.

Change the values of the positions of each div to see what happens (decrease or increase the numbers, change left to right, etc.)

Note if you put a negative value for a position, it is the opposite.  For example, left: -10px is the same as right: 10px

Finally, change the font and colors to make the boxes and the text less ugly!  For a refresher on fonts click here and for colors click here.

4.  Styling Links with CSS

The four links states are:

a:link – a normal, unvisited link

a:visited – a link the user has visited

a:hover – a link when the user mouses over it

a:active – a link the moment it is clicked

They MUST be in that order if you’re going to use all of those attributes.

Please copy and paste the following code in your internal stylesheet just before the </style> tag:

a:link
{
text-decoration:none;
color:purple;
}
a:visited
{
text-decoration:none;
color:blue;
}
a:hover
{
text-decoration:underline;
color:red;
}
a:active
{
text-decoration:underline;
color:green;
}

Now, please make a link to Google.com:

<a href=”http://www.google.com/”>This is a link to Google.com</a>

Notice how this link looks.  Before you click on the link it should be purple.  When you roll your mouse over it the link should be red and underlined.  The moment you click on it the link should flash green and it should be underlined.

You can experiment with using different colors.  Text-decoration can either be underline or none.  If you don’t use text-decoration at all the default is none.