Theory
Theory

CSS properties and values

So, the CSS language consists of selectors and properties. Selectors specify which elements to apply styles to, and properties specify how to display the elements.

There are a huge number of CSS properties that affect almost all aspects of element display. Each property corresponds to a specific set of values.

Some values are set using text constants, e.g. red, bold, others using numeric values: 12px, 120%, and so on.

The power of styles is that you can quickly and flexibly change the appearance of the elements you want, especially when you use classes. For example, to cross out the text of all the studied themes in an outline, you only need to add one line of CSS:

.completed {
  color: green;
  text-decoration: line-through;
}

And all tags with the .completed class will be displayed with the text crossed out. Now imagine how long it takes to do the same thing using inline styles when there are more than a hundred paragraphs in an outline.

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

Add property text-decoration with the value line-through into the .completed rule,
into the .in-progress rule add the padding-left property with a value of 15px,
into the .new rule add background-color property with a value of #fff0f0.
Mark the last two paragraphs of the outline as completed by replacing their class with completed.