HTML and CSS Reference
In-Depth Information
Test drive
Add a rule for the
<em>
element to your CSS with a
font-family
property value of
serif
, and reload
your “lounge.html” page:
As a general rule, it's not a good idea to change
fonts in the middle of a paragraph like this, so go
ahead and change your CSS back to the way it was
(without the em rule) when you're done testing.
Q:
How does the browser know which
rule to apply to <em> when I'm overriding
the inherited value?
A:
With CSS, the most specific rule
is always used. So, if you have a rule for
<body>, and a more specific rule for <em>
elements, it is going to use the more specific
rule. We'll talk more later about how you
know which rules are most specific.
Q:
How do I know which CSS
properties are inherited and which are
not?
A:
This is where a good reference really
comes in handy, like O'Reilly's
CSS Pocket
Reference
. In general, all of the styles that
affect the way your text looks, such as font
color (the color property), the font-family,
as you've just seen, and other font-related
properties such as font-size, font-weight (for
bold text), and font-style (for italics) are
Q:
This stuff gets complicated. Is there
any way I can add comments to remind
myself what the rules do?
A:
Yes. To write a comment in your
CSS, just enclose it between /* and */. For
inherited. Other properties, such as border,
are not inherited, which makes sense, right?
Just because you want a border on your
<body> element doesn't mean you want it
on
all
your elements. A lot of the time, you
can follow your common sense (or just try
it and see), and you'll get the hang of it as
you become more familiar with the various
properties and what they do.
Q:
Can I always override a property
that is being inherited when I don't want
it?
A:
Yes. You can always use a more
specific selector to override a property from
a parent.
instance:
/* this rule selects all
paragraphs and colors them
blue */
Notice that a comment can span multiple
lines. You can also put comments around
CSS and browsers will ignore it, like this:
/* this rule will have no
effect because it's in a
comment
p { color: blue; } */
Make sure you close your comments
correctly; otherwise, your CSS won't work!
