HTML And CSS Tutorial 30: Styling Using Classes

Welcome to your website development training.

Today we gonna learn how to use Class in CSS to style same tags/ elements

Open your list.html file on your anWriter free HTML editor.

Create a CSS stylesheet within the head.

In CSS, Class is used when you want to style two or more tags/ elements that are the same.

Create 2 paragraphs below the </ol> above </body>

Pls carefully read the instruction before you start.

If we go ahead and select p tag and style it CSS, we'll see that the 2 paragraphs will be styled but we want the 2 paragraphs to look different.

Style your 2 paragraph by adding property: color and value: green

Now we have 2 paragraphs with green texts.

Assuming we want our 1st paragraph to be blue and the 2nd to be red, that's where *class* is useful.

And in other to class our paragraphs, we need to add class to the 1st paragraph tag and the 2nd tag. Like this👇

<p class="blue">This is the 1st paragraph and the text is blue</p>

And to select it in the CSS stylesheet, we need to specify this paragraph class by adding a dot (.) before the p tag. Like this👇

.p {color: blue;
}

When you preview it, you will see that the first paragraph will change to blue. You can try to change the color of the second paragraph using the method we used to change the first paragraph.

I changed mine to red, like this 👇