Coding: CSS: Formatting
One of the primary uses of CSS is formatting text. You can indicate font styles and placement.
Read Chapter Formatting with Styles by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.
Font Styles
In most cases, people will set all of the font related properties at once including font-family, font-size, font-style, font-weight, font-color, and text-decoration.
Example
p { font-family: "Times", serif; font-size: 90%; font-weight: normal; }
h1 { font-family: "Arial", san-serif; font-size: 110%; color: red; font-weight: bold; }
Font Family
You can set a font family using the font-family property. You can list as many fonts as you wish separated by commas. It's important to declare an alternative font in case an end user doesn't have a particular font. You can use a generic font such as serif, san-serif, cursive, fantasy, or monospace as a last attempt to influence the display font.
Sample 1 - 3 paragraphs each with a different font-family defined
Example
.font1 { font-family: Georgia, serif; }
.font2 { font-family: "Comic Sans MS", san-serif ; }
Font Size
There are two ways to set up font sizes. They can be relative or absolute. Relative values such as 1.5em or 150% are elastic. The end user can increase or decrease the size by adjusting the text size in their browser. An em is equal to the size of the font. An 1 em equals 100%.
On the other hand when you establish an exact size or absolute font such as 12px or 24px, the end user has no control. Absolute fonts area indicated in pixels.
Sample 1 - 3 paragraphs each with a different font-size defined
Sample 1 - em
Sample 2 - ex
Sample 3 - in
Sample 4 - pt
Sample 5 - px
Example
.font1 { font-size: 12px; }
.font2 { font-size: 18px; }
.font3 { font-size: 24px; }
h1 { font-size: 110%; }
Font Style and Weight
Use font-style such as italic for quotations or article titles. Use font-weight such as bold to draw attention to a word or phrase.
Sample 1 - a page with text set to italics
.italic { font-style: italic; }
h1 { font-weight: bold; }
a:link { font-weight: bold; }
Font Color
Although you can use the names of colors, the font color is more specifically indicated with a number. Each color has a hexadecimal representation related to the red, green or blue in the color. You can also establish a text background color using the background property.
Sample 1 - a paragraph with blue text
.redtext { color: red; }
body { background: #0000FF; }
Font Decoration
Underline, overline, blink, and line-through are rarely used. If you need them, use font-decoration.
Sample 1 - 2 paragraphs with 1 showing strike-through examples and 1 showing underlining
Sample 2 - A page with 2 paragraphs, the second paragraph using four different text controls to set it apart from the first
Text Placement
Alignment
You can align any text on your web page including single word, paragraphs, text in tables, or other text using text-align property. Values include left, center, right, and justify.
Sample 1 - a page with justified text - spaced out so that both sides are aligned
Sample 2 - a page with right justified text
Sample 3 - a page with centered text
Example
p { text-align: left; }
h1 { text-align: center; }
Indentation
You can indent using the text-indent property. Then designate em or percent.
Sample 1 - paragraphs are idented 2em - or the space needed for 2 "m's"
Sample 2 - paragraphs are indented 5% of the browser window
p { text-indent: 2em; }
p { text-indent: 5%; }
Line Height
You can indicate the space between lines using the line-height property. The value of line-height is a number to designate the number of lines to include such as 1, 1.5, 2...
Sample 1 - paragraphs are double-spaced
body { line-height: 2; }
Letter Spacing
Spacing between letters can be controlled using letter-spacing and word-spacing. The value can be in pixels or em spaces.
Sample 1 - headings have extra space between the letters and the font is defined using the font-family property
h1 { letter-spacing: 5px; }
Padding
Padding provides space around text. When you add padding and a background color you can create interesting bars of color. In the example below white text will appear against a purple background.
h2 {
text-align: center;
font-family: Verdana, sans-serif;
color: white;
font-size: 110%;
background-color: #45177F;
padding-top: .5em;
padding-bottom: .5em;
padding-right: .5em;
padding-left: .5em;
}