Learn HTML and CSS: CSS rules

What CSS is

Gino slides a cup of coffee over to you. "The text is fine, my nephew says. But it's so... bare." You open style.css: it's still empty.

A rule

HTML says what is on the page, CSS says how it looks. You write CSS in rules.

A rule starts with a selector: which elements it styles. h1 finds every <h1>. Between { and } comes a property (color, the text colour), a colon, a value (purple) and a semicolon.

Look: the salon's name is purple now.

style.css

1h1 {2  color: purple;3}

kapsalon.example

The semicolon

A rule can change more than one thing. Each property with its value is called a declaration, and every declaration ends with a ;.

Here the name is purple and centred (text-align: center).

Forget the ; after purple and the browser reads purple text-align: center as one strange value. It can't make sense of it, so it does neither.

style.css

1h1 {2  color: purple;3  text-align: center;4}

kapsalon.example

Try it yourself

Your first rule of your own: make the footer (footer) grey with gray and centre it. The rest of the page stays as it is.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Snip &amp; Curl hair salon</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="name">Snip &amp; Curl</h1>11      <p class="slogan">Hair salon in the heart of Leeds</p>12    </header>13    <main>14      <h2>Our prices</h2>15      <ul class="price-list">16        <li><span class="service">Haircut</span> <span class="price">£28</span></li>17        <li><span class="service">Wash and blow-dry</span> <span class="price">£22</span></li>18        <li><span class="service">Colouring</span> <span class="price">£55</span></li>19      </ul>20      <section id="booking">21        <h2>Book an appointment</h2>22        <p class="info">Give us a call or just pop in.</p>23        <a class="button" href="tel:+441134960000">Call us</a>24      </section>25    </main>26    <footer>27      <p>8 Kirkgate, Leeds</p>28    </footer>29  </body>30</html>

kapsalon.example

Ready for more?

The full lesson has 6 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

A rule

HTML says what is on the page, CSS says how it looks. You write CSS in rules.

Look: the salon's name is purple now.

style.css

1h1 {2  color: purple;3}

kapsalon.example

The semicolon

A rule can change more than one thing. Each property with its value is called a declaration, and every declaration ends with a ;.

Here the name is purple and centred (text-align: center).

Forget the ; after purple and the browser reads purple text-align: center as one strange value. It can't make sense of it, so it does neither.

style.css

1h1 {2  color: purple;3  text-align: center;4}

kapsalon.example

Try it yourself

Your first rule of your own: make the footer (footer) grey with gray and centre it. The rest of the page stays as it is.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Snip &amp; Curl hair salon</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="name">Snip &amp; Curl</h1>11      <p class="slogan">Hair salon in the heart of Leeds</p>12    </header>13    <main>14      <h2>Our prices</h2>15      <ul class="price-list">16        <li><span class="service">Haircut</span> <span class="price">£28</span></li>17        <li><span class="service">Wash and blow-dry</span> <span class="price">£22</span></li>18        <li><span class="service">Colouring</span> <span class="price">£55</span></li>19      </ul>20      <section id="booking">21        <h2>Book an appointment</h2>22        <p class="info">Give us a call or just pop in.</p>23        <a class="button" href="tel:+441134960000">Call us</a>24      </section>25    </main>26    <footer>27      <p>8 Kirkgate, Leeds</p>28    </footer>29  </body>30</html>

kapsalon.example