1) There are many different kind of CSS
selector which we can use to apply
CSS style to an element in html. ID
and Class are one of them.
Using Class attribute are easier
as compared to id because of the
negative effects of an ID selector
(the non-reusability, the high
specificity).
In CSS Ids & classes in not having
much more differences but in
JavaScript there is lots of
differences.
First of all it is a rule and we
should go according to the rule.
2) Ids are denoted by hash (#) symbol
whereas classes are denoted by dot
(.) symbol.
example:
#header
{
Width:100%;
display:block;
margin: 0 auto;
}
.menu
{
color:green;
background-image: url("../images/banner_bg.png");
background-size: cover;
}
<body>
<header id="header">
</header>
<div class="menu">
</div>
</body>
3) Ids can be used for single element
whereas a single class can be used
for multiple elements. Ids are
identifiers and they are unique
where as classes are a class of
style and there are not unique. If
you use the same id on more
than one element then the code won't
pass validation. Class allows you to
avoid repeating styles
unnecessarily. You can also include
multiple classes using a single
attribute.
example:
#header
{
Width:100%;
display:block;
margin: 0 auto;
}
.menu
{
color:green;
background-image: url("../images/banner_bg.png");
background-size: cover;
}
.slider
{
float:left;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
<body>
<header id="header">
<nav class="menu">
<nav>
</header>
<nav class="menu slider">
</nav>
</body>
4) Ids can be called through URL
whereas classes cant be called
through URL.
example:
In any browser if you want to go to
a particular part just write the URL
like http://your
domain.com#comments.
Since this (#) id is unique so when
you will run this URL in browser,the
browser will go directly on comments
section of web page.
5) We can put id & classes on a single
element.
example:
<id="comment" class="item">.
here id comment will be written like
#comment
{
color:blue;
border:1px solid black;
}
classes item will be written like
.item
{
Display:block;
float:left;
}
0 Comment(s)