Picking up where we left off on Wednesday:
A. 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.
B. Today we’re going to follow a tutorial using CSS3 to create an interesting photo gallery:
http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery
To begin:
1– Create a folder on your computer somewhere, either on the desktop or in My Documents. This is important- we want to have one place to keep all of these files together. Call this folder CSS3 photo gallery.
2– Please go to the following link and download each image (right click on each one and choose “save as.” It will automatically save as the right file name. This is what your finished product will look like- take a minute to check it out to see where this is all going!
http://line25.com/wp-content/uploads/2009/polaroid-gallery/demo/demo.html
Please save those images in the folder you just created. They should save as 1.jpg, 2.jpg, etc.
You also need to download and save the wood background- please click here to grab it.
3– Open up Notepad ++ and create a new page (File, New). Begin a new webpage by adding the following code (please add your name instead of My Name in the title):
<html>
<head>
<title>My Name’s Photo Gallery</title>
<style type=”text/css”>
</style>
</head>
<body>
</body>
</html>
This is our basic code that we are going to build on for this tutorial.
Save this as yourname_gallery.html
4– We are now going to follow this tutorial, copying and pasting code together to make this CSS3 photo gallery:
http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery