Theory
Theory

CSS classes

Well, we colored the text again, but at what cost. The solution with additional tags for styling is not the best. It is much more convenient to use "classes"!

A class is just one of the attributes of HTML tags, for example:

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

In CSS, you can set styles for elements with a specific class. To do this, a class selector is used, which is written as .class-name, for example:

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

To give paragraphs different colors, you can add different classes to them and then use class selectors.

The class name can contain Latin characters, numbers, hyphen - and underscore _ and it must begin with a Latin character.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>CSS classes</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Course outline</h1> Paired tags. Single tags. Tag attributes. Inline styles. External Styles. Styling by class. </body> </html>

CSS

body { font-family: "Tahoma", serif; } h1 { color: #999999; } .completed { color: green; } .in-progress { color: orange; } .new { color: red; }

GoalsCompleted

Let's add design using classes:

Add a completed class to the first four paragraphs.
To the fifth paragraph, add the class in-progress.
Add a new class to the sixth paragraph.