HomeProgramCSS and CSS3

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

  • How to Write a Class in PythonHow to Write a Class in Python
    in python, classes can help to wrap up data and functionality at the same time. several classes have already been written for us in python 3, called builtins. here are a few: int (integer class), str (string class), list (list class). this...
  • ID selector in CSSID selector in CSS
    in css, id is used to style the element with the specified id.
  • Contructor and Destructor in C ++Contructor and Destructor in C ++
    a contructor class is a special member function of a class that is executed whenever we create new objects of that class.
  • Learn Class and Object in PythonLearn Class and Object in Python
    python is an object-oriented programming language. unlike procedural programming, which emphasizes functions, object-oriented programming focuses on objects. this article quantrimang will explore class and object in depth, inviting readers to follow.
  • App scan feet to buy standard Vietnamese shoesApp scan feet to buy standard Vietnamese shoes
    just download the app and install it on your smartphone, scan fit will give you details of the numbers about your feet. from there, you can rest assured to order shoes without going to the store.
  • Class member functions in C ++Class member functions in C ++
    a member function of a class is a function that has its definition or prototype inside the class definition like any other variable. it works on any object of the class that is a member, and has access to all members of a class for that object.
  • How to quickly translate Vietnamese English on iPhoneHow to quickly translate Vietnamese English on iPhone
    tweak selector will translate vietnamese english quickly on jailbroken ios devices.
  • Class properties in HTMLClass properties in HTML
    in html, class properties are used to identify one or more class names for html elements.
  • Class (class) and Object in C ++Class (class) and Object in C ++
    the main purpose of c ++ is to add object orientation to the c programming language and classes which are central features of c ++ that support object-oriented programming and are often called types user defined (user-defined).
  • Managing Windows networks using Script - Part 13: The script returns all valuesManaging Windows networks using Script - Part 13: The script returns all values
    in the previous article of this series we came up with a script called displayclassproperties.vbs, which shows the names of the properties of the wmi class. this is what the script content is, by using win32_bootconfiguration as a class, we are connecting to the wmi nickname.

CSS and CSS3