HTML Inline Style


Inline Style

A style rule which directly applies to a particular element

<p style="textalign:right">Welcome.</p>

<!doctype html>
<html>
<head>
<style>
p{text-align:left;}
li{background:yellow}
</style>
</head>
<body>

<p>Welcome.</p>
<p style="textalign:right">Welcome Back.</p>
<ul>
<li>Heading One</li>
<li>Heading Two</li>
<li style="color:blue">Heading Three</li>
<li>Heading Four</li>
</ul>

</body>
</html>

Copy above code & try it into your natepad


Browser View Screen Below:

Inline Style


Context Control

You can apply a style rule to a specific context

Here the style rule is applied to all li

that are inside a ul


<!doctype html>
<html>
<head>
<style>
ul li {background:yellow}
</style>
</head>
<body>

<ul>
<li>Heading One</li>
<li>Heading Two</li>
<li>Heading Three</li>
<li>Heading Four</li>
</ul>

<ol>
<li>Heading One</li>
<li>Heading Two</li>
<li>Heading Three</li>
<li>Heading Four</li>
</ol>

</body>
</html>

Copy above code & try it into your natepad


Browser View Screen Below:

Context Control



Copyright © 2020. All rights reserved.