Inline CSS Style
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>
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>
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
- 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
CMS such as Drupal, WordPress for any specific Front-end elements
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.
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.
Still, in the other 95% of the Website use the External files for ease of maintenance and reusability benefits.
Inline CSS Style Example
Here are some common examples of Inline CSS with HTML tags.
HTML Inline CSS
Inline CSS hover
HTML inline CSS background image
HTML inline CSS font size
Inline CSS ReactJS
Inline CSS button
HTML inline CSS table