HTML Classes

HTML classes are attributes in HTML used for grouping and styling elements on a web page and classes can style multiple elements at once. They provide a way to apply CSS styles selectively to elements that share a common class, enabling more organized and efficient styling.

  1. Assigning Classes:
    • You assign a class to an element using the class attribute within the element’s opening tag.
    • Multiple classes can be assigned to a single element by separating them with spaces.
  2. Class Names:
    • Choose descriptive class names that clearly represent the purpose or style of the elements they apply to.
    • Class names must begin with a letter and can contain letters, numbers, hyphens, and underscores.
  3. Targeting with CSS:
    • In your CSS stylesheet, you use a dot or period (.) followed by the class name to target elements with that class and apply styles to them.


<p class="intro">This is an introductory paragraph.</p>
<p class="highlight important">This paragraph is highlighted and important.</p>


.intro {
  font-size: 1.2em;
  font-style: italic;

.highlight {
  background-color: yellow;

.important {
  font-weight: bold;
  • Organization: Classes help you structure and organize your CSS code by grouping related styles together.
  • Reusability: You can apply the same class to multiple elements throughout your HTML document, ensuring consistency and reducing code duplication.
  • Specificity: Classes allow for more precise targeting of elements than using element selectors alone, enabling more granular control over styling.
  • JavaScript Interaction: Classes can also be used to select and manipulate elements with JavaScript, making them useful for dynamic web page features.

Best Practices:

  • Use meaningful and descriptive class names to improve code readability and maintainability.
  • Avoid overly generic class names that don’t provide clear context.
  • Be consistent with class naming conventions throughout your project.
  • Use classes judiciously to avoid over-complicating your CSS.
  • Consider using CSS preprocessors like Sass or Less to manage classes and styles more efficiently.