Understanding External CSS

What is External CSS?

External CSS is a method of applying styles to a webpage by linking an external stylesheet file. The styles are written in a separate file with the .css extension and are applied to the HTML document using the <link> tag in the <head> section.

Syntax:

External CSS is linked to an HTML file using the following syntax:

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

The styles.css file will contain CSS rules like this:

/* styles.css */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #555;
    line-height: 1.6;
}

Example:

Here is how an external CSS file is used with an HTML document:

Assignment:

You will need to create an external css file. Name it CSSExternal.css.

You will need to change the h1 color.

You will need to change the p color.

You will need to change the background color.

Example with External CSS

Welcome to External CSS

This paragraph is styled using an external stylesheet.

Pros of External CSS:

Reusability: A single stylesheet can be linked to multiple HTML files, making it easy to maintain consistent styles across a website.
Separation of Concerns: Keeps HTML and CSS separate, improving readability and maintainability.
Scalability: Ideal for large and complex projects.

Cons of External CSS:

Additional HTTP Request: Requires the browser to load an additional file, which can slightly increase load times.
Dependency: If the external stylesheet is missing or inaccessible, the webpage will lose its styles.

When to Use External CSS:

External CSS is best used for:

Websites with multiple pages requiring consistent styling.
Large-scale projects where separating structure (HTML) and presentation (CSS) is essential.
Collaborative projects where multiple developers work on the same codebase.