Introduction to HTML Inline-Style

There are three different ways to Style the webpage using CSS code like Inline Style, internal style and External style file including in HTML code. Inline style is using style attribute to the specific HTML element into the code. It is the easiest way to add a unique style to the individual element. HTML Inline-Style in this article its further explained.

BY adding

Syntax

The inline style works as CSS in the form of look and operation with some basic differences. It does impact directly on the tag in which they are written, without using selectors.

Syntax to include inline style within code is as follows:

Into the above syntax

tag include inline style attribute. Where style attribute works like another HTML attribute. It starts with style, after that equal sign =, and the “quote which includes style value of that attribute. Inline style code doesn’t include selectors or pair of curly braces. This code is incomplete without the use of semicolon after value.

By using inline style it is possible to define style to elements like size, fonts, color, alignment of text and images, background color to the text, borders, and outline to the elements, spaces between elements and many other styling codes.

All style code needs to be included in inline before the semicolon.

When do we use an inline style in HTML?

The inline style most of the time used within the code when it is required to add or important to be easily understood to the user. Most of the time this type of style code used within the HTML emails showing fancy content within the mail body, Most of the mailers restrict to use

Within the dynamic websites, it uses JavaScript. In this case, most of the time javascript code allows users to add an inline style to this element. Suppose we are adding inline style to the

attribute within the code, then style is applicable only for that specified element. But the same style we are adding within the internal style then it will apply to entire

tags those are included with this document. So using the inline style for specific attributes to give style is always treated as a useful thing.

Inline style always being considered on the highest priority. The style attribute within code contains a series of CSS properties as well as value pairs.

Examples of inline style in HTML

Here are some examples which demonstrate how inline style is going to work within HTML code as follows:

Inline style Example

Example #1

Code:

Types of style in HTML

Output:

Example #2

Code:

Indian Culture

Output:

Example #3

Code:

Famous food across      world

Output:

Conclusion – HTML Inline-Style

From all the above information, we came to know that the Inline style in this is used to show unique CSS code to the specific element by using the style attribute. When a user wants to show some important data which is also necessary to show in the code, at that time for the specific element we are going to use inline style within this document.

Recommended Articles

This is a guide to HTML Inline-Style. Here we discuss the introduction, When do we use an inline style in HTML, with appropriate examples. You can also go through our other related articles to learn more–

1. Quotation Tag in HTML
2. Aside Tag in HTML
3. HTML Description List
4. Caption Tag in HTML

The post HTML Inline-Style appeared first on EDUCBA.