- The Rules of Style
- Types of Selectors
- Styles in Context
- Styles for Special Cases
This chapter is from the book
This chapter is from the book
This chapter is from the book
Styles for Special Cases
Although primarily intended to add styles to particular elements created using HTML tags, there are several cases where we can use CSS to style content on the page that is not specifically set off by HTML tags or to create a dynamic style in reaction to something that your Web site visitor is doing on the screen. These are known as pseudo-elements and pseudo-classes:
-
Link pseudo-classes: Used to style hypertext links. Although primarily associated with color, you can actually use any CSS property to set off links and provide user feedback during interaction.
-
Dynamic pseudo-classes: Used to style any element on the screen depending on how the user is interacting with it.
-
Pseudo-elements: Used to style the first letter or first line in a block of text.
Link States
All hypertext links have four “states” that can be styled in reaction to a user action:
- a link state when there has been no action
- a hover state when the mouse cursor is over it
- an active state when the user clicks it
- a visited state when the user returns after having visited the linked-to page
)
Styles for Link Actions
Although the link tag can be styled just like any other HTML tag, it is a special case, because people visiting your site can interact with it. It’s a good practice to create different styles to react to what the visitor is doing. To that end, CSS includes four different pseudo-classes for each of the four interaction states: link, visited, hover, and active:
The default link text color is red.
a:link { color: red; }
If the link is in the browser history, its text color is dark red.
a:visited { color: darkred; }
When the visitor hovers over a link, its text color is hot pink.
a:hover { color: hotpink; }
When the visitor clicks a link, its text color is fuchsia.
a:active { color: fuchsia; }
Collectively, these are known as the link pseudo-classes. They need to be in the above order—link, visited, hover, active—to function properly, due to the cascade order, which we’ll learn more about in the next chapter. It’s also important to remember that, while links are typically associated with color, any style can be applied to a link.
)
Styles for Dynamic Actions
The hover and active states are not just for links. You can actually place your cursor over and click on any element on the screen and style elements for those actions. The third action state is when the user selects an element on the screen (usually a form field) and that element is in focus and it is ready for user input.
The default text color for the class formField in an input box is gray.
input.formField { color: gray; }
When the user hovers over an input field with the formField class, its text color is green.
input.formField:hover { color: green; }
When the user clicks an input field with the formField class, its text color is red.
input.formField:active { color: red; }
While the user is typing in an input field with the formField class, its text color is black.
input.formField:focus { color: black; }
Collectively these are called the dynamic pseudo-classes, which allow you to provide interactive feedback to the user. Dynamic pseudo-classes can be applied to any element on the screen but are chiefly used to add dynamic interaction to form fields and buttons, which we will look at in Chapter 10, “Navigation & UI”
One drawback: IE7 does not support active and focus, and IE6 supports none of these.
)
Styles for Parts of a Paragraph
To draw attention to an introduction or opening statement, one common practice is to make the first letter or first line of text in a paragraph stand out from the rest of the text on the page. A paragraph is a block of text, so it has a first letter and a first line of characters, but they do not have specific HTML tags around them. To style these you can use pseudo-elements for the first-letter and first line:
The first letter of each paragraph is red.
p:first-letter { color: red; }
The first line of each paragraph is blue
p:first-line { color: blue }
Keep in mind, though, that this applies the style indiscriminately to all paragraph tags on the page. If we want to style only the first letter or line of the first paragraph in our content, we would need to style it based on its context as the first child of a particular element (let’s ID it as content).
The first letter in a paragraph within any tag with the content ID has a color of red.
#content+p:first-letter { color: red; }
<div id=“content”><p>One thing was certain...</p></div>
The only drawback to this method is that it will not work in IE6, which does not recognize the child context.
)