Roots
Back

Tag-Specific Classes

What is a tag-specific class?

This is a class you create that is only applied to one particular tag. This can be useful if you want to create a general class that should appear slightly differently for different HTML tags.

How to use tag-specific classes

To define a tag-specific class, use the following code;

tagname.classname { property: value; }

tagname - The HTML tag you want the class to work with.
classname - The name of the class you are creating.

For example;

.red { color: red;}
p.red { font-weight: bold; }

Using the above CSS, any HTML element with the class attribute set to red will have red text, and all paragraph tags that have the class set to red will also have bold text. The property of color will be used from the general .red class, and the additional property of font weight will be applied to paragraphs, as specified by the p.red class.