• Registered: 2009-09-21
  • Posts: 9

Topic: CSS Beginner - I can't link to an external stylesheet? [fixed]

Hi,

[FIXED - it seems that my .html file was loading correctly, but there was a problem with Komodo Edit's preview, which made me think something was wrong. Thanks.]


I've gone through the css tutorial at w3schools.com - but I can't seem to make my html file link to my css file.
In my root folder I have the index.html file, and a "styles" folder which contains my "aagstyle.css" file.

Index.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, meta tags, etc.]
    <link rel="stylesheet" type="text/css" href="styles/aagstyle.css" />
</head>
<body>
<h1>Hello World</h1>
. . . .
</body>
</html>

In my css file: (just some things I pulled out of the tutorial to experiment with)

body
{
    background-color:red;
    font-family:arial,georgia,sans-serif;
    font-size:100%
}
h1 {color:blue}
hr {color:red}
p
{
    font-size:0.75em;
    margin-left:20px;
    color:red
}
p.intro
{
    height:100px;
    margin:50px 20px
}
p.left {text-align:left}
p.center {text-align:center}
p.right {text-align:right}

What am I doing wrong? My .html file has no styling at all. I'm assuming it's something to do with the directories, but I can't figure it out.

If it makes any difference I'm using Komodo Edit on Mac OSX 10.5.8

Thanks.

Last edited by NikMac (2009-09-25 19:53:19)

  • Registered: 2009-01-13
  • Posts: 486

Re: CSS Beginner - I can't link to an external stylesheet? [fixed]

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

Notice the "./" in front of the file reference?
That means to start looking in this folder (the location of the html file).
"../" means to go "back" one folder to start looking.

This is referred to as "relative addressing" . Google it.

  • Registered: 2009-09-21
  • Posts: 9

Re: CSS Beginner - I can't link to an external stylesheet? [fixed]

Hi, thanks for the quick reply.

Edit: Sorry, I misunderstood - you're saying the code should be 

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

?
I tried that and nothing is changing.

Last edited by NikMac (2009-09-25 19:41:09)

  • Registered: 2009-01-13
  • Posts: 486

Re: CSS Beginner - I can't link to an external stylesheet? [fixed]

Did you try the "./" solution? You might be surprised that it works.

  • Registered: 2009-09-21
  • Posts: 9

Re: CSS Beginner - I can't link to an external stylesheet? [fixed]

Sorry about that, at first I thought you meant the "./" was a mistake. It changes nothing in the html preview - is it a problem if my root directory for the website contains spaces? I tried it without spaces, bur nothing happened.

Edit: My apologies - the ./ did work. Sort of. When I preview index.html in a browser, it is styled correctly. There must be some problem with Komodo Edit's internal preview, so I'll take this to their website now.

Edit2: Yes, it seems this is a reported bug when running Komodo Edit on Mac OSX 10.5/10.6 . It is fixed by putting <?xml version="1.0" encoding="UTF-8"?> at the top of the document.

Thanks for your help.

Last edited by NikMac (2009-09-25 20:22:26)