Scribd
Upload
38 views18 pages

Formatting Style

The document discusses various ways to format text using CSS styles, including: 1. Choosing font families with fallbacks, embedding custom fonts, and applying styles like italics and bold. 2. Setting font size, line height, text color, and background. Additional text properties include letter spacing, indentation, alignment, case transformation, and small caps. 3. Decorating text with effects like underlines and overlines, as well as basic lists.

Uploaded by

khairitkr
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
38 views18 pages

Formatting Style

The document discusses various ways to format text using CSS styles, including: 1. Choosing font families with fallbacks, embedding custom fonts, and applying styles like italics and bold. 2. Setting font size, line height, text color, and background. Additional text properties include letter spacing, indentation, alignment, case transformation, and small caps. 3. Decorating text with effects like underlines and overlines, as well as basic lists.

Uploaded by

khairitkr
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 18

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

You might also like