CSS MADE EASY Web Design for Beginners

low cost web hosting

Lesson 2
CSS Mouseover

CSS Structure
Open up the external style sheet you made in the previous lesson and type in this:

a {color:red;}

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 consist of a property and the property's value, 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:

a:hover {color:blue;}

We've added another a selector but this time it has the word hover with a colon between, it specifies what type of link is to be affected by the property, hover means it's a link with a mouse pointer over it. So this is what we have in the external style sheet so far:

a {color:red;} 
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 command 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 not only will the link turn blue but the underline will disappear too! 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:

move mouse pointer over link

As you can see, different combinations of properties and values can make for some pretty cool 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. Lesson3: Classes

personalized gifts

© 2016 HTML Made Easy | Privacy Statement

weebly analytics