CSS won't link to HTML

Hi everyone,

I am relatively new to HTML and CSS and my CSS link in my HTML syntax doesn’t seem to work. Here’s what I’ve tried: <link rel="stylesheet" type="text/css" href="20171204 Homepage.css"/>

This is what I have so far of the stylesheet(not much):

.start {
	text-align: center;
	background-image: url("https://cdn.pixabay.com/photo/2016/11/19/16/48/notebook-1840276_960_720.jpg");
}

I’ve tried seeing what was wrong with it, but I’m quite sure I’m doing everything right. If someone could please explain to me the issue, that would be great.

I’ve tried entering this syntax into an online editor, and it appears to work. I am starting to think this is due to some software or browser issue.

The HTML and CSS stylesheet is in the same folder.

Best regards.

Whitespace in URLs forces the browser/server to encode with %20, and that support might not always be available. Never write spaces in resource names bound for a network.

href="20171204_homepage.css"

Notice also no uppercase. This helps prevent errors.

Personally, I would never include a date in a URI unless it was a backup on the server.

href="homepage.css"

The backup would look like,

homepage_171204.css

All your pages would be calling the same file, without any knowledge of when they are last edited. That is a human concern, not a general one and should not be reflected in pages or you will be editing HTML needlessly.

1 Like

Thank you. I followed your suggestion for editing the file name, but the problem persists. Is there still anything wrong?

You should also provide your html here.

Did you change the name of your CSS file to match the link?

1 Like

Yes. Here is the CSS link now: <link rel="stylesheet" type="text/css" href="20171204_homepage.css"/>

Complete HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>The Hub - Home Page</title>
		<link rel="stylesheet" type="text/css" href="20171204_homepage.css"/>
	</head>
	<body>
		<div class="start">
			<h1>The Hub</h1>
			<h2>Student-friendly blog</h2>
		</div>
		<h1>Latest</h1>
		<p>Coming soon!</p>
		<a href="20171203 The Hub Latest.html">See more...</a>
		<h2>Posts by Category</h2>
		<p>Coming soon!</p>
		<h3>People</h3>
		<a href="20171203 The Hub People.html">More...</a>
		<h3>School</h3>
		<p>Coming soon!</p>
		<a href="20171203 The Hub School.html">More...</a>
		<h3>Current Events</h3>
		<p>Coming soon!</p>
		<a href="20171203 The Hub Current Events.html">More...</a>
		<h3>Miscellaneous</h3>
		<p>Coming soon!</p>
		<a href="20171203 The Hub Miscellaneous.html">More...</a>
		<br><a href="20171203 The Hub Contact.html">Contact</a>
	</body>
</html>

On your local machine the OS may be able to resolve the HTML resource names, but on a live server this could lead to problems. If you must have spaces in file names, encode them with %20.

href="20171203%20The%20Hub%20Latest.html"

Do you really need the date in the name? Can it not just be a folder by that name, and then point to it.

If the site is called, “The Hub”, won’t that be in the domain name and splashed all over the site? Does it have to be in the resource names?

Remember that while your local machine is not case sensitive when it come to file names, live servers are case sensitive. Avoid errors and mis-typed URL’s by simply never using uppercase.

www.example.com/20171203/index.html

www.example.com/index.html
www.example.com/latest.html
www.example.com/people.html
www.example.com/school.html
www.example.com/events.html
www.example.com/misc.html
www.example.com/contact.html

If you listen to the link text in a screen reader it will sound like,

More dot dot dot
More dot dot dot
More dot dot dot
More dot dot dot

HTML has an entity for that character, the horizontal elliplsis, &hellip;.

One might feel at present that it is not too much work going forward, but you may find yourself in a world of hurt when it comes to maintenance a year or two down the road. This is the time to trim all unnecessities and build a rock solid foundation for your site to grow into.

Remember, search engines are following your site and if you make it too hard for them to access resources it will be ages before you get a top ten placement for your domain. Dated material should be easily identifiable, that much is certain, but not as a file name on the root. A directory, a hash or a query string fits much better with the convention of the web.

If the file name is changing daily then nothing will ever get indexed. Your site will live in a vacuum. Let the permanent pages be permanently named, never moved, and always kept up to date. Especially on the root of the site.

1 Like

For some reason, the CSS link did start to work, probably due to renaming the files. Thanks for the advice.

1 Like

i have problem in introduction no 12/14 what could do to move to no 13