Adding a Little Style - Head First HTML and CSS - page 259

Using CSS with HTML

We're sure CSS has a bright future in the home design category, but let's
get back to HTML. HTML doesn't have rooms, but it does have elements,
and those elements are going to be the locations that we're styling. Want to
paint the walls of your <p> elements red? No problem; only paragraphs
don't have walls, so you're going to have to settle for the paragraph's
background-color property instead. Here's how you do that:

The f irst t hing y ou do is sele ct th e

elemen t you want to st yle, in this c ase

the < p> ele ment. Notic e in C SS, yo u

don't put < > aro und t he nam e.

p {
background-color: red;
}

At t he end, put
a se micolon.

Ther e's a colon in bet ween
the property and its value.

We ca ll the w hole
thing a RUL E.

You could also write the rule like this:

p { background-color: red; }

Here, all we've done is remove the linebreaks. As with HTML, you can format
your CSS pretty much as you like. For longer rules, you'll usually want to add
some linebreaks and indenting to make the CSS more readable (for you).

Wanna add more style?

You can add as many properties and values as you like in each CSS rule. Say you
wanted to put a border around your paragraphs, too. Here's how you do that:

All you have to do is add
another proper ty and value.

p {
background-color: red;
border: 1px solid gray;
}

…th at is 1 pixe l thi ck, so lid, a nd g ray.