CSS file not linking to HTML

Issue

I’ve recently started learning to code HTML and CSS by hand for the first time since the mid 90s (last time I tried to build a site, Netscape Communicator Gold 3.0 was out–so bear with me here).

I cannot get my CSS to link up with my HTML. I am using HTML5 conventions and following the code examples in the popular book “Learning Web Design,” 4th edition, by Jennifer Robbins. Many of the code examples I see use conventions that are no longer required in HTML 5.0, so my code may be a bit sparse.

I have tried to directly embed the styles in the HTML and they work. However, they do not work when in a CSS sheet. I have tried to load the page in both IE11 and the newest version of Chrome and the page displays in white with default browser settings. My HTML file and my CSS file are in the same directory: c:/RogersReviews. There is an images folder in the directory, c:/RogersReviews/Images. I have linked to an image file in that folder and my code works.

However, I cannot change the background color of my page using a linked CSS style sheet. I have tried to make it red to prove that the link is working. Below is my CSS code followed by my HTML code.

I have used Eric Meyer’s browser reset code in the CSS to clear out any browser settings that might be messing things up. I have omitted it for your convenience.

It is probably something minor that I have missed. Thank you in advance for your help.

EDIT: The page seems to be linking just fine when I post it here, but not when I run it from my hard drive by opening the HTML file. I would like to be able to see the page as it would look online, but from my hard drive.

body {
	background-color: red;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<title>Rogers Reviews: Academic Book Reviews </title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
	<img src="Images/Rogers-Reviews-logo-3.gif" alt="Rogers%20Reviews">
	<ul id="menu">
		<li><a href="">Home</a></li>
		<li><a href="">Authors</a></li>
		<li><a href="">Subjects</a></li>
	</ul>
</header>
<h1> Welcome </h1>
	<p> This site is a collection of academic book reviews, mostly in the humanities and the social sciences. </p>
	<p> The purpose of this site is to assist high school, undergraduate, and graduate history students with choosing appropriate secondary sources for their research papers. An emphasis is placed on older works written before 1960.</p>
	<p> <a href="RRindex.html"> Back to home </a> </p>
<footer>
	<p> &#169; 2014 </p>
	<p> <a href=""> About </a> </p>
	<p> <a href=""> Contact </a> </p>
</footer>
</body>
</html>

Solution

I inserted your code, verbatim, into a JSFiddle, and the background is red, as you wanted.

The code is not the issue, then. Instead, its a problem of the stylesheet loading properly. Try some or all of the following:

  • Check your stylesheet name, and that it is the same in the directory as it is in your HTML code; make sure stylesheet.css exists properly.
  • Double-check that the file exists in the right place, which is in the same directory as your index that you are opening.
  • Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS. If it’s not loading here, it could be that it tries to load from your cache. You can force Chrome to load sites without the cache by opening the inspector again, clicking on the gear menu, and checking “Disable cache (while DevTools is open)’, and reloading your site.
  • Check your local apache/webhost server to make sure that it doesn’t have any settings blocking the loading of certain files or types of files. This is assuming you are running one and not just opening the file in Chrome/IE. If that is the case, you should have no problems with the file loading.
  • Make sure you saved the file. It’s silly, but I can personally vouch for the time when I couldn’t make my site update, and I forgot to save/update the file I was viewing.

Answered By – Aeolingamenfel

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.