Updated July 3, 2023
Introduction to 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 ‘<body><h1 style=” style code;”></h1></body>’, 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:
<body>
<h1 style="style code;"></h1>
</body>Include the inline style attribute in the above syntax <h1> 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 <style> tags. Therefore, HTML emails make extensive use of inline styles. Additionally, inline styles find application in older websites, CMS content, Dynamic content, and other contexts.
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 <p>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 <p> 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 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>
<h3 style="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 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.
Recommended Articles
We hope that this EDUCBA information on “HTML Inline-Style” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
