SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: CSS Standards

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Standards

    Hi All,

    I am hoping some of you experts might be able to help me. I am a beginner to learning style sheets so please excuse me for being naive.

    I was attempting a style sheet format as shown below but when I validated it through W3C it seems to require a background colour with every heading, which I thought, was rather odd.

    I was hoping someone might have a look at it and perhaps instruct a few pointers to me about going the correct way about doing a standard compliant style sheet.

    I used pt and px perhaps I shouldn't use the two different font sizes?

    Would be really grateful for any help on this thank you.


    W3C CSS Validator Results for file://localhost/A:\style5.css
    To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.

    Warnings
    URI : file://localhost/A:\style5.css
    Line : 3 Level : 1 You have no background-color with your color : .body
    Line : 6 Level : 1 You have no background-color with your color : H1
    Line : 9 Level : 1 You have no background-color with your color : H2
    Line : 12 Level : 1 You have no background-color with your color : H3
    Line : 15 Level : 1 You have no background-color with your color : P
    Line : 18 Level : 1 You have no background-color with your color : LI
    Line : 20 Level : 1 You have no background-color with your color : .subhead
    Valid CSS informations
    .body {
    font-size : 10px;
    color : #666666;
    font-family : verdana, arial, helvetica, sans-serif;
    }
    H1 {
    font-weight : bold;
    font-size : 16pt;
    color : #006699;
    font-family : verdana, arial, helvetica, sans-serif;
    }
    H2 {
    font-weight : bold;
    font-size : 10pt;
    color : #666666;
    font-family : verdana, arial, helvetica, sans-serif;
    }
    H3 {
    font-weight : bold;
    font-size : 9pt;
    color : #666666;
    font-family : verdana, arial, helvetica, sans-serif;
    }
    P {
    font-size : 10px;
    color : #666666;
    font-family : verdana, arial, helvetica, sans-serif;
    }
    LI {
    font-size : 10px;
    color : #666666;
    font-family : verdana, arial, helvetica, sans-serif;
    }
    .subhead {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size : 10px;
    color : #666666;
    font-weight : bold;
    }

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because you've specified a foreground color. W3C insists that you use both for accessibility reasons: it's entirely probable that a visitor to you site may have a default too close to your foreground color. Try either:
    Code:
    body {
      background: #fff;
      }
    
    /* OR */
    body * {
      background: transparent;
      }
    BTW, nice stylesheet!

    ~~Hope This Helps

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks for the help!

    Although would you recommend I use two diffrent font sizes i.e. pt or px?

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by DLF
    Although would you recommend I use two diffrent font sizes i.e. pt or px?
    Nope, sorry I didn't see that (I was commenting on the way you've laid out your stylesheet). The W3C says that you should use relative font sizes like pixels, percentages, and em/ex's.

    You should also make your selectors lowercase to comply with XHTML.

  5. #5
    No. Phil.Roberts's Avatar
    Join Date
    May 2001
    Location
    Nottingham, UK
    Posts
    1,142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    % Sizes are best for fonts as this allows people with visual problems to resize the onscreen fonts to a more comfortable level.
    THE INSTRUCTIONS BELOW ARE OLD AND MAY BE INACCURATE.
    THIS INSTALL METHOD IS NOT RECOMMENDED, IT MAY RUN
    OVER YOUR DOG. <-- MediaWiki installation guide

  6. #6
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Phil.Roberts
    % Sizes are best for fonts as this allows people with visual problems to resize the onscreen fonts to a more comfortable level.
    em's and ex's do that, too. However, pixels are better supported than all the others, unfortunately...

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help guys. I tried changing the body bgcolor but the validator still is saying its an error!!

  8. #8
    No. Phil.Roberts's Avatar
    Join Date
    May 2001
    Location
    Nottingham, UK
    Posts
    1,142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do it like this:

    Code:
    body {
      background-color:#xxxxxx
      color:#xxxxxx
    }
    Then for subsequent elements:

    Code:
    h1 {
      background-color:inherit;
      color:#xxxx
    }
    
    h2 {
      background-color:inherit;
      color:#xxxx
    }
    
    h3 {
      background-color:inherit;
      color:#xxxx
    }
    And so on. This will allow you to specify a background-color for each element and validate correctly.

    The only problem with this is that inheritence occurs in the order that elements are specified in the stylesheet (I think) So the header elements inherit their background-color from the BODY element, but if you have a table element setting with a NEW background-color, then all subsequent elements with the background-color:inherit; setting will inherit from the table element you set.

    I THINK thats how it works anyway, Im not 100% certain. I hope I havent made this sound too vague.


    Incidentally background-color:inherit; will produce some truly disasterous results in Netscape 4.xx
    THE INSTRUCTIONS BELOW ARE OLD AND MAY BE INACCURATE.
    THIS INSTALL METHOD IS NOT RECOMMENDED, IT MAY RUN
    OVER YOUR DOG. <-- MediaWiki installation guide

  9. #9
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or:
    Code:
    background: transparent

  10. #10
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for your help I will tackle away and see what I can do.


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
  •