HTML and CSS Reference
In-Depth Information
supporting browsers recognize
overflow-wrap
, you should use
word-wrap
, which both modern browsers and
Internet Explorer versions 6, 7, and 8 support.
The initial value of
normal
means lines of text may break only between words. Usually, this is fine, but if a word is
longer than the element it is contained within, it will overflow rather than break, as shown in Figure 11-9. Where this
effect is undesirable, you can use the value
break-word
to force a word to break and wrap onto a new line instead,
also shown in Figure 11.9.
Figure 11-9
The difference between word-wrap: normal; and word-wrap: break-word.
Code Challenge: Change the Style of Various Text Elements
In styles.css, do the following:
1.
Add a new rule set for
a.button:link
below the
.button
rule set with the declarations
text-
transform: uppercase; text-decoration: none;
.
2.
Add the declarations
text-transform: uppercase; text-decoration: none;
to the
#header nav ul li a
rule set.
Project files update (ch11-02): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
Styling Lists
A list, such as the unordered list of benefits under “Why Choose Cool Shoes & Socks?”, is made up of text as well
as a marker such as a bullet point. Using CSS, you can change the type of marker used and change its position.
list-style-type
Initial value:
disc
| Inherited: Yes | Applies to: Elements with
display: list-item
| CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
