Learn HTML and CSS: Stylesheets

Linking a stylesheet

"So where is that CSS, actually?" asks Gino. "In the HTML?" Not really. The HTML only points to it.

A file of its own

CSS usually lives in a file of its own, a stylesheet. At Snip & Curl it's called style.css.

That stylesheet only works when the HTML points to it, with <link rel="stylesheet" href="style.css"> in the <head>. rel says what kind of file it is, href where it is.

The beauty of it: ten pages with the same <link> share the same stylesheet. One change, and the whole site changes with it.

index.html

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>

style.css

1h1 {2  color: purple;3}

kapsalon.example

Two other places

CSS can also go in the HTML itself. In a <style> element in the <head>, it only works for that one page.

Or in a style attribute on one element, like <h2 style="color: orange">. That looks handy, but a style like that beats everything in your stylesheet, it's hard to find again, and you have to retype it on every element.

So: CSS in style.css, and no style attributes.

Under the page is the cascade of the second heading: the style attribute wins, h2 { color: teal; } is struck through.

index.html

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    <style>7      h2 { color: teal; }8    </style>9  </head>10  <body>11    <header>12      <h1 id="name">Snip &amp; Curl</h1>13      <p class="slogan">Hair salon in the heart of Leeds</p>14    </header>15    <main>16      <h2>Our prices</h2>17      <ul class="price-list">18        <li><span class="service">Haircut</span> <span class="price">£28</span></li>19        <li><span class="service">Wash and blow-dry</span> <span class="price">£22</span></li>20        <li><span class="service">Colouring</span> <span class="price">£55</span></li>21      </ul>22      <section id="booking">23        <h2 style="color: orange">Book an appointment</h2>24        <p class="info">Give us a call or just pop in.</p>25        <a class="button" href="tel:+441134960000">Call us</a>26      </section>27    </main>28    <footer>29      <p>8 Kirkgate, Leeds</p>30    </footer>31  </body>32</html>

kapsalon.example

Try it yourself

The nephew made both subheadings teal with style attributes. Remove them and put the same colour, teal, in style.css.

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 style="color: teal">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 style="color: teal">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

A file of its own

CSS usually lives in a file of its own, a stylesheet. At Snip & Curl it's called style.css.

That stylesheet only works when the HTML points to it, with <link rel="stylesheet" href="style.css"> in the <head>. rel says what kind of file it is, href where it is.

The beauty of it: ten pages with the same <link> share the same stylesheet. One change, and the whole site changes with it.

index.html

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>

style.css

1h1 {2  color: purple;3}

kapsalon.example

Two other places

CSS can also go in the HTML itself. In a <style> element in the <head>, it only works for that one page.

So: CSS in style.css, and no style attributes.

Under the page is the cascade of the second heading: the style attribute wins, h2 { color: teal; } is struck through.

index.html

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    <style>7      h2 { color: teal; }8    </style>9  </head>10  <body>11    <header>12      <h1 id="name">Snip &amp; Curl</h1>13      <p class="slogan">Hair salon in the heart of Leeds</p>14    </header>15    <main>16      <h2>Our prices</h2>17      <ul class="price-list">18        <li><span class="service">Haircut</span> <span class="price">£28</span></li>19        <li><span class="service">Wash and blow-dry</span> <span class="price">£22</span></li>20        <li><span class="service">Colouring</span> <span class="price">£55</span></li>21      </ul>22      <section id="booking">23        <h2 style="color: orange">Book an appointment</h2>24        <p class="info">Give us a call or just pop in.</p>25        <a class="button" href="tel:+441134960000">Call us</a>26      </section>27    </main>28    <footer>29      <p>8 Kirkgate, Leeds</p>30    </footer>31  </body>32</html>

kapsalon.example

Try it yourself

The nephew made both subheadings teal with style attributes. Remove them and put the same colour, teal, in style.css.

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 style="color: teal">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 style="color: teal">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