HTML Inline-Style

HTML Inline style is a method that styles web pages using a CSS scripting language, alongside the other two styling methods: Internal and External styling. This method adds unique styles specifically to the website or web page. The syntax for this is ‘

’, where the semicolon after the precise code for a style and is used for including the styling properties like font type, font color, borders, text arrangement, background, etc. It is a focal point for any website, as the user interface is expected to be highly convenient and friendly.

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:

<h1 style="style code;"></h1>

Include the inline style attribute in the above syntax

tag. Where the style attribute works like another HTML attribute. After that equal sign =, the “quote, which includes the style value of that attribute, starts with style. The inline style code doesn’t include selectors or a pair of curly braces. This code is incomplete without the use of a semicolon after the 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, outline to the elements, spaces between elements, and many other styling codes.

You need to include all style code inline before the semicolon.

When do we use an inline style in HTML?

Developers mainly use inline styles within the code when they need to add or emphasize content that should be easily understood by the user. HTML emails often incorporate this type of style code to display fancy content within the mail body, as many mailers limit the use of

Dynamic websites use JavaScript. In this case, javascript code usually allows users to add an inline style to this element. Suppose we add an inline style to the

attribute within the code; style only applies to that specified element. But the same style we add within the internal style will apply to this document’s entire

tags. So using the inline style for specific attributes to give style is always treated as a useful thing.

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

Examples of HTML Inline-Style

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

<h1 id="Inline-style-Example"> Inline style Example </h1>
<p style="text-align:center; background-color: lightgrey; font-style:italic; font-size:24px;"> Inline style for paragraph</p>

Example #1

Code:

<h1 id="Types-of-style-in-HTML">Types of style in HTML </h1>

• HTML Inline CSS
• HTML Internal CSS
• HTML External CSS

HTML Inline style 

That some achieve great success is proof to all that others can achieve it s well

The hurdles in between the goals are actually the tonics to boost you up with more energy

Home Cinema Projectors

Imagine your favorite movie in true cinematic detail. From 4k to Full HD, create a real movie theatre feel at home.

While our 3D projectors bring the action to the life with incredible impact and depth of field

Output:

Example #2

Code:

<h2 id="Indian-Culture">Indian Culture</h2>
<img  src="/static/imghwm/default1.png" data-src="kids.png" class="lazy"   style="max-width:90%" alt="HTML Inline-Style" >
<p style="background-color:aquamarine ;">
India is known in all over world for its unique culture. It has one of the oldest culture which is 4500 years ago. India is famous for the <i style="font-size: 20px; color:darkorange;">Invention of Zero </i> in Mathematics , advance in architecture like <i style="font-size: 20px; color:white;">Taj Mahal</i> , for in <i style="font-size: 20px; color: green;">  Ayurveda  </i> . It is nation of more than 1.2  billion people, Which is known as second most nation in population comes after China.
<br>
Indian culture is famous in the form of different food, Language, religion and arts are the key aspects of it. India is the country made up with combination of 28 states as well as 7 territories. Those having different cultures, different languages, different festivals, variety in clothing style, architure and art , state wise different delicious  food and many more things
</p>

Output:

Example #3

Code:

<h2 id="Famous-food-across-world">Famous food across      world</h2>
<p> <b>India</b> -Paneer ButterMasala, Dal-batti and many more.In drinks Tea, Old Monk rum</p>
<p> <b>Italy</b> - for Pizza, Pasata and more.In drinks Red Wine, Sparkling wine</p>
<p> <b>Greece</b> - Greek salad, Mousaka and In drinks ouzo, tsipouro</p>
<p> <b>China</b> - Noodles, Soy puff  and many  more.In drinks Tea, Chinese beer</p>
<p> <b>Mexico</b> - Chili con carne, Guacamole .In drinks Tea, Old Monk rum</p>

Output:

Conclusion

From all the above information, we have learned that Inline style is utilized to display unique CSS code for a specific element by employing the style attribute. When a user wants to show some important data that is also necessary to show in the code, at that time, for the specific element, we are going to use an inline style within this document.

The above is the detailed content of HTML Inline-Style. For more information, please follow other related articles on the PHP Chinese website!