Style Sheet Summary

Importing a Style Sheet

@ import url (...)
  • imports an existing style list
  • ex.:
    < style>
    < !--
     @ import url('sample.css');
     @ import url('red1.css');
    -->
    < /syle>

    • Linking a Style Sheet

    < Link > reference a style sheet
    rel = "style sheet" specified that the said file is of a style sheet type
    type = "text/css"
  • text/css for style sheet
  • text/jss for javascript style sheet
    • href = " url " standard location of the said file
    ex.:
      < link rel="style sheet" type="text/css" href="blue.css" >

    Text Font related

    text-indent provide first line indent option for paragraphs
    font-family this is the font group or those font that belongs together having similar characteristics
    font-style normal, italic, oblique
    font-variant normal, small-caps
    font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
    font-size xx-small, x-small, small, medium, large, x-large, xx-large or measurement
    font all of the above properties
    ex.:
     < style>
     < !--
       body { font-family: "comic sans ms", technical, "times new roman", serif;
          text-indent: 2px }
       H1, H2, H3, H4 { font-family: helvetica, arial, "sans-serif"; }
     -->
     < /style >

    Hyper-Link Characteristics

    A:LINK for the standard or default characteristics
    A:ACTIVE color when hyper-link is active
    A:VISITED color when the said link had been visited already
    A:HOVER when the mouse is directly over the said hyper-link
    ex.:
      a:link { color: blue; }
      a:active { color: red; }
      a:visited { color: magenta; }
      a:hover { color: #336633; text-decoration: underline; }

    Text related

    word-spacing measurement
    letter-spacing measurement
    text-decoration none, underline, overline, line-through, blink
    vertical-align baseline, super, top, texttop, middle-bottom, text-bottom
    text-transform none, capitalize, uppercase, lowercase
    text-align left, right, center, justify
    text-indent measurement or % value
    padding
  • measurements
  • provide spacing between borders or left and right margin
  • can be applied to Table cell ... < td>... < /td>
  • can be applied to P, Blockquote, DIV

    • Specifying Generic Style Classes

    .NAME
  • use a dot(.) before any user defined name to represent a user defined style
  • ex.:
        .red { color: red; }
  • IF the dot(.) is omitted a valid HTML tag is being expected
  • ex.:
        P { color: black; text-indent: 2px; }

    • Color properties

    color
  • #rrggbb is the most common format used
  • this is the foreground color
    • background-color #rrggbb, transparent
    background-image url ("..."), valid URL of the said source file to be used
    background-repeat repeat, no-repeat, repeat-x, repeat-y
    background all of the above properties
    ex.:
     < style>
     < !--
        BODY { background-color: #FFFFCC;
          background-image: url (pattern.gif);
          background-repeat: repeat-x;
          }
     -->
     < /style>

    BOX properties

    border-color #rrggbb format
    border-style none, dotted, solid, double, outset, inset, ridge, groove
    border-width measurement, thin, medium, thick
    border all of the above properties
    border-top
    border-left
    border-right
    border-bottom
  • requires the following values
    • border-style
    • measurement for thinkness
    • color
    • width % value or measurements
    height % value or measurements
    float right, left, none
    clear right, left, none, both
    ex.:
    BlockQuote { width: 50%;
        float: right;
        border: 2px solid black;
       }

    Classification

    display inline, list-item, block
    line-height % value or measurements
    line-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none
    line-style-image url (http://someurl.com/image.gif)

    used to alter the following HTML standard tags and as follows:
    H1, P, UL, Li