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 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 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 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%}

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

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

LISTS