HTML and CSS Reference
In-Depth Information
Class name
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.
< 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 >
Search WWH ::

Custom Search