15.4. CSS Properties

Below are some examples of common CSS properties and what they do. This is by no means a complete list, but it is a good place to start.

15.4.1. Good CSS Properties to Know

CSS Property Definition Default Value
background-color Sets the color of the background for an element. transparent
border

Takes 3 values for the border (width, style, color).

  • Only the style value is required.
  • width sets the thickness of the border around an element.
  • style values include solid, wavy, dotted, dashed, and double.
medium (3px), none, text color
border-radius Rounds the 4 corners of an element. 0px
color Changes the text color. black
font-family Changes the font types. Depends on the browser
font-size Changes the size of the font. medium or 20px
text-align Aligns the text within an element. left
text-decoration

Applies decorations to text and takes 3 values (line, color, and style).

  • Only the line value is required.
  • line values include underline, overline, and line-through.
  • style values include solid, wavy, dotted, dashed, and double.
no line, text color, solid

A larger, searchable list of CSS properties can be found at W3Schools.

15.4.2. CSS Example

In the HTML chapter, we used attributes to style a simple webpage about space plants. Let’s revisit that example, but this time we will use internal CSS instead of inline CSS to style the webpage. We will also include some of the properties listed above to create a different look.

Note how the selectors and declaration blocks between the <style> tags control the appearance of the page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
   <head>
      <title>Plant-Loving Astronauts</title>
      <style>
         body {
            background-color: cornflowerblue;
            text-align: center;
         }
         h1 {
            color: green;
            text-decoration: underline;
         }
         p {
            font-size: 18px;
            font-family: courier new;
         }
         img {
            border-radius: 25px;
         }
         hr {
            border: 1px dashed white;
         }
      </style>
   </head>

   <body>
      <h1>Space Plants Are Cool</h1>
      <p>
         NASA discovers that plants can live in <b>outer space</b>.<br>
         More innovations from this discovery to follow.
      </p>
      <hr>
      <img src = "space-flower.jpg" alt = "Flower floating in space.">
      <!-- This image was taken by NASA and is in the Public Domain -->
      <hr>
   </body>
</html>
For the website in the previous chapter about space plants, made the page background color blue, center-aligned content, the heading green, the paragraph text Courier New font at 18 pt. size, and the image has rounded corners.

15.4.3. Check Your Understanding

Question

Play around with the order of the values for the border property.

border: 5px solid red;

Does the order matter for the thickness, style, and color values?

  1. No, the order does not matter.
  2. Yes, the order matters.

Question

Which of the following is NOT a text-decoration style?

  1. dotted
  2. double
  3. wavy
  4. strike-through

Question

Find an interesting CSS property that is NOT on the list above. Give its definition, syntax, and default value.