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.

Combining selectors and combinators

It is worth noting that you can combine multiple selectors and combinators together. For example:

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span { ... }

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1
    + ul + p { ... }

You can combine multiple types together, too. Try adding the following into your code:

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

This will style any element with a class of special, which is inside a <p>, which comes just after an <h1>, which is inside a <body>. Phew!

In the original HTML we provided, the only element styled is <span class="special">.

Don't worry if this seems complicated at the moment – you'll soon start to get the hang of it as you write more CSS.