CSS Typography

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    CSS Typography - Presentation Transcript

    1. Typography Basics with CSS
    2. Adding CSS To Your HTML Page
    3. Inline CSS <p style=”font-family:helvetica,arial,sans-serif;font- size:12px;color:#f00;”>This paragraph has style!</p>
    4. Internal CSS <head> <style type=”text/css”> body { font-family: helvetica, arial, sans-serif; } </style> </head> Add stylesheets in the head section of the xhtml page
    5. External CSS <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" /> </head> Link stylesheets with the <link /> tag.
    6. Never use Inline & Internal CSS If you need to change the layout of a website, you will need to change a lot of files.
    7. Always use External CSS Changes made to this file “update” the layout of the full website Easier to maintain
    8. HTML Attributes • Define properties for an element. • Consist of a attribute/value pair • Appear within the element’s start tag.
    9. Attributes for <link> rel="stylesheet" Specifies the relationship of the linked document with the current document.
    10. Attributes for <link> href="css/style.css" specifies the location of a linked document
    11. Attributes for <link> type="text/css" Specifies the MIME type of the linked document
    12. Attributes for <link> media="screen" Used to specify different styles for different media Possible values: screen, tv, projection, handheld, print, braille, aural, all
    13. Attributes for <link> charset="utf-8" Specifies the character encoding of the linked document
    14. Reset CSS Each browser has its own values for margins, line-heights, ... Get rid of the browser default CSS! http://meyerweb.com/eric/tools/css/reset/
    15. CSS Anatomy
    16. CSS Selectors select elements in a HTML document that are affected by a rule set h1 { font-family: Helvetica, Arial, sans-serif; font-size: 36px; }
    17. Declaration Block consists of anything between the curly brackets h1 { font-family: Helvetica, Arial, sans-serif; font-size: 36px; }
    18. Declaration tells a browser how to render an element consists of a property and a value, separated by a colon h1 { font-family: Helvetica, Arial, sans-serif; }
    19. Property aspect of the element to style only one property within each declaration h1 { font-size: 36px; }
    20. Value the exact style you wish to set for the property h1 { color: #f00; }
    21. Styling Type
    22. Font Family font-family: “Helvetica Neue”, Arial, sans-serif; Property: font-family Value: a list of fonts, comma separated Place the family-name within quotes if it contains spaces End the font-stack with a generic family
    23. Font Size font-size: 75%; font-size: 1.5em; Property: font-size Value: sets the size of the font in a chosen unit Possible units: em, ex, px, pt, %, ...
    24. Line Height line-height: 1.4em; Property: line-height Value: sets the line height a chosen unit Possible units: em, ex, px, pt, %, ... Best practice: em & %
    25. Font Weight font-weight: bold; Property: font-weight Value: sets the weight of the font Possible values: normal, bold, bolder, lighter
    26. Font Style font-style: italic; Property: font-style Value: sets the weight of the font Possible values: normal, italic
    27. Text Transform text-transform: uppercase; Property: text-transform Value: controls the capitalization of text Possible values: normal, capitalize, uppercase, lowercase
    28. Letter Spacing letter-spacing: -2px; Property: letter-spacing Value: increases or decreases the space between characters Possible values: normal, any negative of positive number in pixels
    29. Word Spacing word-spacing: 10px; Property: word-spacing Value: increases or decreases the space between words Possible values: normal, any negative of positive number in pixels
    30. Color color: #e84400; Property: color Value: hexadecimal values for Red Green and Blue: #e84400; Pick your colors with Photoshop, Kuler or COLOURLovers
    31. Space Before & After margin-top: 1em; margin-bottom: 1.4em; Property: margin-bottom, margin-top Value: a value in a chosen unit (use em or %)
    32. Text Replacement • Background Images • sIFR • cufón
    33. The Future of Web Typography • @font-face + licensing problems • Typekit
    34. Demo Add CSS to your HTML document Use of the selectors you’ve just learned Kuler and COLOURLovers Typekit: I have 4 Typekit Invitations left, giving them away today!
    SlideShare Zeitgeist 2009

    + Jan VantommeJan Vantomme Nominate

    custom

    192 views, 0 favs, 1 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 192
      • 138 on SlideShare
      • 54 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 6
    Most viewed embeds
    • 54 views on http://vormplus.be

    more

    All embeds
    • 54 views on http://vormplus.be

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.