Moving on to a challenge that deals with using the properties we have learned, which includes box-model properties and font-styling properties.

Note

You can write the code in the styles.css file of the following sandbox. To see the rendered page, drag it from the right edge of a sandbox window.

Task

1. For the whole body, set the font-size to 16px, line-height to 1.2 and font-family to sans-serif using shorthand.

2. For h1 set the text size to 32px, the font's variant to small-caps, and the line's height to 1.5.

3. Style the class styleMe as:

   • text-indent to 10px;
   • font-size to 20px;
   • color to black.

4. Style the list-items to have a word-spacing of 5px and make the text bolder.

5. Write a selector that targets a class favoriteThings. Style it with the rules:

   • Set the width to 500px;
   • Add 10px of top margin;
   • Add 30px of padding from all sides
   • Add the solid orange left border of the 5px width . Note! To add a border only to the left side, use the property border-left the same way you would use the border.

6. Write a rule to select all paragraphs with the class description and set the margin top and bottom to 10px using the shorthand.

7. Set the position to absolute, shift it 350px from the left, and set the height to 100px.

Here is the result you should get. If you are having problems, you can drag the code part with a solution from the left edge of the sandbox window.