CSS class selectors

Last update on August 19 2022 21:50:33 (UTC/GMT +8 hours)

Class selectors

CSS class selectors select elements in an HTML page, if they have an attribute called class, whose value matches the name of the class selector.

In a stylesheet document, the name of the class selector is preceded by a period (i.e. ".").

If a class selector is combined with another or more type or class selectors , class selectors must be preceded by a period.

In an HTML page, any number of elements may have a value of their class attribute same.

syntax:

.classname{ CSS-Property: value; ........................ }

Simple Example of CSS class selectors

CSS code:

 .w3r {
color: red; /* sets color to red */ 
background-color: aliceblue; /* sets background color to aliceblue */ 
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Example of CSS class selectors</title>
<link rel='stylesheet' href='Simple-Example-of-CSS-class-selector.css' type='text/css'>
</head>
<body>
<p class="w3r" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<p class="w3r" >Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.</p>
</div>
</body>
</html>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.

Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.

View this simple example of CSS class selector in a separate browser window.

Advanced Example of CSS class selectors

CSS code:

.w3resource {
color: red; /* sets color to red */
background-color: aliceblue; /* sets background color to aliceblue */
}
.w3resource1 {
font-weight: bold; /* sets font size to bold */ 
font-variant: small-caps; /* sets the fonts to small caps */ 
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced Example of CSS class selectors</title>
<link rel='stylesheet' href='Advanced-Example-of-CSS-class-selector.css' type='text/css'>
</head>
<body>
<div>
<p class="w3resource w3resource1" >We are learning CSS class selector, in w3resource.</p>
<p class="w3resource1">We are learning CSS class selector, in w3resource.</p>
</div>
</body>
</html>

Result:

We are learning CSS class selector, in w3resource.

View this advanced example of CSS class selector in a separate browser window.

Previous: CSS attribute selectors
Next: CSS id selectors