ptg16476052162 LESSON 8: Using CSS to Style a Site
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.Selectors
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 you can 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 apply them across multiple types of elements using a single selector.
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
to be displayed using blue text. Instead of writing individual rules for each of these ele-
ments, 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; }