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"> 
            w3wiki 
        </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:

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>w3wiki</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:

External CSS

Tags:

#CSS-Basics #CSS #Web Technologies

What is External CSS ?

Advantages of External CSS

How to Link a CSS File to an HTML File ?

HTML

CSS

HTML

CSS

External CSS

Similar Reads

Contact Us