CSS Tutorial

Inline CSS is the simplest, yet least recommended method for styling individual elements on a web page. With this method, we add a style definition directly into the HTML tag of the element we want to style, using the style attribute.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS</title>
</head>
<body>
    <h1 style="color: lightskyblue; font-size: 24px;">This is a heading</h1>
    <p style="color: red;">This is a paragraph.</p>
</body>
</html>

RESULT

In the example above, the first heading is blue and large, while the paragraph is red. These colors are written directly into the <h1> and <p> tags.

How Does It Work?

Imagine you have a painting on the wall. If you want the frame to be red, instead of defining the color for the entire room (External CSS) or the entire wall (Internal CSS), you simply paint just that painting red. Inline CSS works exactly like this: every element has its own "color task" written directly inside itself.

When to Use?

Inline CSS is suitable only for:

Quick fixes during development (e.g., "Let this be red now so I can see how it looks").
One-off elements that never repeat and do not need to be reused.
Emails, where many servers do not support external or internal CSS files.

Why Not Use It for the Whole Page?

For larger websites, Inline CSS is inefficient and difficult to maintain:

Repetition: If you want to change the color of all headings on the page, you must go through each element individually and change the style attribute. This is time-consuming and prone to errors.
Code Size: The HTML file becomes huge because every element is filled with style code.
No Reusability: You cannot easily apply the same style to multiple elements, as External or Internal files allow.

Conclusion: Inline CSS is like a "duct tape fix" – it solves the situation immediately, but it is not a permanent solution. For professional and organized websites, always use External CSS.