Include CSS File to HTML

There are three ways of inserting a style sheet:

  • External CSS
  • Internal CSS
  • Inline CSS

Inline CSS

An inline style is commonly used for an element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

<!DOCTYPE html>
<html>
    <body>
        <h1 style="color:blue;">heading</h1>
    </body>
</html>

Internal CSS

An internal style is used for an HTML page. The internal style is defined inside the <style> element, inside the head section.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: gray;
        }
    </style>
</head>
<body>
</body>
</html>

External CSS

In this method, you write the desired style once and only by linking to it, you can apply changes to the HTML tags and with an external style sheet, you can change the look of an entire website by changing just one file.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Here is how the “style.css” file looks:

body {
    background-color: gray;
}

Which One Is Better?

The quick answer is the external file. Here is why:

  • In inline you have to add style to every element and it is time-consuming and not good for SEO at all.
  • As you know, page load time is important. The inline method grows the page size massively and messy.
  • In the internal method, you have to duplicate all styles into every page. It is not worst than the Inline method and also is not a good choice.
  • As we said above, in the external method, you define styles once and use them everywhere by including files on the page.