SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru kili's Avatar
    Join Date
    Jan 2004
    Location
    Damn I need a Crap
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to set header cell to H1,2,3,4 etc

    Hi guys Im trying to add some more functionalty to my external style sheet but am not very good at it.

    I want to set table header cells to
    font verdana 12px colour blue using the <h2> tag

    Pharagraphs to verdana 8pt

    Could someone be kind enough to post an exampl I can copy


    I have pretty basic stuff in there at the moment (see below) but I'm tired of having to change fonts etc.

    Cheers Kili

    a:link, a:visited, a:active{text-decoration:none;}
    A:link{color:#0000ff;}
    A:visited{color:#0000ff}
    A:hover{COLOR: #cc3300; text-decoration: underline}

    a.bc:link {color:black;background-color:transparent;font-weight: bold}
    a.bc:visited {text-decoration:none;color:black;background-color:transparent}
    a.bc:hover {text-decoration:underline;color:#900B09;background-color:transparent}
    a.bc:active {text-decoration:underline;color:#900B09;background-color:transparent}
    a.leftmenu:link {color:#015C95;background-color:transparent}
    a.leftmenu:visited {text-decoration:none;color:black;background-color:transparent}
    a.leftmenu:hover {text-decoration:underline;color:#900B09;background-color:transparent}
    a.leftmenu:active {text-decoration:underline;color:#900B09;background-color:transparent}

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    table header cells to
    font verdana 12px colour blue using the <h2> tag
    Here's one way, HTML below:

    Code:
    <table>
    <tr>
    <td>
    <h2>Header here</h2>
    </td>
    </tr>
    </table>
    CSS:
    Code:
    h2{
        color:blue; 
        font:12px Verdana;}
    Pharagraphs to verdana 8pt
    Code:
    p{
       font: 8pt Verdana, sans-serif;
    }
    Place all of this into an external style sheet and you should be good to go. I would recommend staying away from points and using either absolute or relative sizes for fonts. Pixels are probably the preferred method for screen output and printing purposes.
    Ryan Butler

    Midwest Web Design

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    HTML Code:
    <table>
    <tr>
    <td>
    <h2>Header here</h2>
    </td>
    </tr>
    </table>
    Off Topic:

    Not sure why you'd need an entire table to wrap around an h2 when there's nothing else in the table...

  4. #4
    SitePoint Guru kili's Avatar
    Join Date
    Jan 2004
    Location
    Damn I need a Crap
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks rbutler. That's great. But how do I set just the header cell in a table to <htags> in the external style sheet.

    Is this correct do I copy below into the sheet to set all header cells. I want to set the header cells from the external sheet. I set the th tag on the header cell manually on the template page and then want to set the H tag from the external sheet can this be done? Or is it just the <th> tag I need to set in the style sheet sorry I think I'm mixing my <h> tags and <th> tags


    <table>
    <tr>
    <td>
    <h2>Header here</h2>
    </td>
    </tr>
    </table>


    Thanks for your time appreciated

    Kili

  5. #5
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I wasn't clear enough. This part:

    Code:
    <table>
    <tr>
    <td>
    <h2>Header here</h2>
    </td>
    </tr>
    </table>
    Keep this in your HTML file. Within the HTML file link the external style sheet like this:

    Code:
    <html>
    <head>
    <link href="styes.css" rel="stylesheet" type="text/css">
    </head>
    ...etc
    In the CSS file do this to style h2 tags:

    Code:
    h2{
       color:blue;
       font: 12px Verdana, sans-serif;
    }
    Do the same for paragraphs:

    Code:
    p{
       color:red;
       font:8pt Verdana, sans-serif;
    }
    You would be better off using the HTML structure shown above instead of <th> tags.
    Ryan Butler

    Midwest Web Design

  6. #6
    SitePoint Guru kili's Avatar
    Join Date
    Jan 2004
    Location
    Damn I need a Crap
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan

    I understand how to call the external style sheet. I'm confused about the tags. As I understand it <th> is a table header tag <h2> I assume is also a header tag. Is there anyway to set the <th> tag to a certain font and size in the external style sheet rather than using the <h2> tags?

    Cheers Kili

  7. #7
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Redefine it:

    Code:
    th{
       font:12px Verdana;
       etc...
    }
    th tag is a header in a table tag. h2, h3, h4, are heading tags in HTML. Two different things. You must re-define each in a style sheet to over ride the default style sheet from the browser.
    Ryan Butler

    Midwest Web Design

  8. #8
    SitePoint Guru kili's Avatar
    Join Date
    Jan 2004
    Location
    Damn I need a Crap
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan that did the trick, great easy when you know how.Can I pick your brains again.

    How do you set the font to justify?
    At the moment my sheet is what you see below. I want all fonts to justify or is it block quote dunno, what do you think? I looked at the wc3 website but I cant find justify.

    Cheers Kili

    Code:
     
    a:link, a:visited, a:active{text-decoration:none;}
    A:link{color:#0000ff}
    A:visited{color:#0000ff}
    A:hover{COLOR: #cc3300; text-decoration: underline;}
    th{
       color:#003366;  
       font:22px bold verdana; text-decoration: underline;
       {text-align: center}
      
    }
    
    p{
       {text-align: left}
       color:black;
       font:10px Verdana, sans-serif;
       
    }

  9. #9
    SitePoint Guru kili's Avatar
    Join Date
    Jan 2004
    Location
    Damn I need a Crap
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Ryan ignore my last post I've found it at wc3 , going blind in me old age. Thanks for all the help

    Kili


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
  •