HomeProgramCSS and CSS3Class selector in CSS

Class selector in CSS

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:

Class selector in CSS Picture 1

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; 
 }

Class selector in CSS Picture 2

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

Class selector in CSS Picture 3








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
5 ★ | 1 Vote
css classclass attributeclass attribute in HTMLdistinguish class and id in htmlmark HTML page

You should read it

May be interested

CSS and CSS3