Head First HTML with CSS

how to use spans
Adding s in three easy steps
elements give you a way to logically separate inline content in the same
way that 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
elements around the CDs and artists, and then we’ll write two CSS rules
to style the s. Here’s exactly what you’re going to do:
1
2
You’re going to nest the CDs and artists in separate elements.
You’re going to add one to the “cd” class and the
other to the “artist” class.
3 You’re going to create a rule to style the “cd” class with italic, and
464 Chapter 11
the “artist” class with bold.
Steps one and two: adding the 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:
Each list item consists of a CD title, a
comma, and then the music artist.
Buddha Bar, Claude Challe
When It Falls, Zero 7
Earth 7, L.T.J. Bukem
Le Roi Est Mort, Vive Le Roi!, Enigma
Music for Airports, Brian Eno
Let’s try adding s to the first CD and artist:
Just add a opening tag along with
the class attribute and a value of “cd”.
Next, add a closing tag
after the CD title.
Do the same for the artist. Nest it
in a element, only this time
put the in the “artist” class.
Buddha Bar, Claude Challe
When It Falls, Zero 7
Earth 7, L.T.J. Bukem
Le Roi Est Mort, Vive Le Roi!, Enigma
Music for Airports, Brian Eno