Inline CSS Style

by admin · January 31, 2020

Inline CSS or Internal CSS
In writing code for web, HTML and CSS are the foremost basic combination. HTML provides the structure while CSS fills out to represent them in a specific way. There are three different ways for writing CSS for HTML Internal, External and inline CSS. Here in this post, we are going to study all about the Inline CSS style with their syntax, advantage, disadvantages, and various uses in the HTML code.

What is Inline CSS in HTML?

This is one of the easiest ways to add CSS to HTML elements by writing them along with them. It is a single element based process i.e, Inline CSS Style.

Here Style attribute is used in combination with HTML tags to add CSS values to them. This starts with tag name then a = equal sign then double quotes with values inside them.

So Style:” property:value;” is the right way to represent Inline CSS style. This can be added to any element HTML tag. And you can add multiple property values within any element. Also don’t forget to add semi-colon in the end otherwise some browsers might not render it all. These are a similar way of CSS just without any selectors.

Inline CSS Style: Syntax

Inline CSS Styles are used similarly as CSS but they are written inside each tag with specific values respectively. There are no CSS selectors we can use in these HTML structures.

Inline CSS Style Syntax for a single element Example

<!DOCTYPE html>
<html>
<body>

<h1 style="color:red;">First Heading will appear Red now.</h1>
<p> Here we are starting first paragraph</p>

</body>
</html>

Try it Editor

Inline CSS Style Syntax for single element

Inline CSS Style Syntax for Multiple Elements Example

<!DOCTYPE html>
<html>
<body>

<h1 style="color:red;">First Heading will appear Red now.</h1>
<p style="color:aqua"> Here we are starting first paragraph</p>

</body>
</html>

Try it Editor

HTML Inline CSS Example for multiple syntax

Note: Only Single elements are affected with Inline CSS and others remain unaffected. So if you apply to a single P element all other P elements will remain unaffected. This is the main difference between Inline CSS and other External & Internal CSS ways.

Advantage of using Inline CSS

The main advantage of Inline CSS’s are:

They are a single element based.
Helps in fixing bugs while testing process for design elements
Better for targeting single elements through Single objects in JavaScript
Emails are scripted with Inline CSS Style values for all elements.

Disadvantages of using Inline CSS

There are several disadvantages associated with the use of Inline CSS in general.

Inline CSS Style requires a lot of manual changes so it is not recommended to use within web structure. External CSS with class names is the best way forward for HTML development. For instance, if the web pages are long there can be a thousand inline elements creating a lot of issues in the process.
Once written these inline styles cannot be reused anywhere.
The use of a quotation or blockquotes is not applicable if used the browser interprets it as the end of your style.
Also, you can’t write pseudo-classes style with inline CSS as they are single element based only.
With Inline CSS you also lose the browser cache benefits.

Inline CSS > Internal > External

Also remember if there are three values written for the same element in External file, internal Style and Inline then the later Inline CSS values will get the preference. Thereafter Internal and then External in the order of the HTML rendering.

General Rule: When to Use Inline CSS Styles in HTML

As a professional in IT, you will not be encouraged to use them anywhere. But there are still several exceptions where you have to implement them such as Emails where no external sources are allowed.
Emails – as they have a single source of a file
Older Websites
CMS such as Drupal, WordPress for any specific Front-end elements
Dynamic Contents that are created such as onclick, show function with JavaScript.

General Rule: When Not to use Inline CSS Styles

In Semantic HTML Markup, CSS is kept separate so inline CSS is not recommended as it muddles the whole tag structure. So in case of editing HTML tags can be customized for changes easily while in case of inline CSS styling it will give a headache to designers to modify them on every occasion. For instance, in a large HTML file, inline CSS can cause unnecessary visual disturbance and take more time for any changes. With semantic structure, HTML and CSS separation modification can be done seamlessly.

Even for a small website to have similar CSS properties throughout the site separate file or external CSS is ideal. As same classes can be used again for all pages to have a uniform visual effect for users otherwise designers have to write the same CSS values on each page again and again.

This external file is connected to the main HTML document with a link tag and allows the use of the same class on multiple occasions.

Conclusion

Although Inline CSS Styles are rarely used and CSS external files are used predominantly still as an IT professional you should have a complete idea of its use. One important point that you should remember Inline CSS has more authority or Internal and External Style Sheets.

Sometimes Inline CSS necessary when there are no other options such as dynamic JavaScript coding. Email code has inline CSS as the source code is the same for this file so designers have to put inline CSS for each HTML Element.

Still, in the other 95% of the Website use the External files for ease of maintenance and reusability benefits.

Reference

W3.org inline styles definition