In this tutorial you will learn about the CSS Class Selector and its application with practical example.
CSS Class Selector
CSS classes are set of styling rules that can be applied or assigned to the HTML entity using it’s class attribute and all the HTML elements having that class assigned will be assigned the styling as per the definition of the defined CSS class.
Syntax
The syntax for declaring a Class selector is as:
|
1 |
.[Class Name] { property:value; ...} |
Example:
|
1 2 3 |
.menu { color:#0000FF; } |
To apply this style to the HTML, using the following code:
|
1 |
<p class="menu">This is a example using a Class selector.</p> |
If you want to use the same class name for different selector , but each with a different styling behavior as per their selector. This is achieved by using the or prefix the dot with the HTML Selector name.
|
1 |
[Type Selector].[Class Name] { property:value; ...} |
Example:
For example, if we have the following CSS declaration:
|
1 2 3 4 5 6 7 |
b.special { color:#0000FF; } i.special { color:#FF0000; } |
Both the special class have the different behavior based on their selector.
Applying Multiple CSS Classes
It is possible to assign multiple classes at the same time for the class attribute of the HTML Entity and the classes will apply their styling to the element.
Example:
|
1 2 3 4 5 6 |
.large { font-size:20px; } .red { color:#FF0000; } |
The above classes can be applied as follows:
|
1 |
<p class="large red">This is an example of assigning multiple classes.</p> |
