1. Formatting with Styles

2. 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}

3. Embedding Fonts on a Page You can choose whatever font you want, but the visitors don’t have it installed on their computers, they won’t 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”}

4. 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 }

5. 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 }

6. 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}

7. Setting the Line Height Line height refers to a paragraph’s 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%}

8. 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}

9. Changing the Text’s 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}

10. 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}

11. 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}

12. 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}

13. 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}

14. 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}

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

16. Visit www.w3cschool.com www.w3cschool.com

18. LISTS