Getting Started with CSS Rules

In the HTML section, you created an "index.html" file that contained an image and list. This article explains how to add CSS to that document. You will define styles for the <h1>, <p>, and <li> elements. This example uses embedded CSS rules in an external .css file. This method is efficient for styling several documents.

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>