User:Bartlett/12
Hour 12. Styling Links[wax ka badal]
- What You'll Learn in This Hour
- What pseudo-selectors let you designate effects for active links, mouse hovers, and an element focus
- Which order pseudo-classes follow for link styling and inheritance
- How to create some of the most common link effects, including replacing the attributes on the <body> tag, removing underlines, and creating dynamic mouseovers
The capability to make hyperlinks is what enables the interconnectedness of the Web; HTML itself is named for the hypertext links. Cascading Style Sheets can be used to style these links beyond the default blue-underlined-text. You've already learned how to use :link and :visited pseudo-classes to create CSS rules for link presentation in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05.html#ch05 Hour 5], "Selectors," and this hour expands on that knowledge and gives you additional types of selectors and style rules to use with links. |}
./ ADD NAME=CH12LEV1SEC1.HTML
CSS for Link Styling[wax ka badal]
The style rules you write to affect hypertext links are much the same as other CSS rules: You identify the elements to be styled by using a selector, and you write property declarations describing how you want the elements to appear. So why spend a whole hour on links?
One reason is that rules for hypertext links require extensive use of pseudo-selectors, whereas most other rules don't. You can't just use the element name alone and get full functionality; you need to write your rules with a:link and a:visited selectors. In this hour, you'll learn about three more pseudo-classes, as well:active, :hover, and :focus.
Link styles are very dependent upon the state of the user interface; what the user is doing and has done is at least as important as the content. That's not the case with most styles. You don't have to worry about your paragraph text changing state after the styles have been applied to it. Links require dynamic reapplication of the cascade and inheritance rules as the page is used.
One more reason that links are set off with their own hour is that questions about them are among those most commonly asked by people learning CSS. Underlines, mouseovers, and special effects on links are some of the coolest simple style effects you can add to a site, along with colors and fonts. Links are active styles, and the pseudo-classes used with them can add unexpected pleasant touches to a page, if done properly.
The :link and :visited Pseudo-Classes
Although you learned about a:link and a:visited selectors in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch05.html#ch05 Hour 5], we revisit them briefly here. The :link state and the :visited state are mutually exclusive, which means that either one or the other applies, but not both. Neither inherits property values from the other; if you set a style property on a:link, the same property isn't set on a:visited. You'd need to write two rules (or one rule with a combined selector).
A rule based on the <a> tag is applied to <a> links, visited or unvisited. They also are used on anchors set with the <a name="anchor"> syntax. So if you want your links to all have a yellow background, you're better off with a rule based on a:link and a:visited instead of a by itself, or else your anchor points will be yellow, too.
Other styles set on the box holding the <a> tag are inherited normally if those properties usually inherit. So the font-family and font-size properties, for example, are inherited from whatever element contains the link tag.
One exception is the default styling on links. Unless explicitly set by a CSS rule to something else, your links will look like whatever the browser thinks they should look like. At least, that's true when it comes to two specific properties: color and text-decoration. The accepted practice is to make unvisited links blue, visited links purple, and both kinds of links underlined. Effectively, browsers have a built-in set of style rules that look like this (although user preferences can change the specifics):
a:link { color: blue; }
a:visited { color: purple; }
a:link, a:visited { font-decoration: underline; }
To change these default styles, you need to override these style rules explicitly with more specific ones of your own. Remember that the cascade counts pseudo-classes as classes, and it gives priority to author styles over browser default styles; that means that your a:link rule will win out.
The :active Pseudo-Class
An active link is a link that's in the process of being activated by the user in some way. How this activation occurs is dependent on the type of input and output media used. Usually this means that a mouse pointer has clicked on the link and the page is about to be replaced by a new one reached by following the link. This corresponds to the HTML attribute alink, which can be set on the <body> tag (although alink can change only the color, whereas a CSS rule can do far more). Browsers usually display this as if the following rule were in its default style sheet:
a:active { color: red; }
The :active state is not mutually exclusive with :link or :visited. In fact, any link that is :active is undoubtedly going to be one or the other: visited or unvisited. Property values set on the :link or :visited state are inherited by the :active element, as appropriate for each value. For example, if you've already declared that there should be no underlines in your a:link and a:visited rules, you don't need to worry about declaring text-decoration: none; in the a:active rule if you want active links to continue to be underlined.
Cascading is also a consideration. If there's a property value conflict between an a:link and a:active rule, which one wins according to the cascade order? Well, they have the same origin (your style sheet), the same number of id attributes (none, presumably), the same number of classes or pseudo-classes, and the same number of elements, which means it's a tie. Therefore, the winner is whichever one is declared last, according to the source code. In practice, this means that you should put your a:active rule after your a:link and a:visited links.
You can combine together two or more pseudo-class selectors by simply chaining them together without spaces, like this:
a:link { color: blue;
background-color: white; }
a:link:active { color: white;
background-color: blue; }
a:visited { color: purple;
background-color: white; }
a:visited:active { color: white;
background-color: purple; }
These rules display unvisited and visited links in blue or purple as usual, but when the link is clicked, the colors invert while the page is loading. Combined selectors let you make sure the colors are kept straight. If you didn't write a rule with two pseudo-classes, you'd have to choose either blue or purple as the color you'd use, like this:
a:active { color: white; background-color: purple; }
The :hover Pseudo-Class
Hovering means that the mouse pointer has been positioned over a particular element, but the user has not necessarily clicked a button to activate it. In HTML, this state triggers a mouseover event, which can invoke JavaScript functions set on the onMouseOver attribute; when the mouse is no longer hovering, that's an onMouseOut event.
The CSS approach is to add the state of :hover to any other states currently on the element (such as :link or :visited) and apply an appropriate style. You can change the color, of course, but you can also change the background properties, border, font-family, font-size, or anything else you like. Some of these changes may cause the dimensions of displayed boxes to change, which can be distracting because the page has to redraw itself and shift about as someone moves the mouse, so you probably should avoid major changes such as padding or display.
Here's an example of the :hover rule in action. I want to make my links change color and background-color when the user moves the mouse. This points out which link will be followed if the user clicksa typical mouseover function. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12ex01 Listing 12.1] has an embedded style sheet in the HTML for this example.
Listing 12.1. A Simple Question that Hovers Ominously
<!-- game-12.1.html --><br /><html><br /><head><br /><title>Want to play a game?</title><br /><style type="text/css"><br />body {<br />background-color: black;<br />color: lime;<br />font: xx-large Verdana, sans-serif; }<br />a:link, a:visited {<br />color: lime;<br />text-decoration: none; }<br />a:hover {<br />background-color: white;<br />color: black; }<br /></style><br /></head><br /><body><br /><h1>Want to play a game?</h1><br /><h1><br /><a href="yes.html">yes</a> /<br /><a href="no.html">no</a><br /></h1><br /></body><br /></html><br /> |
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12fig01 Figure 12.1] shows what this looks like in a browser; unlike most of the screenshots in this book, I've included the mouse pointer so you can see where it is. The no option is in black-on-white text when the mouse is over it, and when the mouse is elsewhere, it turns back to lime-on-black.
File:12fig01.jpg
The CSS specifications are very vague on which HTML tags must be able to take on the :hover state. Can you set a rule with a selector like H1:hover and then change the styling on the
tag whenever the mouse is moved over it? Good question. At the present time, you can't; only items that can be clicked can enter the :hover state in current browsers.
Did you Know?
If you want to add mouseover effects to other items, you can use the HTML event attributes and JavaScript. For example, the following bit of HTML code creates an tag that changes color when the mouse moves over it:
<h1 onmouseover="style.color = 'blue';"
onmouseout="style.color = 'red';"
style="color: red; background-color: white;"
>Superman</h1>
The :focus Pseudo-Class
If you can type something into an HTML element, that element is said to have the focus. Focus is an indication of something that's been selected but not necessarily activated. The focus is often indicated by a light dashed line or by a colored glow around part of the page.
Being able to identify the current focus is important for keyboard access to the Web. Web surfers who aren't able to use a mouse use the tab key to move from link to link or to <form> field tags, such as <input> and <textarea>. The HTML tabindex attribute can affect the order of tabbing.
When an element receives the focus, it enters the :focus state and applicable styles are applied. In the example from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12ex01 Listing 12.1], the background and foreground colors don't change if someone tabs through the links; they change only if the mouse is used. Because you want to serve all your web usersnot just those with mice!you need to add the following rules to the style sheet:
a:focus {
background-color: white;
color: black; }
Did you Know?
Not all browsers support the :focus pseudo-class. You can use the same JavaScript techniques as already described for :hover, but you should use the onFocus attribute when the element comes into focus and the onBlur attribute when it loses focus.
It's possible for an element to be in a state of :active, :hover, and :focus all at the same time; none of them are mutually exclusive. An <a> link is either :link or :visited as well. You should put your :active, :hover, and :focus rules after the :link and :visited rules because of the order of the cascade and inheritance.
./ ADD NAME=CH12LEV1SEC2.HTML
tag that changes color when the mouse moves over it:
<h1 onmouseover="style.color = 'blue';"
onmouseout="style.color = 'red';"
style="color: red; background-color: white;"
>Superman</h1>
<h1 onmouseover="style.color = 'blue';" onmouseout="style.color = 'red';" style="color: red; background-color: white;" >Superman</h1>
a:focus {
background-color: white;
color: black; }
Common Link-Styling Techniques
The rest of this hour, I'll show you how to do some of the most common tasks related to styling links. Think of this section as a small cookbook with some key recipes. Armed with these and with your growing knowledge of CSS, you can improvise on your own sites, creating your own style sheet culinary masterpieces.
Replacing HTML <body> Attributes
The <body> tag in HTML lets you set a number of attributes that affect the appearance of the entire page. Now you can replace those with CSS rules and go further than the capabilities of HTML because you can fine-tune parts of the page separately by using selectors and by having better control over backgrounds and link styles.
Here's a typical <body> tag:
<body background="mybg.jpg" bgcolor="#FFFFCC" text="#000066" link="red" vlink="#999999" alink="#FFCC99">
As you can see, this uses presentational HTML attributesthe background, bgcolor, text, link, vlink, and alink attributesto control the colors and background image on the page. This works in current browsers, but from a CSS point of view, it's a poor idea because the presentation is mixed in with the markup, and that always makes things harder, not easier. For example, if you want to change the appearance of the entire site at once, you need to go into every single HTML file and edit the attributes, but if you are using a linked style sheet, it's just a minor tweak to a single style sheet file.
So, how do you write the <body> tag with Cascading Style Sheets rules? Something like this would work:
body { background: #FFFFCC url("mybg.jpg");
color: #000066; }
a:link { color: red; }
a:visited { color: #999999; }
a:active { color: #FFCC99; }
Removing Underlines
This seems to be one of the first questions web developers want to know: How do I turn off the underlines? If you've been reading this book straight through from beginning to end, you learned about the text-decoration property in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10], "Text Colors and Effects." However, in case you jumped directly to this chapter, we'll review and summarize here.
You remove underlines by using the text-decoration property with a value of none. Here's an example:
.navbar a:link,
.navbar a:visited
{ text-decoration: none; }
Removing underlines from links can be relatively easy. The bigger question is how will you replace them? The reason that links were underlined in the first place was to make them stand out so the web user doesn't have to randomly guess what can be clicked and what can't. Here are some ideas, which can be used separately or in combination:
- Use very bright colors, set with the color property, to make links that much more visible. Links should stand out from the rest of the page and should be easily seen.
- Put borders around the links by using the border property so that the links are in boxes. Boxes can draw attention, as color does.
- Employ the font-weight property to make your links stand out better. Bold links likewise catch the eye; I have used font-weight: bold for unvisited links and font-weight: normal for visited links when designing styles for certain sites.
- Make all links italic (or oblique) by using font-style, or put them in small caps with text-transform. Be careful about readability, though; excessive use of this technique can make your navigation hard to use.
- Add a background color to your links with the background-color property. This can often give an effect similar to a highlighter pen; make sure your background stands out against both the visited and unvisited link colors.
- Utilize class or id selectors to give different styles to different kinds of links; for example, style offsite links differently from local links. Likewise, use different styles for inline links in the body of your text and for navigation links located in a sidebar.
Mouseover Effects
A mouseover effect can be as simple as swapping the colors, as you've seen earlier in this hour, or as subtle as adding the underline back on a mouseover, as follows:
a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
You can also head for the other extreme and get pretty complex. Here's an example of making buttons with CSS and making those buttons change when the mouse rolls over them, all without using JavaScript. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12ex02 Listing 12.2] is the HTML file to be styled, and [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12ex03 Listing 12.3] is the style sheet. In this example, I'm using tables for layout, but in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch20.html#ch20 Hour 20], "Page Layout in CSS," you'll learn how to lay out a page with pure CSS.
Listing 12.2. An HTML Page with a Navigation Bar
<!-- buttons-12.2.html --><br /><html><br /><head><br /><title>About the Local Writers Group</title><br /><link type="text/css" rel="stylesheet"<br />href="buttons-12.3.css"><br /></head><br /><body><br /><table width="100%" border="0"><br /><tr><td valign="top" align="center" width="150"><br /><div class="navbar"><br /><a href="/">Home</a><br /><a href="about.html">About Us</a><br /><a href="writers.html">Writers</a><br /><a href="links.html">Links</a><br /><a href="map.html">Map</a><br /><a href="calendar.html">Calendar</a><br /><a href="contact.html">Contact</a><br /></div><br /></td><td valign="top"><br /><h1>About Us</h1><br /><p>The Local Writers Group is an informal group of<br />writers who meet <a href="calendar.html">every other<br />Wednesday evening</a> from 7:30 to 9:00, at the<br />bookstore near the mall.</p><br /><p>If you'd like to attend, just stop by for the next<br />meeting, or <a href="contact.html">drop a note via<br />email</a> to one of our members.</p><br /></td></tr></table><br /></body><br /></html><br /> |
Listing 12.3. Style Sheet with Mouseover Effects
/* buttons-12.3.css */<br />body { font-family: Verdana, sans-serif;<br />color: black; background-color: white; }<br />h1 { color: navy; }<br />/* link colors */<br />.nav a:link { color: yellow; }<br />.nav a:visited { color: lime; }<br />/* link buttons */<br />.nav a:link, .nav a:visited<br />{ font: bold 12pt Verdana, sans-serif;<br />padding: 0.5em; margin: 0.5em;<br />display: block; text-decoration: none;<br />background: url("button.gif") transparent 50% 50% no-repeat; }<br />/* change the button on hover and focus */<br />.nav a:hover, .nav a:focus<br />{ background-image: url("button_yellow.gif");<br />color: black; }<br />.nav a:visited:hover, .nav a:visited:focus<br />{ background-image: url("button_green.gif");<br />color: black; }<br /> |
The three button images used are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12fig02 Figure 12.2], and the final effect can be seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12fig03 Figure 12.3]. When the mouse is moved over the navigation bar, the glow graphic is used. You'll notice that I used an a:hover:visited rule, as well, so that visited links glow lime green instead of yellow.
File:12fig02.jpg
| Try it Yourself: Link Buttons in CSS
The technique shown here can be used to make buttons quickly and easily, without having to create each one in a graphics program. Try this:
|
./ ADD NAME=CH12LEV1SEC3.HTML
Summary[wax ka badal]
CSS rules for styling hypertext links use the same properties as other style rules but extensively utilize pseudo-class selectors. These pseudo-class selectors track the state of various qualities:link and :visited depend on web browsing history; :active, :hover, and :focus depend on the user's interaction with the page.
Link styles can be used to replace the <body> attributes in HTML, remove links, and even create complex mouseover effects without requiring JavaScript. Armed with your growing knowledge of CSS, you can now confidently apply styles to your hypertext links.
./ ADD NAME=CH12LEV1SEC4.HTML
Workshop[wax ka badal]
The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12qa1q1a1 Q.] | Now that I know CSS, I can throw away all those <body> attributes, such as vlink and bgcolor, right? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12qa1q1 A.] | Well, probably. If you are using the Strict versions of HTML or XHTML, you have to remove them for your markup to be valid anyway. On the other hand, there are a few old browsers still out there that understand only the <body> attributes, and it probably can't hurt to include presentation markup. |
| > | > |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12qa1q2a2 Q.] | What about those annoying blue borders around image links? How do I get rid of those? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12qa1q2 A.] | How about this?
a:link img, a:visited img { border: 0px; }<br /> |
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12qa2q1a1 1.] | Which of these rules makes the text bold when the user tabs to a link with the keyboard?
#
a:visited { font-weight: 700; }
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12qa2q2a2 2.] | How would you rewrite this <body> tag as CSS rules?
<body text="white" background="stars.gif"<br />bgcolor="black" link="#00FFFF"<br />vlink="#FF00FF" alink="#FFFF00"><br /> |
Answers
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12qa2q1 1.] | d. The a:focus selector activates whenever a link has the keyboard focus. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch12qa2q2 2.] | Here's one way to rewrite the <body> attributes in CSS:
body { color: white;<br />background: url("stars.gif") black; }<br />a:link { color: #00FFFF; }<br />a:visited { color: #FF00FF; }<br />a:active { color: #FFFF00; }<br /> |
Exercises
What makes for good link styles and for bad? Experimenting is the best way to figure out what works for the needs of each website. Here are some ideas you can try:
- Eliminate underlines from your inline links, but replace them with another style that makes them stand out. Which works best, in your opinionbackground colors, font weight, italics, or something else?
- Build a navigation menu that uses backgrounds, borders, and fonts instead of images. Is it easier to maintain CSS-styled text links than graphical navigation bars?
./ ADD NAME=CH13.HTML
Hour 13. Lists