The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Linking CSS to HTML

Next ►
►

In this lesson, we will learn how to link CSS (Cascading Style Sheets) to HTML to style our web pages. CSS is used to control the presentation of HTML elements, including layout, colors, fonts, and more. There are three main ways to apply CSS to HTML: inline styles, internal styles, and external stylesheets.

  1. Inline Styles

Inline styles are applied directly to HTML elements using the style attribute. This method is useful for quick, one-off styles but is not recommended for larger projects due to poor maintainability.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Styles Example</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Hello, World!</h1>
    <p style="font-size: 20px; color: green;">This is a paragraph with inline styles.</p>
</body>
</html>

Explanation:

  • The style attribute is used within the HTML tag.
  • CSS properties and values are written as key-value pairs, separated by a colon and ended with a semicolon.

  1. Internal Styles

Internal styles are defined within the <style> tag inside the <head> section of the HTML document. This method is suitable for single-page websites or when you need to apply styles that are specific to a single page.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal Styles Example</title>
    <style>
        body {
            background-color: lightgrey;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph with internal styles.</p>
</body>
</html>

Explanation:

  • The <style> tag is placed inside the <head> section.
  • CSS rules are written within the <style> tag, targeting HTML elements by their tags, classes, or IDs.

  1. External Stylesheets

External stylesheets are separate CSS files linked to the HTML document using the <link> tag. This method is the most efficient and maintainable way to apply styles, especially for multi-page websites.

Example:

HTML File (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External Stylesheet Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph with external styles.</p>
</body>
</html>

CSS File (styles.css):

body {
    background-color: lightgrey;
}
h1 {
    color: blue;
    text-align: center;
}
p {
    font-size: 20px;
    color: green;
}

Explanation:

  • The <link> tag is used to link the external CSS file to the HTML document.
  • The rel attribute specifies the relationship between the HTML document and the linked file (stylesheet).
  • The href attribute specifies the path to the CSS file.

Practical Exercise

Task:

Create an HTML file and a separate CSS file. Link the CSS file to the HTML file and apply styles to the following elements:

  • Set the background color of the body to #f0f0f0.
  • Center-align the text of all <h1> elements and set their color to #333.
  • Set the font size of all <p> elements to 18px and their color to #666.

Solution:

HTML File (exercise.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise: Linking CSS</title>
    <link rel="stylesheet" href="exercise-styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph styled with an external stylesheet.</p>
</body>
</html>

CSS File (exercise-styles.css):

body {
    background-color: #f0f0f0;
}
h1 {
    text-align: center;
    color: #333;
}
p {
    font-size: 18px;
    color: #666;
}

Summary

In this lesson, we covered three methods to link CSS to HTML:

  1. Inline Styles: Applied directly to HTML elements using the style attribute.
  2. Internal Styles: Defined within the <style> tag inside the <head> section.
  3. External Stylesheets: Linked using the <link> tag, allowing for better maintainability and reusability.

Understanding these methods is crucial for effectively styling web pages and creating visually appealing websites. In the next lesson, we will explore the different ways to include CSS in more detail and discuss their advantages and disadvantages.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved