1. Introducing :CSS
Cascading Style Sheets in 5 Lessons

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

3. Controlling Fonts with CSS

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

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

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

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

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

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

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

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

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

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

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

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