Course: CSS Basics

Decorative Properties [8/15]

To make your page beautiful and impressive, you can use a variety of properties: text color, background, shadows, borders, round corners, etc.

We'll discuss decorative properties in more detail in some further courses, e.g., in upcoming "Backgrounds" and "Styling Text with CSS".

In this task, let's practice with some decorative properties.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Decorative Properties</title> </head> <body> <h1>Beautiful Alerts</h1> <p>To create a beautiful alert message, make a proper choice of the text and background colors.</p> <div class="alert"> Use CSS to style your elements. </div> </body> </html>
.alert { padding: 10px; border: 1px solid #d6e9c6; }
HTML Academy

Let's finalize the alert block as follows:

  1. To the CSS rule for the alert class, add property background-color: #dff0d8;.
  2. Then, add property color: #468847;.
  3. Finally, add property border-radius: 5px;.
Theory Check Next