04.06.2013 Views

Head First HTML with CSS

Head First HTML with CSS

Head First HTML with CSS

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Step three: styling the s<br />

Before we move on, save the file and reload it in your browser. Like a , by default<br />

a has no effect on style, so you should see no changes.<br />

Now let’s add some style. Add these two rules to the bottom of your “lounge.css” file:<br />

.cd {<br />

}<br />

We’re going to add a rule for each of<br />

the new classes, cd and artist.<br />

font-style: italic;<br />

.artist {<br />

font-weight: bold;<br />

}<br />

Test driving the spans<br />

That’s it. Save and reload. Here’s what you’ll see:<br />

For CDs we’ll make<br />

the font style italic.<br />

And for artists we’ll<br />

set the font-weight<br />

to bold.<br />

Now the<br />

first music<br />

recommendation<br />

has the correct<br />

styling.<br />

divs and spans<br />

Nice job, guys. This<br />

next one’s for you.<br />

you are here 465

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!