Head First HTML with CSS

there are no
Dumb Questions
Q: Should I always use shorthand?
A: Not necessarily. Some people find the long form more
readable. Shorthands do have the advantage of reducing the size
of your CSS files, and certainly they are more quickly entered
because they require less typing. However, when there is a
problem, they are a little more difficult to “debug” if you have
incorrect values or the wrong order. So, you should use whichever
form is more comfortable because they are both perfectly valid.
Q: Shorthands are more complex because I have to
remember the ordering and what is and isn’t optional. How do
I memorize it all?
A: Well, you’ll be surprised how quickly it becomes second
nature, but those of us in the “biz” have a little secret we like to call
Exercise
divs and spans
It’s time to put all your new knowledge to work. You’ll notice that at the bottom of the lounge, there’s a small
section with copyright information that acts as a footer for the page. Add a to make this into its own
logical section. After you’ve done that style it with these properties:
font-size: 50%;
text-align: center;
line-height: normal;
margin-top: 30px;
And let’s add some top margin to give the
footer a little breathing room.
Let’s make the text really small.
You know, FINE PRINT.
And let’s center the text.
Make it Stick
We’re also setting the line-height to be
“normal”, which is a keyword you haven’t seen
yet. “Normal” allows the browser to pick an
appropriate size for the line-height, which is
typically based on the font.
To remember the
ordering of the padding
and margin shorthand
values, think of a
clock labelled with top,
right, bottom, and left.
Then, always go in a
clockwise direction: top
to right to bottom to left.
margin: 0px 20px 30px 10px;
And while you’re at it, have a look over the entire “lounge.css” file. Is there anywhere you might want to
simplify things with shorthands? If so, go ahead and make those changes.
top
right
left
bottom
a “reference manual.” Just pick one up, and should you need
to quickly look up property names or the syntax of a property,
just grab your handy reference manual and look it up. We’re
particularly fond of the CSS Pocket Reference by Eric Meyer.
It’s tiny and makes a great reference.
you are here 461