Learn HTML and CSS: Text

Styling text

"My business card has everything in such a nice round typeface," says Gino. "And the prices are easy to read." Time to work on the letters themselves.

The typeface

font-family picks the typeface. You give a list with commas in between: the browser takes the first one the computer has.

Always end with a family: serif (with little feet), sans-serif (without) or monospace (every letter equally wide). One of those exists everywhere.

Set the typeface on body and all the text on the page inherits it.

style.css

1body {2  font-family: Georgia, serif;3}

kapsalon.example

Size and weight

font-size sets how big the letters are, for example 40px. Normal text is 16 px.

font-weight sets how thick they are: normal or bold, or a number from 100 to 900. 400 is normal, 700 is bold.

Here the name is bigger and the subheadings are no longer bold: headings are by default.

style.css

1h1 {2  font-size: 40px;3}4h2 {5  font-weight: normal;6}

kapsalon.example

Alignment and line height

text-align puts text on the left (left), in the centre (center) or on the right (right) of its block.

line-height sets the space between lines. A number without a unit, like 1.6, means 1.6 times the font size.

Slightly roomier lines are much nicer to read, especially on a phone.

style.css

1header {2  text-align: center;3}4p {5  line-height: 1.6;6}

kapsalon.example

Try it yourself

Make the price list (ul) easier to read: typeface Verdana, sans-serif, letters of 18px and a line height of 1.6.

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 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Learn HTML and CSS: Text

Styling text

"My business card has everything in such a nice round typeface," says Gino. "And the prices are easy to read." Time to work on the letters themselves.

The typeface

font-family picks the typeface. You give a list with commas in between: the browser takes the first one the computer has.

Always end with a family: serif (with little feet), sans-serif (without) or monospace (every letter equally wide). One of those exists everywhere.

Set the typeface on body and all the text on the page inherits it.

style.css

1body {2  font-family: Georgia, serif;3}

kapsalon.example

Size and weight

font-size sets how big the letters are, for example 40px. Normal text is 16 px.

font-weight sets how thick they are: normal or bold, or a number from 100 to 900. 400 is normal, 700 is bold.

Here the name is bigger and the subheadings are no longer bold: headings are by default.

style.css

1h1 {2  font-size: 40px;3}4h2 {5  font-weight: normal;6}

kapsalon.example

Alignment and line height

text-align puts text on the left (left), in the centre (center) or on the right (right) of its block.

line-height sets the space between lines. A number without a unit, like 1.6, means 1.6 times the font size.

Slightly roomier lines are much nicer to read, especially on a phone.

style.css

1header {2  text-align: center;3}4p {5  line-height: 1.6;6}

kapsalon.example

Try it yourself

Make the price list (ul) easier to read: typeface Verdana, sans-serif, letters of 18px and a line height of 1.6.

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 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson