Lesson 2: CSS Mouseover
CSS Structure
Open up the external style sheet you made in the previous lesson and type in this:
That bit of code is telling all links to display red text. The a is called a selector. Selectors determine which HTML tags will be manipulated by CSS commands. Any HTML tag can have a corresponding selector, the a selector redefines links.
The stuff in the curly brackets is a CSS command. CSS commands are called properties, every property is given a value, in the above example color is a property and red is its value. Notice there is a colon between the property and its value, and that there is a semi colon at the end of the value. That is how CSS code is structured.
Next add this in your external style sheet:
We've added another a selector but this time it has the word hover with a colon between, it represents a link with a mouse pointer over it. So this is what we have in the external style sheet so far:
a:hover {color:blue;}
Save the external style sheet and refresh your webpage. Well, does your webpage have red links? Do they turn blue when the mouse pointer is moved over them? They do? Congratulations, you've just made a mouseover! But we're not finished yet.
Add this new property to the hover selector:
a:hover {
color:blue;
text-decoration:none;
}
Selectors can have more than one property as long as they are between the curly brackets and each command ends with the semi colon, text-decoration:none; removes the underline from text.
Save your external style sheet and check out your webpage, when the mouse pointer is now moved over the link the link will turn blue and the underline will disappear! Is that cool or what?Put the text-decoration property in the a selector to remove the underline from all links, but in the hover selector change it's value to underline and the line will appear under the link when a mouse pointer is moved over it:
a {
color:red;
text-decoration:none;
}
a:hover {
color:blue;
text-decoration:underline;
}
Result:
Ooh, that is so cool! Different combinations of properties and values can make for some pretty eye catching mouseovers, it's just a matter getting to know the properties, their possible values, and what they can do.
Next you're going to learn how to specify which links on the webpage will be affected by CSS code. So let's check out Lesson 3: Classes
