Introduction to HTML Inline-Style

HTML Inline style is a method for styling the web page coded with a CSS scripting language, amongst the other two types of styling methods like Internal and External styling. This styling method can be described as a technique to include exclusive styling to the website or the web page. The syntax for this is ‘<body><h1 style=”style code;”></h1></body>’, where the semicolon after the precise code for a style and it is used for including the styling properties like font type, font color, borders, text arrangement, background, etc. It is a focal point for any and all websites, as the user interface is expected to be of highly convenient and friendly to work on.

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:

<body> <h1 style=”style code;”></h1> </body>

Into the above syntax <h1> tag include inline style attribute. Where style attribute works like another HTML attribute. After that equal sign =, and the “quote, which includes style value of that attribute, it starts with style. Inline style code doesn’t include selectors or a 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 the inline before the semicolon. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

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, in the CMS content and Dynamic content, etc.

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 <p>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 will apply to entire <p> tags 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 the code contains a series of CSS properties as well as 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 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; ”>

Example #1

Code:

<!DOCTYPE html> <html> <body> <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> </ul> <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> <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> </body> </html>

Output:

Example #2

Code:

<!DOCTYPE html> <html> <body> <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. <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> </body> </html>

Output:

Example #3

Code:

<!DOCTYPE html> <html> <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> </body> </html>

Output:

Conclusion

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 that 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.

Introduction to HTML Inline-Style