Open-Source Internship opportunity by OpenGenus for programmers. Apply now.

What is Inline CSS

What if there is a way in which we can test our styling without disturbing the flow of styling in our external CSS File? Let's find out -

Usually professional developers use the "External Styling" for styling a page because it is easy to maintain & manage the external css file.

But sometimes we do need to test the styling of some specific HTML tags without disturbing the external css file for which Inline CSS comes into the play.

Inline CSS is one of the styling ways in which we can target a particular tag for styling which is present anywhere in the HTML document or in the JavaScript file.

How to use Inline CSS

By using the style attribute in the opening of the HTML tag we can perform inline styling of the tag. eg. -

<h1 style="...">...</h1>

Now using this type of styling will affect the specific tag in which this styling is mentioned.

Inline styling starts with the "style" attribute followed by an equals sign "=" which will contain the value in property-value pairs format i.e "property:value" eg. -

<p style="color: red;"> Hello World😎 </p>

Here "color" is the property followed by a colon(:) which is then followed by the value "red" & ending with a semicolon.

Note: We can have as many differnt property-value pairs in the style attribute but they all should be seperated by a semicolon (;) . eg. -

 <p style="color: red;text-align: center;font-size: 0.8rem;"> Hello World😎 </p>

When Inline CSS is used

In most of the scenarios professional web developers try not to use Inline CSS but in some of the cases it is the best option that they can have. Some of the cases are -

When one wants to style the Dynamic content which maybe changed by JavaScript
It's best to use inline styling when we want to see the changes in an old website & then apply it to the external css file so that it does not disturb the flow of overall styling of the HTML page
When one wants to style HTML e-mail

Now, Inline CSS have the the highest specificity order among all the styling in CSS. Therefore, it will override most of the rules of internal & external stylesheets with an exception of ! important declaration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <p style="color: red;text-align: center;font-size: 0.8rem;"> Hello World😎 </p>
</body>
</html>

Here inline styling of < p > tag will override the internal styling (mentinoed in the head section of the HTML document ) of the < p > tag due to which our paragraph will be red in color.

Pros and Cons of Inline CSS

Now , let's look into some of the pros & cons of inline styling after looking into what is inline styling, how to use it & when to use it.

Pros :

Inline CSS is technically faster than any other form of styling.
Inline CSS can override any other form of styling because it's specficity order is the highest.
It can be very helpful for testing purposes when we just want to test few of the HTML tags without disturbing the flow of styling of the whole HTML page.
It can also be helpful when we want to apply quick fixes in our website.
No external file is created for Inline CSS.

Cons :

Although Inline CSS is much more faster than other forms of styling it's very hard to maintain & manage inline styling.
It is difficult to keep things organized when only inline styling is used
Loading time of the page increases if only inline styling is followed throughout
If we want to target & style multiple tags at the same time we cannot do it with inline styling
Even though external css file is created for external css,it is much more flexible & easy to maintain

Conclusion

With the help of this article at OpenGenus, we now know what is inline css , what is it's syntax , when to use it & some advantages & disadvantages of it & usually it's recommended to use inline styling when to test some of the specific tags in our JavaScript file or HTML file.

Inline Styling in CSS

CSS