HTML and CSS Reference
In-Depth Information
As you can see, the capability to link to external style sheets provides you with a power-
ful means for managing the look and feel of your site. After you've set up a sitewide
style sheet that defines the styles for your pages, changing things such as the headline
font and background color for your pages all at once is trivial. Before CSS, making these
kinds of changes required a lot of manual labor or a facility with tools that had search
and replace functionality for multiple files. Now it requires quick edits to a single-linked
style sheet.
You've already seen one type of selector for CSS: element names. Any tag can serve as a
CSS selector, and the rules associated with that selector will be applied to all instances of
that tag on the page. You can add a rule to the <b> tag that sets the font weight to normal
if you choose to do so, or italicize every paragraph on your page by applying a style to
the <p> tag. Applying styles to the <body> tag using the body selector enables you to
apply pagewide settings. However, you can apply styles on a more granular basis in a
number of ways and to apply them across multiple types of elements using a single
First, there's a way to apply styles to more than one selector at the same time. Suppose,
for instance that you want all unordered lists, ordered lists, and paragraphs on a page
displayed using blue text. Instead of writing individual rules for each of these elements,
you can write a single rule that applies to all of them. Here's the syntax:
p, ol, ul { color: blue }
A comma-separated list indicates that the style rule should apply to all the tags listed.
The preceding rule is just an easier way to write the following:
p { color: blue }
ol { color: blue }
ul { color: blue }
Contextual Selectors
Contextual selectors are also available. These are used to apply styles to elements only
when they're nested within other specified elements. Take a look at this rule:
ol em { color: blue }
The fact that I left out the comma indicates that this rule applies only to em elements that
are nested within ordered lists. Let's look at two slightly different rules:
p cite { font-style: italic; font-weight: normal }
li cite { font-style: normal; font-weight: bold }
Search WWH ::

Custom Search