Link an external stylesheet.

Discussion in 'Web Design and Development' started by Dal123, Aug 11, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    You may all recognize me as the newbie that embarrasses himself regularly; well today is no different :eek:.
    Bought a book "Beginning CSS web development from novice to professional" by Simon Collison. Briefly looked over it. Now went to the first chapter. I'm having trouble creating my external style sheet. I have entered everything correctly (Checked about 4 times), For some reason the external style sheet will not format the other page.:confused:
    Very confused and embarrassing considering 1st part of book. Surely they can't be entering wrong information in a book that I just paid £15 for!
    Also how do you enter the # symbol. Obviously I could copy and paste but this will be very long winded as it's necessary to select colours.

    Here is my CSS code which shows two errors on line 1 and line 10:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Applying CSS Mini-site</title>
    <link rel="stylesheet" type="text/css" href="external.css" />
    </head>
    <body>
    <h1> Applying CSS Templates</h1>
    <p {color: #F00;}</p>
    <p> Click an example below.</p>
    <h2>Examples</h2>
    <ul>
    <li><a href="base.html"><Base template</a></li>
    <li><a href="inline.html">Inline CSS template</a><</li>
    <li><a href="embedded.html">Embedded CSS template</a></li>
    <li><a href="external.html">External CSS template</a></li>
    <li><a href="imported.html">Imported CSS template</a></li>
    </ul>
    </body>
    </html>
    Here is the page it is linked to (external.html):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Applying CSS Mini-site</title>
    </head>
    <body>
    <h1> Applying CSS Templates</h1>
    <p> A mini-site containing several (x)HTML templates, each being
    styled using a different method of CSS applictation.</p>
    <p> Click an example below.</p>
    <h2>Examples</h2>
    <ul>
    <li><a href="base.html">Base template</a></li>
    <li><a href="inline.html">Inline CSS template</a><</li>
    <li><a href="embedded.html">Embedded CSS template</a></li>
    <li><a href="external.html">External CSS template</a></li>
    <li><a href="imported.html">Imported CSS template</a></li>
    </ul>
    </body>
    </html>
    Help much appreciated.
     
  2. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #2
    Sorry, you seem to have pasted the HTML twice... Will check back later to have a look when you've edited :)

    As for the #, alt+3

    /Doug

    -EDIT-

    Oh, that may be the problem - you haven't got a CSS file there in the first code box, that's HTML with some incorrect code in. A CSS file will look as follows (for example):

    Code:
    body {color:#FFFFFF;}
    p {font-size:0.7em;}
    #feature {background-color: #999999;}
    .sidebar {float:right;}
    
     
  3. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #3
    Thanks, # cool.
    Sorted out my incorrect paste:eek:.
    Regards
     
  4. Joined:
    Jun 30, 2009
    #4
    Your CSS does not have to contain any HTML code. So I think it's meant to be something like

    external.css
    Code:
    p {
    color: #F00;
    }
    
    index.htm
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Applying CSS Mini-site</title>
    </head>
    <body>
    <h1> Applying CSS Templates</h1>
    <p> A mini-site containing several (x)HTML templates, each being
    styled using a different method of CSS applictation.</p>
    <p> Click an example below.</p>
    <h2>Examples</h2>
    <ul>
    <li><a href="base.html">Base template</a></li>
    <li><a href="inline.html">Inline CSS template</a><</li>
    <li><a href="embedded.html">Embedded CSS template</a></li>
    <li><a href="external.html">External CSS template</a></li>
    <li><a href="imported.html">Imported CSS template</a></li>
    </ul>
    </body>
    </html>
    
     
  5. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #5
    OK... I think you got the wrong end of the stick somewhere along the line.

    The HTML file contains your content and defines your document structure (headers, paragraphs etc.) and is shown in your second box. However, you need to put the link to the stylesheet in the head.

    Your stylesheet contains only the stylistic information for your document.

    Try:

    HTML - testpage.html (name as you wish - external.html?)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
       <head>
          <title>Applying CSS Mini-site</title>
          [B]<link rel="stylesheet" type="text/css" href="external.css" />[/B]
       </head>
    
       <body>
          <h1>Applying CSS Templates</h1>
          <p>A mini-site containing several (x)HTML templates, each being
    styled using a different method of CSS applictation.</p>
          <p>Click an example below.</p>
          <h2>Examples</h2>
          <ul>
             <li><a href="base.html">Base template</a></li>
             <li><a href="inline.html">Inline CSS template</a></li>
             <li><a href="embedded.html">Embedded CSS template</a></li>
             <li><a href="external.html">External CSS template</a></li>
             <li><a href="imported.html">Imported CSS template</a></li>
          </ul>
       </body>
    </html>
    CSS - external.css
    Code:
    p {color: #F00;}
    
    This will make all your paragraphs have a text colour of #F00, or #FF0000 in full hex colour code.

    Hope that helps!

    /Doug

    -EDIT-

    Damn was beaten to it. However, to correct Not Available, the CSS file should not have any HTML in it. And he forgot to add the CSS link to the HTML file, so I'm still useful :)
     
  6. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    Thanks for all input buddies:D.
    I've tried both your suggestions quickly :( no luck yet: So far I've got this as my stylesheet:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Applying CSS Mini-site</title>
    p {color: #F0000;}.
    </head>
    <body>
    </body>
    </html>
     
  7. Greedo Guest

    Joined:
    Jul 26, 2009
    #7
  8. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #8
    Are you saving 2 files, each as outlined in my previous post?

    In the example you most recently posted, you also have 5 values for your colour, you always need 3 or 6.

    If you want to use the style inline, rather than on an external stylesheet, then try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
       <head>
          <title>Applying CSS Mini-site</title>
       </head>
    
       <body>
          <h1>Applying CSS Templates</h1>
          <p [B]style="color: #F00;"[/B]>A mini-site containing several (x)HTML templates, each being
    styled using a different method of CSS applictation.</p>
          <p>Click an example below.</p>
          <h2>Examples</h2>
          <ul>
             <li><a href="base.html">Base template</a></li>
             <li><a href="inline.html">Inline CSS template</a><</li>
             <li><a href="embedded.html">Embedded CSS template</a></li>
             <li><a href="external.html">External CSS template</a></li>
             <li><a href="imported.html">Imported CSS template</a></li>
          </ul>
       </body>
    </html>
     
  9. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #9
    That's still not a stylesheet. An external CSS stylesheet contains CSS only. No doctype, no html, no head, no body, not even a <style> tag. Just CSS rules as stated by others in this thread.

    And by the way, if that was an html page, you forgot to wrap your embedded CSS in <style></style>.
     
  10. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #10
    In case it's useful, I've attached the files :)

    /Doug
     

    Attached Files:

    • Demo.zip
      File size:
      735 bytes
      Views:
      16
  11. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #11
    Absaloutely baffled!

    Thanks for all your input so far people. Can't believe I'm having grief with first chapter of book that I thought was great.:eek:
    To clarify; both files are in the same folder.
    Surely don't want to embed this, as It's an external style sheet. I have already done previous lesson in book on an embedded style sheet.
    My css file so far titled "external.ss" is:
    Code:
    p {color: #F0000;}
    The html/xhtml file it links to titled "external.html" is:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Applying CSS Mini-site</title>
    <link rel="stylesheet" type="text/css" href="external.css"/>
    </head>
    <body>
    <h1> Applying CSS Templates</h1>
    <p> A mini-site containing several (x)HTML templates, each being
    styled using a different method of CSS applictation.</p>
    <p> Click an example below.</p>
    <h2>Examples</h2>
    <ul>
    <li><a href="base.html">Base template</a></li>
    <li><a href="inline.html">Inline CSS template</a><</li>
    <li><a href="embedded.html">Embedded CSS template</a></li>
    <li><a href="external.html">External CSS template</a></li>
    <li><a href="imported.html">Imported CSS template</a></li>
    </ul>
    </body>
    </html>
    :confused:
    Doug; Thanks for your examples. They work great and properly. The only thing I can see different in yours is your stylesheet formatted like:
    p
    {
    color: #F0000
    }
    In your html:
    I notice there are tab spacing. I don't think you entered these by hand. I think that dreamweaver may have done it automatically. Not sure about this, bit confused. Everything looks the same???
    Much appreciated, you've spent a lot of time on it. Cheers bud.
     
  12. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #12
    That seems fine, except you need 3, or 6 values for the colour in your stylesheet, #F00000 or #F00. Pick one :) And you have missed the 'c' out of external.css - but that might just be a type when you made your post.

    Also, this won't break it or fix it, but you have an extra '<' in your HTML, second item in your list:

    <li><a href="inline.html">Inline CSS template</a><</li>

    It can be removed.

    -Update to your update-
    The colour value is the bit that's making yours not work. Makes no difference that mine is over several lines.
    I did enter the tabs/spaces myself. Helps keep the code organised :)
     
  13. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #13
    Thanks Doug. You're right, it was the colour value that was messing it up. Thanks a lot.
    Regards
    Dal
     
  14. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #14
    No problem :)

    You'll find that it's often the smallest of typos that will break absolutely everything! lol

    /Doug
     

Share This Page