# Basic Styles

Now that we know what CSS is and what CSS code looks like, let's start adding some basic styles to our HTML page.

In our code editor, create a new file called index.css, and add the following code to it.

body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #1f2937;
}

h1 {
  font-size: 48px;
  line-height: 58px;
  color: #4b5563;
}

h2 {
  font-size: 32px;
  line-height: 42px;
  color: #4b5563;
}

h3 {
  font-size: 18px;
  line-height: 28px;
}

These rules sets some typographic properties for the contents of our page.

Setting these properties on the <body> elements provides default values throughout the page. These can be overriden by individual elements that want to sent different values (like what we're doing for the <h1> and <h2> elements).

# Load the Stylesheet

If we refresh our page now, we won't see the custom styles that we just wrote. That's because our HTML page doesn't know yet that we have a CSS file. We need to load it first into our HTML in order for it to be applied to the page.

In index.html, add this code inside the <head> element and after the <title> element.

<link rel="stylesheet" href="index.css" />

Refresh the page again, and our custom styles should applied now.

CSS basic styles