What's the difference between an id and a class?
What\'s the difference between Class is used for multiple elements which have common attributes.Example if you want same color and font for both p and body tag use class attribute or in a division itself. Id on the other hand is used for highlighting a single element attributes and used exclusively for a particular element only.For example we have an h1 tag with some attributes we would not want them to repeat in any other elements throughout the page. It should be noted that if we use class and id both in an element,*id ovverides the class attributes.*Simply because id is exclusively for a single element Refer the below example We generate the output Output When applying CSS, apply it to a class and try to avoid as much as you can to an id. The ID should only be used in JavaScript to fetch the element or for any event binding. Classes should be used to apply CSS. Sometimes you do have to use classes for event binding. In such cases, try to avoid classes which are being used for applying CSS and rather add new classes which doesn't have corresponding CSS. This will come to help when you need to change the CSS for any class or change the CSS class name all together for any element. Classes are like categories. Many HTML elements can belong to a class, and an HTML element can have more than one class. Classes are used to apply general styles or styles that can be applied across multiple HTML elements. IDs are identifiers. They're unique; no one else is allowed to have that same ID. IDs are used to apply unique styles to an HTML element. I use IDs and classes in this fashion: In this example, the header and content sections can be styled via #header and #content. Each section of the content can be applied a common style through #content .section. Just for kicks, I added a "special" class for the middle section. Suppose you wanted a particular section to have a special styling. This can be achieved with the .special class, yet the section still inherits the common styles from #content .section. When I do JavaScript or CSS development, I typically use IDs to access/manipulate a very specific HTML element, and I use classes to access/apply styles to a broad range of elements. The id attributes gives an element document-wide unique identifier where the class attribute provides a way of classifying similar elements. The id attribute value must be unique across the HTML page where class attribute can be reused where ever you want to apply the same properties Class is for applying your style to a group of elements. ID styles apply to just the element with that ID (there should only be one). Usually you use classes, but if there's a one-off you can use IDs (or just stick the style straight into the element). 1) div id is not reusable and should only be applied to one element of HTML while div class can be added to multiple elements. 2) An id has greater importance if both are applied to the same element and have conflicting styles, the styles of the id will be applied. 3) Style element always refer a div class by putting a . (dot) in front of their names while div id class is referred by putting a # (hash) in front of their names. 4) Example :- class in id in
<html>
<head>
<style>
#html_id{
color:aqua;
background-color: black;
}
.html_class{
color:burlywood;
background-color: brown;
}
</style>
</head>
<body>
<p class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam!
Mollitia enim,
nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
</body>
</html>
<div id="header">
<h1>I am a header!</h1>
<p>I am subtext for a header!</p>
</div>
<div id="content">
<div class="section">
<p>I am a section!</p>
</div>
<div class="section special">
<p>I am a section!</p>
</div>
<div class="section">
<p>I am a section!</p>
</div>
</div>
id and class are two Global / Standard HTML attribute (The global attributes below can be used on any HTML element.) class Specifies one or more classnames for an element (refers to a class in a style sheet)id Specifies a unique id for an element
<style> declaration - .red-background { background-color: red; }<style> declaration -
#blue-background {background-color: blue;}<div class="red-background" id="blue-background">Hello</div>
Here background will be in blue color
加载中...
