Challenge 4

Instructions:

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 apply 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 opening 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.

Steps:

1. Run the code to see what you are working with
2. In the Style element, under the the h1 rule create a new class called textred
• A CSS class always starts with "." and then what ever you want to name your class
• Name your class .textred
• then set the color to red
• Your class should like lie this .textred {color: red}
3. Now lets apply your "textred" class to the first two h2 elements.
• The first h2 element should look like this <h2 class="textred">1. The Rise of AI</h2>
• The second h2 element should look like this <h2 class="textred">2. AI in Everyday Life</h2>
• Run your code and you should see them turn red now.
4. Now create a new class under your textred class and call it textblue
• your new class should look like this .textblue {color: blue}
5. lets now apply this class to the last two h2 elements
• Run code and you should see them turn blue!
6. Check Code

Your result should look like this: