Fulfledge

Put a page together

INPUT · Slides

class and div

01 / 05

A tag name changes all of them

Write p { color: red; } and every p goes red.

When you want only one paragraph to be red, you reach for a class.

<p>an ordinary paragraph</p><p class="alert">only this one should be red</p>

02 / 05

Styling a class

On the CSS side you put a dot . in front of the class name.

  • in the HTML: class="alert" (no dot)
  • in the CSS: .alert (with a dot)

That pairing is the basic rule of classes.

<style>  .alert { color: red; }</style><p class="alert">Careful!</p>

03 / 05

A class can be reused

The same class can go on as many elements as you like, and on different tags (p and li) too.

The trick is to make a class per job — "for important bits", "for buttons".

<style>  .point { background-color: yellow; }</style><p class="point">an important bit</p><li class="point">this matters too</li>

04 / 05

div groups things

div is just a box with no meaning of its own. You use it to gather several elements into a group.

Put a class on the div and style it, and you can make something that looks like a card.

<div class="profile">  <h2>a name</h2>  <p>learning to program</p></div>

05 / 05

To sum up

  • change all of them → a tag-name selector (p { })
  • change only some → a class (HTML: class="name" / CSS: .name { })
  • gather them into a box → div

With those three you can put the style you meant exactly where you meant it.