- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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?
In HTML, define styles rules based on the class attribute of the 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, .black
.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;
}Another example can include styling the <p> tag. Through the following, style all <p> elements with class="device"
Example
<!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>The styling of the <p> tag can be done with multiple classes i.e. devices and accessories here
Example
<!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>
Published on 01-Feb-2018 08:57:53
- Related Questions & Answers
- 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 runOnUiThread in Android?
- Pseudo-classes and CSS Classes
- How do we use jQuery selector eq:()?
- How to discriminate between different classes?
- How do we use # in jQuery Attribute Selector?
Advertisements