If you are familiar with HTML, you know that you can control the color of the text and hyperlinks on a webpage. But with Cascading Style Sheets you can do much more. Certain tags such as the hyperlink anchor <a> tag have what is called pseudo-classes associated with the different states of the tag. For example, the hyperlink tag has four states; link, visited, hover and active. When a link is not being used (not selected), that is the link pseudo-class or state. The visited state is after the link has been used. The hover state is when the mouse passes over the link and the active state is when you click on the link. The magic of CSS is that each state of the link is controlled independently via pseudo-classes. So you can set different properties for each state. You can use any property associated with the hyperlink anchor <a> tag in CSS. In the example below, we will set the link state to red, the visited state to purple (#400040), the hover and the active states to red, underlined and italic. <style type="text/css"> <!-- a:link { color: red; text-decoration: none; } a:visited { color: #400040; text-decoration: none; } a:hover { color: red; font-style: italic; text-decoration: underline; } a:active { color: red; font-style: italic; text-decoration: underline; } --> </style> Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line. As you can see, we have set the color property to red for all the states except for the visited state, which we set to purple. Because we only want the hyperlink to be underlined for the hover and active states, we have set the text-decoration property to none for the other two states. Finally, we have set the font-style to italic for the hover and active states, which will cause the text to become italic when you pass over or click the link, and we have set the text-decoration back to underline. This is only a simple example. You can make your styles as simple or as fancy as you wish. However, there are a few things to remember. Web browsers differ in how they handle this. Usually, if you set a property to a certain value, it will be inherited by (passed on to) any states listed after it. In our example above, the first state listed in our code was the link state and we set the color property to red. Most of the time, this would be passed down to the other three states unless we change it with code, as we did for the visited state. Also, if we hadn't set the text-decoration back to underline, the text for the hover and active states would not have been underlined because we turned it off in the first state. But you can't count on all browsers to do this. Therefore, it is best to set all the properties for each state individually. When you are designing fancy links, don't make big changes between states such as making the text size increase dramatically. This will cause the web browser to reload the page and your visitors will get very upset with you. The order in which you list the code for these pseudo-classes is influenced by the cascade order. We will discuss the cascade order in a later tutorial. For now just remember that in order to prevent conflicts, code the states in the order we used above; link, visited, hover and active.

Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.