| Previous | Home | Next |
CSS id and are classes are the user defined selectors .in addition to styling html document CSS allows you to specify your own selectors called "id "and "class"
The ID selector
ID is an HTML attribute that does not affect the display of an element and can be applied to any element. ID is used to specify a style for single, unique element . the ID selector uses the ID attribute of the html element and is defined with "#"pound sign..
<html>
<head>
<style type="text/css">
#main
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="main">Hello World!</p>
<p>this is paragraph of id attribute of css.</p>
</body>
</html>
The Class selector
A class is simply a group of elements scattered throughout the document all which have same value for their class attribute. it is used to specify a style for group of elements unlike id selector class selector is used on several attributes. class selector uses the class attribute of html and defines with (.)dot.
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
font-size:20pt;
}
.right
{
text align :left;font-size:15pt;font-color:red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
<p class="right">this is html document.</p>
</body>
</html>
<DIV> tag
The div tag did the logical division of web page. it also defines the style of whole sections of page. with help of DIV tag you could define a section of page and style it different from the surrounding of page. The div tag allows you to name certain section of your document so you can affect it.
<html> <body> <h3>This is a html header</h3> <p>This is a html paragraph.</p> <div style="color: pink"> <h3>This is a html header</h3> <p>This is a html paragraph.</p> </div> </body> </html>
<SPAN> tag
Span tag has very similar property like
For example, if you had a Level 3 Heading (<h3>) that you wanted the second word to be red, you could surround that word with <<span> style="color : #ff0000;"> 2ndWord</<span>> and it would still be a part of the <h3> tag as well, just red.
<html>
<head>
<style type="text/css">
span. red {color:red;
font-weight:italic}
span. pink {color:pink;
font-weight:italic}
</style>
</head>
<body>
<p>The div tag did the logical<span class="red"
> division of </span>web page.
<br>it also defines<span class="pink"
> the style of whole<span> sections of page</br></p>
</body>
</html>
| Previous | Home | Next |