Learn HTML and CSS: Backgrounds and units

Backgrounds and units

"My salon isn't white," says Gino. "Pink tiles, a green counter." The site can have some colour behind the letters too.

A background colour

color colours the letters. background-color colours the area behind them: the element's whole block.

Here the page (body) gets a soft cream, and the header (header) a petrol green bar with white letters.

If you pick a dark background, give the text a light colour. Otherwise nobody can read a thing.

style.css

1body {2  background-color: #fff7f0;3}4header {5  background-color: #2a9d8f;6  color: white;7}

kapsalon.example

px, rem and %

A size always has a unit, right after the number, with no space. px is a fixed size: 24px is always 24 pixels.

rem works from the default text size, usually 16 px. So 2.5rem is 2.5 × 16 = 40 px. If someone sets their phone to bigger text, everything in rem grows with it.

% works from the parent. width: 50% makes a block half as wide as the block it sits in, on any screen.

Under the page is the box model of the booking block: make the screen narrower with Width, and the width follows.

style.css

1#name {2  font-size: 2.5rem;3}4#booking {5  width: 50%;6  background-color: #fde2e4;7}

kapsalon.example

Try it yourself

Give the price list (.price-list) a light pink background (#fde2e4) and make it 80% as wide as the page, on every screen.

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 background colour

color colours the letters. background-color colours the area behind them: the element's whole block.

Here the page (body) gets a soft cream, and the header (header) a petrol green bar with white letters.

If you pick a dark background, give the text a light colour. Otherwise nobody can read a thing.

style.css

1body {2  background-color: #fff7f0;3}4header {5  background-color: #2a9d8f;6  color: white;7}

kapsalon.example

px, rem and %

A size always has a unit, right after the number, with no space. px is a fixed size: 24px is always 24 pixels.

rem works from the default text size, usually 16 px. So 2.5rem is 2.5 × 16 = 40 px. If someone sets their phone to bigger text, everything in rem grows with it.

% works from the parent. width: 50% makes a block half as wide as the block it sits in, on any screen.

Under the page is the box model of the booking block: make the screen narrower with Width, and the width follows.

style.css

1#name {2  font-size: 2.5rem;3}4#booking {5  width: 50%;6  background-color: #fde2e4;7}

kapsalon.example

Try it yourself

Give the price list (.price-list) a light pink background (#fde2e4) and make it 80% as wide as the page, on every screen.

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