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 <style=”CSS code”;> to the one specific element one can use inline style within HTML document. Using Inline style within the code is not a good practice, but sometimes it is important to use this type of style in our code. It can be used within HTML e-mail, CMS content, into the Dynamic content, etc.
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>
Into the above syntax <h1> 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 <style> tags. So, in this case, HTML email uses lots of inline styles. It can also be used within older websites, into the CMS content and Dynamic content, etc.
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:
<h1 style=”color:blue; font-family:Calibri; font-size:24px;”> Inline style Example </h1>
<p style=”text-align:center; background-color: lightgrey; font-style:italic; font-size:24px;”> Inline style for paragraph</p>
<body style=”background-image: image.png; height: 500px; width:400px; ”>
<h1 style="background-color: aqua;">Types of style in HTML </h1>
<ul style="font-family:monospace; font-size: 16px; font-display: block;">
<li> HTML Inline CSS</li>
<li>HTML Internal CSS</li>
<li>HTML External CSS</li>
<h1 style="color:darkblue; font-family: cursive;"> HTML Inline style </h1>
<p><q style="color:coral;"><b> That some achieve great success is proof to all that others can achieve it s well</b></q>
<p style="font-family: fantasy; font-size: 20px;">The hurdles in between the <b style="font-family: cursive; color:red;">goals</b> are actually the tonics to boost you up with more energy</p>
<h3style="font-family: cursive; color: darkturquoise;"> Home Cinema Projectors</h3>
<p style=”font-family: cursive;”> Imagine your favorite movie in true cinematic detail. From <b style="color:darkorchid;"> 4k to Full HD, </b>create a real movie theatre feel at home.</p><p> While our 3D projectors bring the action to the life with incredible impact and depth of field </p>
<h2 style="color:darkgoldenrod; font-family:Castellar; ">Indian Culture</h2>
<img src="kids.png" style="height:250px;; width:100%;" >
<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.
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
<body style="border: 2px solid blue; padding:10px;">
<h2 style="color:deeppink; font-family:Castellar;">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>
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.
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–