Tutorials Tonight's Logo

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 beautify an HTML file you need to use CSS 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 3 CSS implementation methods:

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


1. How to include external CSS file in HTML

To write CSS code you can make a separate CSS file and then link it with your HTML file (recommended way to include CSS). This separate file is called an external stylesheet.

To connect an external stylesheet with your HTML file use <link> element.

The <link> element is used in the head section of the 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">.

<head>
  <link rel="stylesheet" href="external.css">
</head>
▶ Run the code

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: #182C61;
}

h2 {
  color: #CAD3C8;
}

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

Including multiple external stylesheet

You can add multiple external style sheet 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 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:

  • 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 use 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 page 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 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.

The CSS is written in the head section of the HTML file inside <style> element.

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.

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

    h2 {
      color: #CAD3C8;
    }

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

3. inline CSS in HTML

Inline style 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 single-quotes or double-quotes. Example <p style="color: blue;">Hello World!</p>.

<body style="background-color:#182C61">
  <h2 style="color:#CAD3C8">Learning How to add inline CSS.</h2>
  <p style="color:white;font-size:20px">Added inline styles to the elements.</p>
</body>
▶ Run the code

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.

  • If in an external stylesheet there are such rules than the last rule in the stylesheet will be used.
  • If there are 2 different external stylesheets that have such rules than the rule of the stylesheet that is linked kast in the head section is used.

Points to remember:

  1. There are 3 ways to include CSS in HTML file: external, internal and inline CSS.
  2. Multiple stylesheets can be added to a single HTML file.
  3. The inline style has the highest priority, it overwrites external and internal CSS.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.