3 Ways to add CSS to your website
Tags: css, webdev, codenewbie, beginners
Published: 2022-01-20 15:20:50

![two screens with colorful layout](https://cdn.hashnode.com/res/hashnode/image/upload/v1641627344851/dt70vOLPb.png)

## what is CSS

---
> Fashion Fades, style is eternal
YVES SAINT LAURENT
---

CSS is where we provide the style to our website. It tells the browser how to position the elements on the page, what color they should be, what font to use and almost anything else you can think of which relates to how the website looks.

## Inline CSS

You can add CSS directly into the HTML elements. You can do this with the style attribute. It will look something like this.

```
<h1 style="background-color:blue; color:yellow">Hello World</h1>
```


![yellow "hello world" text on blue background](https://cdn.hashnode.com/res/hashnode/image/upload/v1641627720849/EriMFcOdk.png)

A couple of things to be aware of about using inline style

- It has the highest precedence. That means, if in the example above, I was to give the `<h1>` a different style using an internal or external style sheet it would not change the style.

- It is **not recommended** to use this method — particularly in big projects. The reason for this is that it's easy to lose track of which styles you put where and if you want to make a change you have to search the whole document and make each change individually.

## Internal CSS

The second way to add CSS is in the `<head>` section of HTML page. You will need to add it in a `<style>` tag. Don’t forget that you need to add the selector (h1 / p / body) because you’re not applying it directly to the element. It should look something like this

```
<head>
    <style>
      body {background-color: pink;}
      p {color:white; font-size:2rem;};
    </style>
</head>
```

![White text on pink background](https://cdn.hashnode.com/res/hashnode/image/upload/v1641628088567/lPhtS_8vb.png)

While there’s nothing wrong with using internal CSS it does mean, if you have many HTML pages with similar styles, you will end up writing the same code over and over again in the head of each file. A better way to do this would be with an external style sheet.

## External CSS


![picture of brackets](https://cdn.hashnode.com/res/hashnode/image/upload/v1641628143562/Fl1UNZ7zR.png)

The most common way to use CSS is to have all your CSS rules in a separate CSS file and link that to any HTML files which will use it. First of all, you want to create a file ending .css where you will write all your CSS code. You may want to call it styles.css. Save this in the same folder as your HTML or a subfolder called styles or something similar. Then in the `<head>` section of your HTML, you will need to point to that CSS file. Use the format below, assuming your CSS file is called styles.css and it’s saved in your HTML folder

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

Here the `rel="stylesheet"` tells the browser that this is our CSS stylesheet and the `href="styles.css"` points to where this folder is located relative to the HTML document.

<br>

The benefit of using external style sheets is that you can use the `href` to import it into many HTML documents. An example of where this might be useful is if you have several pages with the same header. You can create the rules in one CSS stylesheet and import it to all the HTML documents with that header.