HTML and CSS Reference
Adding the basic styles to the elixirs
We've got the width out of the way. What's left to do?
First, we're going to change the width of the elixirs <div> to
make it narrower.
We' re do ing th is ste p next .
Next, we'll knock out some of the styles you're already familiar
with, like padding, text alignment, and the background image.
Then all we've got left are the text line heights and the heading
colors. You're going to see that you need to upgrade your CSS
selector skills just a bit to get those changed.
Now we're going to concentrate on some of the basic styles, like the
padding, the text alignment, and also getting that background image
of the cocktail glasses in the elixirs <div> . You're already familiar
with how most of this works, so let's take a quick look at the CSS:
The defaul t pad ding o n a <d iv> is 0 pix els, so
we're going to ad d som e pad ding t o prov ide a bit
of s pace f or the cont ent. N otice that we're not
addi ng any padd ing at the t op bec ause t here' s
alrea dy ple nty o f room ther e, tha nks to the
defa ult m argin o n the <h2> head ing (lo ok bac k at
the last t est dr ive an d you' ll see there' s plent y of
room abov e the <h2> ). But we do need it on the
righ t, bot tom, a nd lef t.
We' re ad ding s ome margi n on t he le ft to inde nt
the elixi rs fro m th e rest of the p age a bit.
Thi s is g oing t o com e in handy late r…
Use text-align on block elements to
align the text they contain. Here,
we're going to center-align the text.
And finally w e're specifying an image to use in the background , in this
case the coc ktail image. We're settin g the background-repeat property
to repeat-x , which will tile the imag e only in the horizontal direction.