Adding the CSS

Right-click the project folder and add a Stylesheet file called mystyle.css, as shown in Figure 7.10. You will be prompted to choose a Stylesheet type. We’re sticking to CSS files. The rest of the options are fancy, but they all transpile, usually via the Babel library and a WebPack build script, to regular CSS at the end of the day. If you are new to frontend work, I recommend learning plain CSS before branching off into exotic topics such as Less or Sass:

Figure 7.10: Create a new CSS file using File | New | Stylesheet

Be sure to name the file mystyle.css so that it matches what we have in the <link> tag in our HTML file. It also needs to be in the same folder as index.html. Add this code:

body {
 background-color: lightblue;
 margin: 20px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
}
h1 {
 font-size: 32px;
 color: navy;
 text-decoration: underline;
}

Save the file and return to your browser. Don’...