Add CSS to HTML

To add CSS styles to an HTML document, we typically use the

Using the <style> Element:

We can include CSS directly within the HTML document using the

Place the

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Your Website Page Title</title>
    <style>
        /* CSS styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: green;
        }
        .highlight {
            background-color: red;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p class="highlight">This paragraph is highlighted with css.</p>
    <p>This is a Normal paragraph.</p>
</body>
</html>

Using Inline CSS:

We can include CSS directly within the HTML element using the

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Your Website Page Title</title>
</head>
<body>

    <h1 style="color: green;">Welcome to My Web Page</h1>
    <p style="background-color: red;">This paragraph is highlighted with css.</p>
    <p>This is a Normal paragraph.</p>

</body>
</html>

add the

Using External CSS File:

Example:

<!-- index.html -->

<!DOCTYPE html>
<html>

<head>
    <title>Your Website Page Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <h1>Welcome to My Web Page</h1>
    <p class="highlight">This paragraph is highlighted with css.</p>
    <p>This is a Normal paragraph.</p>
</body>
</html>

Example:

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
h1 {
    color: blue;
}
.highlight {
    background-color: yellow;
}

Alternatively, we can create a separate CSS file with our styles and link it to your HTML document using the element.

This method is preferred for larger projects or when we want to reuse styles across multiple pages.

<-- Selector

CSS Colors -->