problems linking to external CSS from my XHTML file

gej03 · #1 (**permalink**) 03-02-09, 10:27 PM

I'm extremely new at this, so I apologize for my ignorance in advance. I'm sure the solution is very simple. I've looked at many tutorials to figure it out on my own, but for the life of me I cannot. All I want to do for now is create and link to an external CSS file from my XHTML document, but for some reason my files aren't cooperating with me. Although, it seems to work fine when I use the internal method (hopefully I'm using the correct terminology) Here is a perfectly working example of what I'm trying to do using a background image:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>

<head>

<title>Test Website Name</title>

<style type="text/css">
body {
background-image: url('corkboard.jpg');
background-repeat: no-repeat;
background-attachment: fixed;}
</style>

</head>
<body>

<h1>
Title
</h1>

<p>This is the first paragraph of my first test website.</p>

</body>
</html>

For obvious reasons, I'd much rather link to an external CSS file. Here is the XHTML of what I thought would work, but does not:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>

<head>

<title>Test Website Name</title>

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

</head>
<body>

<h1>
Title
</h1>

<p>This is the first paragraph of my first test website.</p>

</body>
</html>

Obviously the name off my CSS file is global.css. This is the entirety of the contents of that file:

Code:

body {
background-image: url('corkboard.jpg');
background-repeat: no-repeat;
background-attachment: fixed;}

Is it possible that the doctype and html tags in my XHTML file are incorrect and somehow having an effect? I'm still unclear on what info should be there. I think I copied what I have from a tutorial example I found somewhere. Thank you very much for any help you can provide and helping me take my first step to becoming a programing guru like you

Jordonias · #2 (**permalink**) 03-03-09, 12:12 AM

Try including the following meta tag

Code:

<meta http-equiv="Content-Style-Type" content="text/css" />

Also make sure the extension isn't .CSS
In most cases it is case sensitive

gej03 · #3 (**permalink**) 03-03-09, 06:34 AM

Thanks for the input. I pasted the meta tag just below the style tag in my code. I also double checked to extension. Everything is lower case. It still isn't working, though.

I don't think this is the case, but could it be because I haven't uploaded to a server yet? I'm just saving and running everything from my hard drive. Eventually I'll file everything the same way it will be on the server, but for now, all my files are saved in the same folder. So, I don't think that should be a problem.

Yeroon · #4 (**permalink**) 03-03-09, 07:46 AM

Hi,

Is what you gave us as code the only css properties you set to test this? If so, add

Code:

background-color:black;

Then you can see if the bg color changes and the error might just be with getting the background image.

Other than that, you might consider changing the name of the css file. global.css might containa reserved word (global) in some obscure webserver setup.

Erick2009 · #5 (**permalink**) 03-03-09, 09:15 AM

Hello!

I haven't coded for a while. However, I suggest you try it this way (if still not resolved):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>

<head>

<title Test Website Name </title>
<META http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-7">
<META http-equiv="Content-Type" content="text/css; charset=ISO-8859-7">

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

</head>
<body>

<h1>
Title
</h1>

<p>This is the first paragraph of my first test website.</p>

</body>
</html>

J-P

gej03 · #6 (**permalink**) 03-03-09, 03:14 PM

OK, I tried changing the name of the CSS file (yes, I remembered to change the CSS file name in my XHTML doc), and I tried both codes suggested by Yeroon and Erick2009. I tried each suggestion separately and in combination, yet to no avail. This is frustrating me. I know it shouldn't be this difficult.

The only thing I can think of is an incorrect CSS file. I have yet to see an example of a fully coded external CSS file. Every tutorial I've found has used internal CSS in their examples. So, perhaps I'm coding the external CSS file incorrectly. The CSS code I posted previously is the entirety of my CSS file. Should I have something at the beginning and/or end of the file as in my XHTML file (referring to the doctype and html tags). CSS isn't supposed to have tags like XHTML, right?

wirehopper · #7 (**permalink**) 03-03-09, 03:48 PM

You might want to update your DOCTYPE tag:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3schools.com/TAGS/tag_doctype.asp

The CSS and XHTML look fine.

You could validate the files at: http://jigsaw.w3.org/css-validator/ and http://validator.w3.org/

Good luck!

gej03 · #8 (**permalink**) 03-03-09, 09:26 PM

I was unable to include the website part of the doctype and html tags earlier because I was new user. I guess the forum mistook it as advertisement or something. I'm not sure. I'm still unsure of what exactly the charset should be, but this is what the XHTML code looks like now:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/xhtml; charset=ISO-8859-7" />
<meta http-equiv="content-style-type" content="text/css; charset=ISO-8859-7" />
<link href="global.css" rel="stylesheet" type="text/css" />

<title>Test Website Name</title>

</head>
<body>

<h1>
Title
</h1>

<p>This is the first paragraph of my first test website.</p>

</body>
</html>

I was able to validate both the XHTML and CSS files. That means it should work, right? Does anyone have any idea of why in the world the background image still isn't showing up? (it works fine when coding the CSS internally, but I think it will be hugely beneficial to figure out how to get this working externally)

gej03 · #9 (**permalink**) 03-03-09, 10:04 PM

OK, I finally got it to work. I found a tutorial for producing and linking external CSS files with XHTML. I followed it exactly and created the files in their examples and then pasted the info from my files one by one until i figured out what was wrong. All the coding was correct. Someone mentioned earlier that it may be the name of my CSS file, "global.css." For some reason the files only stay linked if the CSS file is named "test.css." If I change the name, it no longer works. In addition, if I change the name back to test.css, it still doesn't work. I have to delete the document and start with a new one. This makes no sense to me. Does anyone have any insight to this? I can definitely work with what I have for now. I'm just excited to finally be moving on. However, I will eventually want more than one CSS file and have a need to name it something other than "test." Any ideas? Also, thanks to all who gave there input. I've learned answers to much more than just my question.

Yeroon · #10 (**permalink**) 03-04-09, 03:10 AM

Then it might be the encoding from the css file itself as I stated before. And then I dont mean what you put in the encoding tag, but literaly how you saved it. What editor do you use to create/modify it?