30 Days Of JavaScript

Day 15: Creating a website

Lesson 4: CSS

To keep things simple we will do most of our work in the index.html file for now. There are ways to break out our code into other files, however for simplicity we are going to be working in one file for a while.

Add this code somewhere between the <head> tag and </head> tag:

1<style>
2  #red-text {
3    color: red;
4  }
5</style>

Then change the hello world line to:

1<p id="red-text">Hello World</p>

Hit save and see your browser automatically update and show you some red text!

That feature where your code updated when you saved and the browser re ran is called Hot Reloading and is the reason we installed Live Server.

Everything we have done so far could have be done without it BUT you would have had to manually hit reload all the time and that's suuuuuper annoying.

Please change your <style> block to look like this:

1<style>
2  #red-text {
3    color: red;
4  }
5
6  #blue-text {
7    color: blue;
8  }
9
10  .title-large {
11    font-size: 48px;
12    font-weight: bold;
13  }
14
15  .title-small {
16    font-size: 24px;
17    font-weight: bold;
18  }
19
20  .hidden {
21    display: none;
22  }
23
24  .warning {
25    color: orangered;
26  }
27</style>

Your whole file should look like this:

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8
9    <style>
10      #red-text {
11        color: red;
12      }
13
14      #blue-text {
15        color: blue;
16      }
17
18      .title-large {
19        font-size: 48px;
20        font-weight: bold;
21      }
22
23      .title-small {
24        font-size: 24px;
25        font-weight: bold;
26      }
27
28      .hidden {
29        display: none;
30      }
31
32      .warning {
33        color: orangered;
34      }
35    </style>
36  </head>
37  <body>
38    <p id="red-text">Hello World</p>
39  </body>
40</html>

We aren't going to do anything with that new CSS in this lesson, however we will in future lessons so it's good to have it in place now.

Next up, adding JavaScript!

30 Days Of JavaScript

Day 15: Creating a website

Lesson 4: CSS

Outline

Go Pro?