Including CSS In HTML Class Selectors

Tutorial # 3

Class Selectors :

Class selectors allow to associate a class with a particular subset , or class of elements.Lets suppose consider this rule.

p.bold { font-weight: bold }

If you want that some of your paragraphs should appear bold then use above command. But if you want some of your paragraph should be bold then you can use class selector to implement this kind of behavior.

Call this Rule in Html Using Class :

<p class=”bold”> This Paragraph will be bold </p>

Since we are only inserting bold on paragraphs so its p.bold. Note that class name specified is same as the rule defined

<html>
<head>

<title> Tutorial # 3 Class selectors </title>
<style type=”text/css”>
<!–

p.blue {color:blue}

–>

</style>
</head>

<body>

<h1> This is H1 Heading </h1>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>
</body>

</html>

Now in this above code first I defined a simple CSS rule by the same method which i used in Tutorial 1 and Tutorial 2. But here we made a little addition like p.blue {  color:blue; } we assigned a name to this rule that is blue. Now below in the paragraph we want to assign this blue color to first and 2nd paragraph. This is done by assigning this class the same name that is blue.

SeeResult

Now what does this rule mean ???? 

p.blue  mean this blue color can only be assign to paragraphs it can’t be used for others like headers like if we use this for header see what happens.

<html>
<head>

<title> Tutorial # 3 Class selectors </title>
<style type=”text/css”>
<!–

p.blue {color:blue}

–>

</style>
</head>

<body>

<h1 class=”blue”> This is H1 Heading </h1>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>
</body>

</html>

SeeResult

There will be no changing’s in the result because we assigned Rule only assign blue color to those paragraphs whose class name is blue. That’s why header will  remains same even its class name is blue but if we remove p before this rule as like shown below

.blue {color : blue; }

This rule mean assign blue to every one whose class name is blue so now see output of below code to see these awesome changes.

<html>
<head>

<title> Tutorial # 3 Class selectors </title>
<style type=”text/css”>
<!–

.blue {color:blue}

–>

</style>
</head>

<body>

<h1 class=”blue”> This is H1 Heading </h1>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>
</body>

</html>

 SeeResult

Header is also blue because now rules applies to all so learning these small changes is very important

See  Tutorial # 2

See  Tutorial # 4

3 thoughts on “Including CSS In HTML Class Selectors”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>