Table of Contents

一、What is CSS?

CSS (Cascading Style Sheets) allows you to create great-looking web pages.

二、Getting started with CSS

Starting with some HTML

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Getting started with CSS</title>
</head>

<body>

    <h1>I am a level one heading</h1>

    <p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="https://example.com">link</a>.</p>

    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

    <ul>
        <li>Item <span>one</span></li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
    </ul>

</body>

</html>

Adding CSS to our document

The very first thing we need to do is to tell the HTML document that we have some CSS rules we want it to use. There are three different ways to apply CSS to an HTML document that you’ll commonly come across, however, for now, we will look at the most usual and useful way of doing so — linking CSS from the head of your document.

style.css

1
2
3

h1 {
  color: red;
}

Styling HTML elements

We do this by targeting an element selector — this is a selector that directly matches an HTML element name. To target all paragraphs in the document you would use the selector p. To turn all paragraphs green you would use:

1
2
3

p {
  color: green;
}

Changing the default behavior of elements

1
2
3

li {
  list-style-type: none;
}

Adding a class

In your HTML document, add a class attribute to the second list item Your list will now look like this:

1
2
3
4
5

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

In your CSS you can target the class of special by creating a selector that starts with a full stop character. Add the following to your CSS file:

1
2
3
4

.special {
  color: orange;
  font-weight: bold;
}

三、How CSS works

Rendering process overview