Text Properties | Blogging in a Snap (Sams Teach Yourself)

You've seen some text-related properties in the examples used in this appendix, but without much explanation. The following items are common properties you'll encounter as you attempt to set style sheet rules for your blog.

font-family. This property is used to define the font in which you want your content to be displayed. Remember, the font must be something the user has on his system, otherwise there's no way for the browser to display the intended look. So, if you intended to use some expensive proprietary font that matches your corporate branding, don't! Stick to the basics, and provide alternatives by providing a list of possible matches. For example:
```
 font-family: Verdana, Arial, Helvetica, sans-serif; 
```
The browser will first try to display content in Verdana, and if that is not successful, it will use Arial. If using Arial is unsuccessful, the browser will attempt to display in Helvetica. If using Helvetica fails, the browser will use any sans-serif font family to which it has access.
font-style. This property has three possible values: normal, italic, and oblique. You may use only one at a time, such as
```
 font-style: italic; 
```
font-weight. This property relates to the thickness of the font, and you will typically see one of two possibilities here: normal and bold. For instance:
```
 font-weight: bold; 
```
However, there are actually four string values for font-weight: normal, bold, bolder, and lighterthe "-er" values being relative to the inherited font-weight of the element. For the sake of browser compatibility, it's best to stick to normal and bold for this property.
font-size. The font-size property has numerous possibilities for both absolute and relative size definitions. If using an absolute size, you can use the keywords xx-small, x-small, small, medium, large, x-large, and xx-large. If using a relative size, the keywords are larger and smaller. For instance:
```
 font-size: medium; 
```
or
```
 font-size: larger; 
```
Personally, I try to stick to length or percentage values for font-size, such as
```
 font-size: 12px; 
```
or
```
 font-size: 75%; 
```
My preference is only because I understand "12px" and "75% of inherited font size" more than I do "medium," which could mean anything.
font. You can combine all of the font-* properties into one definition. The syntax is
```
 font: style weight size family; 
```
For instance:
```
 font: normal bold 12px Verdana, Arial, Helvetica, sans-serif; 
```
If you intend to use the font property, pay close attention to the syntax because the order does matter.

Text-related properties do not end with the font-* properties; there are several additional elements that you might find useful when working with your blog template.

word-spacing. This property defines the spacing that will appear between words. The default value is normal and therefore you do not have to define the word-spacing style explicitly if you simply want it to be normal. However, if you want additional spacing between words, you can use something like
```
 word-spacing: 0.2em; 
```
letter-spacing. This property works like word-spacing in that it defines spacing between elements, except in this case it defines the space between letters and not between entire words. The default value is normal and therefore you do not have to define the letter-spacing style explicitly if you simply want it to be normal. However, if you want additional spacing between letters, you can use something like
```
 letter-spacing: 0.1em; 
```
You might see a letter-spacing style implemented in headers or labels.
text-decoration. A common use of the text-decoration property is with the <a> tag, to remove the standard underline from a hyperlink:
```
 text-decoration: none; 
```
However, there are other possible values for the text-decoration property, including underline, overline, line-through, and blink. You can use this value in place of the physical HTML tag pair <s></s> to achieve a strike through effect.
Please don't ever use blink.
text-transformation. This property is quite useful for headings and footer text because it forces the typed text to take on the look defined in the style as opposed to the text that is actually typed. The possible values for this property are capitalize, uppercase, lowercase, and none. Imagine that you are defining a heading or creating a class to be used in a heading, and you want all the text to be uppercased. You would define the class as such:
```
 .upper {text-transformation: uppercase;} 
```
When used in your document, such as
```
 This is my heading 
```
you will see the following output:
```
 THIS IS MY HEADING 
```
Regardless of the case in which the text was typed, the style overrides the typed text and transforms the display into all-caps.
text-align. The text-align property is akin to the justification settings used when creating a document in a word-processing program. The possible values for the text-align property are left, right, center, and justify. To ensure that all content paragraphs are justified, you might use the following in your rule for the  tag pair:
```
 text-align: justify; 
```
text-indent. The text-indent property specifically affects only the first line of an element. If you would like the first line of your paragraphs to be indented by 10 pixels, you would place the following in your rule for the  tag pair:
```
 text-indent: 10px; 
```
color. Do not confuse this property with the background-color property; they are quite different. The color property is valid only for text elements, and affects the color of the text. You can use any of the color notation methods previously described. For instance, black text could be written in any of the following ways:
```
 color: #000000; color: #000; color: rgb(0,0,0); 
```