TEXT TAGS AND A LITTLE CSS3 - HTML5 - page 56

Class name

dot

Figure 3-12: Creating class defi nition.

As you can see, the dot dei nition goes where the element name goes. h e rest is identical to
CSS3 dei nitions for elements. However, implementing a class style is a bit dif erent because it
can be used in almost any element tag.

In order to see how we might want to use a bit of highlighted text, a very handy inline element
is span . h e <span> tag can be added in the middle of a block element and only change that
part of the content in the span container without changing the rest of the block. To add a
class to an element, you use the following format:

< element class = ”myClass” >

Notice that the name of the class does not include the “dot” from the dot dei nition. h e dot is
used only in the style dei nition to let the parser know that the word is a class and not an
element. h e following program ( SpanClass.html in this chapter's folder at www.wiley.
com/go/smashinghtml5 ) gives you an example of how you might use the class with the
<span> tag.

60

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
body {
background - color : #F93;
}
. highlight {
background - color : yellow ;
}
div {
font - family : ”Comic Sans MS” , cursive ;
font - size : 18px ;
}
h1 {
font - family : ”Arial Black” , Gadget , sans - serif ;
color : #930;
text - align : center ;
font - size : 20px ;
}
</ style >