<head>
<style type="text/css">
div{
color:green;
}
p{
color:black;
}
p.ex1
{
font:15px arial;
color: red;
}
p.ex2
{
font:italic bold 10px/40px Georgia,serif;
color: blue;
}
</style>
</head>
<body><div>I want to know
<p>what time</p>
<p class="ex1">This is a sentence.</p>
<p class="ex2">This is another sentence.</p></div>
</body>
</html>
The text below displays what the text above causes to be rendered on a web page. What you need to observe in this demonstration is that what follows the "p" in the CSS script is formatting is displayed with in all <p> tag is displayed within the <p> & </p>. These are "nodes", in XML, HTML OR XHMTL.
So, the <p> must be closed before another primary node can be created. What follows the "p." in the CSS file is referred to as a "class". These classes on sub "p" tags basically cause an "override" of the formatting attributed to the <p> tag.
That's the purpose of classes; it brings about/causes a sub-formatting within the pre-determined formatting of a paragraph.
Yes, you could do this all individually inline, but the purpose of this demonstration is to demonstrate the existence of the said concept.
Note: This blog distorted the color minimally, but you can still look at the source code, the result & grasp the (css) class and understand how it causes subformatting.
I want to know
what time
what time
This is a sentence.
This is another sentence.
