html

Where in an HTML Document is the Correct Place to Refer to an External Style Sheet

2 years ago
by Adnan Shabbir
An HTML page has two main parts, first is head and the second is the body. The head tag is the one that contains the HTML page title as well as all the links to the external files. HTML provides the facility to add the reference to an external style sheet in any part of the document. However, we need to choose the correct and the best place to add the external style sheet.

This post aims to address the correct place where you can add an external sheet in an HTML document.

What is the correct place to refer to an external style sheet in HTML?

As mentioned earlier, you can add the link to the external sheet anywhere in the HTML document. However, the best practice is to add it inside the <head> tag. If the style sheet is added in the <head> tag, it takes less time to load as opposed to if it is added somewhere else in the HTML document.
Let’s see how a style sheet can be added in the <head> tag.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>First Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="one">Section 1</div>
        <div class="two">Section 2</div>
    </body>
</html>

In this code, we have created two divisions using the <div> tag. The link of the external style sheet is added inside the head section using the <link> tag. The “href” attribute that specifies the location of the external style sheet.

The code of the CSS file is provided below.

CSS

div
{
    text-align: center;
    font-size: 30px;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height:150px;
    width:98%;
}
.one
{
    background-color:limegreen;
}
.two
{
    background-color:orange;
}

This CSS code is written in an external style sheet.

Output

The output shows that the style is applied successfully on the two divs.
That’s it! You have come to know about the right place to add reference to an external style sheet in HTML.

Conclusion

In an HTML document, the <head> tag is the right place to add the reference of an external style sheet. The stylesheet loads faster when placed inside the <head> tag. This post has provided information on the right place to add reference for an external style sheet in HTML. Additionally, you have also learned how an external style sheet is linked with the HTML document.

About the author

Adnan Shabbir

View all posts