TEXT TAGS AND A LITTLE CSS3 - HTML5 - page 50

font - family : ”Arial Black” , Gadget , sans - serif ;
text - align : center ;
}
h2 {
background - color : #424242;
color : #d3ceaa;
font - family : ”Trebuchet MS” , Arial , Helvetica , sans - serif ;
margin - left : 5px ;
}
</ style >
< title > CSS3 - Embedded Stylesheet </ title >
</ head >
< body >
< h1 > This Is the Big Head </ h1 >
< h2 >& nbsp ; Here Is the Second Head </ h2 >
The body text is styled for a bit of a eft margin and picks up the color of the body
along with its font . Notice that the background of the heads extends all the way
across the page . Also notice that a space (& nbsp ;) gives the h2 text a ittle
indent so that it stays “within” the background. That's not a problem with the h1
head because it's centered.
</ body >
</ html >
Figure 3-8 shows how the styled page looks.
54
Figure 3-8: Text styled with CSS3.
You should be aware that when you use style sheets, you have to pay attention to the little
details — like adding both curly braces, separating the property from the values by colons,
and ending each property value with a semicolon. If your CSS3 style sheet doesn't work as you
think it should, check those little gotchas!
When using background colors, the background ot en extends across the entire page. Certain
inline elements such as <span> can be used to contain the background to the af ected text.
With background colors in headers that are let - or right-justii ed, you'll want to add a space
( &nbsp; ) so that it doesn't bleed into the background color of the page.