HTML and CSS Reference
In-Depth Information
Adding span s in three easy steps
<span>
elements give you a way to logically separate inline content in the same
way that
<div>
s allow you to create logical separation for block-level content. To
see how this works, we're going to style the music recommendations by first adding
<span>
elements around the CDs and artists, and then we'll write two CSS rules to
style the
<span>
s. Here's exactly what you're going to do:
1
You're going to nest the CDs and artists in separate
<span>
elements.
2
You're going to add one
<span>
to the “cd” class and the other to
the “artist” class.
You're going to create a rule to style the “cd” class with italic, and
the “artist” class with bold.
3
Steps one and two: Adding the span s
Open your “lounge.html” file and locate the “Who's playing at the Lounge”
heading. Just below that, you'll see the unordered list of recommendations.
Here's what it looks like:
E
ach list it
em consi
sts of a
CD title
, a
co
mma, and
then th
e music a
rtist.
<ul>
<li>
Buddha Bar, Claude Challe
</li>
<li>
When It Falls, Zero 7
</li>
<li>
Earth 7, L.T.J. Bukem
</li>
<li>
Le Roi Est Mort, Vive Le Roi!, Enigma
</li>
<li>
Music for Airports, Brian Eno
</li>
</ul>
Let's try adding
<span>
s to the first CD and artist:
Just
add a <sp
an> open
ing tag a
long with
the c
lass attr
ibute and
a value
of “cd”.
<ul>
<li><span class="cd">
Buddha Bar
</span>
,
<span class="artist">
Claude Challe
</span></li>
<li>
When It Falls, Zero 7
</li>
<li>
Earth 7, L.T.J. Bukem
</li>
<li>
Le Roi Est Mort, Vive Le Roi!, Enigma
</li>
<li>
Music for Airports, Brian Eno
</li>
</ul>
