HTML and CSS Reference
In-Depth Information
pseudo-class (hover) to have more control over the anchor (link) element. A
pseudo-class
is attached to a selector with a colon to specify a state or relation to the selector to give
the Web developer more control over that selector. The format to use with a pseudo-class
is entered in the form:
selector:pseudo-class {property: value;}
with a colon between the selector and the pseudo-class. There are four pseudo-classes that
can be used when applied to the anchor or link selector:
•
visited, for a link to a page that has already been visited
link, for an unvisited link
•
active, for a link when it gains focus (for example, when it is clicked)
•
hover, for a link when the cursor is held over it.
•
The hover statement tells the browser to display light blue (color #01d3ff ) link text on
a dark blue (#020390) background when the mouse hovers over the link as shown in
Figure 3-20. Adding a link-hover style significantly changes the look of the links and adds
a dimension of interactivity to the Web page.
hover pseudo-class with
#020390 background color
and #01d3ff text color
Figure 3-20 Completed home page with hover effect.
As mentioned earlier, the <!-- and --> code used in the embedded style sheet (just after the start style <style>
and just before the end style </style> tags) are comment lines. These comment lines tell the browser to ignore what-
ever is between the comment lines if the browser cannot interpret the code between.
Recall that embedded style sheets have the second-highest level of precedence of the three types of styles.
Although an inline style overrides the properties of an embedded style sheet, the embedded style sheet takes prece-
dence over an external style sheet.
To Add Embedded Style Sheet Statements
Table 3-8 on the next page shows the CSS code for an embedded style sheet to specify the font-family and
font-size for the body text on the underwatertours.html Web page.
