What is a CSS Class attibute in HTML element?
A CSS class attribute is used in the element as an identity of it. Classes are reusable when doing style and format of any elements.
Let’s assume you want a change a color of inline css using style attribute in elements.
For styling a lot of elements with the same Cascading Style Sheet property in Web designing, you have to use id or class attribute. CSS class attribute gives more flexibility and usability. Like as many elements can have the same name class identity.
How to use CSS class attribute?
See first below code example of CSS class declaration. It’s start with a
<style>
.txg {
color: blue;
}
</style>In upper code, “.txg” is a class name and its used inside a HTML element.
<p class="txg"> Hello, Does Text color is blue?<p>Now see complete code of it:p class CSS
<!DOCTYPE html>
<html>
<head>
<style>
.txg {
color: blue;
}
</style>
</head>
<body>
<p class="txg"> Hello, Does Text color is blue?<p>
</body>
</html>Try this code with the different class name, change the color of text and use other elements (H1, div, etc.).
div class css example
let’s add same id of <p> tag to dive and see the what happen. But some changes on style, adding a background color.
<!DOCTYPE html>
<html>
<head>
<style>
.txg {
color: blue;
background-color:lightcyan;
}
</style>
</head>
<body>
<p class="txg"> Hello, Does Text color is blue?<p>
<div class="txg" style="widht: 340px; height:200px"> A div area</div>
</body>
</html>Output:
CSS class within class | subClass
Is it possible to use 2 class (or more) or subClass like concept?
Yes, it is possible, you can either use multiple class for single elements or segregated and use a mixed with others.
1: Have two classes within an element like this
<div class="item1 item2 item3"></div>For that css can be:
.item1 .item2
{
color:red;
border:1px solid blue;
}
Or ( segregated style, so it can use with another element)
.item1
{
color:red;
}
.item2 {
border:1px solid blue;
}
2. Targeting a subClass when inside another class
HTML structure for the custom view:
<div class="custom">
<div class="default"></div>
</div>Descendant Selector: It’s written with a white space and targets the child element at any nested level inside the parent.
.custom .default {
declaration: attribute;
}
if target only the direct descendants.
.custom > .default {
declaration: attribute;
}
Do comment if you have any doubt and suggestion on this tutorial. This tutorial is for beginners, So we are not adding any long code example.
Note: The All CSS class attribute are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version