SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I change bullet point colour and bolding font

    First a bit of background:

    The style sheet below is referenced by a number of pages. It is called 'textstyle.css'

    div.textstyle

    h1{font: 1.4em bold Verdana, Geneva, Arial, Helvetica, sans-serif;color:#808080;text-align:left;
    }
    h2,{font: 1.0em inherit Verdana, Geneva, Arial, Helvetica, sans-serif;color:#808080;text-align:left;margin-left:20px;margin-bottom:-16px;
    }
    p,ul,td{font: 0.8em bold Verdana, Geneva, Arial , Helvetica, sans-serif;color:#000;list-style:disc;
    }
    .main:link{font: 1.0em bold Verdana, Geneva, Arial , Helvetica, sans-serif;color:#000;text-decoration:underline;
    }
    .main:visited{font: 1.0em bold Verdana, Geneva, Arial , Helvetica, sans-serif;color:#ff000;text-decoration:underline;
    }
    .main:active:hover{font: 1.0em bold Verdana, Geneva, Arial , Helvetica, sans-serif;color:#808080;text-decoration:underline;
    }


    I used a div tag to separate this formatting on the pages because one of my pages also references another style sheet and I didn't want the two to influence each other:

    <div class="textstyle">

    <table width="800">
    <tr>
    <td align="right"><a href="/index.php" class="main">Home</a> | <a href="/contactus.html" class="main">Contact Us</a> | <a href="/meetingtips.html" target="_new" class="main">Tips for Meeting</a> | <a href="/links.html" class="main">Links</a>
    <td>
    <tr>
    </table>

    </div>

    There are three things I'm trying to do:


    1. Add bullet points to the h2 headings but change their colour from black to red
    2. Make the h2 font weight heavier - I've tried bolding and replacing with 900 but it remains the same
    3. Make visited links red. Currently visited links come out as the default purple


    Now, I think that points 2 and 3 are not working because I'm mixing up class names and not using the div tag properly. I think point 1 is not working cos it has something to do with the hierarchy of the cascade.

    Anwers and correct syntax will be gratefully received.



    Many thanks in anticiption of help

    liberatortoo

  2. #2
    SitePoint Enthusiast splashpoint's Avatar
    Join Date
    Jun 2004
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, first of all you should put your styes in a <style> tag in the head of your document, not in a div.

    The rules in your linked external style sheet will still affect your document, but the stuff in your embeded style tag should over-rule them, because they are probably more specific and closer to the html you want to affect.

    So here's how your style tag should look:

    Code:
    <style>
    div.textstyle h2{display:list-item; list-style:inside disc; font-weight:bold; color:#FF0000; } /* this will only affect h2s inside a div with the class textstyle*/
    
    /* these rules will apply to any a inside a container with the class main */
    
    .main a{font: 1.0em bold Verdana, Geneva, Arial , Helvetica, sans-serif; color:#000; text-decoration:underline; }  
    .main a:visited{color:#FF0000; }
    .main a:hover, .main a:active {color:#808080; }
    </style>
    and here's the html
    Code:
    <div class="textstyle">
    
    <table width="800" class="main">
    <tr>
    <td align="right"><a href="http://splashpoint.net" >Home</a> | <a href="/contactus.html">Contact Us</a> | <a href="/meetingtips.html" target="_new">Tips for Meeting</a> | <a href="/links.html">Links</a>
    <td>
    <tr>
    </table>
    
    <h2>foo</h2>
    </div>
    You might want to consider using a list to hold your links rather than a table. Have a look at this: http://www.sitepoint.com/forums/showthread.php?t=411155

    Hope that helps.

    mark

  3. #3
    SitePoint Enthusiast splashpoint's Avatar
    Join Date
    Jun 2004
    Location
    UK
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

  4. #4
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol!
    Olly Hodgson
    thinkdrastic.net


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
  •