Class selector in CSS

In CSS, Class is used to style the element with the specified class.

In CSS, Class is used to style the element with the specified class. Classes are often used for group objects that want to have the same format attribute, each class name can be used with multiple elements.

To declare Class in CSS, we use the following syntax:

 .ten_class { 
định dạng các thuộc tính CSS
}

For example:

 .quantrimang { 
background-color: black;
color: white;
font-size: 20px;

To define HTML elements by class name, we use class="ten_class" .

For example:

Website TipsMake.com

Note :

  1. Class can be used with any HTML element.
  2. Class names are only allowed to contain letters, numbers, underscores _ , hyphens - . Class name should not start with numbers.
  3. The class name distinguishes between uppercase and lowercase letters.

Example 1: Select and style all elements with class = "intro":

 .intro { 
background-color: #58257b;
color: white;
}

Result:

Picture 1 of Class selector in CSS

Full code:








Welcome to Website TipsMake.com




 

Category Technology Village.


 

Technology




Introducing TipsMake.com




Example 2: Style all elements

with class = "hometown" (only applicable for

)

 p.hometown { 
background: #58257b;
color: white;
}

Picture 2 of Class selector in CSS

Full code:







Welcome to Website TipsMake.com


Category Technology Village


Technology category


Science Category


Application category




Example 3: An element can have multiple classes

The element has two combined classes

Picture 3 of Class selector in CSS








This heading is not affected by the center class


This paragraph will be centered and red


This paragraph will be centered, red and size
Very big font




See more:

  1. Learn Basic CSS
  2. Learn Advanced CSS
Update 27 May 2019
Category

System

Mac OS X

Hardware

Game

Tech info

Technology

Science

Life

Application

Electric

Program

Mobile