Quick Reach
CSS Class Selector
In previous chapter we saw how to use HTML selectors to style with CSS. In CSS you can also define your own selectors. These selectors are Class and ID selectors. This chapter explains only CSS class selectors.
Alternatively we can select and style HTML elements by class names. Class selectors are used when you need to apply same style to many elements. Whereas CSS ID selector is used to style single HTML element.
Syntax of defining class selector
The class selector is defined as follows:
.class_name
{
property: value;
property: value;
property: value;
}
i.e. a dot (.) followed by class selector name. All definitions are enclosed in curly braces.
Example of defining and using class selector
In example below we will define a test class with certain properties. Then we will use this class in HTML elements. Same style will be applied to a <div> and <p> HTML elements.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<html>
<head>
<style>
/*defining class selector*/
.testclass
{
font-weight: normal;
font-size: 20px;
background: #00FF00;
color: #000000;
}
</style>
</head>
<body>
<div>This DIV will use testclass.</div>
<p>This paragraph also uses same class, i.e. testclass</p>
<p>No style applied to this paragraph</p>
</body>
</html>
|
As you can see, once a testclass is defined this is used in <div> and <p> HTML elements with same styling. If you make changes to testclass, it will depict on <div> and <p> where testclass was being used.
In HTML elements, class selector is referred by class=”classname” where you intend to use that style.
Leave A Comment?