Different Divs

If all we could do is control every <h1> or paragraph then our styles would be pretty limited. We can assign a class to an element and that allows us to target it specifically with other code such as CSS or JavaScript. One particularly flexible element that we use all the time is the <div>.

Goal

Make two divs.

Style each of them differently using classes.

Example

Example on codepen: https://codepen.io/joe_bacal/pen/rwgBOK

Clues

You can apply rules to all elements, or just elements with a certain class

• You can give an element any class name you like.
• In the example below, all paragraphs are uppercase, but only paragraphs with the very-loudclass are red.

HTML:

<p>I am loud.</p>
<p class="very-loud">I am very loud!</p>

CSS:

p {
    text-transform:uppercase;
}

.very-loud {
    color:red;
}

Gives us: