8 min read HTML 3 views

How to Add CSS to HTML

CSS can be added to HTML documents in three different ways. These methods are called Inline CSS, Internal CSS, and External CSS.

CSS is used to style HTML elements by changing their colors, fonts, backgrounds, layouts, spacing, and other visual properties.

1. Inline CSS

Inline CSS is used to apply styles directly to an HTML element using the style attribute.

Inline CSS affects only the HTML element where the style attribute is written.

Example:

<!DOCTYPE html>
<html>
<body>

    <h1 style="color: blue;">Welcome to CodingRider</h1>

    <p style="font-size: 20px; color: green;">
        This is an inline CSS example.
    </p>

</body>
</html>

Output:

The heading will appear in blue, and the paragraph will appear in green with a font size of 20px.

Note: Inline CSS is useful for quick styling, but it is generally not recommended for styling large websites because it makes HTML difficult to maintain.

2. Internal CSS

Internal CSS is used to define styles inside the <style> element within the HTML document's <head> section.

Internal CSS is useful when you want to style a single HTML page without creating a separate CSS file.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>

    <style>
        h1 {
            color: blue;
            text-align: center;
        }

        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h1>Welcome to CodingRider</h1>
    <p>This is an internal CSS example.</p>

</body>
</html>

Output:

The heading will be blue and centered, while the paragraph will be green with a font size of 18px.

3. External CSS

External CSS is used to create a separate CSS file and connect it to an HTML document using the <link> element.

External CSS is the most recommended method for styling large websites because it separates HTML content from CSS design and allows multiple pages to share the same stylesheet.

Step 1: Create an HTML File

Create a file named index.html.

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Welcome to CodingRider</h1>
    <p>This is an external CSS example.</p>

</body>
</html>

Step 2: Create a CSS File

Create another file named style.css in the same folder.

h1 {
    color: blue;
    text-align: center;
}

p {
    color: green;
    font-size: 18px;
}

Step 3: Connect the CSS File

The following line connects the external CSS file to the HTML document:

<link rel="stylesheet" href="style.css">

The href attribute specifies the location of the CSS file, while rel="stylesheet" identifies the linked file as a stylesheet.

4. External CSS File Structure

Your project folder should look like this:

my-website/
│
├── index.html
└── style.css

Both files are located in the same folder, so you can use href="style.css" to connect them.

5. Difference Between Inline, Internal, and External CSS

CSS Type	Location	Usage
Inline CSS	Inside the HTML style attribute	Styles a specific element.
Internal CSS	Inside the style element	Styles a single HTML page.
External CSS	Inside a separate .css file	Styles multiple webpages.

6. Which CSS Method Should You Use?

Inline CSS: Use for quick testing or special one-time styles.
Internal CSS: Use for small webpages or single-page demonstrations.
External CSS: Use for professional websites and multi-page projects.

Best Practice: External CSS is generally the best choice for real-world websites because it improves code organization, maintainability, and style reuse.

Conclusion

CSS can be added to HTML using inline, internal, or external methods. Each method has its own purpose, but external CSS is the most commonly recommended approach for modern web development.

Practice Tasks

Create an HTML heading and apply inline CSS to change its color.
Create an internal stylesheet and style a paragraph.
Create an external CSS file named style.css.
Connect the external stylesheet to your HTML page.
Create a webpage using external CSS with a heading, paragraph, and button.

html Example

Run Code


<!DOCTYPE html>
<html>
<head>
    <title>How to Add CSS to HTML</title>

    <!-- Internal CSS -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f4f8;
            text-align: center;
            padding: 30px;
        }

        h1 {
            color: blue;
        }

        p {
            color: green;
            font-size: 18px;
        }

        .button {
            background-color: #2563eb;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 6px;
        }
    </style>
</head>
<body>

    <!-- Inline CSS -->
    <h1 style="color: purple;">Welcome to CodingRider</h1>

    <p>This webpage uses internal CSS.</p>

    <button class="button">Start Learning</button>

</body>
</html>

How to Add CSS to HTML