Basic webpage css and html not loading

Question

hey i am a newbie in HTML world, and i am trying to make a simple html webpage with css in it but the webpage is just blank, please help me outand also there are no error in the console.

linking14.html

<html>
    <head>
    <link href="C:\Users\Manuj Srivastava\Desktop\html tutorials\css\linking14.css" rel="stylesheet" type="text/css">
                                        <!relation and accordingly type is set>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
        <div id="div6"></div>
    </body>
</html>

and linking14.css

#div1{
    width: "300px";
    height: "200px";
    background: "firebrick"; <!#B222222>
} 
#div2{
    width:"300px";
    height:"200px";
    background:"skyblue";     
}
#div3{
    width:"300px";
    height:"200px";
    background:"slateblue";   <!#6A5ACD>
}
#div4{
    width:"300px";
    height:"200px";
    background:"firebrick" ;  <!#87CEEB>
}
#div5{
    width:"300px";
    height:"200px";
    background:"#1BE7FF";
        float:left;
}
#div6{
    width:"300px";
    height:"200px";
    background:"#052633";
        float:left;
}

download css, js file from w3cschool and link it to your .html file. For any problem , refer this link w3schools.com — KiranPurbey
– KiranPurbey, Commented Feb 24, 2017 at 13:10

Pablo Salcedo T. · Accepted Answer · 2017-02-24 13:22:44Z

2

Dont use quotes " " for css properties' values

#div1{
 
    width: 300px;
    height: 200px;
    background: firebrick;

}

#div2{
    width:300px;
    height: 200px;
    background:skyblue;     
}
#div3{
    width:300px;
    height:200px;
    background:slateblue;   <!#6A5ACD>
}
#div4{
    width:300px;
    height:200px;
    background:firebrick;  <!#87CEEB>
}
#div5{
    width:300px;
    height:200px;
    background:#1BE7FF;
        float:left;
}
#div6{
    width:300px;
    height:200px;
    background:#052633;
        float:left;
}

<div id="div1"> </div>
    <div id="div2"> </div>
    <div id="div3"> </div>
    <div id="div4"> </div>
    <div id="div5"> </div>
    <div id="div6"> </div>

edited Feb 24, 2017 at 13:22

answered Feb 24, 2017 at 13:16

Pablo Salcedo T.

9021 gold badge17 silver badges27 bronze badges

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

Comments

Andy Cheng · Accepted Answer · 2017-02-24 13:15:39Z

0

You shouldn't use the windows directory structure as the css link like

C:\Users\Manuj Srivastava\Desktop\html tutorials\css\linking14.css

It should be

./css/linking14.css

./ is current folder

answered Feb 24, 2017 at 13:15

Andy Cheng

831 gold badge1 silver badge3 bronze badges

Comments

Melinda · Accepted Answer · 2017-02-24 13:15:52Z

0

<link>

This tag's src attribute should not use Windows file path conventions. Use a file path that is relative to your web server. I would not use spaces in file names or folders.

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

edited Feb 24, 2017 at 13:15

answered Feb 24, 2017 at 13:14

Melinda

768 bronze badges

Comments

Jeferson Leonardo · Accepted Answer · 2017-02-24 13:16:23Z

0

If your html file is on the same folder of css file, change your link to:

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

If is on subfolder "css", change your link to:

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

answered Feb 24, 2017 at 13:16

Jeferson Leonardo

1791 gold badge1 silver badge8 bronze badges

Comments

Oke Tega · Accepted Answer · 2017-02-24 13:17:32Z

0

If this is supposed to be a comment

<!relation and accordingly type is set>

it should be

<!--relation and accordingly type is set-->

And i advice you put all you project files in a Folder for easy linking of css , scripts, images or nay other files

read here`

answered Feb 24, 2017 at 13:17

Oke Tega

88311 silver badges22 bronze badges

1 Comment

Vladivarius Over a year ago

Yes, code with wrong syntax is generally ignored by HTML but can break it.

Vladivarius · Accepted Answer · 2017-02-24 13:17:42Z

0

Link relatively to a subfolder with the css file and everything will be fine:

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

Just make sure linking14.html and css subfolder are in the same folder.

Also remember that this link is case-sensitive so if you name your css file "Linking14.css" you will also have to use capital L in the html file.

answered Feb 24, 2017 at 13:17

Vladivarius

5181 gold badge4 silver badges15 bronze badges

Comments

Melinda · Accepted Answer · 2017-02-24 13:22:28Z

0

Try changing

<link href="C:\Users\Manuj Srivastava\Desktop\html tutorials\css\linking14.css" rel="stylesheet" type="text/css">

to

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

Also, use forward slashes. I would not use spaces in my file names, or directory names. Know what your webroot is. It helps when trying to specify relative paths to resources.

edited Feb 24, 2017 at 13:22

Melinda

768 bronze badges

answered Feb 24, 2017 at 13:12

Salman

3895 silver badges22 bronze badges

2 Comments

Manuj Srivastava Over a year ago

still nothing on the screen ..!! :(

Salman Over a year ago

code has been updated. please check. backward slash(\) changed to forward slash (/)

Daniel_ZA · Accepted Answer · 2017-02-24 13:22:49Z

0

The Problem is that your values for your CSS properties are in quotes "".

#div4{
    width:"300px";
    height:"200px";
    background:"firebrick";
}

Needs to be:

#div4{
    width: 300px;
    height: 200px;
    background: firebrick;
}

Even though your CSS file is linked correctly, the CSS will not display because the quotes will produce an invlaid property value error when the CSS is loaded.

edited Feb 24, 2017 at 13:22

answered Feb 24, 2017 at 13:17

Daniel_ZA

57411 silver badges27 bronze badges

Collectives™ on Stack Overflow

Basic webpage css and html not loading

8 Answers 8

Comments

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related