- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we use different CSS classes in HTML?
We specify a class for an HTML element using the class attribute.
Multiple HTML elements can share the same class. And using various attributes of the class, like changing colors, fonts, etc., we can define styles rules for these HTML elements. The elements having that class will be formatted according to the defined rule. This is known as class selector.
For selecting elements with a specific class, you need to write a period (.) character, followed by the name of the class, for example, let us look at the “.black” class,
.black { color: #000000; }
Render the content in black for every element with class attribute set to black in our document. For example, render the content in black for only <h3> elements with class attribute set to black.
h3.black { color: #000000; }
We use class attribute to point to a class name in a style sheet. It can also be used by a JavaScript to access the elements with the specific class name.
Example 1
Given below is an example, where we have two <div> elements with a class attribute with same value. All the <div> elements will be styled equally according to the style definition in the head tag.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .information,ol { border: 2px solid black; margin: 20px; padding: 20px; } ol{ background-color: darkgoldenrod; } </style> </head> <body> <div class="information"> <h2>Jason</h2> <ol> <li>Bachelor's of Engineering</li> <li>IT stream</li> <li>section -A</li> </ol> </div> <div class="information"> <h2>Abdul</h2> <ol> <li>Bachelor's of Engineering</li> <li>IT stream</li> <li>section -B</li> </ol> </div> </body> </html>
Following is the output for the above example program.
Example 2
Given below is an example, where we have two <div> elements with a class attribute with different value. Two <div> elements will be styled according to the style definition in the head tag.
To define multiple classes, separate the class names with a space. The element will be styled according to the classes specified.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .room { font-family: monospace; font-size: 200%; color: tomato; text-align: center; } .two{ font-family: cursive; color: lawngreen; text-align: center; } </style> </head> <body> <p class="room">Meta tag contents are not visible on your browser.</p> <p class="room two"> The mata tag is added inside the head tag.</p> </body> </html>
To define multiple classes, separate the class names with a space or mention a different value. The element will be styled according to the classes specified.
Example 3
Given below is an example, where we have three <div> elements with a class attribute with different value. Two <div> elements will be styled equally according to the style definition in the head tag and the other will be styled according to the style definition in the head tag.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .information,ol { border: 2px solid black; margin: 20px; padding: 20px; } .computerscience,ul { border: 2px solid black; margin: 20px; padding: 20px; } ol{ background-color: brown; } ul{ background-color: tomato; } </style> </head> <body> <div class="information"> <h2>Jason</h2> <ol> <li>Bachelor's of Engineering</li> <li>IT stream</li> <li>section -A</li> </ol> </div> <div class="information"> <h2>Abdul</h2> <ol> <li>Bachelor's of Engineering</li> <li>IT stream</li> <li>section -B</li> </ol> </div> <div class="computerscience"> <h2>Satya</h2> <ul> <li>Bachelor's of Engineering</li> <li>Cse stream</li> <li>section -A</li> </ul> </div> </body> </html>
Following is the output for the above example program.
Example 4
Another example can include styling the <p> tag. Through the following, style all <p> elements with class="device"
<!DOCTYPE html> <html> <head> <style> p.device { background: #000000; color: #fffffF; } </style> </head> <body> <p>This is demo text</p> <p class="device">Information about devices.</p> <p>This is demo text</p> </body> </html>
Example 5
The styling of the <p> tag can be done with multiple classes i.e. devices and accessories here −
<!DOCTYPE html> <html> <head> <style> p.device { background: #000000; color: #fffffF; } p.accessories { text-align: center; } </style> </head> <body> <p class="device accessories">DEVICE DETAILS</p> <p class="device">Information about devices.</p> </body> </html>
- Related Articles
- How do we use equivalence (“equality”) operator in Python classes?
- How do we use radio buttons in HTML forms?
- How do we use checkbox buttons in HTML forms?
- How we can instantiate different python classes dynamically?
- Why do we use DOCTYPES in HTML document?
- Why do we use head tag in HTML Page?
- Why do we use reset button in HTML forms?
- Why do we use the novalidate attribute in HTML?
- How do we handle circular dependency between Python classes?
- Why do we need inner classes in Java?
- How do we use a simple drop-down list of items in HTML forms?
- How do we use runOnUiThread in Android?
- How do we include big text in HTML?
- How do we display a script in HTML?
- How do we include an anchor in HTML?
