SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to apply CSS to the body?

    Ok, I have the following style sheet;

    a.menu:link { color: #FFFFFF; text-decoration: none; font-weight: bold }
    a.menu:active { color: red; text-decoration: none; font-weight: bold }
    a.menu:visited { color: #FFFFFF; text-decoration: none; font-weight: bold }
    a.menu:hover { color: #9999CC; text-decoration: none; font-weight: bold }

    a.skull:link { color: #666666; text-decoration: none; font-weight: bold }
    a.skull:active { color: red; text-decoration: none; font-weight: bold }
    a.skull:visited { color: #666666; text-decoration: none; font-weight: bold }
    a.skull:hover { color: #666666; text-decoration: underline; font-weight: bold }


    and this is applied to the following link

    http://www.stablewars.com/ppv/backlash.shtml

    basically I simply insert class="menu" or "skull" within the link to apply the css to the links. Simple enough, although I do have to do this after every link, Im guessing there must be an easier way where you just call class="menu" once and have it applied to all links on that page.....although as typing this Ive just realised maybe not since you may want to apply a diff css effect to another link on another part of the page....sorry rambling here, Im way off topic.

    Ok what I want to do is, apply a css style to the body of the document, that is the bit in the middle where the bulk of the text is, so basically call a new class once (called body) and have it applied to everything inside the layout table that shows the results.

    To simplfy, I would like to have all links that appear in this section to be purple (to go with the colour site) and Im wondering is there a way to do this without inserting a class inside the link brackets on every link but rather just call it once somewhere?

    Did I make any sense?
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!

  2. #2
    long gone but not forgotten AljapaCo's Avatar
    Join Date
    Aug 2001
    Location
    Sweden
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using tables?
    If so, apply the class the the TD...
    T O B I A S - S T R A N D H | visit my site here
    OPERA7 /MSIE6 /FireFox 1.1/Win2000 /ADSL /17" Screen /1024x768
    god doesn't create genius, he clones me.............

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL Ahhhh I get it the TD thingy.....

    Ummm actually I haven't a clue as to what you're talking about

    Yes Im using tables, the text in the middle all come in one table, care to elaborate as to how to do this please?
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    BC, Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way to tackle this, as metioned itn the TD reference, is to assign a class to the <td> tag. Then, using pseudo-classes(?), define the different states of the <a> (anchor) tags as they appear within the <td> tag.

    Such as:

    <style>
    <!--
    .content {
    /* define your main color and font attributes here
    }
    .content a:link {
    }
    .content a:active {
    }
    .content a:hover {
    }
    .content a:visited {
    }

    -->
    </style>

    I cannot remember if NS 4.? handles things all that well or not but I seem to recall this worked.
    Go Leafs Go!!!!!!!!

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put this in your page's <head>:
    Code:
    <style type="text/css">
    <!--
    td.skull {
      background: url(../images/text-box2.jpg) #ffffff;
      height: 271px;
      vertical-align: top;
      width: 212px;
    }
    
    td.skull a:link {
      background: transparent;
      color: #666;
      font-weight: bold;
      text-decoration: none;
    }
    
    td.skull a:visited {
      background: transparent;
      color: #666;
      font-weight: bold;
      text-decoration: none;
    }
    
    td.skull a:hover {
      background: transparent;
      color: #666;
      font-weight: bold;
      text-decoration: underline;
    }
    
    td.skull a:active {
      background: transparent;
      color: #f00;
      font-weight: bold;
      text-decoration: none;
    }
    -->
    </style>
    Put this in your page's <body>:
    Code:
    <table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#000000">
      <tr> 
        <td class="skull"> 
          <p><font size="2"><br>
            <a href="../ppv/backlash.shtml">WWF Backlash Play Per View 
            results up!</a><br>
            <br>
            <a href="../htp/schedule.shtml">Provisional Upcoming Fantasy 
            Wrestling Season Schedule available now</a></font></p>
          <p><font size="2"><a href="../ppv/announcement.shtml">Play 
            Per View Announcement</a></font></p>
          <p><font size="2"><a href="../announcement.shtml">Fantasy 
            Wrestling &amp; Site Announcement</a></font></p>
          <p><font size="2"></font></p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </td>
      </tr>
    </table>
    BTW, trout67, you just commented out the whole style sheet from /* define your main color and font attributes here on down.

  6. #6
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    London, UK
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try the suggestions tomorrow morning as its late now. I am using a external sytle sheet though, I take I simply add the text suggestedto there and call it somewhere in the body??
    stablewars.com - WWF Fantasy Wrestling, It ain't no E-fed!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •