CSS Class Selector

« Prev Next »

CSS Class Selector Selects one or more elements with a specific class name.

  • A class selector is not unique and can be used to select multiple elements. (An ID selector can be used only once.)
  • You can reuse the class selector for styling the same elements.

Syntax

.classname {
  property: value;
}
  • It is denoted by placing a dot (.) before the classname
  • classname is the value of the element's class attribute

css-class-selector

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .heading {
      color: darkgreen;
      text-align: center;
    }

    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>

<h1 class="heading">CSS Class Selector Example</h1>

<p class="highlight">This paragraph has highlighted styling.</p>
<p>This paragraph has normal styling.</p>

</body>
</html>
Run ›

Advantages

  • Highly reusable for multiple elements
  • Can be reused for the styling of different components flexibly.
  • Allows styling using multiple classes at the same time.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.