CSS and image href not working! Please help!

I am learning html at the moment, and I am following a tutorial step by step. I got far into the tutorial to find out that my css and my images are both not linked to my website! The site shows that there is supposed to be an image there, but it does not appear, and as for the css, no signs of it at all. I would really like to finish this tutorial without giving up (which I often do) so please help me out here. Thanks a lot for your time. The problems:

<link rel="stylesheet" href="./css/style.css">

<img src="./img/hotmail5.png">

Thank you!

Hi @hanaipavan16m and a warm welcome to the forum.

Try the following links and make sure both files exist and are not blocked for any reason:



BEWARE: both files are case-sensitive!

Also if you are using FireFox: (other browsers have similar capabilities)

  1. Open your site
  2. right click anywhere on an empty part of the page
  3. from the dropdown menu select View Source
  4. click on style.css and it should show the source. If it renders the page again there are problems,
  5. click on img/hotmai5.png and it should show the image. If it renders the page again there are problems,

It is also very good practise to learn how to validate your site to ensure there are no errors and browsers do not have to guess your intentions:



(1) What kind of tutorial are you following? What is it supposed to do?

(2) Are you working throuigh the tutorial on a test web site or on your computer?

(3) Both the link and and img paths look correctly formed. The question becomes is the .css file located where the link is pointing and is the image located where the path says it is?

www.mysite.org/index.htm  /* the home page, whatever it is named */

In a simple site, the index file is located in the “root” direcory by default.
Your paths show that there is an /img/ and a /css/ directory in that root location also. The target files should reside within those directories. The image within the /img/ folder, and the css file withing the /css/ direcory.
Syntax and Punctuation matter. Also be sure that all cases in the path and filenames are the same. Images should have dimension in the “width” and “height” attributes and should include an “alt” value that is displayed if the image is not found.

If you have not done so, please read our posting guidelines for suggestions about posting code and describing problems:

You can probably post your code in a “working page” so we can see exactly what you see.

If you are using a test site, please post a link to the test site.

Use the validators given to you by @John_Betong. They should be your best friends while developing a web page.

1 Like

Thank you for the feedback! Sadly, I do not own a domain, and am just making a local website while I am still learning, so I am not quite sure if this test will still work. Regardless, I tried it, and it said the websites does not exist. Once again, thank you very much for the help!

Thank you for taking time to help me! The tutorial is on making a generic, sample website to show you the basics of html and css design, linked here: https://www.youtube.com/watch?v=Wm6CUkswsNw

And yes, sadly, it is a locally stored computer site, so that limits my options. I will double check my path directories/ folders, thank you!

There are both “Free Web Hosting Providers” and “Free Domains” available. Try searching for both and see if any are suitable.

Once setup download and install the Free FileZilla utility which allows copying from your localhost to the onliine site.

What is the test exactly?

I’m going to show my ignorance here and ask what the significance of the leading dot is. I’m familiar with two dots to indicate going up a level e.g. ../img/hotmail5.png but I haven’t come across single dots before.

single dot means “current directory”

so for all intents and purposes “./img/hotmail.png” is equivalent to “img/hotmail.png”. I’m not sure if browsers see it that way though.

It’s mostly used when working on a *nix machine where you have to run ./binaray if the binary is in the current directory to avoid people from downloading a file called cd or ls or some other built in name and accidentally execute that instead of the builtin cd or ls.

Other than that I see no real use for the single dot.

1 Like

Thanks, @rpkamp. That makes sense. I’ve only ever seen img/hotmail.png used for current directory. (Or absolute or root relative paths, of course.)

As ScallioXTX said:
Relative path - #2 by ronpat

Yes, they do.

Wow! Thanks a lot! Still, for the CSS, it is not quite working, single or double dot, but hey, the images are working! Do you have any possible fixes for the CSS! Thanks for all of your help!

Only a wild guess, but I’ve seen it before. When you use external JavaScript and CSS files, the code in them should not be inside <script> or <style> tags like it would be if it were in the page itself.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.