HTML and CSS Reference
In-Depth Information
<
meta http
-
equiv
=
”Content-Type”
content
=
”text/html; charset=UTF-8”
>
<
title
>
Halloween Highlight
</
title
>
</
head
>
<
body
>
<
h1
>
Halloween Party
!</
h1
>
<
div
>
You are invited to a Halloween Party on
<
span class
=
”highlight”
>
Saturday
,
October 29
</
span
>.
Costumes are
<
span class
=
”highlight”
><
i
>
de rigueur
</
i
></
span
>.</
div
>
</
body
>
</
html
>
When you test the program, you'll see that the two portions of the text within the
<span>
containers are af ected. Figure 3-13 shows how they're displayed in a Chrome browser on a
Mac (top) and an Opera Mini browser on an iPhone (bottom).
Mobile phone
61
Desktop computer
Figure 3-13: Class defi ned style in
<span>
container on desktop computer (top) and mobile device (bottom).
Both displays clearly show that the CSS3 class named
highlight
is working i ne. However,
the Opera Mini browser displays neither the dei ned fonts nor the italicized words. (h e Safari
browser does display the italicized words, but not the dei ned fonts.)