What is a class in HTML: The “class” attribute in HTML
What is a class in HTML: The “class” attribute is added to a label and serves to define what class that label is (that is, what class it corresponds to). With this, we begin to take full advantage of the CSS programming language.
Suppose we have two equal <button> tags, corresponding to button-type HTML objects. We add a class to one of the buttons to differentiate it from a normal button. From that moment on, the button that has the reported class attribute becomes an object of that class. There can be any number of elements of a class, even different elements that we want to share the properties of that class.
What is a class in HTML: In the following example, we are going to create the class “red” and add it to a button-type object ( <button> ).
What is class in HTML: Create a CSS class attribute to apply styles to an HTML tag
We are going to create a <button> tag corresponding to a button and we are going to add the attribute “class” with a red value (class = “red”).
Next, we create the class corresponding to the value “red”:
- To create a CSS style class we simply add the <style> and </style> tags. These tags are placed inside the <head> </head> and, as we discussed in the previous article, they do not correspond to visible objects but rather to characteristics or additional information on the page. For example, we can customize the background color with a background-color property. Know more on what is class in HTML
- Inside the <style> tag we create a class (a period followed by the class name) and add attribute / value pairs inside braces {}. The attribute always goes to the left and is followed by a colon. Next is the value of that attribute and we close the expression with a semicolon.
If you don’t want to write it, you can copy the following code, although we recommend writing it so that you get used to the structure of the html language:
<! DOCTYPE html>
<html>
<head>
<style>
.red {
background-color: red;
}
</style>
</head>
<body>
<button> Normal button</button>
<button class = ”red”> Red button</button>
</body>
</html>
What is class in HTML: How to add and remove CSS classes to HTML elements?
For experts in web development, adding, modifying, or removing CSS classes to HTML elements is a no-brainer, those who already know how to do it can send us comments to enrich this post.
If you want to add and remove CSS classes to HTML elements, you can do it with jQuery in a very simple way, for example, we have a my-new-class class that is what we want to add and remove from a <div>.
We can also use standard JavaScript code to add / remove HTML classes.
Example with jQuery
// ## add class
$ (‘div’). addClass (‘my-new-class’);
// ## delete class
$ (‘div’). removeClass (‘my-new-class’);
JavaScript example
// add class
document.getElementById (‘elem’). className = ‘my-new-class’;
// remove class
document.getElementById (‘elem’). className = document.getElementByTag (‘div’). className.replace (/ (?: ^ | \ s) my-new-class (?! \ S) / g, ”)
Standard JavaScript code is longer than using jQuery. But if you don’t want to rely on a framework, you can always use a new JavaScript API called classList.
Use API classList
Similar to jQuery, classList provides a set of methods that allow us to modify HTML classes.
In a case where there is a div with multiple classes, we can retrieve the classes that are assigned in the div using classList.
var classes = document.getElementByID (‘elem’). classList;
When we open the browser and see the console in development tools, we can see the list of classes.
To add and remove class, we can use .add () and .remove ().
var elem = document.getElementByID (‘elem’);
// add class
elem.classList.add (‘my-new-class’);
// remove class
elem.classList.remove (‘my-new-class’);
We can add multiple classes, this can be done by separating each class with a comma:
elem.classList.add (‘my-new-class’, ‘my-other-class’);
To check if certain elements contain the specified class, we can use .contains (). It will return true if the specified class is present, and return false if it is not.
elem.classList.contains (‘class-name’);
We can also modify the class using .toggle (). The following code snippet shows how we bind the .toggle () method with a mouse click event.
var button = document.getElementById (‘button’);
function toggle () {
elem.classList.toggle (‘bg’);
}
button.addEventListener (‘click’, toggle, false);
Finally, classList is a new native JavaScript API that was also introduced together with HTML5. It’s clean and simple, and it works in the following browsers: Firefox 3.6, Opera 11.5 and Chrome 8, and Safari 5.1. However Internet Explorer 9 does not have support for this API, but as there is always a solution, we can use the polyfills to implement the classList API in Internet Explorer.
What is class in HTML: HTML class and id attributes and associated CSS selectors
The HTML attributes class and id are so-called global attributes because we will be able to add them in the opening tag of any HTML element.
These two attributes will be mainly used for formatting purposes: they will be used to apply CSS styles to the elements that will contain them.
Indeed, unlike an attribute, for example, the attributes class and id will not be used to specify the operation of an HTML element but will simply be very useful for targeting an element precisely.
We will indeed be able to use these two attributes very easily in CSS thanks to the associated selectors .classand #id.
The first example of using HTML class and id attributes and associated CSS selectors
See immediately how practical way will work attributes class and id and how we will be able to use CSS to target and apply particular styles to selected elements.
For this, we will create an HTML page and will place attributes class and id in different elements.
We will already have to enter a value for each attribute class and id. The values specified for attributes must not contain special characters or spaces and begin with a letter. In practice, we will try to attribute values that make sense to our different attributes.
Note already that each id must have its own or unique value on a page. On the other hand, we will be able to attribute the same value to several class different attributes.
Here, we add an attribute id=”orange” in the opening tag of our element h1and an attribute id=”gros”in our last paragraph. We also add the same attribute class=”bleu” to our first two paragraphs and an attribute class=” vert” to an element of our list.
Then, we will link CSS styles to this different id and class using the associated CSS selectors.
To target an id particular one in CSS, we will use the pound symbol #followed by the value of the to id which we want to link styles. To target a class particularly in CSS, we will use the dot symbol .followed by the value of the class to which we want to link styles.
Class vs id: What differences and which attribute to use?
There is a notable difference between the two attributes class and id: each id must have a unique value on the same page while several attributes class can share the same value.
This means that the attribute id is much more specific than the attribute class and that these two attributes will have different roles and purposes, especially for CSS formatting.
Using classes in HTML and CSS
Thus, we will generally use attributes class to define general and common styles for several elements on the same page. As we can give the same class to several elements, they will all inherit the same styles except in the event of conflict (that is to say in the case where the behavior of the same property has already been defined in CSS) of course.
All the power of attributes class and the associated CSS selector will lie in the fact that we will be able to define general CSS styles linked to selectors .classbefore even starting to write our HTML code. We will then only have to provide the attributes class to our HTML elements when creating the page.
The idea will be as follows: create CSS styles and attach them to selectors a .classpriori then assign the attributes class relating to certain selected HTML elements so that the corresponding CSS styles are applied to them.
This way of proceeding may seem strange and “backward” to non-experts. However, I guarantee that this is a really good way to go that can save a lot of time for a big project. This is also the whole idea behind the use of the Bootstrap library for example.
Using ids in HTML and CSS
On the other hand, as each id must be unique on a page, we will use this selector to apply very precise styles and to be sure to only target an HTML element in CSS.
This is the reason why we use attributes id to create anchor-type links for example. Indeed, we are sure to remove any ambiguity on the selection with an id because once again it must be unique.
CSS selectors .classand #idtherefore do not have the same degree of precision and thus do not have the same order of precedence in the styles assigned to elements in case of conflict. I remind you here that in case of conflict on a style in CSS it is the style of the most precise selector that will be applied.
The order of priority for applying styles in CSS is as follows (highest priority or lowest priority):
- Styles linked to a selector #id ;
- Styles linked to a selector .class.
- Styles linked to an element selector;
Read more: [Guide] Test on the amp for wp pro and premium extension
More examples of using class and id attributes in HTML and associated CSS selectors
First of all, remember that the values indicated for the attributes class and id must not contain any special characters or spaces and start with a letter. Ideally, we will try to use names that make sense for our attributes class and id.
For example, we can use names relating to the CSS properties defined with the associated selectors. Be careful, however, not to use protected names, ie names already used by HTML and which already have a special meaning.
Assign a class attribute and an id attribute to an HTML element
It is quite possible to provide several attributes to an HTML element and in particular, an attribute class and an attribute id to an element.
Here, the last paragraph of our page has both an attribute class=”bleu” and an id=”gros”. The CSS styles related to these two attributes, therefore, be applied to the element.
Here, our two attributes class=”blue” and id=”gros” we are used to apply different CSS properties ( color for our attribute class and font-size for our id). There is therefore no risk of conflict.
However, there would have been a conflict if we had specified different behaviors for the same property with our two selectors.
An update on the order of priority of applying CSS styles
Now imagine that we pass an attribute class and an attribute id to the same element and that we define the same CSS property in a different way for this id and class.
Here we pass an attribute class=”blue”and id=”orange”our title h1. However, we define the behavior of the same property (the property color) in a different way in the selectors .blue and #orange. There is therefore a conflict on styles.
As you can see, our title is displayed in orange which means that it is the styles linked to the id which will be taken into account rather than those linked to the class.
Here you can retain the following rule when applying CSS styles: it will always be the styles linked to the most precise selector that will be applied in the event of a conflict.
By “precise”, we mean the selector which makes it possible to identify the most precisely the element to which the styles will be applied.
Here, as each id must have a unique value in a page, the CSS selector linked to our id is very precise and much more precise than the selector linked to the attribute class since it allows to identify an element in a unique way whereas an attribute class can be shared by several elements and therefore does not identify a particular element.
Read more: Different between margin and padding
This notion of precision may seem a little fuzzy to you at the moment because it is the kind of notion that is difficult to understand without knowing the whole language. Don’t worry, all of this will become clearer over the course of the lessons and with each new notion that we are going to discuss.
What is class in HTML: Assign multiple class attributes to an HTML element
One of the great advantages of the HTML attribute class is that the same attribute (and therefore the related CSS styles) will be able to be shared by different elements. This greatly facilitates the management of styles in our HTML files and saves us a lot of time.
Conversely, the same HTML element will certainly be able to receive different attributes. To do this, it will suffice to indicate the different values separated by a space. Thus, very good practice in CSS and for the creation of a site will not be to not overload a selector .classwith many CSS styles but on the contrary, to use multiple selectors .classwhich will be satisfied to define each one behavior or several properties of. ‘the same “type”.
Operating like this allows you to have a much clearer code and to advance much faster in the creation of a site.
Note that doing this with attributes id would make no sense since the styles of linked selectors are not intended to be shared between different elements (that is to say to be “reused”) but are linked to an element in particular and so it makes sense here to put all the styles you want for the element into one id.
For website maintenance service contact us.