HTML and CSS Reference
In-Depth Information
In this case,
<cite>
tags that appear within
<p>
tags will be italicized. If a
<cite>
tag
appears inside a list item, the contents will be rendered in boldface. Let's add in one
more rule:
cite { color: green }
p cite { font-style: italic; font-weight: normal }
li cite { font-style: normal; font-weight: bold }
8
In this case, we have one rule that applies to all
<cite>
tags, and the two others that
you've already seen. In this case, the contents of all
<cite>
tags will be green, and the
appropriately nested
<cite>
tags will take on those styles, too. Here's one final example:
cite { color: green }
p cite { font-style: italic; font-weight: normal; color: red }
li cite { font-style: normal; font-weight: bold; color: blue }
In this case, the nested styles override the default style for the
<cite>
tag. The contents
of
<cite>
tags that don't meet the criteria of the nested rules will appear in green. The
nested rules will override the color specified in the less-specific rule, so for
<cite>
tags
that are inside
<p>
tags, the contents will be red. Inside list items, the contents will be
blue.
The ability to override property settings by using more specific selectors is what provides
the ability to set styles with the precision of the
style
attribute from a style sheet.
Classes and IDs
Sometimes selecting by tag (even using contextual selectors) isn't specific enough for
your needs, and you must create your own classifications for use with CSS. There are
two attributes supported by all HTML tags:
class
and
id
. The
class
attribute is used to
classify elements, and the
id
attribute is for assigning identifiers to specific elements.
To apply a selector to a class, use a leading
.
in the class name in your style sheet. So, if
you have a tag like this
<div class=“important”>
Some text.
</div>
then you write the rule like this
.important { color: red; font-weight: bold; }
Any element with the class
important
will appear in bold red text. If you want to give
this treatment to only important
<div>
s, you can include the element name along with
the class name in your rule.
div.important { color: red; font-weight: bold; }
p.important { color: blue; font-weight: bold; }
