Multimedia and the World Wide Web

CSS Tutorial 2

Prepared by: Anthony Larrain

---

Font Manipulations

• font-family - Specifies the font.

Example

p { font-family:Verdana; } h1 { font-family:"Book Antiqua"; } p { font-family:Verdana, Helvetica, Arial, sans-serif; }
• If the font name has more than one word separated by a space you need to enclose the font name in quotes.
• Can specify more than one font as a fallback in case the system does not support the first font. The line should end with a generic font family, ie (sans-serif, serif, fantasy ..)
• Multiple font values must be separated by a comma.
• color - Specifies the color.

Example

p { color:mediumseagreen; } h1 { color:#369CF0; } h2 { color:rgb(100,200,156); }

A list of CSS color names and Hex values

• font-size - Controls the size.

Example

p { font-size: 14px; } p { font-size: 1em; } p{ font-size: 1.2em; } body { font-size: 1em; }
• The value of the font-size property is a number and a unit.
• Unit px stands for pixels.
• Unit em stands for m-units.
• 1em is the size of the relevent font.
• 1.2em would be 20% bigger than the current font.
• font-style - Specifies the style of the font.

Example

p { font-style:italic; }
• font-weight - Specifies the amount of bold.
p { font-weight:bold; } h2 { font-weight:bolder; } p { font-weight:lighter; }

Design Tips

• Use em units for font size.
• Avoid long lines of itallized text.
• For long lines of text use san-serif fonts

@Anthony Larrain 2005 - 2006

Send Questions or Comments to hci201@yahoo.com