Applying CSS in HTML

There are three main ways to apply CSS to your HTML documents: inline styles, <style> tags within the HTML file, and external CSS stylesheets. Each method has its use cases and benefits.

Inline Styles

Inline styles are applied directly to HTML elements using the style attribute. This method is helpful for quick, specific changes, but it is not ideal for larger projects because it mixes content with presentation and makes the HTML harder to maintain.

Here's an example of a <h1> and <p> that have styles applied directly in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Styles Example</title>
</head>
<body>
    <h1 style="color: blue; font-size: 24px;">Hello, World!</h1>
    <p style="color: green; background-color: yellow;">This is a paragraph with inline styles.</p>
</body>
</html>

Style Tags

Internal styles are defined within a <style> tag in the <head> section of the HTML document. This method is helpful for styling a single page and keeps the CSS separate from the HTML content.

Let's see them in action:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Styles Example</title>
    <style>
        h1 {
            color: red;
            font-size: 26px;
        }
        p {
            color: blue;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph styled CSS style tags.</p>
</body>
</html>

External CSS Stylesheets

External stylesheets are separate CSS files linked to the HTML document using the <link> tag with the attribute rel="stylesheet". CSS files are created by using the .css file name extension.

For example, if we had a file called style.css we connect using <link rel="stylesheet" href="styles.css">

This is added in the <head> tag.

Let's look at how. First, create a HTML file named index.html and don't forget to add a <link> tag with the href="styles.css":

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

Then create a CSS file named styles.css with the following content:

/* styles.css */
h1 {
    color: purple;
    font-size: 28px;
}

p {
    color: darkblue;
    background-color: lightyellow;
}

Pros and Cons

Inline Styles:
- Quick and easy for small changes.
- Useful for testing or debugging.
- Not recommended for larger projects due to maintenance challenges.
Internal Styles:
- Keeps CSS separate from HTML content.
- Useful for single-page applications.
- Easier to maintain than inline styles but still limited to single pages.
External Stylesheets:
- Ideal for larger projects and multi-page websites.
- Promotes clean and maintainable code.
- Allows for consistent styling across multiple pages.

Homework

Create an HTML File:

Use inline styles to style an element.
Use internal styles to style another element.
Link an external stylesheet and style additional elements.

Each method has its own use cases and benefits, and understanding when to use each will help you write more effective and maintainable CSS.