CssConceptBeginner · 3 min read

What is Inline CSS: Definition, Example, and Usage

Inline CSS is a way to add styles directly inside an HTML element using the style attribute. It applies CSS rules only to that specific element, making it quick and easy to style without separate CSS files.

⚙️

How It Works

Inline CSS works by placing CSS rules right inside an HTML tag using the style attribute. Think of it like writing a note directly on a piece of paper instead of putting it in a separate notebook. This means the style applies only to that one element, not the whole page.

For example, if you want to make just one word red, you add the style directly to that word's tag. This is different from writing styles in a separate CSS file or inside a <style> block, which can affect many elements at once.

💻

Example

This example shows how to make a paragraph's text blue using inline CSS.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline CSS Example</title>
</head>
<body>
  <p style="color: blue; font-weight: bold;">This text is blue and bold because of inline CSS.</p>
</body>
</html>

Output

A webpage showing a single paragraph with blue, bold text that says: This text is blue and bold because of inline CSS.

🎯

When to Use

Inline CSS is useful when you want to quickly style a single element without creating or editing a separate CSS file. It is handy for small changes or testing styles fast.

However, for larger projects or when styling many elements, it's better to use external CSS files or <style> blocks to keep code clean and easier to manage.

Real-world uses include:

Quickly changing the color of one button.
Overriding styles temporarily for testing.
Emails where external CSS is not supported well.

✅

Key Points

Inline CSS uses the style attribute inside HTML tags.
It applies styles only to the element it is written on.
Good for quick, small style changes.
Not recommended for large or reusable styles.
Can override other CSS styles because it has high priority.

✅

Key Takeaways

Inline CSS styles are written directly inside an HTML element using the style attribute.

It affects only the element it is applied to, making it very specific.

Use inline CSS for quick, small style changes or testing.

For bigger projects, external CSS files are better for organization and reuse.

Inline CSS has higher priority and can override other CSS rules.