Inline CSS is easy to understand. With it we will target only specific html element inside body section of our web page.
In this example, there is no external CSS file, or Internal CSS in head section. We just have everything inside body section.
We are targeting h1 element to define background and font color:
<h1 style="background-color: red; color: black;">Inline CSS</h1>
Same approach for paragraph:
<p style="background-color: green; color:yellow;">Generic Text...</p>
And than, font in h3 element will be set to be Verdana:
<h3 style="font-family: Verdana;">This is H3 Level of Heading</h3>
Inline CSS have priority over Internal CSS.
Full source for our html page:
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
</head>
<body>
<h1 style="background-color: red; color: black;">Inline CSS</h1>
<p style="background-color: green; color:yellow;">Generic Text...</p>
<h3 style="font-family: Verdana;">This is H3 Level of Heading</h3>
</body>
</html>
No comments:
Post a Comment