CSS Loading and Applying Problem in Local Host

Question

Note : Solution has been appended to the answer at the bottom.

Okay, I've been doing it all the time but now it doesn't work.

Here is my folder structure which is so simple :

+ root
|_ + styles
  |_ -main.css
|_ + images
  |_ - background.jpg
|_ - index.html

Here is the html code:

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

<html>
<head>
    <title></title>
    <link href="styles/main.css" type="text/css"/>
</head>
<body>

    <div class="main">

    </div>
</body>
</html>

Css Code :

body
{

}
 div .main
{
    background-image:url(../images/main_background.jpg);
    background-repeat:no-repeat;
    height:950px;
    width:897px;
}

The problem is : css file doesn't seem to be loaded and there is no css styles applied to class name main on the html file. That's really frustrating. I've also put them under IIS creating an Application under.

What could be wrong?

Thanks.

Solution:

Since the both answer should be at the same place to solve my problem, I decided to put complete answer here:

It should have been div.main
and <link href="styles/main.css" type="text/css" rel="stylesheet"/>

matthewpavkov · Accepted Answer · 2010-12-15 04:27:31Z

2

You need to declare the rel attribute for the link for your CSS file, like so:

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

answered Dec 15, 2010 at 4:27

matthewpavkov

2,9284 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tarik Over a year ago

This answer is also correct but to solve the problem completely tjm's answer is also required -- stackoverflow.com/questions/4446669/…

tjm · Accepted Answer · 2010-12-15 04:36:05Z

2

I think div .main in the css should read div.main. Note the lack of space.

With the space you are specifying child elements of divs, where the child has class main, without the space you are specifying divs with the class main.

edited Dec 15, 2010 at 4:36

answered Dec 15, 2010 at 4:28

tjm

7,5502 gold badges34 silver badges55 bronze badges

3 Comments

matthewpavkov Over a year ago

@Braveyard This is also true. To target a div with a class main you need to use div.main or just .main. Using div .main would look for a div that has a child element with a class .main.

Tarik Over a year ago

I didn't know the space factor. Thanks.

Tarik Over a year ago

This one is also true but I have only one option to mark as an answer.

Stephen · Accepted Answer · 2010-12-15 04:26:43Z

0

Change the path from relative to absolute:

<link href="styles/main.css" type="text/css"/><!-- relative -->
<link href="/styles/main.css" type="text/css"/><!-- absolute -->

answered Dec 15, 2010 at 4:26

Stephen

19k10 gold badges62 silver badges98 bronze badges

Collectives™ on Stack Overflow

CSS Loading and Applying Problem in Local Host

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related