w3resource

CSS class selectors

 

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.

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



Follow us on Facebook and Twitter for latest update.