Understanding CSS Properties

Recipes in this chapter cooked up popular properties such as color, font-family, font-size, and text-decoration. Properties fall between the brackets and their values immediately follow as shown here in a generic example:

selector {
 property: value;
}

A real-world example might look like the following:

li {
 list-style-type: square;
}

Any time li appears in the document, the bullet appears as a square rather than a traditional bullet.

Discussion

Selectors identify what should be styled within a web document, while properties and selectors identify the what and how that portion of the web document should be modified.

For example, the color property means the element's color will change, but not what color. That's the job for value. Table 1-2 showcases a few more properties, values, and what they do.

Table 1-2. A short listing of CSS properties
Property Value Result
                              font-weight

bold

Adds bold to text
                              border-color

Color name or color hexadecimal HTML value (e.g., #000000 for black and #ffffff for white) Adds color to border
                              border-style

solid
dotted
dashed
double

Adds solid lineAdds dotted lineAdds dashed lineAdds two lines
                              text-align

left
center
right
justify

Aligns text to the leftAligns text in the centerAligns text to the rightFully expands text from left to right