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