Formatting Text with HTML and CSS

Summary block-level elements. Character-level elements Logical and physical style Special elements: hr,address, quotation Text alignment Font size and font face Nobr and wbr Using CSS and span

Physical Styles physical style tags to change the actual presentation style Bold Italic Monospaced typewriter font Bigger print than the surrounding text Smaller print Subscript Superscript

Logical style Logical style tags describe the meaning of the text within the tag, not how it should be presented. strangest left turn #include "trans.h"

Horizontal Rules … … Quotation and space

Text Alignment Aligning Individual Elements We don't just paint the town red. Aligning Blocks of Elements Serendipity Products Who We Are What We Do

Continue… Left aligned text. Right aligned text. Centered text. This text is justified. I'm adding some extra text for padding so that you can see exactly how the justification works. As you can see, the text is expanded so that it is aligned with both the left and right margins.

Fonts and Font Sizes Bored with your plain old font? Change it. Relative font: Change the Font size again.

Changing the Font Face Sans Serif fonts are fonts without the small "ticks" on the strokes of the characters.

Modifying Fonts Using CSS This text will appear in the Georgia font, or, if that font is not installed, the browser's default font. This text is normal sized, and this text is twice that size. This text is 12 pixels tall.

and The... element is the opposite of the tag. The text inside the tags always remains on one line, even if it would have wrapped to two more lines without the. The tag (word break) indicates an appropriate breaking point within a line

Character Formatting Using CSS Here is some underlined text. Here is some blinking text.

Font Properties Here's some italicized text. This Text Uses Small Caps.

CSS Properties text-decoration underline, overline, line-through, blink, and none. font-style The three values are normal, italic, and oblique. font-weight Options are normal, bold, bolder, lighter, and font-family font-variant Sets the font variant to normal or small-caps. text-align Specifies how text is aligned: left, right, center, or justify. font-size