Course: Welcome

Classes in CSS [11/14]

Well, we colored the summary again, but at what cost! Let’s agree that adding tags inside the paragraphs and coloring the text with their help is not the best way. But what is the best way?

There is one, and it is called “classes”.

Remember the step where we tried to set styles for paragraphs using outer styles, but they were rendered with the same color?

We needed to do this: add different classes to the paragraphs, and use CSS selectors not by tag, but by class.

Class is just one of the HTML tag attributes, for example:

<p class="important">...</p>
<p class="help">...</p>

You can set styles in CSS only for elements with a certain class. A class selector that spells .class-name is used for these purposes, for example:

.important { color: red; } — chooses all tags with class "important"
.help { color: green; }    — chooses all tags with class "help"

Classes are flexible; you can create lots of them and give them clear names. For example, you can create a class that defines the course chapter that is being studied at the moment.

The class name can contain Latin characters, numbers, dash - and underline _ and should start from a Latin character.

Do it
<!DOCTYPE html> <html> <head> <title>Classes in CSS</title> </head> <body> <h1>Course summary</h1> <p><strong>Paired tags.</strong></p> <p><strong>Single tags.</strong></p> <p><strong>Tag attributes.</strong></p> <p><strong>Inline (built in) styles.</strong></p> <p><em>Outer styles.</em></p> <p><em>Styling by class.</em></p> </body> </html>
body { font-family: Tahoma, serif; } h1 { color: #999999; } strong { color: green; } em { color: red; } .learned-ok { color: green; } .learning-in-progress { color: orange; } .not-learned { color: red; }
HTML Academy

Restyle everything using classes:

  1. At first, delete all strong and em, so that p tag would contain only text.
  2. Add class learned-ok to the first four paragraphs.
  3. Add class learning-in-progress to the fifth paragraph.
  4. Add class not-learned to the sixth paragraph.
Theory Check Next