Linking CSS file with HTML

Question

I have an HTML which will refer a CSS file for style. But it looks like HTML file is not able to find the CSS file. I tried with a simple background colour and that also doesn't seem to work.

VOD.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div>
<table>
<tr>
<td><b>All</b></td>
{% for item in VOD1 %}
<td>ID: {{ item[0] }} <br/> Title: {{ item[1] }}<br/>
<img src="{{ item[2] }}" alt="dummy.jpg"> </img>
</td>
{% endfor %}
</tr>
<tr>
<td><b>Catch Up</b></td>
{% for item in VOD2 %}
<td>ID: {{ item[0] }} <br/> Title: {{ item[1] }}<br/>
<img src="{{ item[2] }}" alt="dummy.jpg"> </img>
</td>
{% endfor %}
</tr>
</table>
</div>
</body>
</html>

My CSS file is as follows.

mystyle.css

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
}
.myStyle{
height: 50px;
width:50px;
}

td{
height: 100px;
width: 100px;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
</html>

Can some one help me in this? I don't have much experience in this HTML and CSS files.

Your CSS should not contain <!DOCTYPE html> or any html tags, it should just be body {}... — kzhao14
– kzhao14, Commented Oct 9, 2015 at 12:55
Don't forget to self-close your meta tag. <meta charset="UTF-8"> should become <meta charset="UTF-8"/> — Mark Buffalo
– Mark Buffalo, Commented Oct 9, 2015 at 12:57
You can not use html tags in css files. Only use css body { background-color: black; } .myStyle{ height: 50px; width:50px; } — user5340537
– user5340537, Commented Oct 9, 2015 at 12:57
@SantoshSingh — No, it shouldn't. The / serves no purpose except to make people and syntax highlighters that are addicted to XML feel better. — Quentin
– Quentin, Commented Oct 9, 2015 at 13:00

Quentin · Accepted Answer · 2015-10-09 12:54:31Z

5

Your CSS file should contain CSS, just CSS, nothing but CSS. It should not be an HTML document.

Remove everything except:

body {
background-color: black;
}
.myStyle{
height: 50px;
width:50px;
}

td{
height: 100px;
width: 100px;
}

h1 {
color: maroon;
margin-left: 40px;
}

answered Oct 9, 2015 at 12:54

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

3 Comments

Roshan r Over a year ago

Actually I didn't use those HTML tags. I referred one web site w3schools.com/cssref/tryit.asp?filename=trycss_background-color and changed the code. Even with the one you attached also, I am not able to see the background color changed.

Quentin Over a year ago

@Roshanr — There is nothing else obviously wrong with the code you've provided. If it isn't due to you stuffing HTML into a CSS file, then you probably just put the wrong URL in the href of the <link>.

Roshan r Over a year ago

Guys.. It worked now. HTML file and CSS was in the same folder. But as Luca mentioned, when i clicked on the link, browser was searching for a CSS file just a level above. Replacing the CSS file above one level solved the problem. Thanks all.

Luca Detomi · Accepted Answer · 2015-10-09 12:55:25Z

0

You don't have to put the follwoing rows in CSS file, this is HTML (not css language).

<!DOCTYPE html>
<html>
<head>
<style>

So mystyle.css becomes

body {
  background-color: black;
}

.myStyle{
  height: 50px;
  width:50px;
}

td{
  height: 100px;
  width: 100px;
}

h1 {
  color: maroon;
  margin-left: 40px;
}

answered Oct 9, 2015 at 12:55

Luca Detomi

5,7668 gold badges58 silver badges81 bronze badges

7 Comments

Roshan r Over a year ago

Actually I didn't use those HTML tags. I referred one web site w3schools.com/cssref/tryit.asp?filename=trycss_ . Even without those tags also, I can't its working.

Luca Detomi Over a year ago

Are you sure that .html and .css files are in the same folder? Now it seems a problem of bad url. Try to open Source code windows pressing CTRL+U shortcut, find html row that call .css file and you should see this file like a link. Try to click on it. In this way you can know if browser find .css file or not (in this case, path is incorrect)

kzhao14 Over a year ago

@Roshanr Also, when you use <style> it means that css is for THAT page only. Don't forget to make the file extension .css, and make sure your <link href=""> is pointed to the correct file.

Roshan r Over a year ago

@Luca.. I can see that clicking on the link from source code does not load the css file. Yes, both are in the same folder.

Roshan r Over a year ago

Guys.. It worked now. HTML file and CSS was in the same folder. But as Luca mentioned, when i clicked on the link, browser was searching for a CSS file just a level above. Replacing the CSS file above one level solved the problem. Thanks Luca for debugging it.

|

kzhao14 · Accepted Answer · 2015-10-09 12:58:51Z

0

A css file is a special type of file that can be used as a sort of "insert" for html. Because it's not a .html file, it doesn't need html tags, and html tags will in fact make the file not work. Instead, just put

body {
background-color: black;
}
.myStyle{
height: 50px;
width:50px;
}

td{
height: 100px;
width: 100px;
}

h1 {
color: maroon;
margin-left: 40px;
}

etc. Read more here: http://www.w3schools.com/css/css_howto.asp

answered Oct 9, 2015 at 12:58

kzhao14

2,66017 silver badges22 bronze badges

Collectives™ on Stack Overflow

Linking CSS file with HTML

3 Answers 3

3 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related