CSS External

CSS External

External CSS is a method of adding CSS styles to HTML documents using a separate CSS file. The CSS code is written in a file with the .css extension and connected to an HTML document using the <link> element.

External CSS is the most recommended method for styling professional websites because it allows developers to reuse the same stylesheet across multiple HTML pages and keeps HTML content separate from CSS design.

1. External CSS Syntax

The basic syntax for connecting an external CSS file to an HTML document is:

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

This element is placed inside the <head> section of the HTML document.

Here:

• link: Connects an external resource to the HTML document.
• rel="stylesheet": Specifies that the linked file is a stylesheet.
• href="style.css": Specifies the location of the CSS file.

2. Create an HTML File

First, create an HTML file named index.html.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>

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

    <h1>Welcome to CodingRider</h1>

    <p>This webpage uses external CSS.</p>

    <button>Start Learning</button>

</body>
</html>

3. Create an External CSS File

Next, create a separate CSS file named style.css.

Example:

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

h1 {
    color: blue;
    text-align: center;
}

p {
    color: green;
    font-size: 18px;
}

button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
}

This CSS file contains all the styles for the HTML webpage.

4. External CSS File Structure

Your project folder should look like this:

my-website/
│
├── index.html
└── style.css

Both files are located in the same folder, so you can connect them using href="style.css".

5. External CSS with Class Selectors

External CSS supports class selectors, allowing you to reuse the same styles for multiple HTML elements.

Example in style.css:

.card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px #0002;
}

Example in index.html:

<div class="card">
    <h2>Learn CSS</h2>
    <p>CSS makes websites attractive.</p>
</div>

The card class can be used on multiple elements throughout the webpage.

6. External CSS for Multiple HTML Pages

One of the biggest advantages of external CSS is that the same stylesheet can be connected to multiple HTML pages.

Example:

index.html

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

about.html

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

contact.html

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

All three webpages can use the same CSS file. If you update the stylesheet, the changes can apply to all pages that use it.

7. Advantages of External CSS

• Separates HTML content from CSS design.
• Allows one stylesheet to style multiple webpages.
• Makes website maintenance easier.
• Reduces repeated CSS code.
• Keeps HTML documents cleaner and more readable.
• Supports responsive designs using media queries.
• Supports CSS animations, transitions, and advanced selectors.
• Browsers can cache external stylesheets, potentially improving page loading performance on subsequent visits.

8. Disadvantages of External CSS

• Requires an additional CSS file.
• The stylesheet must be linked correctly.
• If the CSS file path is incorrect, the styles may not load.
• A stylesheet request may affect the initial rendering of the webpage.

9. Common External CSS File Paths

You can connect external CSS files using different file paths.

Same folder:

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

CSS folder:

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

Parent folder:

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

The correct path depends on the location of your HTML file and CSS file.

10. Best Practices for External CSS

• Use meaningful CSS file names such as style.css or main.css.
• Keep CSS files organized inside a dedicated css folder.
• Use class selectors for reusable styles.
• Avoid unnecessary duplicate CSS declarations.
• Use comments to explain complex styles.
• Use responsive media queries for mobile-friendly websites.

Conclusion

External CSS is an efficient and professional way to style HTML webpages. By creating a separate CSS file and connecting it with the HTML document using the <link> element, developers can maintain consistent designs across multiple pages and manage website styling more easily.

Practice Tasks

1. Create an HTML file named index.html.
2. Create an external CSS file named style.css.
3. Connect the CSS file to your HTML document.
4. Change the heading color and paragraph font size using external CSS.
5. Create a reusable card design using a class selector.
6. Connect the same stylesheet to two different HTML pages.