Recipe 1.4. Understanding CSS Properties

Problem

You want to learn more about CSS properties.

Solution

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

For a more complete rundown of available CSS properties, see Appendix B.

Problem

Solution

Discussion

Table 1-2. A short listing of CSS properties

See Also