How to Create Your First CSS Stylesheet

01 - Start with an HTML page

02 - Create a CSS file

In the same folder as index.html, create a new file named style.css. A basic project might look like this:

my-website/
  index.html
  style.css

03 - Connect the stylesheet

Inside the <head> section of index.html, add a link to the CSS file. The href value is the file path from your HTML page.

<head>
  <meta charset="UTF-8">
  <title>My First Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>

04 - Write your first CSS rules

Put these rules in style.css. A selector chooses an HTML element, and declarations inside the braces set its styles.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f7fb;
  color: #222;
  margin: 40px;
}

h1 {
  color: #0b69ff;
}

p {
  line-height: 1.6;
}

05 - Save and see your styles

Save both files, open index.html in your browser, and refresh the page. If the styles do not appear, check that the filename is exactly style.css and that it is in the same folder as the HTML file.

06 - Keep experimenting

Try changing the colors, font, or spacing and refresh the browser to see what changes. When you are ready to put the site online, continue with the GitHub Pages hosting tutorial and the custom domain tutorial.