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!

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>