Getting to Know CSS - Common CSS Property Values

Colors

• Keywords

• Hexadecimal

• RGB

• HSL

Keywords

• Like red,black

• The keywords notation provide limited options and thus are not the most practice

.task {
  background: maroon;
}

.count {
  background: yellow;
}

Hexadecimal

• Start with #, followed by three or six character

.task {
    background: #800000;
 }
 
 .count {
     background: #ff0;
 }

RGB

• RGB color values are stated using the rgb() function, r means red, g means green, b means blue.

• The integer from 0 to 255.

• The RGB values also include an alpha, change by using the rgba().

• The fourth value between 0 and 1.

.task {
  background: rgb(128, 0, 0);
}

.count {
  background: rgb(255, 255, 0);
}

.task {
 background: rgba(128, 0, 0, .25);
}

.count {
 background: rgb(255, 255, 0, 1);
}

HSL & HSLa Colors

.task {
  background: hsl(0, 100%, 25%);
}

.count {
  background: hsl(60, 100%, 50%);
}

• The first value represent the color wheel

• The second and third values, the saturation(飽和度) and lightness(亮度)

Length

• Absolute Lengths

• Relative Lengths

Absolute Lengths

• Pixels

• cm

• in

• mm

The pixel is equal to 1/96 of an inch, thus there are 96 pixels in an inch

p {
    font-size: 14px;
}

Relative Lengths

• em

• %

.col {
    width: 50%; /* Base your parent element width */
}

.banner {
    font-size: 14px;
    width: 5em;  /* The em unit relative to the font size of the closest parent elment with a stated font size */
}