So, you've learnt how to use CSS to target html elements to style them. But what if you have multiples of the same element and you only want to style some of them? Well, you can use classes to target specific elements.
An HTML class is a way to create a set of CSS rules that you can then aplly to any element you want.
Now, remember how we target an element e.g h1 {text-transform: uppercase}
,
well a class is similar, it looks like this .textred {color: red}
, you can call it
what ever you want (in this case textred) and then to apply that class to an element you just add
the class name to the epening tag like this: <h1 class="textred">Hello World</h1>
.
This will make the text red. see how the class goes inside the opening tag of the element? this is how
classes work.
h1
rule creat a new class called textred.textred {color: red}
h2
elements.
h2
element shouold look like this <h2 class="textred">1. The Rise of AI</h2>
h2
element shouold look like this <h2 class="textred">2. AI in Everyday Life</h2>
.textblue {color: blue}
h2
elementsYour result should look like this: