You can't have spaces in a URL, try changing the space to its ASCII character: %20 so it would look like this:
<link rel="stylesheet" type="text/css" href="new%201.css">
Or what I would normally do is use proper file naming conventions, either camel case (every word [ besides the first one] starts with an upper case letter) or use underscores between the names.
Answer from Haring10 on Stack OverflowYou can't have spaces in a URL, try changing the space to its ASCII character: %20 so it would look like this:
<link rel="stylesheet" type="text/css" href="new%201.css">
Or what I would normally do is use proper file naming conventions, either camel case (every word [ besides the first one] starts with an upper case letter) or use underscores between the names.
I had the exact same problem a few days ago. (And I had no spaces in my file name..)
As soon as I outsourced my CSS code in an external file, the exact same problem came across.
For me the problem was in the encoding.
For those who have this problem too: Just switch the file encoding to UTF-8 . (I used Notepad++)
Maybe you have to add to your html file:
<meta charset="UTF-8">
And then it should finally work.
see more here: http://www.w3schools.com/html/html_charset.asp
External css is not working, please help?
html - why is my external css not working? - Stack Overflow
External CSS not working!
My HTML is partially not recognizing my external CSS file
Videos
Try it like this:
Copy <link rel="stylesheet" type="text/css" href="/stylesheet.css">
inside your subfolder pages.
In one of the comments you say "My style sheet is in the main folder along with homepage. Subfolders have files of each pages.".
So assuming the site's folder structure is like
Copy|- home.html
|- stylesheet.css
|- folder1
|------page1.html
|- folder2
|------page2.html
The link in home.html should be
Copy<link rel="stylesheet" type="text/css" href="stylesheet.css">
and the links in page1.html and page2.html should be
Copy<link rel="stylesheet" type="text/css" href="../stylesheet.css">
This just means "the CSS file is one folder above the curent one".
[SOLVED]
Hello! As of yesterday, I am currently learning HTML and CSS to create my own personal website on neocities. I use Phoenix Code editor (future generation of Brackets) to write these codes, so since it's a relatively new editor software, I presume that not many people here are familiar with it. Therefore, I just hope it's got nothing to do with the program itself, and it's just something in general that I as a newbie have overlooked.
I have followed w3schools HTML and CSS tutorials closely, so I'm 90% sure my code is written correctly, and something else outside it is maybe the issue here. Edit: Nope, I wrote something wrong lol. Thanks to u/ole1993 for the quick answer!
The HTML and CSS files should be linked correctly, writing this in my HTML document:<link rel="stylesheet" href="style.css"/> , with the file named "style" and the extension "css". Located in the same directory.
Here's a video of the CSS file not working as should; I can change the colors, but I *can't* change the font-size and font-family? Why?
Here are what my codes look like:
HTML:
<!doctype html> <!-- Color cheat sheet: Reseda green: 677C5F, Feldgrau: 4B5C47, Baby powder: FEFEFC, Vanilla: FFF5AD Puce: D07B8E, Pink lavender: F1BBDD, Moss green: 8D9440 --> <html lang> <head> <title>EllenPlayz</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>My personal website</h1> <p>Welcome to my corner of the internet!</p> <p> <a href="https://imgur.com/gallery/cats-kxFxG0D#/t/wallpaper" >Click here to check this cool picture of a cat</a > </p> <h2>Interests</h2> <ul> <li>Digital Art</li> <li>Rock music</li> <li><a href="https://i.imgur.com/i5z74E2.jpeg">Pretty flowers</a></li> </ul> <h2>Types of games I love</h2> <ul> <li>Flash games</li> <li>Ps2 games</li> <li>CD-Roms</li> </ul> <img src="images/EltonPixel.gif" width="200px" height="200px" /> </body> </html>
CSS (style.css)
body {
font-family: arial
font-size 16px;
color: #8d9440;
background-color: #fff5ad;
}
h1 {
color: #c7647a;
background-color: #f1bbdd;
}
h2 {
font-size: 1.5em;
color: #677c5f;
background-color: #bee270;
margin: 10px;
padding: 10px;
}All help or input is greatly appreciated, and let me know if I lack any important context for information. Thank you!
LPChip suggested me to use the debugger/inspector of Firefox and there, the head is greyed out. On further investigation, I noticed it said "css was not loaded because its mime type "text/html" is not "text/css"
That made me check something...
I got the solution:
I had an apache mod_rewrite activated. While the path was correct, it seems that this mod_rewrite or the dedicated php for the redirection somehow told the browser that the file was html not css.
I had a similar issue. Was setting up a NGINX from scratch and all the styles for my project were not applied. But they existed and I did not had any other error.
I found out that I had to apply the correct mime types to all files served by NGINX. Before the fix it was text/plain and this did not worked.
I fixed it by adding those lines to NGINX configuration:
http {
# other config before ...
include /etc/nginx/mime.types;
default_type application/octet-stream;
# rest of config ...
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="debug.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
<article>
<p class="debug-centre">ARTICLE</p>
</article>
<article>
<p class="debug-centre">ARTICLE</p>
</article>
<article>
<p class="debug-centre">ARTICLE</p>
</article>
</body>
</html>This is the HTML to my website titled index.html
article {
display: grid;
grid-template-columns: 1fr minmax(0, 8.5in) 1fr;
height: 100vh; /* temp fix */
padding: 0.5in 0;
}
article * {
grid-column: 2/3;
}And this is my external stylesheet style.css
Now, when I try to add padding to the <article> via my external CSS it does not work, even with the identical code. It only works if I copy paste it into the HTML file using <script>.
How can I fix this, and why does this happen?
Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.
(If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?
Firefox can reject a stylesheet if it is not served with a content type of "text/css". (This is separate from the 'type="text/css"' declaration in the HTML.)