Class properties in HTML

In HTML, class properties are used to identify one or more class names for HTML elements. Class names can be used in CSS or JavaScript to perform certain tasks for elements named that class. In CSS, to select an element with a special class, add a dot (.) And then enter the class name.

Examples use CSS to style all elements with the class name 'city'



Hanoi


Hanoi is the capital of Vietnam.



Paris


Paris is the capital of France.



Tokyo


Tokyo is the capital of Japan.

The results displayed will look like the following.

Class properties in HTML Picture 1
The class attribute applies to many elements

Note:

  1. class properties can be used with any HTML element.
  2. The class name distinguishes between uppercase and lowercase letters.

Use class properties in JavaScript

JavaScript can access certain class-named elements with getElementsByClassName()

For example, when a user clicks a button, hiding all elements with the class name is 'city'.

 

Use multiple layers in HTML

HTML elements can use multiple class names, each with a space separated by a space. For example, you can style elements with the 'city' and 'big' layers.

London


Paris


Tokyo

Same class but different cards

Different cards like

 

good

can use the same class name (and have the same style).

Hanoi


Hanoi is the capital of Vietnam.

Previous lesson: Block and inline elements in HTML

The following article: id attribute in HTML

3.5 ★ | 2 Vote

May be interested

  • Introduction to HTMLIntroduction to HTML
    a few basic things to know about html before starting to learn this language.
  • 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.
  • 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.
  • 5 steps to learn a dynamic HTML web component profile5 steps to learn a dynamic HTML web component profile
    html is an important part of websites we still use every day. however, not everyone can understand how a website is structured.
  • ID selector in CSSID selector in CSS
    in css, id is used to style the element with the specified id.
  • Managing Windows networks using scripts - Part 5: Overcoming challengesManaging Windows networks using scripts - Part 5: Overcoming challenges
    earlier in this series, we began to explore new things about the win32_networkadapterconfiguration class. this powerful wmi class has 61 properties and 41 methods, which can be used for querying and changing tcp / ip network settings on windows machines. we will need to explore the powerful feature of this wmi class in
  • Basic examples of HTMLBasic examples of HTML
    in the previous html lesson, you know which tools to use to write html code, how to save and open html files. this article will give some basic examples of html text.
  • Storage class in C / C ++Storage class in C / C ++
    the storage class defines the scope and life of variables and / or functions within a c / c ++ program. they often precede the type of data they impact.
  • eQuiz - Multiple choice test on HTML knowledgeeQuiz - Multiple choice test on HTML knowledge
    in this test, we will proceed with the small html test, there will be 30 questions in total with no response time, you must choose the answer in each question. can continue to the next sentence.
  • Why write neat and organized HTML?Why write neat and organized HTML?
    you will get many benefits from writing clean and precise html code. here's why it's a good idea to write optimal html code.