Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Link an external stylesheet.

Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
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.
 
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;}
 
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>
 
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 :)
 
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>
 
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>
 
Dal123 said:
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>
Click to expand...

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>.
 
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.
And by the way, if that was an html page, you forgot to wrap your embedded CSS in <style></style>.
Click to expand...
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.
 
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 :)
 
Thanks Doug. You're right, it was the colour value that was messing it up. Thanks a lot.
Regards
Dal
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back