how to use inline, internal, and external CSS in HTML

#programming #beginners #html #css

1.Inline CSS:

Inline CSS is applied directly to HTML elements using the style attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>
</head>
<body>
    <h1 style="color: blue; text-transform: uppercase;">Sudhanshu Developer</h1>
    <p style="font-size: 16px; color: gray;">This is an example of inline CSS.</p>
</body>
</html>

2.Internal CSS

Internal CSSis written inside a <style> tag within the <head> section.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>
    <style>
        h1 {
            color: green;
            text-transform: uppercase;
        }
        p {
            font-size: 18px;
            color: darkgray;
        }
    </style>
</head>
<body>
    <h1>Sudhanshu Developer</h1>
    <p>This is an example of internal CSS.</p>
</body>
</html>

3.External CSS

External CSS is written in a separate .css file and linked using the <link> tag.

Step 1: Create a styles.css file

/* styles.css */
h1 {
    color: red;
    text-transform: uppercase;
}
p {
    font-size: 20px;
    color: darkblue;
}

Step 2: Link styles.css to your index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Sudhanshu Developer</h1>
    <p>This is an example of external CSS.</p>
</body>
</html>

Key Fixes & Improvements

✔ Proper indentation for better readability.
✔ Added meta viewport tag for responsiveness.
✔ Kept color names consistent (darkblue, darkgray, etc.).
✔ Clearly separated steps for external CSSto avoid confusion.

Conclusion

Now, you have learned three different ways to apply CSSto HTML:

Inline CSS (Quick styling but hard to maintain)
Internal CSS (Better structure but still embedded)
External CSS (Best for maintainability and scalability)

Use External CSS for professional web development!

DEV Community