How to use CSS external style sheets in HTML

In this post, we will know about external style sheets in CSS. If you want to know about embedded style sheets in CSS, then here’s the link – https://developerxon.com/2022/07/06/embedded-style-sheets-in-css/

What is external style sheet?

An external style sheet is a way to apply style information to a webpage by creating a separate CSS file and linking it to the webpage.

How to use external CSS?

Now let’s see an example of how to link external CSS to HTML.

external_css_example.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>External style sheet example</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
           Quisque viverra iaculis placerat. Aliquam urna diam,
           mollis sit amet elit et, posuere mattis ipsum. Curabitur 
           quis quam gravida, dapibus lacus at, dapibus elit.
           Nam non finibus velit. Vestibulum ante ipsum primis 
           in faucibus orci luctus et ultrices posuere cubilia
           curae; Vivamus convallis dolor id neque ultrices bibendum. 
           Suspendisse potenti. In blandit, lorem a feugiat condimentum, 
           elit orci vestibulum felis, a lobortis est sem ullamcorper 
           ipsum. Morbi tincidunt mauris orci, id varius est lacinia vitae.
           Phasellus viverra tempor mi eu semper.
        </p>
    </body>
</html>

styles.css

h1{
    text-align: center;
    font-family: sans-serif;
    color: brown;
}
p{
    margin-left: 20%;
    margin-right: 20%;
    padding-left: 5%;
    padding-right: 5%;
    background-color: lavender;
}

Here, I have shared two separate files. One is an HTML file and another one is a CSS file. I have linked the styles.css file to the HTML page using the <link> tag within the head section of the HTML file.

Did you notice the advantage here?

The advantage here is that I can link the above styles.css file to multiple web pages using the <link> tag and whenever I need to change the look of all the pages then I will have to make changes to just one file.

Output :

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: