External CSS

Part of the Styling with CSS section of Coddy's HTML journey — lesson 8 of 76.

External CSS is a method of adding CSS styles to an HTML document by placing them in a separate CSS file and linking that file to the HTML document using the <link> tag. This approach allows you to apply the same styles to multiple HTML pages, making it easier to maintain and update the design of your website. External CSS is ideal for large projects where consistency and efficiency are crucial.

Here's how to use external CSS:

Create a CSS file (e.g., styles.css) with your CSS rules:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. Link the CSS file to your HTML document by adding a <link> tag in the <head> section:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

In this example, the <link> tag connects the styles.css file to the HTML document. The rel attribute specifies the relationship between the HTML document and the linked file (stylesheet), and the href attribute specifies the path to the CSS file.

Challenge

Easy

You are given HTML and CSS files (index.html and styles.css), add a link tag in the HTML file to connect the files and add the styles to the HTML file!

Cheat sheet

External CSS allows you to place CSS styles in a separate file and link it to HTML documents using the <link> tag.

Create a CSS file with your styles:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

Link the CSS file in the HTML <head> section:

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

The rel attribute specifies the relationship (stylesheet) and href specifies the path to the CSS file.

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>