Horje
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;
}
#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

/* Geeks.css */
.main {
    text-align: center;
}
  
.GFG {
    font-size: 60px;
    color: green;
}
  
#geeks {
    font-size: 25px;
    color: skyblue;
};

Output:

chrome-capture-2023-6-26-(2)

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

/* Geeks.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:
chrome-capture-2023-6-26-(4)

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

 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Internal CSS Internal CSS
How to Invoke the Compiler From the Command Line ? How to Invoke the Compiler From the Command Line ?
Why Does z-index Not Work with Fixed Positioning in CSS ? Why Does z-index Not Work with Fixed Positioning in CSS ?
How to add CSS How to add CSS
How to Set 100% Height with Padding/Margin in CSS ? How to Set 100% Height with Padding/Margin in CSS ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje