Add External CSS

What is External CSS?

External CSS is a method of styling HTML pages by writing all CSS rules in a separate .css file and linking that file to one or more HTML documents. This is the most commonly used method for designing websites because it keeps the HTML clean and allows the same stylesheet to be reused across multiple web pages.

Why Use External CSS?

External CSS helps keep your website organized and easier to maintain. Instead of writing CSS inside every HTML page, you can write it once in a separate stylesheet and use it on multiple pages. This saves time, reduces duplicate code, and ensures a consistent design throughout your website.

Syntax of External CSS

<head>
    <link rel="stylesheet" href="style.css">
</head>

Step 1: Create a CSS File

Create a new file with the .css extension. For example, style.css. Write all your CSS rules inside this file.

/* style.css */

body {
    background-color: #f2f2f2;
}

h1 {
    color: blue;
}

p {
    font-size: 18px;
}

Step 2: Link the CSS File

After creating the CSS file, link it inside the <head> section of your HTML document using the <link> element.

<!DOCTYPE html>
<html>
<head>

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

</head>
<body>

<h1>Welcome</h1>
<p>This page uses external CSS.</p>

</body>
</html>

How External CSS Works

When a browser loads an HTML page, it reads the <link> tag inside the <head> section. The browser then downloads the referenced CSS file and applies all the styles to the HTML elements. Multiple HTML pages can use the same CSS file.

Example of External CSS

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>

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

</head>
<body>

<h1>Academic Block</h1>
<p>Learning CSS is easy.</p>

</body>
</html>


/* style.css */

body{
    background:#f4f4f4;
    font-family:Arial;
}

h1{
    color:#0066cc;
}

p{
    color:#333;
    font-size:18px;
}

Advantages of External CSS

Reusable

One File

Use one stylesheet for multiple web pages.

Easy Maintenance

Quick Updates

Edit one CSS file to update the whole website.

Cleaner HTML

Readable Code

Separates design from HTML content.

Faster Loading

Browser Cache

Browsers can cache the CSS file for better performance.

Consistent Design

Uniform Style

Keeps the same appearance across all pages.

Common Mistakes

Beginners often make mistakes such as using the wrong file name, incorrect file path, forgetting the rel=”stylesheet” attribute, or placing the <link> tag outside the <head> section. Any of these mistakes can prevent the stylesheet from loading.

<!-- Incorrect -->

<link href="style.css">

<!-- Correct -->

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

Best Practices

Keep all CSS in a separate stylesheet whenever possible.
Use meaningful CSS file names like style.css or main.css.
Store CSS files inside a dedicated css folder.
Always place the <link> tag inside the <head> section.
Use one stylesheet for multiple pages to maintain consistency.
Check the file path carefully if the CSS does not load.
Organize CSS with comments for better readability.
Minify CSS files in production websites for faster loading.

Web Resources on How to add External CSS

1. MDN Web Docs : <link> HTML external resource link element
2. MDN Web Docs : Getting started with CSS.
3. Dev.to : How to add CSS to HTML files.

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.