Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Working with Inline CSS
Inline CSS allows you to apply styles directly to HTML elements using the style attribute. This method applies styles to individual elements only, making it useful for quick styling or element-specific customizations.
Syntax
You can use the style attribute on any HTML element to define inline style rules:
<element style="property: value; property: value;">
Style Attribute
| Attribute | Value | Description |
|---|---|---|
| style | style rules | The value of style attribute is a combination of style declarations separated by semicolons (;) |
Basic Example
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h2 style="color: #800000;">This is inline CSS</h2>
<p style="color: blue; font-size: 18px;">This paragraph has blue color and larger font.</p>
<div style="background-color: yellow; padding: 10px; border: 2px solid red;">
This div has multiple inline styles applied.
</div>
</body>
</html>
Multiple Properties Example
<html>
<head>
<title>Multiple Inline Styles</title>
</head>
<body>
<h1 style="color: green; text-align: center; font-family: Arial;">
Styled Heading
</h1>
<p style="background-color: lightgray; padding: 15px; margin: 10px; border-radius: 5px;">
This paragraph demonstrates multiple CSS properties applied inline.
</p>
</body>
</html>
Key Points
- Inline styles have the highest specificity and override external and internal CSS
- Separate multiple style declarations with semicolons
- Inline styles apply only to the specific element where they're defined
- Best used for quick fixes or element-specific styling
- Not recommended for large-scale styling due to maintenance difficulties
Comparison with Other CSS Methods
| Method | Specificity | Maintenance | Best For |
|---|---|---|---|
| Inline CSS | Highest | Difficult | Quick fixes, specific elements |
| Internal CSS | Medium | Moderate | Single page styling |
| External CSS | Lowest | Easy | Multiple pages, large projects |
Conclusion
Inline CSS is useful for applying styles directly to individual elements. While it has high specificity, use it sparingly and prefer external stylesheets for better maintainability in larger projects.
Updated on: 2026-03-15T23:18:59+05:30
438 Views
Advertisements