HTML
HTML Head
HTML Forms
HTML Graphics
HTML Media
HTML APIs
HTML Classes
HTML class is an attribute that defines one or more class names for any HTML element. CSS and JavaScript use classes to select and manipulate groups of elements with the same class name. The syntax for defining a class is as follows.
HTML Classes with CSS
The primary use of HTML classes is to apply CSS styles to elements. We can create frequently used styles by defining a class in one or more HTML tags and then referencing it in CSS.
Basic Styling
Let’s start with a simple example. Define the class in HTML to style all buttons with a specific look and apply the styling to the class in CSS.
In the above example, the CSS will apply the same styles to all elements with the btn class, giving buttons a uniform appearance.
Combining Multiple Classes
We can also combine multiple classes to apply different styles to an element. For instance, we have a primary button and a secondary button with slightly different styles.
In this example, both buttons share the base btn styles, but each has additional styles specific to their purpose.
HTML Classes with JavaScript
HTML classes are not only for styling. They are also used in adding interactivity to the web pages using JavaScript.
Toggling Classes
In the following example, a JavaScript operation is toggling a class on an element to change its state. We use it for multiple features like dropdown menus, modals, or toggling dark mode.
When we click the button, the highlight class will be toggled on the paragraph, adding or removing the yellow background.
Adding and Removing Classes
Sometimes, we add or remove some classes based on certain conditions. It can be easily achieved using JavaScript.
In this example, clicking the button (Add Class) will add the highlight class to the paragraph, and clicking the button (Remove Class) will remove it.
Remember, the key to using the classes effectively is to name them logically and consistently, ensuring styles and scripts can be easily understood and managed.
Watch Video on YouTube
HTML Classes
