Inline CSS in HTML

Inline CSS in HTML is one of the ways of adding styles to our HTML page. Styling your page is one of the major steps while creating a webpage. However, there are three different ways in which you can style your page that is, using an external stylesheet, and an internal style, the third category, comes in the inline CSS in HTML.

The inline CSS in HTML is not as frequently used as the other styling ways, however, it is important to know it as in some situations they come in handy. The inline CSS in HTML is added to the HTML element with the help of a style tag followed by the CSS that you want to style the element with.

Let us understand the inline CSS in HTML with an example :

Output

Therefore, in the above example, the h1 tag is styled with an inline CSS. The style attribute is used to include the inline CSS in HTML whereas, inside the style attribute, the CSS is applied as the key-value pairs, where each pair/CSS style is separated by a semi-colon.

Syntax

The syntax of the inline CSS in HTML is as follows :

As you can see in the above code, first the style attribute is used to add the inline CSS which is followed by the equal to(=) symbol, and then the CSS styles are written in key-value pairs followed by a semi-colon.

However, you cannot add selectors in inline CSS. It targets only a single element to which it is applied.

Examples

Let us take some examples of adding styles using inline CSS in HTML.

Example 1: Adding a CSS Border Using the Inline CSS

The CSS property that is used to add a border around the HTML element is border.

Let us see the code for the same using inline CSS in HTML :

Output

In the above code, we have used the border property of CSS for the h1 element. However, we have added a border of 5px and black color as specified in the value of the property.

Example 2: Adding a CSS Margin Using the Inline CSS

You can add a margin to an HTML element using the margin property of CSS. This margin property lets us apply the margin on all four sides of an element. However, you can also use the margin-left, margin-right, margin-top, and margin-bottom properties to individually add a margin to one of the sides of the element.

Output

Therefore, the above code adds a margin of 40px on the top and bottom sides of the h1 whereas of 100px on the left and right side of the h1 element.

When to Use Inline Styles in HTML ?

The inline styles in HTML are not used often by developers, however, they are still useful and necessary in some cases.

Some of the situations where the inline CSS is useful are :

• We can add the inline CSS in HTML where we want to see the change quickly.
• We can add the inline CSS in HTML emails.
• We can also use the inline CSS on dynamic websites that use Javascript. For example :
  They can be used to instantly hide a dialog box using the display: none property in the inline CSS.
• They are also used in CMS content such as WordPress and Drupal.

When not to Use Inline CSS in HTML ?

• The inline styles are not used often because of the semantic markup. Since HTML is used to provide structured content and CSS is used to style that structured content, with inline CSS the distinction between this structured content and the styles gets blurred.
• The inline CSS in HTML is not reusable, however, if we place the CSS styles in a separate file then this file can be used to style multiple pages.
• Since the inline styles only affect the current element, therefore, it is difficult to maintain. Suppose you have written the same style ten times in ten different p tags. Then, changing them is a big issue.

Order of Precedence

The order of precedence is very important in CSS regardless of which technique you use for styling the webpage. The order of precedence means which style will be applied to an HTML element if multiple different styles have been specified for the same element. Let's take an example to understand it better.

As you can see multiple styles have been applied to the paragraph element. One is to color it red and the other blue. Then which one will get the preference over the other the question. However, the answer is simple, whichever appears at the end will get the preference in an external or internal stylesheet.

However, if we have specified an inline CSS for an HTML element, it would be the one that will be preferred over any other style.

Learn More

• How to Add CSS to HTML?
• CSS Online Formatter