Welcome
Arachne's Web
A group focused on serving the AW community by providing help and discussion on topics such as HTML, CSS, web design, homesite decorating, netiquette and issues important to web artists.

Arachne's Web Academy (- threads, 693 posts)
    Tutorials - Cascading Style Sheets (47 posts)
    Social Thread

    Stylesheets let you control the look of your pages like never before, right down to the spacing between letters. Here is where we'll learn how it's all done. ...
    8 Members have made 32 Posts here to date.
    Google
    AncientWorlds.net Web
    Next: Borders, more borders & borders yet to come
    Prev: 13-Troubleshooting Tips
    14-Properties and Values: Font & Text
    Sankira.gif
    Author: * Sankira Qin - 15 Posts on this thread out of 1,337 Posts sitewide.
    Date: May 31, 2005 - 22:08

    Property and Value Lists

    Now that you know how to create CSS rules, you'll need to start learning the basic properties and their values. For a while, I'll be presenting lists of related properties and their values, which will then (hopefully) be followed by tip sheets for each property and its values. Since text is so important in webpages, we'll start with fonts. Notice some of the properties begin with font- and some begin with text-. Be sure to use the right one when coding.


    Font and Text Formatting

    Property Value Example Supported Browsers
          ENFO
    color #hex number, rgb(%,%,%),
    keywords, rgb(#,#,#)
    #CC0000, rgb(60%,20%,20%),
    red, rgb(255,16,101)
        
    font-family family-name or generic-family serif and sans-serif are generic fonts; it's a good idea to include one or the other after your list of font names (Arial,Helvetica,sans-serif). If none of the fonts you indicated are installed on the visitor's computer, CSS will use the generic description to render a font that is in the style you chose.     
    font-size pt, px, percent, absolute-size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) pt is Point, i.e. 12pt
    px is Pixel, i.e. 10px
        
    font-stretch normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit       
    font-style normal, italic, oblique oblique is created by the computer using an algorithm to "tilt" the font to the right; if the font you choose has no italic version, CSS will default to oblique.     
    font-variant normal, small-caps       
    font-weight normal, bold, bolder, lighter, number (100, 200 ... 900; ), inherit Not all fonts are able to render in all weight values. If they aren't able to do so, they will default to the nearest number that they CAN render.     
    font font-style font-variant font-weight font-size/line-height font-family Need to be listed in the correct order; can leave out any options you don't want to use. Note: using this shorthand resets any property not explicitly given a value to its initial value. { italic small-caps bold 18pt/24pt "Times New Roman"; }     
    letter-spacing normal, 1em, 2em, etc. Affects kerning (the distance between letters).     
    line-height normal, %, pt, etc. Affects leading (the distance between lines of text).     
    text-align left, right, center, justify       
    text-decoration none, underline, overline, line-through, blink blink is not available in MSIE     
    text-shadow none, color length length length, inherit See filters (Visual Effects) for another way of creating shadows.     
    text-transform none, capitalize, uppercase, lowercase       
    text-indent (length), (percent) Length in pixels; indents the first line of a paragraph.     
    word-spacing normal, 1em, 2em, etc Affects the distance between words.     


    NEXT: Borders, more borders & borders yet to come
    PREV: 13-Troubleshooting Tips
Rome - Rome, Season 1 - The Stolen Eagle


Copyright 2002-2008 AncientWorlds LLC | Code of Conduct and Terms of Service | Contact Us! | The AncientWorlds Staff