External CSS
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;
}
#Beginner {
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 = "Beginner.css" /> </ head > < body > < div class = "main" > < h1 class = "GFG" > w3wiki </ h1 > < p id = "Beginner" > A computer science portal for Beginner </ p > </ div > </ body > </ html > |
CSS
/* Beginner.css */ .main { text-align : center ; } .GFG { font-size : 60px ; color : green ; } #Beginner { 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 = "Beginner.css" > </ head > < body > < h1 >w3wiki</ h1 > < p > A computer science portal for Beginner. </ p > < div class = "Beginner" > < h2 >HTML</ h2 > < p > HTML stands for Hyper Text Markup Language. </ p > </ div > < div class = "Beginner" > < h2 >CSS</ h2 > < p > CSS stands for Cascading Style Sheet. </ p > </ div > </ body > </ html > |
CSS
/* Beginner.css */ h 1 { color : green ; margin-bottom : 10px ; } p { font-size : 18px ; line-height : 1.6 ; margin-bottom : 30px ; } .Beginner { 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% ; } .Beginner h 2 { color : green ; font-size : 24px ; margin-bottom : 10px ; } .Beginner 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