How to Link a CSS to HTML?

Last Updated : 02 Jul, 2025

To apply custom styles to your HTML webpage, it's best practice to keep your CSS code in a separate file. In fact, over 90% of modern websites follow this approach for better organization and maintainability. Simply create a CSS file (e.g., styles.css) and write your styling rules in it. Then, use the <link> element within the <head> section of your HTML file to connect the CSS and apply the styles effectively.

how_to_link_css_html_ — How to link a CSS to HTML

Methods of Linking CSS to HTML

When it comes to styling an HTML document with CSS, there are three primary methods, each suited for different use cases:

External CSS
Internal CSS
Inline CSS

External CSS

External CSS is a powerful way to style HTML by linking a separate .css file to your webpage. It keeps your code clean, reusable, and easy to manage across multiple pages. With just one link, you can control the entire site’s design from a single stylesheet. This method is ideal for scalability and professional web development.

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.

Example 1

index.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>

styles.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

Note: While using External CSS you should always double check the file-path in the href - even a small typo can break your entire design. Place the <link> tag before any script tags to ensure styles loads before content renders.

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.

Internal CSS

Internal CSS is a method of applying styles directly within an HTML files using the <style> tag , usually located inside the <head> section . It allows you to define styles that apply only to that specific page, making it suitable for single page custom design not reusable across multiple pages.

Syntax

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

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

Example 2

index.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 is a styling method where CSS rules are applied directly to individual HTML elements using the style attribute. It is best suited for quick styling changes or when you need to apply unique styles to a single element. However, it’s not ideal for large projects, as it can make the code cluttered and hard to maintain.

Syntax

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

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

Example 3

index.html

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

Output