1. Contents
  2. 21. Styling the Web With CSS
  3. 21.3. CSS Rules

21.3. CSS Rules

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

21.3.1. Good CSS Properties to Know

CSS Property Definition Default Value
font-size Changes the size of the font. medium or 20px
color Changes the text color. black
font-family Changes the font types. Depends on the browser
background-color Sets the color of the background of an element. transparent
text-align Aligns the text within an element. left

21.3.2. CSS Example

Adding CSS to the HTML page about Space Plants is the logical next step in building a website about this cool discovery. The astronauts building the site used the body, h1, and p selectors to change some of the styling of those elements.

 1<!DOCTYPE html>
 2<html>
 3   <head>
 4      <title>Plant-Loving Astronauts</title>
 5      <style>
 6         body {
 7           background-color: cornflowerblue;
 8         }
 9         h1 {
10           color: green;
11         }
12         p {
13           font-size: 18px;
14         }
15      </style>
16   </head>
17   <body>
18      <h1>Space Plants Are Cool</h1>
19      <p>NASA discovers that plants can live in <b>outer space</b>. More innovations from this discovery to follow.</p>
20      <img src = "space-flower.jpg" alt = "Flower floating in space.">
21      <!-- This image was taken by NASA and is in the Public Domain -->
22   </body>
23 </html>
Made the background color blue, the heading green, and the paragraph text 18 pt. font of the website in the previous chapter about space plants.

21.3.3. Check Your Understanding

Question

Find a CSS property and give its name, definition, and default value. Please do NOT use one of the ones above.