Apply CSS with Stylesheets and Selectors

An external stylesheet is a plain-text file saved with a .css extension. Keep index.html and styles.css together in the css-practice folder.

A <link> element in the HTML <head> connects the page to that stylesheet. Because both files are at the same level, the path is simply the stylesheet filename. The browser resolves that path from the location of index.html.

On your computer, create a folder named css-practice. Create index.html and styles.css inside it. Paste this complete page into index.html. The link belongs in <head>, not in the visible page content.

Save as index.html. Open this file in your browser after you also save the stylesheet below.

Save this in styles.css, beside index.html.

A CSS rule has two main parts:

1. A selector, which identifies the elements the rule targets.
2. A declaration block, enclosed in { and }.

Inside the block, each declaration follows this pattern: property: value;.

The colon connects a property to its value. The semicolon marks the end of that declaration.

In styles.css, this rule targets the page heading.

A declaration names one setting with its property and supplies a value for that setting. A rule can include several declarations; keep each one on its own line and end each with a semicolon.

A CSS comment begins with /* and ends with */. Comments can document your stylesheet, but they are not styling instructions.

This rule has two declarations and one comment.

A type selector is an HTML element name used as a selector. It targets every element with that name in the document—not only the first one.

For example, h2 targets both event headings on the Neighborhood Events page. A CSS rule applies its declarations to the elements selected by its selector.

A type selector followed by a declaration block

The universal selector is *. When used alone, it matches every element in the document.

It does not mean “every paragraph” or “every visible word.” It targets elements of all types: html, body, headings, paragraphs, articles, and more. Selector matching tells you which elements a CSS rule targets; it does not by itself explain every visible effect on the page.

This rule targets every element in the page.

A class selector starts with a dot (.) followed by a class name. It targets every element whose class attribute contains that name.

In the Neighborhood Events page, both articles use class="event". One CSS rule can therefore target both articles:

.event {
  background-color: whitesmoke;
}

The selector must use the class name exactly as it appears in the HTML.

An element may have several space-separated class names. The Book Swap article uses class="event featured", so it matches each individual class selector:

.event {
  background-color: whitesmoke;
}

.featured {
  color: navy;
}

These are two separate selectors. .event also matches Garden Walk; .featured matches only Book Swap.

An ID selector starts with #. The paragraph with id="welcome" is targeted by:

#welcome {
  color: navy;
}

Use an ID value once in a document.

When two selectors need the same declarations, write them in a selector list. Separate the selectors with a comma and a space. One declaration block is then shared.

An element matches the list if it matches any one of its selectors. So a list containing the two heading element names targets every matching <h1> and every matching <h2> on the page.

Suppose two CSS rules have identical declaration blocks. Instead of maintaining the same declarations twice, replace the two selectors and blocks with one selector list and one block.

Use this only when the declarations should be shared. The refactor changes how the CSS is written, not the intended set of matching headings.

The first two rules repeat the same declarations. The final rule keeps those declarations in one shared block.

A descendant combinator is one space between selectors. The final selector identifies what to target; the selector before it limits the target to content nested inside it.

In .event p, p is the target. It matches every paragraph at any depth inside an element whose class is event—not only paragraphs immediately inside the article.

This CSS rule targets every paragraph nested inside an event article.

A child combinator uses > and requires an immediate parent-child relationship. In .event > p, the paragraph must be a direct child of the event article.

The summary paragraph in each article is a direct child. The paragraph inside the article footer is not: its direct parent is footer.

Some selectors begin with a colon. A selector in this form is a pseudo-class: it selects elements according to a defined condition or structural role.

:root is a pseudo-class. It selects the document's root element. In an HTML document, that element is html, not body.

Read a pseudo-class as one selector unit: the colon belongs to its name. Place :root where a selector goes—before the braces and declarations.

This CSS rule selects html; it does not select body.

A CSS rule that uses the document-root pseudo-class

Open your local Neighborhood Events page and open browser developer tools. When you select an element in Elements / Inspector, the Styles / Rules pane updates to show the CSS rules that match that selected element.

Use this view to connect three pieces of evidence: the selected HTML element, its attributes and nesting, and each matched rule. A listed rule also shows its stylesheet source, such as styles.css.

This step checks whether a selector matches. It does not compare competing declarations or decide which declaration wins.

Create a controlled mismatch in your local styles.css. Add the rule below after your existing rules. If you already created a rule beginning with .featured, temporarily change that selector to the misspelled selector below instead of adding a duplicate.

Save styles.css, refresh index.html, and select the Book Swap container in Elements / Inspector. Its class values do not exactly match the misspelled selector, so this rule is absent from Styles / Rules. Then change only the selector spelling so it matches the HTML, save, refresh, and select the same element again.

Add this controlled test rule to your local styles.css. After observing its absence, correct the selector in the same local file.

Finish by applying the selectors in your local css-practice folder. Keep index.html and styles.css at the same level.

Your stylesheet must:

• style the h1 and both h2 elements together in navy;
• give both event articles a whitesmoke background;
• style the welcome paragraph in navy;
• style only each article’s direct summary paragraph in navy, not the paragraph inside the Book Swap footer.

Use separate CSS rules with noncompeting declarations. This task checks whether selectors match their intended elements, not how competing declarations are resolved.

Use this exact index.html only if your existing local page differs. Save it in css-practice beside styles.css.

Plan each CSS rule from an element’s HTML identity and relationship:

• The two heading types can share one declaration block through a selector list.
• The repeated event class reaches both articles, including the article that also has featured.
• The unique welcome paragraph is identified by its ID.
• The child relationship reaches paragraphs immediately inside the articles. The footer paragraph is nested one level deeper, so it is outside that match.

Complete the stylesheet on the next screen, then save it and refresh your local page.