HTML and CSS Reference
In-Depth Information
you change the style of the line to either
solid
,
double
,
dotted
,
dashed
, or
wavy
. However, only Mozilla
Firefox version 6 and onward support these properties by adding the
-moz
prefix to each property. Until these prop-
erties get better support in browsers, you can only safely use
text-decoration
, which decorates text with a sol-
id line the same color as the text.
The offer text that you made italic, shows that the price of the products is now marked down by a percentage, but
there are two percentage values. To strike out one of those values, do the following:
1.
In styles.css, below the
p + .offer
rule set, add a new rule set:
.strike {
text-decoration: line-through;
}
2.
Save styles.css.
The 15% is wrapped with span tags with a class of
strike
. As shown in Figure 11-5, the 15% discount now has a
line through it so the user can see the discount has been increased to 25%. Maybe this company should have been
called
Cheap Shoes & Socks
!
Figure 11-5
The 15% discount with a line through it.
If you would like an element to have multiple text decorations, you can specify multiple values, each separated by a
space, such as
text-decoration: line-through underline overline;
.
text-transform
Initial value:
none
| Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1+
Sometimes you might want to change text case. Rather than go in to the HTML and make those changes, you can tell
the browser to automatically change that case for you, using the
text-transform
property.
text-transform
takes the following values:
•
none
—Do not transform the text.
•
uppercase
—Change all the text to uppercase (capital letters).
•
lowercase
—Change all the text to lowercase.
•
capitalize
—Change the first letter of each word to uppercase.
Because the discount in the body text of the Cool Shoes & Socks page may persuade a user to make a purchase, you
can make that text stand out a little more by making it uppercase:
1.
In styles.css, add the following declaration to the
p + .offer
rule set:
text-transform: uppercase;