Cannot link my CSS to my HTML

html css encoding stylesheet rel

13,351

Solution 1

Jozef Dúc wrote in the comments (1, 2):

Open css file in some editor for example Notepad++ and change encoding of file to UTF-8

Notepad++, open file, in main menu find Encoding->Convert to UTF-8.Look again in Encoding and option Encode in UTF-8 should be checked and save file. Hope it helps :)

This is what solved it for me.

Solution 2

i had the same issue and this is what worked for me. i realized the .html and .css files where all in one single folder that's why it wasn't working. to solve this,

open the project folder(the folder that contains your html files), in this folder, create another folder called 'styles'. Finally, place the .css file in the style folder and run your site again.

this worked for me. hope it works for you

Solution 3

According to your screenshot

it looks like you have bad encoding in file.

So first add

<meta charset="utf-8">

to your HTML.

Then you must change encoding in CSS files. Open the file in some editor (I recommended Notepad++). In Notepad++, find Encoding in menu and in submenu choose option Convert to UTF-8. Now, look again in "Encoding" and "Encode in UTF-8" should be checked, then save the file.

13,351

Author by

george

Updated on June 04, 2022

Comments

george almost 2 years
I'm at the last of my wits here. I've searched through dozens of websites trying to find the answer to this issue, but I have yet to find a solution that helps me.

Here is the top section of my HTML, linking to my CSS file:
```
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Sample Page</title>
    </head>
```
For some reason, when I preview my .html file on my browsers, my CSS code is not taken into account.

Just to clear things up a bit, I've already made sure the following are not the reasons for my issues:
- My CSS code worked just fine when it was in the HTML within the style tags. It only stopped working once I put it into its own .css file.
- There are no <style> tags on my .css file.
- The rest of my HTML is correctly formatted. I have the </html> tag and the <body> tags.
- I've tested this page on Chrome and Firefox, and even on a different computer's Chrome. I've even tried running them as an Administrator.
- I've checked to confirm that my browsers are not set to Quirks Mode.
- I've tried multiple DOCTYPE headers, none have shown any signs of working.
- The .css name is correct, and the file location is correct. Both the index.html and the style.css are in the same folder.
- I've tried these lines of code in different orders, different formats, I've even tried other peoples' code and nothing works.
- I've checked the source code for the page on my browser, and clicking the style.css link leads straight to the file.
The only lead I've gotten is that I clicked "Inspect Element" on my page in Chrome and checked the "Resources" tab, where the HTML is found under Frames>(index.html)>index.html and the CSS is found under Frames>(index.html)>Stylesheets>style.css. If I click index.html, the body is blank, but if I click style.css, the body is, strangely enough, a bit of Chinese text.

Here is a sample of a style.css I've tried:
```
body
    {
    background-color: yellow;
    }
```
Even with the CSS as simple as this, it still won't work.

Please help.

EDIT: http://i.imgur.com/SgoFkvw.png

Read my post, you guys. They're in the same folder. The different paths are in the "Inspect Element" mode in Chrome, not in my folders themselves.
george over 9 years

It's under Chrome's "Inspect Element" feature that they're found under different folders, because that's where they place CSS files for websites.
george over 9 years

Nope, that didn't do it either.
Admin over 9 years

This is going to set the charset for the page, not any CSS files.
Dejan.S over 9 years

@torazaburo Yes that is correct. My next suggestion was for OP to change the file. Somebody else suggested it before though.
unor over 9 years

george, you may accept your own answer if it solved your problem.