...

View Full Version : Noob here. External css not working!



OGREFCERBLNG2ME
11-17-2010, 05:26 PM
Ok, so I may be new at this, but this is the simplest thing ever and it wont work. I am just messing around trying to figure stuff out and I have my css external sheet

Title {color:red;font-size:36px;font-family:arial;}
h1 {color:red;}
p {color:green;font-size:14px;font-family:arial;}
body {background-color:cyan;}

and then my html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Styleone.css" />
</head>
<body>
<h1> Welcome to my page</h1>
<p>blah blah</p>
</body>
</html>

There is no html in the css and I have it down exactly like every example has given but when I try it it doesn't work. Im using chrome if that matters.

Thanks!

VIPStephan
11-17-2010, 05:40 PM
Can you tell us what exactly doesn’t work? As first suggestion I would suggest to always use lowercase names in the CSS and also in file names. Secondly, the first CSS rule doesn’t do anything. You can’t style a title element (in fact, nothing outside of the body element), apart from the fact that you don’t even have one.

teedoff
11-17-2010, 05:42 PM
First thing is to make sure the file name of your style sheet matches the one you;ve linked too.
Second, I dont think you can style a title. You can certainly create a div named title and then style that, but I dont see any divs yet in your html.

OGREFCERBLNG2ME
11-17-2010, 06:16 PM
Well, nothing is working. The background isn't cyan and the h1 and p aren't the colors. the style will work if it's an internal but once I change it to the external it just shows a white background with the text.

and I don't even know why I had the title in there I was just trying stuff out. But yeah.

Edit: Also, the names do match up I have it saved as cssstyle1 and it is the same in the link.

I have it saved under "desktop/website/cssstyles/cssstyle1" I only need to link the actual name of the file right?

teedoff
11-17-2010, 06:20 PM
Try this....in your html inside the body tag write it like this:


<body style="background-color: blue;">

edit...try the background color....that will set your whole page to blue as a test. We can remove it later.

OGREFCERBLNG2ME
11-17-2010, 06:23 PM
Well, if I did that wouldn't that be using internal? I could just use an internal css but I am just trying to figure out why an external won't work.

OGREFCERBLNG2ME
11-17-2010, 06:26 PM
Try this....in your html inside the body tag write it like this:


<body style="background-color: blue;">

edit...try the background color....that will set your whole page to blue as a test. We can remove it later.

Yeah I did that, styling works inside the html just not when I try to do it externally.

teedoff
11-17-2010, 06:31 PM
Ok then again...check the file name of your style sheet to make sure you are linking to a stylesheet of the same name.

Nothing looks wrong with your style rules, other than the title rule which we already discussed and should be removed.

Also, not only make sure the stylesheet is named the same as the link your trying to use, but make sure its actually saved AS a .css file.

OGREFCERBLNG2ME
11-17-2010, 06:42 PM
Ok then again...check the file name of your style sheet to make sure you are linking to a stylesheet of the same name.

Nothing looks wrong with your style rules, other than the title rule which we already discussed and should be removed.

Also, not only make sure the stylesheet is named the same as the link your trying to use, but make sure its actually saved AS a .css file.

Yeah, at first I thought it might of saved it as name.css as the filename not with the extension. I am using text wrangler and I thought maybe it won't save as css files, but the icon for the file says CSS at the bottom. and the name is cssstyle1.css as is in the link also. So Idk what the deal is but its bugging me!

My first day trying to make a page and can't even get a style sheet working!

Edit1: actually when I look at the files...it says they are saved as text wrangler text documents even though they have html/css on the icon...could this be the problem?

teedoff
11-17-2010, 06:46 PM
Are you saying the name of your stylesheet is this?

and the name is cssstyle1.css as is in the link also.

but in your stylesheet link you reference a stylesheet called:


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

OGREFCERBLNG2ME
11-17-2010, 06:55 PM
Are you saying the name of your stylesheet is this?


but in your stylesheet link you reference a stylesheet called:

Yeah my bad, I renamed the file and re inserted the link to see if I messed up, but it still didn't work. The names are cssstyle1.css now but I don't know if text wrangler is actually saving them as html/css extensions but as files named .html .css if that's even a possibility?

teedoff
11-17-2010, 07:02 PM
You should really do some basic learning. There are several good free websites that offer great tutorials to learn some basics. W3schools.com (http://www.w3schools.com) is a great one. You can learn html and css along with many other languages and technologies there. Another good site is Alistapart.com (http://www.alistapart.com)

Obviously there is something wrong with your naming convention or how and to what your linking too. I think those links I provided will help a great deal. One more thing we can try, since your site is probably not live, is you can take a scrennshot image of each opened file. Your html file and your css file, both opened and post them here as an image.

Good luck.

OGREFCERBLNG2ME
11-17-2010, 07:10 PM
You should really do some basic learning. There are several good free websites that offer great tutorials to learn some basics. W3schools.com (http://www.w3schools.com) is a great one. You can learn html and css along with many other languages and technologies there. Another good site is Alistapart.com (http://www.alistapart.com)

Obviously there is something wrong with your naming convention or how and to what your linking too. I think those links I provided will help a great deal. One more thing we can try, since your site is probably not live, is you can take a scrennshot image of each opened file. Your html file and your css file, both opened and post them here as an image.

Good luck.


I am using w3schools right now. It's only this external css I am stuck on right now. But here are the pics.

http://imgur.com/Rs1nc.png
http://imgur.com/rnTUF.png

teedoff
11-17-2010, 07:14 PM
Ok then, next question would be where are you saving these two files in relation to each other?

OGREFCERBLNG2ME
11-17-2010, 07:17 PM
Ok then, next question would be where are you saving these two files in relation to each other?

The site is: /Users/JnHart/Desktop/Website/templete1.html

and the css is: /Users/JnHart/Desktop/Website/Cssstyles/cssstyle1.css

teedoff
11-17-2010, 07:27 PM
Ahh well there ya go. You need to link to your stylesheet like so:


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


Actually it would be better if you move your stylesheet to the same folder as your html pages. Either way should work.


Folder structure and how files relate to each other when moving up and down levels are another big concept to learn, which you should definately do.

VIPStephan
11-17-2010, 08:41 PM
Actually it would be better if you move your stylesheet to the same folder as your html pages.

That really depends. I like to keep my css files in a /css directory, my images in an /img directory, my JS files in a /js directory, my fonts, if I embed some, in a /fonts directory etc. This keeps the files ordered and doesn’t mess up anything. Keeping CSS files in the same directory might be OK if you only have one. But it becomes messy if there are several different ones.

teedoff
11-17-2010, 08:48 PM
That really depends. I like to keep my css files in a /css directory, my images in an /img directory, my JS files in a /js directory, my fonts, if I embed some, in a /fonts directory etc. This keeps the files ordered and doesn’t mess up anything. Keeping CSS files in the same directory might be OK if you only have one. But it becomes messy if there are several different ones.

Yes thats true, I was only talking about in this case. Seemed like it might be easier to move the css file to his root, than try to retype his styesheet link, since he was having trouble with linking files in different folders.

But yes I too keep files organized in separate folders.

@OP These are all things(standards) that need to be learned in order to prevent such problems in the future.

OGREFCERBLNG2ME
11-17-2010, 09:23 PM
Awesome! yeah that was the issue. I'll classify this as a face palm.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum