DES 3006 - Web Design II
Week Four | Part One: Styling for Navigation
Pseudo-Classes
Up to this point, we have worked on applying changes to selectors by means of an embedded style sheet. Selectors such as h1, h3, p, used in combination with Class and ID selectors, are the bread and butter of your Web page design.
There is one series of selectors that we need now examine that will put full creative control into your hands. These selectors are called pseudo-classes.
Pseudo-classes aren't like other selectors. They are selectors that are allowed to have a dynamic state which is activated by user intervention. In plain terms, a pseudo-class makes text or an image act like a hyperlink.
You know this code:
<a href="http://www.google.com" title="Google.com">Visit Google.com.</a>
On your Web page, your reader sees: Visit Google.com.
Because of Web convention, any reader who sees that text will know if he or she mouses over the text and clicks on it, the page they were reading will be replaced by the Google.com home page. Hypertext linking is what the Web is all about.
Styling Hyperlinks
The default color scheme for hyperlinks is determined by browser preferences --- Level One, if you like, of the cascade in css.
Most people (and many Web designers) aren't aware they can change this. So everyone sees a hyperlink in blue text with an underline. If they visit a link, the text turns purple. Boring, but easily understood.
Designers often want to change the appearance of hyperlink text for any number of aesthetic reasons.
It is quite common, for example, for a Web page to have two or three navigational areas --- e.g. a menu across the top of the page, one along the left side, and hyperlinks in-line with the copy.
Each area should, from the standpoint of Web usability, look like the other links in the same area but different from the hyperlinks in the other areas.
If all the hyperlinks look all the same in all places, how will you create focus and color balance in your designs? The answer is by styling hyperlinks using CSS.