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 :
DeveloperXon 
Leave a Reply