HTML and CSS Reference
In-Depth Information
<
title
>
Inline CSS3
</
title
>
</
head
>
<
body
>
<
div style
=
”font-family:Verdana, Geneva, sans-serif;font-size:24px;background-
color:yellow;color:navy;”
>
This is important
!</
div
>
<
p
>
But this
...
not so much
</
p
>
<
p style
=
”font-size:10px;font-family:sans-serif;”
>
And this you can ignore
altogether
....
</
body
>
</
html
>
Figure 3-11 shows what you see when you test the Web page in a browser. Keep in mind that
the second line has no styling at all added.
59
Figure 3-11: Inline CSS3.
h e use of inline CSS3 can be invaluable when some feature of your CSS3 external i le doesn't
have a style for something on your Web page that needs to be there. Generally, inline is one of
those tools you want to use both sparingly and judiciously. h is is especially true when
dealing with other developers and designers who are working from a common style sheet.
CREATING CSS3 CLASSES AND IDS
CSS3 classes and IDs are ways to extend a style to any element. For example, suppose you
have a feature that you want to add to just some items such as a yellow highlight. If you dei ne
a
div
or a
p
element's background color as yellow, all the text in either of those containers
will be bright yellow — not what you want. On the other hand, if you have a class that dei nes
a yellow background, all you have to do is to assign that class to an element to lighten it up.
CSS3 classes
You create style classes in an almost identical way as you do element styles. h e “dot” (
.
)
dei nitions used to create a class in CSS3 are labels you make up instead of using element
names. Figure 3-12 shows how to create a CSS3 class dei nition.
