Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of CSS
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Related Services

Bookmark and Share
Lecture Comments (8)

2 answers

Last reply by: Muhammad ISHAQUE
Mon Aug 22, 2016 5:18 AM

Post by Gerard Kenny on April 20, 2013

I have a question. Why does my image not show up in Firefox but it shows perfectly in the IE browser?

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:53 PM

Post by Adil Alkarkhi on April 8, 2013

How to change the number up and down in firebug? do you just click on it then use the arrows in keyboard?

0 answers

Post by Jorge Guerrero on March 19, 2012

Brenton, if you don't gell your students how you got to the layout format you're using, some things you show on your video in Fun Quotes will not work. I know the lesson is about typography, but then you should've worked with unformatted layout or explained how you got there, even if the student is supposed to know how after the last lesson.

0 answers

Post by Peter Dixon on March 9, 2012

Great video.

0 answers

Post by Ahsan ul Haq on November 30, 2011

Fantastic Strine :)

CSS Typography

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Typography Properties 0:07
    • Font-family
    • Font-size
    • Font-style
    • Font-weight
    • Letter Spacing
    • Line-height
    • Margin-left and right
    • Text-align
    • Text-decoration
    • Text-indent
    • Text-shadow
    • Text-transform
    • Word-spacing
    • Word-wrap
  • Firefox FireFontFamily Firebug Plug-in 5:56
    • Installing Firefox Plug-in
  • Example 1: Site-wide Font Settings 8:15
    • Step 1: Make All Fonts Default to a Sans-serif Font
    • Step 2: Make All Heading Fonts Default to a Cursive Font
    • Step 3: Justify Paragraphs
    • Step 4: Increase the Line-height of Paragraph Text
  • Example 2: Big First Letter 19:02
    • Step 1: Make the First Letter of the First Paragraph Bigger
    • Step 2: Position the First Two lines of Text to Wrap Around the First Letter
    • Step 3: Align the Bottom of the First Letter With the Baseline of the Second Line
  • Example 3: Fun Quotes 27:50
    • Step 1: Stylize the Quote in an Interesting Font and Color
    • Step 2: Add a Graphical Quote for Flair & Use a Reverse Indentation for Fun
  • Example 4: Breaking Long Words 34:42
    • Step 1: Make the Long Word Terms Italic Instead of Bold
    • Step 2: Long Words Wrap
  • Example 5: Rainbow 38:10
    • Step 1: Fixing the RAINBOWS!!!!! Sentence
    • Step 2: Improving the Rainbow Text