Tutorials Tonight
Follow Us

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. How to include external CSS file in HTML

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

To write CSS code make a separate file and save it with the .css extension and write your CSS code in it.

Now to link this CSS file to your HTML file, you need to use <link> tag in the <head> section of your HTML file.

To connect a CSS file give the URL of the stylesheet to the href attribute and set rel="stylesheet".

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

Write your CSS code in an external file and save it with a .css extension.

This external CSS file should purely contain CSS code.

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 both external stylesheets are added to the HTML file.

If there are 2 different values for the same CSS property for any element then priority will be given to that stylesheet which is below in the head element.

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

Benefits of using external style

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


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.

The CSS is written in 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 the web page other than external. The internal style is used for a single page style within the page.

Internal style makes webpage load slower and also makes HTML documents larger.

Example

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

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

    p {
        font-size: 20px;
        color: white;
    }
  </style>
</head>
▶ 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.


  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.