Course: Welcome

Selectors in CSS [10/14]

Congratulations! You have just connected outer CSS styles to your HTML page.

When you use the style attribute, the browser understands which tag it has to apply these styles to. But when the styles are connected using an external file or the <style>, the browser is searching for the applicable tags by the means of selectors.

You already know something about the selectors: you used selector p in the previous task. It was in the CSS code before the braces. Usually the CSS rules syntax looks like this:

selector {
    property1: value1;
    property2: value2;

The language of selectors is very flexible and powerful. The simplest type of selectors is the tag name type: p, h1, etc. When the browser comes across such type of a selector, it applies the styles from the rule to all relevant tags. For example, to all paragraphs or all level 1 headers.

Houston, we have a problem! With the summary. Selector p highlighted all paragraphs green. And they should have different colors. What can we do?

Let’s try to add different tags for different colors into the paragraphs. After this we will be able to use different selectors in CSS.

Do it
<!DOCTYPE html> <html> <head> <title>Selectors in CSS</title> </head> <body> <h1>Course summary</h1> <p><strong> Paired tags.</strong></p> <p><strong>Single tags.</strong></p> <p><strong>Tag attributes.</strong></p> <p><strong>Inline (built in) styles.</strong></p> <p><em>Outer styles.</em></p> <p><em>Styling by class.</em></p> </body> </html>
body { font-family: Tahoma, serif; } /* Here’s a little help. All the rest is yours. h1 { color: #999999; }
HTML Academy

Learn to use the simplest selectors:

  1. For h1 set color: #999999;.
  2. For strong set color: green;.
  3. For em set color: red;.
Theory Check Next