<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gmgiid48dzj9spelumm.png" alt="Image description" />
<h2 id="heading-css-syntax">CSS Syntax</h2>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/civ19ota2umrvurumc80.png" alt="Image description" />
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m52kj49w8ji58ilhhw7.png" alt="Image description" />
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifys4wvc7ihe87rvuxnw.png" alt="Image description" />
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jivrykq6xrabac93ojbg.png" alt="Image description" />
<h2 id="heading-css-specificity">CSS Specificity</h2>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2soct2xser52aqs1a88b.png" alt="Image description" />
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki7v67ytpdhgsixkv9d7.png" alt="Image description" />
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vol2qbhm7rexjjkz9xpz.png" alt="Image description" />
<h2 id="heading-link-css-to-html">LINK CSS TO HTML</h2>
To write the css in a seperate file, you have to link that file to the html.
In the head element, make a new element called link and write this:
<pre><code>&lt;head&gt;
 &lt;link href="styles.css" rel="stylesheet"/&gt;
&lt;/head&gt;
</code></pre>href attribute specifies the path of the file, if the file is in the same directory as the html, then you just write the file name.
href stands for hypertext reference and yes the value of that attribute (the path) is a reference to the file.
rel stands for relation and here we are specifying the relation of that file we referenced. Is it a stylesheet file, a favicon, it is an alternative page in a different language?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gmgiid48dzj9spelumm.png)

## CSS Syntax

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/civ19ota2umrvurumc80.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m52kj49w8ji58ilhhw7.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifys4wvc7ihe87rvuxnw.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jivrykq6xrabac93ojbg.png)

## CSS Specificity

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2soct2xser52aqs1a88b.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki7v67ytpdhgsixkv9d7.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vol2qbhm7rexjjkz9xpz.png)

## LINK CSS TO HTML

To write the css in a seperate file, you have to link that file to the html.
In the head element, make a new element called link and write this:

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

href attribute specifies the path of the file, if the file is in the same directory as the html, then you just write the file name.

href stands for hypertext reference and yes the value of that attribute (the path) is a reference to the file.

rel stands for relation and here we are specifying the relation of that file we referenced. Is it a stylesheet file, a favicon, it is an alternative page in a different language?

[VISUAL] CSS Intro, Syntax & the CSS Cascade

CSS Syntax

CSS Specificity

LINK CSS TO HTML