Inline CSS
What is Inline CSS ?
Inline CSS allows you to apply styles directly to individual HTML elements using the style attribute. It is the most specific type of CSS, overriding both internal and external stylesheets.
Syntax:
Example:
Output:
.webp)
Inline CSS allows you to apply styles directly to individual HTML elements using the style attribute. It is the most specific type of CSS, overriding both internal and external stylesheets.
Syntax:
<element style="property: value;">- element: The HTML tag you want to style ( <h1>, <p> etc. )
- style: An HTML attribute used to add inline styles
- property: The CSS property (e.g., color, font-size, text-align)
- value: The value assigned to the CSS property
Key Point
- Styles are written inside the HTML element using the style attribute.
- Inline CSS has the highest priority (overrides internal and external CSS).
- Best for quick changes, email templates, or isolated styling.
- Not recommended for large projects due to lack of reusability.
Example:
<!DOCTYPE html><html>
<body>
<h1 style="color:blue; text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
</body>
</html>Output:
When to Use Inline CSS
- For small styling tweaks
- For emails or environments where external CSS is not supported
- During quick prototyping or debugging