CSS Links

CSS links are used to apply external stylesheets to your HTML documents, allowing you to control the appearance of your web pages in a consistent way. You link to a CSS file using the <link> element in the <head> section of your HTML document.

Here’s a basic example to demonstrate how CSS links work:

Example HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Link Example</title>
    <!-- Link to the external CSS file -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph styled with an external CSS file.</p>
</body>
</html>

Example CSS (styles.css)

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

h1 {
    color: #2c3e50;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
    margin: 20px;
}

Explanation

HTML File:
- The <link> element in the <head> section connects to the external CSS file (styles.css).
- The rel="stylesheet" attribute specifies that the file is a stylesheet.
- The href="styles.css" attribute provides the path to the CSS file.
CSS File:
- The CSS file (styles.css) contains styling rules for HTML elements.
- body styles the entire page with a specific font, background color, and text color.
- h1 styles headers with a specific color and center alignment.
- p styles paragraphs with font size, line height, and margin.

By separating your CSS into an external file, you can keep your HTML clean and manage styles more efficiently. Plus, it allows you to apply the same styles across multiple HTML pages by linking the same CSS file.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us