How to Include CSS in HTML


In this tutorial, we will learn how to include CSS in HTML files with working examples and demonstrations.

To make a website beautiful and appealing you need to use CSS to style it but how will you include CSS code in your HTML file or how will you connect another CSS file to your HTML file?

There are three ways to include CSS in HTML files.

  1. External CSS
  2. Internal CSS
  3. Inline CSS

1. External CSS in HTML

External CSS is the most common and efficient way to include CSS in HTML files. In this method, you will create a separate CSS file and link it to your HTML file.

Suppose your file name is "external.css" that lies in the same folder as your HTML file then you can write <link rel="stylesheet" href="external.css">.

Example

<head>
  <link rel="stylesheet" href="external.css">
</head>
Try it

This external CSS file should purely contain CSS code.

External CSS code example

body {
    background-color: #df8C61;
}

h2 {
    font-size: 35px;
  	font-family: sans-serif;
}

p {
    font-size: 20px;
    color: white;
}

Including multiple external stylesheets

You can also add multiple external style sheets to your HTML file using multiple <link> elements.

CSS properties of all external stylesheets are added to the HTML file.

<head>
  <link rel="stylesheet" href="external-1.css">
  <link rel="stylesheet" href="external-2.css">
  <link rel="stylesheet" href="external-3.css">
</head>

Note: If there are 2 different values for the same CSS property for any element then the value of the last stylesheet will be applied because the last stylesheet will override the previous ones.


Benefits of using external style

External style is used by most websites and has lots of benefits, Some of which are mentioned below:

  • Clean: Since you, CSS classes, and properties are stored in a separate file so your HTML file looks clean.
  • Management: Change at a single property can reflect all over the webpage.
  • Easy to manage: Easy to maintain bigger websites. If you have 100s of the webpage that uses the same CSS codes then it is a nice move to use the external stylesheet.
  • Faster webpage: The webpage loads quicker once the CSS file has been cached.
  • Can change all pages at once: If you have 100s of the webpage and you want some change in your design, then you would not want to go to each page and change. Just make change in external stylesheet at 1 place and you are done.

2. Internal CSS in HTML

Another way to include CSS in an HTML file is internal CSS.

Internal CSS is the CSS code that is written within the HTML file itself within the <style> element and is placed in the <head> section of the HTML file.

The Internal style is mainly used when you need some other CSS property for a single HTML file.

Example

<html>

<head>
  <style>
    body {
      background-color: #df8C61;
    }

    h1 {
      font-size: 35px;
      font-family: sans-serif;
    }

    p {
      font-size: 20px;
      color: white;
    }
  </style>
</head>

<body>

</body>

</html>
Try it

3. inline CSS in HTML

Inline style is the CSS code that is written within the HTML element itself. It is used to add a unique style to a single element.

The inline style has the highest priority among internal and external CSS. Inline style overwrites external or internal CSS.

The inline element is used by elements by assigning style attributes to them and defining CSS property inside quotes as a key-value pair. Example <p style="color: blue;">Hello World!</p>.

Example

<body style="background-color:#df8C61">
  <h2 style="font-size:35px;font-family:sans-serif;">Learning How to add inline CSS.</h2>
  <p style="color:white;font-size:20px">Added inline styles to the elements.</p>
</body>
Try it

Order of Cascading

In CSS, when there is 2 or more than 2 CSS property for an element and all have the same specificity then the style rule that comes last in the file will be used.


Frequently Asked Questions

  1. How do you add CSS to HTML?

    There are 3 ways to add CSS to HTML. They are External CSS, Internal CSS, and Inline CSS.

  2. What is the difference between external and internal CSS?

    External CSS is the CSS code that is written in a separate file and is linked to the HTML file. Internal CSS is the CSS code that is written within the HTML file itself.

  3. Can you put CSS and HTML together?

    Yes, you can put CSS and HTML together. Within the HTML file you can write CSS code in the <style> element.