CSS selectors

Congratulations! You have just plugged external CSS styles into your HTML page.

When you specify tag styles using the style attribute, the browser immediately knows which tag to apply those styles to. But when styles are attached using an external file or via the <style> tag, the browser searches for the tags to be styled using "selectors".

You're already a little familiar with selectors: in the previous assignment, you used the p selector, which was in front of the curly brackets in the CSS code. The syntax of CSS rules looks like this:

selector {
  property1: value1;
  property2: value2;
  …
}

The language of selectors is very powerful and flexible. The simplest selectors are selectors by tag name: p, h1, and so on. The browser applies styles from a rule with this selector to all matching tags. For example, to all paragraphs or to all first-level headings.

In our outline, selector p has highlighted all theparagraphs in green. How to make them different colors? You can add other tags inside the paragraphs. Then you can use selectors for different tags in CSS and give them different colors.