Introducing :CSS Cascading Style Sheets in 5 Lessons

CSS: Mulder’s Stylesheets Tutorial Introduction Font Control Typography and Layout Color and Images Advanced Positioning Mulder’s Stylesheet Tutorials can be found on www.webmonkey.com or google search ‘mulder stylesheets’

Controlling Fonts with CSS

Font Properties font-family font-size font-weight font-style font-variant text-transform text-decoration font

Calling fonts by name font-family Why use multiple fonts? H2 { font-family: helvetica, impact, sans-serif } Why use multiple fonts? Multiple Spellings: List Both Different Font Names: List Both Always end with a generic font serif (probably Times) sans-serif (probably Arial or Helvetica) cursive (probably Comic Sans) fantasy (probably Ransom) monospace (probably Courier)

Font name tips If a font name contains more than one word use quotes BODY { font-family: "gill sans", serif } Use single quotes for inline <P STYLE="font-family: 'gill sans', serif"> Text goes here. </P> If you have multiple declarations try to make font-family the last one.

Controlling text size font-size P { font-size: 16pt } 3 ways to specify font size points, ems, pixels, and other units; keywords; and percentage values.

Points, ems, pixels, & other units Refers to the distance from top of a ‘d’ to bottom of a ‘p’ in any particular font Displays slightly larger on MAC than PC P { font-size: 20pt } Ems Related to the point size of it’s parent B { font-size: 1.5em } Pixels Great from design perspective Sometimes pages wont print properly

Other Units in is inches cm is centimeters mm is millimeters pc is picas ex is x-height

Keywords If you don’t like using units you can use keywords xx-small x-small small medium large x-large xx-large Interpreted differently by each browser P { font-size: large }

Percentage values interpreted as a percentage of parent unit B { font-size: 300% } Block Level vs. Inline elements. How would you create a html using css that displays a series of 20 i’s with each growing 5 pixels larger than the one behind it.

All manner of bold and italics font-style is used for italics H3 { font-style: italic } Options for values are italic, oblique, normal font-weight is used for bold P { font-weight: bold } Bold Normal 100…900 Lighter Bolder

Special Effects font-variant H2 { font-variant: small-caps } Text-transform B { text-transform: uppercase } uppercase lowercase capitalize none

Special Effects text-decoration B { text-decoration: underline } overline line-through (these words) blink None None is a magical value with mystical properties A:link { text-decoration: none } A:active { text-decoration: none } A:visited { text-decoration: none } You can also style that all links have a certain size, color etc…

Lesson 2 excersize A quick word on div vs span Recreate the html page given using embedded styles.