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:
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
h 1 {
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 h 2 {
color : green ;
font-size : 24px ;
margin-bottom : 10px ;
}
.geeks p {
text-align : center ;
font-size : 16px ;
color : black ;
}
|
Output:
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...