How to Link a CSS to HTML?

Last Updated : 19 Nov, 2024

To link a CSS file to an HTML file, Create a separate CSS file (styles.css) and write styles on it. Now we need to use the <link> element inside the <head> section of the HTML file to attach the CSS file.

Syntax:

<link rel="stylesheet" href="styles.css">

rel="stylesheet": It specifies the relationship between the current document and the linked file of the webpage.
href="styles.css": It specifies the path to the CSS file. This path can be relative or absolute to the stylesheet.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href="styles.css">
</head>
  
<body>
    <h1>Welcome to GeeksforGeeks</h1>
    <p>
      	This paragraph is styled using external CSS. 
      	The styles are defined in a separate CSS file 
      	and linked to this HTML file.
  	</p>
</body>
  
</html>

CSS

/* styles.css */

body {
    background-color: #ffffff;
    font-family: Arial, sans-serif;
}

h1 {
    color: #09912b;
    text-align: center;
}

p {
    font-size: 18px;
    line-height: 1.6;
    color: #0a0a0a;
}

Output

Benefits of the External CSS

Reusability: One CSS file can be used to style the multiple HTML documents, which saves the time and effort.
Maintenance: Makes it can easier to manage the styles since all the CSS rules are in the one place. Changes to the stylesheet will be reflected across all the linked HTML files.
Performance: It can be browsers the cache external CSS file, which can reduces the loading time of the web pages after the first load.
Clean Code: It can keeps the HTML files less cluttered and more readable since styling is handled separately.

There are further ways to add CSS in HTML.

Internal CSS

Internal CSS involves writing CSS rules within the HTML page using the <style> tag, typically placed in the <head> section. It applies styles to a single HTML document and cannot be reused by other pages.

Syntax:

We can use the <style> element within the <head> section to define the internal CSS:

<style>
    /* CSS rules go here */
</style>

Example:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            background-color: #e0e0e0;
            font-family: 'Courier New', Courier, monospace;
        }

        h2 {
            color: #09912b;
            text-align: left;
        }

        p {
            font-size: 16px;
            color:  #0a0a0a;
        }
    </style>
    <title>Internal CSS Example</title>
</head>
  
<body>
    <h2>Internal CSS Demo GeeksforGeeks</h2>
    <p>
      	This paragraph is styled using internal CSS. 
      	The styles are defined within the 
      	&lt;style&gt; tag inside the HTML document.
	</p>
</body>
      
</html

Output

Benefits of the Internal CSS

Single Document Styling: It can be used for applying the styles to only one HTML document without affecting others.
Overriding the External Styles: Internal CSS can override the styles from the external stylesheet if both are used, due to the higher specificity of the internal styles.

Inline CSS

Inline CSS can applies styles directly to individuals HTML elements using the style attributes.

Syntax:

It can add the style attribute directly to the HTML element:

<element style="property: value;">
    <!-- Content -->
</element>

HTML

<h3 style="color: green; font-size: 24px;">
    Inline CSS Example GeeksforGeeks
</h3>
<p style="background-color: yellow; padding: 10px;">
    This paragraph is styled using inline CSS.
    The styles are applied directly to the HTML
    element using the style attribute.
</p>

Output

Benefits of the Inline CSS

Quick Fixes: It can be useful for making the quick changes or testing styles directly within the HTML document.
Specificity: Inline styles have the highest specificity, which means they will override both the internal or external styles in the webpage.
No need for Separate Files: All styling information can be included directly in the HTML, which can be convenient for the very small or one-off projects.

How to Add Tailwind CSS to HTML ?

seepanarajvskq

Improve

Article Tags :

How to Link a CSS to HTML?

Syntax:

Benefits of the External CSS

Internal CSS

Syntax:

Output

Benefits of the Internal CSS

Inline CSS

Syntax:

Output

Benefits of the Inline CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?