External CSS
Last Updated :
18 Sep, 2023
What is External CSS ?
External CSS is used to style multiple HTML pages with a single style sheet. External CSS contains a separate CSS file with a .css extension. The CSS file contains style properties added on selectors (For example class, id, heading, … etc.).
How to Link a CSS File to an HTML File ?
To link a CSS file to an HTML file, use the <link> element within the HTML file’s <head> section with the rel attribute set to “stylesheet” and the href attribute specifying the CSS file’s path.
CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. External CSS sets styles for elements once and applies them consistently across multiple web pages, ensuring a unified design.
Syntax:
.main {
text-align: center;
}
.GFG {
font-size: 60px;
color: green;
}
#geeks {
font-size: 25px;
color: skyblue;
};
Example: In this example, we are using an external CSS style to provide styling to our div , h1 and p tag.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css" />
</head>
<body>
<div class="main">
<h1 class="GFG">
GeeksForGeeks
</h1>
<p id="geeks">
A computer science portal for geeks
</p>
</div>
</body>
</html>
|
CSS
.main {
text-align: center;
}
.GFG {
font-size: 60px;
color: green;
}
#geeks {
font-size: 25px;
color: skyblue;
};
|
Output:
.png)
Example 2: In this example, we use external CSS to target our HTML elements, here we are making cards.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="geeks.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
A computer science portal for geeks.
</p>
<div class="geeks">
<h2>HTML</h2>
<p>
HTML stands for Hyper Text Markup Language.
</p>
</div>
<div class="geeks">
<h2>CSS</h2>
<p>
CSS stands for Cascading Style Sheet.
</p>
</div>
</body>
</html>
|
CSS
h1 {
color: green;
margin-bottom: 10px;
}
p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 30px;
}
.geeks {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 2px solid black;
border-radius: 10px;
background-color: skyblue;
margin-bottom: 10px;
width: 20%;
}
.geeks h2 {
color: green;
font-size: 24px;
margin-bottom: 10px;
}
.geeks p {
text-align: center;
font-size: 16px;
color: black;
}
|
Output:
.png)
Advantages of External CSS
- Improved maintainability and code organization.
- Enhanced reusability across multiple HTML files.
- Efficient caching and faster page load times.
Disadvantages of External CSS
- Pages may not render correctly until the external CSS is loaded.
- Uploading or linking to multiple CSS files may increase your site’s download time, affecting its overall performance.
- Large-scale projects may face versioning and caching challenges when using external CSS
Share your thoughts in the comments
Please Login to comment...