Getting Started with CSS Rules

Styling HTML elements

By making our heading red we have already demonstrated that we can target and style an HTML element. We do this by targeting an element selector – this is a selector that directly matches an HTML element name. To target all paragraphs in the document you would use the selector p. To turn all paragraphs green you would use:

p {
  color: green;
}

You can target multiple selectors at once, by separating the selectors with a comma. If I want all paragraphs and all list items to be green my rule looks like this:

p, li {
    color: green;
}

Try this out in your local CSS document.

I am a level one heading This is a paragraph of text. In the text is a span element and also a link. This is the second paragraph. It contains an emphasized element. Item one Item two Item three

CSS and HTML

h1 {

}

p {

}

<h1>I am a level one heading</h1>

<p>This is a paragraph of text. In the text is a <span>span element</span> 
and also a <a href="http://example.com">link</a>.</p>

<p>This is the
second
    paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item
<em>three</em></li>
</ul>