Formatting with Styles

Choosing a Font Family

font-family property has a special characteristics: you can specify more than one font
h1, h2 {font-family:Arial Black,Helvetica Bold, sans-serif} p {font-family:Verdana,Helvetica,sans-serif}

Embedding Fonts on a Page

You can choose whatever font you want, but the visitors dont have it installed on their computers, they wont be able to view it The SOLUTION is to embed a font in a page
@font-face{font-family:Sunnyside; src: url(SUNNYS10.eot)} sans-serif} h1,h2 {font-family:Sunnyside,Helvetica}

Creating Italic
Italics are often used to set off quotations, emphasized text, foreign words, magazine names and much more
p {font-family:Verdana,Helvetica,sans-serif}

.emph { font-style: italic }

Applying Bold Formatting

Bold formatting is probably the most common and effective way to make text stand out

p {font-family:Verdana,Helvetica,sans-serif}

.emph { font-style: italic; font-weight:bold }

Setting the Font Size

There are two basic ways to set the font size for the text in your Web page
h1,h2 {font-family:Verdana,Helvetica, sans-serif}
h1 { font-size: 20px } h2 { font-size: 14px } p {font-family:Arial,Helvetica Bold, sans-serif; font-size:12px}

Setting the Line Height

Line height refers to a paragraphs leading, that is, the amount of space between each line in a paragraph
h1,h2 {font-family:Verdana,Helvetica, sans-serif}
h1 { font-size: 20px } h2 { font-size: 14px } p {font-family:Arial,Helvetica Bold, sans-serif; font-size:12px; line-height:150%}

Setting the Text Color

You can change the color of any amount of text on your Web page

h1, h2 {font-family:Arial Black,Helvetica Bold, sans-serif; color:navy} p {font-family:Verdana,Helvetica,sans-serif; color:#909}

Changing the Texts Background

The background refers not to the background of the entire page, but to the background of the specified element
body { background:#9cf }

h1, h2 {font-family:Arial Black,Helvetica Bold, sans-serif; color:navy}

Controlling Spacing
You can add or reduce space between words (tracking) or between letters
body { background:#9cf } h1, h2 {font-family:Arial Black,Helvetica Bold, sans-serif; color:navy; letter-spacing:0.4em}

Adding Indents
You can determine how much space should precede the first line of a paragraph
body { background:#9cf } p {font-family:Arial Black,Helvetica Bold, sans-serif; color:navy; text-indent:1.5em}

Aligning Text
You can set up certain (X)HTML elements to always be aligned to the right, left, center or justified, as desired
body { background:#9cf }

h1, h2 {font-family:Arial Black,Helvetica Bold, sans-serif; color:navy; letter-spacing:0.4em; text-align: center}

Changing the Text Case

You can define the text case for your style by using the text-transform property
body { background:#9cf } h1, h2 {font-family:Arial Black,Helvetica Bold, sans-serif; color:navy; letter-spacing:0.4em; text-align: center} h1 {text-transform:uppercase}

Using Small Caps

Many fonts have a corresponding small caps variant that includes uppercase versions of the letters proportionately reduced to small cap size
h1, h2 {font-family:Arial Black,Helvetica Bold, sans-serif; color:navy; letter-spacing:0.4em; text-align: center} h1 {text-transform:uppercase}

h2 {font-size: 14px; font-variant:small-caps}

Decorating Text
Style sheets let you adorn your text with underlines, overlining, lines through the text and even blinking text

Visit www.w3cschool.com

LISTS