Course: Welcome

Properties and values in CSS [12/14]

So, the CSS language consists of selectors and properties. Selectors define what elements to apply the styles to, and properties define how exactly to render the elements.

There are lots of CSS attributes, which affect almost all aspects of elements rendering. What is more, every attribute has its defined range of values.

Some values are set by text constants, for example, red, bold, some by numerical values: 12px, 120%, etc.

The power of styles can be seen when you need to change the rendering of the selected elements quick and easy, especially when you are using classes. For example, in order to strike through the text of all learned points in the summary, you need just to add one more line to CSS:

.learned-ok {
    color: green;
    text-decoration: line-through;

And all tags with class .learned-ok will be rendered with a strikethrough text. Now imagine how much time this would take if you do it using inline styles when the summary contains more than a hundred lines.

Do it
<!DOCTYPE html> <html> <head> <title>Attributes and values in CSS</title> </head> <body> <h1>Course summary</h1> <p class="learned-ok">Paired tags.</p> <p class="learned-ok">Single tags.</p> <p class="learned-ok">Tag attributes.</p> <p class="learned-ok">Inline (built in) styles.</p> <p class="learning-in-progress">Outer styles.</p> <p class="not-learned">Styling by class.</p> </body> </html>
body { font-family: Tahoma, serif; } h1 { color: #999999; } .learned-ok { color: green; } .learning-in-progress { color: orange; } .not-learned { color: red; }
HTML Academy
  1. Add to the rule .learned-ok property text-decoration with value line-through,
  2. Add to the rule .learning-in-progress property padding-left with value 15px,
  3. Add to the rule .not-learned property background-color with value #FFF0F0.
  4. And after all, mark the last two lines in the summary as learned, changing their class to learned-ok.
Theory Check Next