BandRate

The correct path is href=»/error-404/css/style.css». The path should start from the document root of your website (im my case: the root path is /var/www/html).

Источник

Why your html and css are not linking: how to link CSS to HTML properly

The proper way to link a CSS file to a HTML file is adding between the HTML tags at the top of the HTML page. However, there are many tiny mistakes that you can make that can result in your HTML and CSS not linking properly. These are:

1. Using the wrong HTML tag to link HTML to CSS.
2. Placing the CSS link in the wrong part of the web page.
3. Non-matching file name and link href value name
4. Spaces in the CSS file name
5. HTML and CSS file location on same or different folders
6. Syntax errors in your CSS file

6 mistakes you are making when linking CSS to HTML and how to correct them.

Lets look at each error you might be making and how you can link HTML to CSS properly.

1. Using the wrong HTML tag to link HTML to CSS.

You sometimes find people trying to use HTML tags to link your CSS to HTML. This cannot work.

You can only use HTML tags when you are writing your CSS in the head section of a HTML document itself not linking the CSS file.

The correct HTML tag to link a CSS file to a HTML file is using the . The «main.css» is the name of the CSS file. Please note that the HTML tag is a self-closing tag and does not to come in pairs like the or HTML tags.

2. Placing the CSS link in the wrong part of the web page.

You will not be able to link HTML and CSS, if you place the HTML tag on any other part of the webpage other that inside the head tags.

So look at where you have placed your link HTML tag and adjust that accordingly.

3. Non-matching file name and link href value name

Check to make sure that your CSS file name is the same as the name indicated in the href value on the HTML tag. If you use a different name, the browser will look at the link you have assigned to your HTML file. If it finds nothing there, it does nothing. If the two do not match, then you have found your culprit.

All you have to do is change the href value to the correct name of the CSS file.

4. Spaces in the CSS file name

When you have spaces in the CSS file namme name of file.css , the browser will not be able to correctly interprete the spaces in the href value .

To make this work, you can either:

• replace the spaces in the href value with %20 . i.e. or
• replace the spaces in the CSS file name with hypen(-) or underscore(_) on both the file name and the href link value as a way to seperate words.

5. HTML and CSS file location on same or different folders

When your HTML and CSS files are not on the same folder, you might have some challenges linking them. You can resolve this problem by:

• Using the correct file path to the CSS file. So if the CSS file is in a different folder from the HTML path, you need to identify the path name and add it to the link href value. eg. If the css file is in a folder called styles that was in the same folder as the HTML file, the correct path would be .
• Moving the CSS and HTML to the same folder. When you move them to the same folder, the link href value will simply be the css file name: .

6. Syntax errors in your CSS file

If you have an error in the CSS file, it may result in your CSS styles not being applied to the HTML code. The easiest way to correct this is to either:

• Use a text editor with syntax highlighter. Syntax highlighting will help you identify where your code is not correct.
• Use an online CSS validator tool. An online CSS validator tool will tell you where you have made a mistake in you CSS code.

If you follow this guide, you will always be able to connect your HTML and CSS files together.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Recent Posts

Copyright © 2018 — 2023 DevPractical. All rights reserved.

Источник

CSS file not linking to HTML

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.

 

  
Home
  
Authors
  
Subjects

Welcome
This site is a collection of academic book reviews, mostly in the humanities and the social sciences.
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.
Back to home

Источник

Why does my HTML not link with my CSS?

Are you putting it between the tags? Usually these problems come down to a pathing issue. It’s best to put a forward slash in /css/style2.css — this way it will always look from the root of your site for the CSS file.

3 Answers 3

Your current href is a relative path, rooted from where ever the HTML file is.

You can either use a correct, relative path.

Or you can use an absolute (domain-rooted) path.

. assuming your website is deployed at the root of your domain.

The link you have is relative, so it starts looking in the same folder as your html. You could do an absolute path to the css with /css/style2.css or use a relative path ../css/style2.css

The url css/style2.css should be relative to the HTML file(the file that contains code ) .

.. in above relative URL indicates go one folder back, and then to the css folder — and in that css folder use style2.css file.

Similarly ../../ , means go two folders back and so on.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник