HTML and CSS Reference
In-Depth Information
Because you already added outline styles to the
a:focus
pseudo-class in Chapter 3, you don't need to add any
more. However, you can change those properties into one shorthand property:
1.
In styles.css, find the pseudo-class
a:focus
and remove the following declarations:
outline-color: black;
outline-style: dotted;
outline-width: 1px;
2.
Add the shorthand declaration:
outline: black dotted 1px;
3.
Save styles.css.
content
Initial value:
auto
| Inherited: No | Applies to:
:before
and
:after
only | CSS3
Browser support: IE 8+, Firefox 2+, Chrome 4+, Opera 9+, Safari 3.1+
In Chapter 3 you used the
content
property to give quotation marks to the customer testimonials.
content
can
be applied only to
:before
and
:after
pseudo-elements.
Now try another example:
1.
In styles.css, below the three
blockquote
related rule sets, add the following:
blockquote cite:before {
content: “- “;
}
2.
Save styles.css.
This adds a hyphen before the customer's name, showing that a testimonial belongs to her. This is just a visual style,
and in its absence, the content of the page isn't affected. These sorts of styles are the purpose of
content
, which I
hope answers the question raised in Chapter 3: What place does content have in CSS? CSS, after all, is supposed to
separate style from content and structure, so why would you want to include content in your CSS?
Characters such as quotation marks and hyphens are arguably presentational styles as opposed to content. You may
have a website containing 50 quotation marks, and one day decide you want to change the style of them. If those
quotation marks were included in the HTML page as physical characters, you would have to go into each page and
change them individually. If you generate those characters via the
content
property, changing their style is a
simple case of changing one property value.
Summary
In this chapter, you learned to use many of CSS's visual styles. With the inclusion of CSS Level 3's most recent and
exciting features, border and backgrounds alone are enough to give a page a unique look.
Properties such as
opacity
,
visibility
,
cursor
, and
outline
allow you to give a page certain styles when
interacted with, helping a user navigate through your web site.
