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
How to apply inline CSS?
Inline CSS is writing the styles for a particular HTML element inside its "style" attribute. The styles here are unique to the element itself, and generally override the CSS provided internally or externally.
Syntax
<tag_name style="property: value; property: value;">Content</tag_name>
Here, "tag_name" refers to any HTML tag name, and the "style" attribute allows us to add CSS properties directly to the element. Multiple properties are separated by semicolons.
Example 1: Styling Text
In this example, we will style the "p" tag to give it a different color and font style using inline CSS
<!DOCTYPE html> <html lang="en"> <head> <title>How to apply inline CSS?</title> </head> <body> <p style="color: red; font-style: italic; font-size: 18px;">This text is styled with inline CSS</p> </body> </html>
A red, italic text with 18px font size appears displaying "This text is styled with inline CSS".
Example 2: Styling Button
In this example, we will style the "button" tag to give it a different background color and font color using inline CSS
<!DOCTYPE html> <html lang="en"> <head> <title>How to apply inline CSS?</title> </head> <body> <h3>How to apply inline CSS?</h3> <button style="color: white; background-color: #007bff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Click Me</button> </body> </html>
A blue button with white text, rounded corners, and padding appears with the text "Click Me". The cursor changes to a pointer when hovering over the button.
Example 3: Multiple Elements
This example shows how to apply different inline styles to multiple elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple Inline CSS Examples</title>
</head>
<body>
<div style="background-color: #f0f8ff; padding: 20px; margin: 10px; border: 2px solid #4169e1;">
<h2 style="color: #4169e1; text-align: center;">Welcome</h2>
<p style="color: #333; line-height: 1.6;">This is a styled container with inline CSS.</p>
</div>
</body>
</html>
A light blue container with blue border appears containing a centered blue heading "Welcome" and a paragraph with improved line spacing.
Key Points
| Aspect | Description |
|---|---|
| Priority | Inline styles have the highest specificity and override external/internal CSS |
| Usage | Best for one-time styling or quick testing |
| Maintenance | Harder to maintain for large projects |
| Syntax | Uses the style attribute with CSS property-value pairs |
Conclusion
Inline CSS provides a quick way to style individual HTML elements using the style attribute. While it offers high specificity and immediate results, it should be used sparingly in production applications due to maintenance concerns.
554 Views
