Problems with external style sheets

ronb · #1 (**permalink**) May 6th, 2007, 14:47

Hi,

A little help please?

I have got to page 40 in the Missing Manual and am stuck on the tutorial when trying to learn external stye sheets. I am alright up to and after i have pasted the code from the internal to the external sheet but having typed :-

Code: Select all

body {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;

When I view the page in the web browser the following code is visible instead of being hidden which it is when not viewing it in the broser, any idea what I am doing wrong, apart from trying to learn CSS???

Code: Select all

 body { background-image: url(images/bg.jpg); background-repeat: repeat-x; 
 h1 { color:red; font-size:2em; font-family: Arial, sans-serif; margin: 0; border-bottom:2px dashed black; } 
 p { color:#036; font-size:.9em; line-height:150%; margin-top:0; }

All of the code thus far looks like this:-

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Basic Web Page</title>
<link href="global.css" rel="stylesheet" type="text/css" />
</head>}
body {
 background-image: url(images/bg.jpg);
 background-repeat: repeat-x;
h1 {
 color:red;
 font-size:2em;
 font-family: Arial, sans-serif;
 margin: 0;
 border-bottom:2px dashed black;
}
p {
 color:#036;
 font-size:.9em;
 line-height:150%;
 margin-top:0;
<body>

Look forward to hearing from you.....

saracen · #2 (**permalink**) May 6th, 2007, 16:17

Howdy - Please note - im no expert here!! But for external sheets you need to set out the information roughtly as follows, the html should be....

Code: Select all

<html>
<head>
<link rel="stylesheet" type="text/css" href="mysheet.css" />  <!--This is where you need to point to your external sheet (mysheet.css shoule be renamed to what your external sheet is named)-->
</head>

<body>
<p><!-- Your website text here --></p>
</body>

</html>

Then for the external sheet put in the desired content and save as filename.css
eg from what you provided (beware - it is untested!, except for a minor adjustment)

Code: Select all

body {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;}

h1 {
color:red;
font-size:2em;
font-family: Arial, sans-serif;
margin: 0;
border-bottom:2px dashed black;}

p {
color:#036;
font-size: 0.9em;
line-height:150%;
margin-top:0;}

I did notice that in your example there was missing brackets in the css which will cause a problem (make sure you close them all !) explorer might recognise the missing bracket and work around it but other browsers are not as forgiving, and your page may simply just not show in them. Also you had css in the main html file, as you are working with external I would keep it all in the external file. I hope this info helps you in your quest!

karinne · #3 (**permalink**) May 7th, 2007, 13:50

Please write a more meaningful topic next time!

As for the problem at hand, saracen has it right.

You need to put

Code: Select all

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

in the <head> ... </head> of your document.

Integrating CSS in your website

moojoo · #4 (**permalink**) May 8th, 2007, 15:30

Or if you are placing the CSS in your HTML you need to put it in <style type="text/css"></style> tags in your head section.

daygon · #5 (**permalink**) May 11th, 2007, 04:30

wow i didnt thik the position of the href mattered. you learn something new everyday.

karinne · #6 (**permalink**) May 11th, 2007, 12:06

Quote:

Originally Posted by daygon

wow i didnt thik the position of the href mattered. you learn something new everyday.

It doesn't ...

Ryan Fait · #7 (**permalink**) May 14th, 2007, 21:50

I use the same order as Karinne. I get all mixed up when I see something like this, lol.

Code: Select all

<link media="screen" title="Style Sheet" href="style.css" type="text/css" rel="stylesheet" id="main" />

daygon · #8 (**permalink**) May 16th, 2007, 19:18

hehe lol. yeah its better to keep stuff organized. thats hw things flow easier

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Style sheets	Oak	Web Page Design	4	Mar 3rd, 2008 16:49
switching between style sheets	cwjones	Web Page Design	4	Jul 4th, 2007 17:06
CSS Style Sheets	ronb	Starting Out	3	May 10th, 2007 13:02
*Help Needed accessing external Style Sheets*	shawn2000	Flash & Multimedia Forum	1	Nov 15th, 2006 22:32
change style sheets	screamer2k	Web Page Design	5	Aug 6th, 2004 11:19

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Problems with external style sheets