My .css file does not work on my webpage

Question

Here is my.css code:

body {background-color:black;}
div.heading {text-align: center; background-color:white;border: 10px ridge grey;     margin-top:0px; font-size: 30px; font-family: Arial, Halvetica, sans-serif; color:black;}

The .css files name is Assignment 3.css

Here is my webpages code. The background is white, and the division is not displayed. If I make the style sheet internal then the code works, but as soon as i put the code in a separate notepad file it does not. Here is the code:

<!DOCTYPE html>

<html>

<style>
<link rel = "stylesheet" type = "text/css" href = "Assignment 3.css">
</style>

<body>
<div class = "heading">
WELCOME TO BUILD A SQUARE
</div>
</body>

</html>

do not include spaces. choose something like "global.css" or "main.css". That is most probably your problem. Also, your link rel is inside <style> tags - move it out of it — adaam
– adaam, Commented May 26, 2013 at 19:22
I just tried linking test file.css and it worked, so its not the problem. @AndreSmith what is your directory structure? — Sourabh
– Sourabh, Commented May 26, 2013 at 19:24
Why does it work when i move it outside? because we were taught to always put the link rel inside style tags> — Andre Smith
– Andre Smith, Commented May 26, 2013 at 19:25
I guess your teacher needs to read a book on CSS. link should not be inside style EDIT: style tag acts like a substitute for external css file. You can write whatever's inside your *.css file inside style tag and then you dont have to link anything — Sourabh
– Sourabh, Commented May 26, 2013 at 19:25
it was my bad. not his! but thank you was helpful it sorted my problem out! — Andre Smith
– Andre Smith, Commented May 26, 2013 at 19:28

adaam · Accepted Answer · 2013-05-26 19:23:34Z

2

It should look like this:

<html>
<head>
<link rel="stylesheet" type="text/css" href="yourfilename.css">
</head>
<body>
<div class="heading">
WELCOME TO BUILD A SQUARE
</div>
</body>
</html>

Style declarations such as <link rel..> need to be inside your <head> and as i mentioned before you shouldn't include spaces.

answered May 26, 2013 at 19:23

adaam

3,7278 gold badges30 silver badges51 bronze badges

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

Comments

Bogdan Rybak · Accepted Answer · 2013-05-26 19:36:59Z

2

Spaces are not valid URL characters. Either change your filename to assignment3.css or encode the space Assignment%203.css

Also move <link> out of <style></style>. That's invalid

edited May 26, 2013 at 19:36

answered May 26, 2013 at 19:23

Bogdan Rybak

2,1171 gold badge19 silver badges22 bronze badges

Comments

David Taiaroa · Accepted Answer · 2013-05-26 19:26:33Z

1

First thing to check is your file name, because the space may well cause a problem.

Try:

renaming your css file to assignment-3.css
update the link in the head of your page to
<link rel = "stylesheet" type = "text/css" href = "assignment-3.css">

If that still doesn't work, check that the css file exists at
www.your-domain.com/assignment-3.css

Good luck!

answered May 26, 2013 at 19:26

David Taiaroa

25.5k7 gold badges67 silver badges52 bronze badges

Comments

Austin · Accepted Answer · 2013-05-26 19:29:41Z

1

I think the problem is you put the link inside style tags. Try it inside the head.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css.css" />
    </head>
    <body>

    </body>
</html>

answered May 26, 2013 at 19:29

Austin

1701 silver badge7 bronze badges

Comments

Rashed · Accepted Answer · 2013-05-26 19:30:16Z

-1

just remove the style tag and it will work

answered May 26, 2013 at 19:30

Rashed

355 bronze badges

Collectives™ on Stack Overflow

My .css file does not work on my webpage

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related