How to add CSS to HTML
Tags: webdev, beginners, css, html
Published: 2022-08-23 20:37:00

The **Hyper Text Markup Language (HTML**) and **Cascading Style Sheets (CSS)** are the two main languages used to create websites. While HTML provides a website's structure, CSS is used to style the website. Together, they give users the ability to design an attractive and well-organized website.

## **Prerequisites**

This article assumes the reader has the following:

- A text editor
- Basic HTML knowledge.
- Basic CSS knowledge.

Only when CSS is added to the HTML document can the style declarations be applied to the HTML code. However, many newbie developers have trouble adding CSS to HTML. Therefore, the three styling techniques are covered in this article. They are as follows:
&nbsp;  
##**Inline CSS**

Here, styles are added directly to the HTML element tags using the style attribute.

```
<h1 style = "color : blue;" >Inline CSS</h1>
```&nbsp;For example,
If you want to change the text color and background color of an element, you can:

1. Add the style attribute to the element.
2. Add the style properties to the style attributes.

```
  <p style = " " > Paragraph </p>
```
&nbsp;  

```
  <p style = "color:blue; background-color:yellow;"> Paragraph </p>
```
&nbsp; Due to its high CSS [specificity](https://www.w3schools.com/css/css_specificity.asp), only one element can be targeted at a time with this type of styling. Inline styling is not used in daily applications except in rare cases, because the HTML code becomes cumbersome and unpleasant to read.

> ***Avoid using inline CSS as much as you can, but if you must, do it sparingly.***
<br>


## **Internal CSS**
Here, styles are added using the HTML `<style>` tag in the head section of the HTML document. Then, the style properties are defined using the appropriate selectors in the `<style>` tag. Internal CSS is also oftentimes referred to as embedded CSS.


```
  <head>
     <style>
	   h1{
	    color:blue;
	   }
    </style>

  </head>

  <body>

     <h1>Internal CSS</h1>

  </body>
```
<figcaption>How to change the color of the `h1` element using the internal styling method </figcaption>
&nbsp;  
The styles for a single HTML page are defined using the internal CSS styling method. This is one of the method's main drawbacks.

> ***The internal style method is therefore not used much in practice.*** 

## **External CSS**

The styling techniques discussed so far are all included in the HTML document (either in the head or the body). But in this case, we import the CSS styles via the `<link>`tag from an external style sheet. This is important since it makes the code easier to maintain and read. &nbsp;  
The external CSS style method requires us to create an external style `.css` file and link it to HTML. 
&nbsp;
For instance, if you want to style a HTML element using this technique, you can:
1. Create the external style sheet file using the `.css` extension (Create a file called `style.css`.)
2. Target the HTML element inside the `style.css` file using the selector like so. 
3.  Import the `style.css` file into the `<head>` section of the HTML document using the `<link>` tag.
 ```
   h1{
       color: blue;
 
       font-size: 16px;
 
     }
  ```
<figcaption> How to target the `h1` element in the external stylesheet </figcaption> 
&nbsp;  
```
  <head>
     <link rel="stylesheet" href="style.css">
  </head>

  <body>
     <h1> External CSS </h1>
  </body>

```
<figcaption> How to import the `style.css` file into the HTML document </figcaption> &nbsp;  
>***This method's ability to specify styles for multiple HTML pages is one of its greatest features.***

Thus, making external CSS the most preferable method for styling web pages.

## Conclusion

I hope you were able to learn about the three distinct approaches to including CSS in HTML.
Feel free to add CSS to your HTML code using the knowledge you have gained from this article. &nbsp;

I'll be delighted to address any questions you have in the comments section below.
**If you want to learn more about web development, feel free to follow me on [Twitter](https://twitter.com/ReubenVictoire).**

Thank you for reading🎉.



Cover photo by [Clément Hélardot](https://unsplash.com/@clemhlrdt)