I have some questions about why none of the CSS styles was used as well as images not being displayed when I call my html from localhost in FireFox.
I have my html code like this:
<!doctype html>
<html lang="en">
<head>
<!-- <base href="index.html"> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./myCustomStyle.css" rel="stylesheet" type="text/css">
<title>Document's Special Title here!lala</title>
</head>
<body>
This is HTML here!
<p class="hometown">
Another line here!
</p>
<img src="check.png" alt="an image here" width="100" height="88">
<p id="para1">
Should be in Yellow color this line.
Document.get
</p>
<p>
<a href="https://www.Youtube.com/">
<img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760872.png" alt="not shown!" style="width:50px;height:50px;">
</a>
</p>
<h1 style ="color:blue"> A simple Chat Application</h1>
<h2> a h2 here </h2>
<p> a new paragraph!</p>
<p> current module: __dirname</p>
</body>
</html>
and my CSS code here:
p.hometown {
font-size: 35px;
color: green;
}
h4 {
background-color:blue;
}
h1 {
color: maroon;
margin-left: 20px;
}
#para1{
color: yellow;
text-align: center;
}
#geeks {
font-size: 25px;
color: skyblue;
}
they both locate in the same level within the structures (a picture of their relationship is here, the index.html and myCustomStyle.css are at the “same level” in the hierachy):
enter image description here
However, none of the images and styles were displayed when I run in localhost as can be seen here:
enter image description here
does anyone knows why none of my images and styles were loaded when I run my html using localhost?
I have spent hours trying to fix the problem like fixing the link’s href attribute by including . or / or ./ and also inspect the web developer tools in FireFox, but so far no success.
Could someone gives me a hand.
thanks a lot
Also I was running the server from Vscode using my code here with the port number being 8080 as can be seen here, but this should be irrelevant to the problem at hand, but I would just post here for reference:
enter image description here
also when I used LiveServer in Vscode, I was able to get the html properly:
enter image description here
but none of the images and styles were loaded when I run localhost:8080 from my FireFox or Chrome or IE browser.
I have tried fixing the href by testing relative or direct link. But none of those works yet. Also liveserver from VsCode was able to show how my html should display when the image and styles were loaded successfully.
okocha_w is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.