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.
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.
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.
Search WWH ::

Custom Search