PDA

View Full Version : Link an external stylesheet.



Dal123
Aug 11, 2009, 10:55 AM
You may all recognize me as the newbie that embarrasses himself regularly; well today is no different :o.
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:
<!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):
<!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.


design-is
Aug 11, 2009, 11:15 AM
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):

body {color:#FFFFFF;}
p {font-size:0.7em;}
#feature {background-color: #999999;}
.sidebar {float:right;}
Dal123
Aug 11, 2009, 11:24 AM
Thanks, # cool.
Sorted out my incorrect paste:o.
Regards
Not Available
Aug 11, 2009, 12:40 PM
Your CSS does not have to contain any HTML code. So I think it's meant to be something like

external.css

p {
color: #F00;
}


index.htm

<!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>
design-is
Aug 11, 2009, 12:47 PM
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?)
<!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>

CSS - external.css
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 :)
Dal123
Aug 11, 2009, 01:02 PM
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:
<!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>
Greedo
Aug 11, 2009, 01:04 PM
just as an aside, i would very, very very strongly recommend Lynda.com as an even better way to learn this stuff instead or in addition to books. specifically these:

CSS website design (http://www.lynda.com/home/DisplayCourse.aspx?lpk2=279)

CSS for Designers (http://www.lynda.com/home/DisplayCourse.aspx?lpk2=216)

and here is a link for a free 30 day trial. you should be able to go thru these in 30 days no problem.

http://www.lynda.com/promo/freepass/Default.aspx?lpk35=326
design-is
Aug 11, 2009, 02:01 PM
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:

<!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 style="color: #F00;">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>
Darth.Titan
Aug 11, 2009, 02:34 PM
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:
<!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>

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>.
design-is
Aug 12, 2009, 03:50 AM
In case it's useful, I've attached the files :)

/Doug
Dal123
Aug 12, 2009, 04:28 AM
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>. 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:
p {color: #F0000;}

The html/xhtml file it links to titled "external.html" is:
<!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.
design-is
Aug 12, 2009, 04:42 AM
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 :)
Dal123
Aug 12, 2009, 05:28 AM
Thanks Doug. You're right, it was the colour value that was messing it up. Thanks a lot.
Regards
Dal
design-is
Aug 12, 2009, 05:56 AM
No problem :)

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

/Doug