Roots
Back

Creating Classes

Why create a new CSS class?

By creating a new CSS class you can define a style that you can then apply to any HTML tag with a class attribute. This means that you can, for example, create a different way to style text than you use in the body of your page, and apply that style to selected elements, instead of styling all elements of a given tag name.

How to create a new class in CSS

Simply use the following code, with as many property: value pairs as you like;

.classname {property: value; }

classname - The name of the class you are creating.

Notice that the classname must have a period (.) before it; .classname.

How to use a user-defined CSS class in HTML

For any tag that has a class attribute, you can write;

<tagname class="classname">

tagname - The HTML tag.
classname - The name you gave the CSS class.

For example;

<h1 class="headone"> My header </h1>
<p class="paragraph"> A paragraph of text </p>