Inline CSS applies the CSS styling directly within HTML elements using the “style” attribute. It allows developers to define individual element styles, It is used to apply a unique style to a single HTML element.
Syntax:
<tag style = " "></tag>
Table of Content
When to Use Inline CSS ?
Use inline styles in web development when you need to apply specific, one-off styles to an element without affecting global styles or when generating dynamic styles programmatically based on data or user interactions.
How to use inline CSS ?
To use inline CSS, add a “style” attribute to an HTML element and define CSS properties and values within double quotes, Inline CSS has the highest priority out of external, internal CSS, and inline CSS.
Examples of Inline CSS
This example demonstrates the styling like color, font and text alignment using inline css
<!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: green;
font-size: 60px;
text-align: center;">
GeeksforGeeks
</h1>
<p style="color: gray;
font-size: 25px;
text-align: center;">
A computer science portal..!
</p>
</body>
</html>
|
Output:
In this example, we use inline CSS to provide colors to your given p tag.
<!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>
<p style="color: green;">
HTML
</p>
<P style="color: red;">
CSS
</P>
<p style="color: blue;">
JavaScript
</p>
</body>
</html>
|
Output:
Advantages
- Using style attributes we can provide styles directly to our HTML elements.
- Inline CSS Overrides external and internal styles with higher specificity.
- No need to create and upload a separate document as in the external style.
- Inline styles have high specificity, allowing precise control over individual elements.
- Enables dynamic style changes using JavaScript or server-side logic.
- Inline styles don’t require separate CSS files, potentially reducing HTTP requests.
Disadvantages
- Adding style attributes to every HTML element is time-consuming.
- Styling multiple elements can increase your page’s size and download time, impacting overall page performance.
- Reduced separation of concerns between HTML structure and CSS.
- Inline styles cannot be used to style pseudo-elements and pseudo-classes.
- It can be difficult to maintain consistency and make global style updates.