Options for linking CSS styles in an html page

  1. List all your styles at the top of the page

    <html>
    <title>My page</title>
    <head>
    <style type="text/css">
    <!--
    body { background-image: url(../background/sandytiled.jpg); background-color: #CCCC99; background-repeat: repeat}
    .tableborder { background-color: #CCCCCC;}
    //-->
    </style>
    </head>
    <body>
    html stuff goes here
    </body>
    </html>

  2. Inline - at the tag you want to change

    <div id="myLayer" style="position:relative; left:0px; top:-320px; width:122px; height:41px; z-index:4; visibility: hidden" class="tableborder" >A
    whisper of Peace, a state of inner quiet and tranquility; of harmony
    within and with others</div>

  3. link to an external css document
    1. Save a text file as myStyle.css -- the ending CSS part is the important part here
    2. On your css document, just list the styles, nothing else.

      body { background-image: url(../background/sandytiled.jpg); background-color: #CCCC99; background-repeat: repeat}
      .tableborder { background-color: #CCCCCC;}

    3. On your html page, list your link to the css file like this:

    <html>
    <title>My page</title>
    <head>

    <link rel=stylesheet href="http://www.gboassy.com/mystyle.css" type="text/css"></style>

    </head>
    <body>
    html stuff goes here
    </body>
    </html>

  4. Combination of all three - top of page, inline, and external style sheet

    <html>
    <title>My page</title>
    <head>
    <link rel=stylesheet href="http://www.gboassy.com/mystyle.css" type="text/css"></style>
    <style type="text/css">
    <!--
    body { background-image: url(../background/sandytiled.jpg); background-color: #CCCC99; background-repeat: repeat}
    .tableborder { background-color: #CCCCCC;}
    //-->
    </style>
    </head>
    <body>

    <div id="myLayer" style="position:relative; left:0px; top:-320px; width:122px; height:41px; z-index:4; visibility: hidden" class="tableborder" >A
    whisper of Peace, a state of inner quiet and tranquility;<i class="writing">of harmony
    within and with others</i></div>

    </body>
    </html>

More than one style sheet can affect the presentation of a document Inheritance allows you to make your rules as broad or as specific as the page requires. Cascade: . If style sheet instructions conflict, several rules govern which style sheet will "win". The ability of one property to inherit the properties of an enclosing tag works, but only use one class at a time.

Order of inheritance: (what is listed closest to the item, to what is the farthest away)

  1. span
  2. inline
  3. top of page
  4. external pages