CSS Basics #1: Getting Started

This article is outdated. If you are interested in learning HTML and CSS, check out my new course ➡️ HTML & CSS: A Practical Guide.

The Cascading Style Sheet (CSS) is used to control the presentation and layout of HTML documents. It provides a way to separate the content of a web page from its presentation and design. With CSS, developers can define styles such as font, color, size, spacing, and positioning, and apply them to multiple elements on a web page. This makes it easier to manage and maintain the look and feel of a website, as well as provide a more consistent experience for users. CSS can be written in separate files or embedded within an HTML document, and it works in conjunction with HTML to create visually appealing and well-designed websites.

In CSS, you can define a set of rules that can be applied to a particular element or a group of elements on your web page.

For instance, the following example defines that all the <h2> elements in the HTML document should be red, and the size of the texts should be 5em, where em is a relative unit for font, 5em means five times the size of the original font.

1
2
3
4
h2 {
  color: red;
  font-size: 5em;
}

The h2 here is called a selector, it selects the HTML elements that we are going to style. And we have a set of different declarations wrapped inside the curly braces {}, which are in the form of “property: value” pairs.

Applying CSS to HTML pages #

There are three different ways to apply CSS rules to an HTML document. Let’s consider this example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="Eric Hu" />
    <title>My HTML Document</title>
  </head>

  <body>
    <h1>My HTML Document</h1>

    <h2>First Title</h2>
    <p>...</p>

    <h2>Second Title</h2>
    <p>...</p>
  </body>
</html>

Now, our objective is to make both second-level headings (<h2>) red and underlined using CSS.

Inline CSS #

First, we can add the CSS declarations as attributes for the HTML elements like this:

1
2
3
4
5
6
7
8
9
<body>
  <h1>My HTML Document</h1>

  <h2 style="color: red; text-decoration: underline;">First Title</h2>
  <p>...</p>

  <h2>Second Title</h2>
  <p>...</p>
</body>

Inline css

And as you can see, only the first heading is changed. So in order to change both of them, we have to add the style attribute to both headings. That is a very time-consuming task for a large HTML document, so it is not the recommended method to insert CSS.

Internal CSS #

We can also put the CSS code in the <head> section of the HTML document like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Eric Hu" />
  <title>My HTML Document</title>

  <style>
    h2 {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>

Internal CSS

And as you can see, this time, both headings are changed. However, the downside of putting HTML and CSS together is that the document could easily get too large as the web page grows, which is not good for future maintenance.

External CSS #

The best way to deal with CSS and HTML is to put them in separate files, and then in the HTML document, we will reference the external CSS in the <head> section. For example, here we have two documents, document.html and style.css:

document.html

1
2
3
4
5
6
7
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Eric Hu" />
  <title>My HTML Document</title>

  <link rel="stylesheet" href="style.css" />
</head>

style.css

1
2
3
4
h2 {
  color: red;
  text-decoration: underline;
}

The document object model #

We already introduced the concept of the Document Object Model (DOM) in the HTML Basics article of this tutorial series. The DOM has a tree-like structure. Every HTML element is a node in this tree structure.

When the browser displays a document, it first reads the document’s content (HTML) and converts it into a DOM tree, and then it will parse the style information (CSS) and assign it to the corresponding node of the DOM tree. The following graph from MDN Web Docs illustrates this process.

How browser parses an HTML page

Let’s take a look at another example,

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<body>
  <h1>My HTML Document</h1>

  <div>
    <h2>First Heading</h2>
    <p>...</p>
  </div>

  <div>
    <h2>Second Heading</h2>
    <p>...</p>
  </div>

  <section>
    <h2>Third Heading</h2>
    <p>...</p>
  </section>
</body>

Here is the corresponding DOM tree. We can see that we have three block-level elements (two <div> elements and one <section> element) who are siblings to each other, and each of them has a heading and a paragraph.

DOM Tree

Our objective is to locate the headings in the <div> blocks and make it red, and then find the heading under the <section> block, and make it blue.

1
2
3
4
5
6
div h2 {
  color: red;
}
section h2 {
  color: blue;
}

That looks easy, right? We first locate both <div> elements and find the <h2> headings under the <div> blocks, and then in the declaration section, we set the color to red. After that, we do the same thing for the <section> block.

Locate DOM leaf

How to select HTML nodes #

However, as your HTML document gets bigger, this method may cause problems, because you are likely to use the same block-level element for different purposes, and you don’t want all of them to have the same style. So, the common practice is to use the class and id attributes as selectors instead.

`class` and `id` selectors #

This is the most common type of selector that we use in CSS. You select either a group of elements or a specific element based on its class or id.

1
2
3
4
5
/* Class Selector */
.box { . . . }

/* ID Selector */
#unique { . . . }

Here is an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<body>
  <h1>My HTML Document</h1>

  <div class="first-class">
    <h2>First Heading</h2>
    <p>...</p>
  </div>

  <div id="uniqueID">
    <h2>Second Heading</h2>
    <p>...</p>
  </div>

  <section class="first-class">
    <h2>Third Heading</h2>
    <p>...</p>
  </section>
</body>

1
2
3
4
5
6
7
.first-class h2 {
  color: red;
}

#uniqueID h2 {
  color: blue;
}

Class vs ID

As you can see, it is possible for us to put different types of elements in the same class.

Attribute selectors #

You can also select elements based on the presence of a certain attribute.

1
2
3
4
5
<body>
  <h2 id="firstHeading">First Heading</h2>
  <h2 id="secondHeading">Second Heading</h2>
  <h2>Third Heading</h2>
</body>

1
2
3
h2[id] {
  color: red;
}

This selector will find all the second-level headings that have an id attribute and set its color to red.

Attribute Selector

Pseudo classes #

Finally, there is something called a pseudo-class in CSS, which only selects an element when it is under a certain state. The :hover pseudo-class, for example, selects an element only when the cursor hovers over it. Try the following example in your own browser. The headings will turn red when the cursor hovers over them.

1
2
3
4
5
<body>
  <h2>First Heading</h2>
  <h2>Second Heading</h2>
  <h2>Third Heading</h2>
</body>

1
2
3
h2:hover {
  color: red;
}

Some commonly used CSS properties #

Colors #

In the remaining part of this article, we are going to take a look at some of the most commonly used CSS rules. Let’s start with colors.

There are four different ways we can define a color in CSS. The easiest method is to use a predefined color name like this:

1
2
3
4
5
<body>
  <div>
    <p>. . .</p>
  </div>
</body>

1
2
3
4
5
6
7
div {
  background-color: tomato;
}

p {
  color: white;
}

Background color

The colors can also be specified using RGB values, HEX values or HSL values like this:

1
2
3
4
5
6
7
8
9
<body>
  <div>
    <p>. . .</p>
  </div>

  <section>
    <p>. . .</p>
  </section>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
div {
  background-color: rgb(255, 99, 71);
}

section {
  background-color: #008080;
}

p {
  color: hsl(0, 0%, 100%);
}

RGB vs HEX vs HSL

Texts and fonts #

We can also customize texts using CSS. Besides setting text color, we can add or remove decorations using the text-decoration property:

1
2
3
4
5
6
7
<body>
  <h1>First Heading</h1>

  <h2>Second Heading</h2>

  <h3>Third Heading</h3>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

Text decoration

Or we can transform the text into uppercase, lowercase or the capitalized form:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<body>
  <p class="uppercase">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <p class="lowercase">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <p class="capitalize">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

text transform

In order to make the texts more appealing, we can assign different fonts to our texts like this:

1
2
3
4
5
<body>
  <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p class="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.p1 {
  font-family: "Courier New", Courier, monospace;
}

.p2 {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.p3 {
  font-family: Georgia, "Times New Roman", Times, serif;
}

font family

As you can see, here we assigned several fonts for each paragraph. That is to ensure there is a fallback system in place, if the first font is not available, the browser will go to its generic “siblings” instead.

Finally, we can also define the style, weight and size for the font:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
.p1 {
  font-family: "Courier New", Courier, monospace;
  font-style: italic;
  font-weight: 100;
  font-size: 30px;
}

.p2 {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: 20px;
}

.p3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: oblique;
  font-weight: 300;
  font-size: 10px;
}

fonts

Links #

Previously, we talked about pseudo-classes, which describe the state of the elements. Links are where we use pseudo-classes the most often. A single link could have four different states:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Using these four states, we can style a link like this:

1
2
3
<body>
  <a href="#" target="_blank">This is a link.</a>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* unvisited link */
a:link {
  color: blue;
  text-decoration: underline;
}

/* visited link */
a:visited {
  color: green;
  text-decoration: underli;
}

/* mouse over link */
a:hover {
  color: red;
  text-decoration: overline;
}

/* selected link */
a:active {
  color: orange;
  text-decoration: underline;
}

Link	Style
Unvisited Link
Hovered Link
Active Link
Visited Link

Tables #

The look of an HTML table can also be greatly improved with CSS. A typical HTML table looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>
</body>

1
2
3
4
5
table,
td,
th {
  border: 1px solid black;
}

HTML table with border

The first thing we notice is that the table has double borders. That is because both the table itself (<table>) and the <th> and <td> elements have separate borders. We can use the border-collapse property to make them collapse into one single border:

1
2
3
table {
  border-collapse: collapse;
}

border collapse

We can use the width and height properties to set the size for the columns/rows or the entire table:

1
2
3
4
5
6
7
8
table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 70px;
}

border height

We can define the alignment inside the table like this:

1
2
3
td {
  text-align: center;
}

table text align

And lastly, we can set a background color for the table:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
th {
  height: 70px;
  background-color: coral;
  color: white;
}

td {
  text-align: center;
  background-color: gainsboro;
}

table background color

Forms and Buttons #

In the final section of this article, let’s talk about how to customize HTML forms. Here is an example:

1
2
3
4
5
6
7
8
9
<body>
  <form>
    <label for="firstname">First Name:</label><br />
    <input type="text" id="firstname" /><br />
    <label for="lastname">Last Name:</label><br />
    <input type="text" id="lastname" /><br />
    <button>Submit</button>
  </form>
</body>

HTML form

Now we can add some CSS code:

1
2
3
4
5
6
input[type="text"] {
  width: 20%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

form with style

The button still doesn’t look very good, here is what we can do:

1
2
3
4
5
6
7
8
button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

Finally, let’s take one step further, let’s also add a border to the button, and make it hoverable using pseudo-class:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
button {
  background-color: white;
  color: #4caf50;
  border: solid #4caf50;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  transition-duration: 0.2s;
}

button:hover {
  background-color: #4caf50;
  color: white;
  border: solid #4caf50;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}