CSS Selector

Class Selector

CSS Class Selector
  • The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.
  • If you want to specify that only one specific HTML element should be affected then you should use the element name with class selector.
Rules
  • Must begin with a letter A-Z or a-z
  • Id name cannot start with a number
  • Must not contain any space characters
  • Can be followed by: letters(A-Za-z), digits(0-9), hyphens("-"), and underscores("_")
  • In HTML, all values are case-insensitive

Syntax:

.CLassName{
property : value;
}

For example:

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: left;
color: blue;
}
.center {
text-align: left;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<h2 class="center">This h2 is not affected</h2>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Cristle Academy

Compiler