locked
Html page not connecting to css page RRS feed

  • Question

  • Hi:

    I created a sample test page as follows:

    <!DOCTYPE html>
    <html>

    <head>

      <link href="css/styles.css" rel="stylesheet" type="text/sss" media="screen">

    </head>

    <body>

    <div id="Section One">

     <h1>This is a main heading for Section 1</h1>
     <p>This is a paragraph of text</p>
     <h2>This is a sub-heading on the page</h2>
     <p>This is another paragraph</p>
     
     <a href="about.html">This is a sample link</a>
     
     
    </div>
    </body> 


    </html>

    I then created a stylesheet in my css folder (css/styles.css), where I typed in one test style to test the connection as follows

    h1 {
    color:fuchsia;
    }

    The h1 color within the .html test page did not change. I saved both docs again, still no go.

    Please advise,

    Ron

    Tuesday, January 7, 2014 2:32 AM

Answers

  • Thanks, Ian. I must have stared at the few lines of code for an hour and somehow could not spot the error.

    Ron
    • Marked as answer by Aston W Tuesday, January 7, 2014 5:49 PM
    Tuesday, January 7, 2014 5:49 PM

All replies

  • I did up a dummy page of your example (but tried 'aqua' as the colour) and get the same behaviour - style in external CSS applying font colour to the <H1> doesn't work (but as in-line is OK.)

    Test page here: http://murraywebs.net/testing/default.html

    I also tried "text-decoration" on the <p> (underline and over-line) tag - that works, so you should see both the "p" tags have this showing but strange why color is not working.

    I can't suggest anything else with the colour for the <h1> tag.


    Andrew M


    http://www.murraywebs.com

    "Nothing spoils numbers faster than arithmetic!"
    -- Peppermint Patty (Peanuts, Charles M. Schulz)



    • Edited by AndrewOZ1 Tuesday, January 7, 2014 9:12 AM
    • Marked as answer by Aston W Tuesday, January 7, 2014 5:48 PM
    • Unmarked as answer by Aston W Tuesday, January 7, 2014 5:48 PM
    Tuesday, January 7, 2014 9:09 AM

  •  <link href="css/styles.css" rel="stylesheet" type="text/sss" media="screen">

    Ron,

    You have a minor typo in the code above, which is preventing the CSS file from working.

    The 'type' attribute should read 'text/css' not 'text/sss'

    Fix that and all is well.


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Complete Web
    expression(web.blog)


    Tuesday, January 7, 2014 12:58 PM
  • Thanks, Ian. I must have stared at the few lines of code for an hour and somehow could not spot the error.

    Ron
    • Marked as answer by Aston W Tuesday, January 7, 2014 5:49 PM
    Tuesday, January 7, 2014 5:49 PM
  • I did up a dummy page of your example (but tried 'aqua' as the colour) and get the same behaviour - style in external CSS applying font colour to the <H1> doesn't work (but as in-line is OK.)

    Test page here: http://murraywebs.net/testing/default.html

    I also tried "text-decoration" on the <p> (underline and over-line) tag - that works, so you should see both the "p" tags have this showing but strange why color is not working.

    I can't suggest anything else with the colour for the <h1> tag.

    Andrew, your CSS file is in error. Just as an external javascript file should contain only javascript, and no <script></script> tags, so should an external style sheet contain only CSS and @directives, with no <style></style> block. The CSS parser became confused by the style block, and apparently associated the h2 selector with the opening <style> tag, which it (rightly) ignored, then applied the <p> rule, then ignored the closing style tag. If you view the page with Firebug, it is clear that the h2 rule does not exist. Syntax errors in markup, whether HTML or CSS, often lead to indeterminate behavior; this is just one more example.

    Remove the style block from your CSS file and the page expresses as expected.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Tuesday, January 7, 2014 10:59 PM
  • Thanks, Ian. I must have stared at the few lines of code for an hour and somehow could not spot the error.

    Ron

    Actually, Ron, you should UNMARK your thanks as the answer (it is not) and MARK Ian's reply as the answer (it is). Not only does Ian deserve credit for spotting the syntax error, it will help others searching the forum to find the actual answer to the topic question, which is not your thanks.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Tuesday, January 7, 2014 11:06 PM