Jiansen Lu
CSS ID and class
May 13th 2012 19:35
CSS ID and class are similar, but also small different. It may be confusing for HTML/CSS beginners.
1) The CSS id selector uses the id attribute of the HTML element, defined with a "#".
ID mycss example in CSS:
#mycss
{
text-align:center;
color:blue;
}
Applied in HTML code
<p id="mycss">My Text after CSS ID</p>
2) The class selector uses the HTML class attribute, defined with a "." The class here is different from the class in Object Oriented Languages, eg C , Python and Java.
Example: CSS class flashContainer:
.flashContainer {
overflow: hidden;
}
applied in HTML:
<p class="flashContainer"> </p>
3) Difference between ID and class
Ids are to be used only once in your html layout. Ids are used for the main elements of the page, such as header, main content, sidebar, footer, etc. Ids have priority over classes. Classes are used for elements that will appear several times on your page.
example:
<!--CSS part:-->
<style type="text/css">
#blueidstyle {color:blue}
.redclassstyle {color:red}
</style>
<!--HTML part:-->
<body>
<p id="blueidstyle">Blue for id</p>
<p class="redclassstyle">Red for class</p>
</body>
1) The CSS id selector uses the id attribute of the HTML element, defined with a "#".
ID mycss example in CSS:
#mycss
{
text-align:center;
color:blue;
}
Applied in HTML code
<p id="mycss">My Text after CSS ID</p>
2) The class selector uses the HTML class attribute, defined with a "." The class here is different from the class in Object Oriented Languages, eg C , Python and Java.
Example: CSS class flashContainer:
.flashContainer {
overflow: hidden;
}
applied in HTML:
<p class="flashContainer"> </p>
3) Difference between ID and class
Ids are to be used only once in your html layout. Ids are used for the main elements of the page, such as header, main content, sidebar, footer, etc. Ids have priority over classes. Classes are used for elements that will appear several times on your page.
example:
<!--CSS part:-->
<style type="text/css">
#blueidstyle {color:blue}
.redclassstyle {color:red}
</style>
<!--HTML part:-->
<body>
<p id="blueidstyle">Blue for id</p>
<p class="redclassstyle">Red for class</p>
</body>
| 29 |
| Vote |
Add Comments
Read More
Comments (2)
