I'm creating a website.My .html file is not linking to my .css file.
HTML:
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="404.css">
<title>Pacebi - 404</title>
</head>
<body>
body text here
</body>
</html>
CSS:
body{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
button{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
Note that I've done the exact same thing to my other pages. This is specifically not working.
Could it be the fact this is a 404 page in any way?
Using an online web programming tool (replit.com). (OS would not affect. If it did, I've been editing from a Windows 10 and Android 11.
Update: It's working now, I cleared browser cache and put the path for 404.html in the same directory as my .css.
i think your linked it wrong, well that is the only reason why it would not be connected
Your code is correct. It's working fine on my side.
Yes. I'd change the name to something still relevant and see if the issue persists.
I checked with your code. It was working fine on my side. Could be a cache issue. Empty your browser cache and refresh it. It should work fine then.
It is not linking because your css body code should be the html file code and if that doesn't work I think your file name should be style.css cuz 404 is a interactive code for windows to follow your file path.
It does not matter if your file is named 404.css or 503.css, it has to be in the same folder as your html file in your case.
That said, it seems your CSS is ill-formed or badly copy/pasted.
You miss the tag name for which you are defining the first styles. i guess it's the body
MISSING_SELECTOR {
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
button{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
Also you can add the type but that does not matter much:
<link rel="stylesheet" type="text/css" href="404.css" />
Browsers HTML parsers are quite robust to the fact they don't really need the HEAD and BODY tags in order to know where to place the objects.
Nevertheless try to put all your links and metas inside the head if you are using it.
Good luck! :)
I tried the code on replit.com and it worked fine for me:
The only reasons why I think it might not have worked on your computer is if you named the file incorrectly, or if you put the css in a different folder.
Suppose you did it like this, then it would not work because the file path would be incorrect:
The second reason is if you put the css in a different folder, so the file path would be wrong:
Related
So i have this weird problem that any css i write doesn't work. I tried to create multiple pages and link css but it simply doesn't apply.
If i download a template of the internet if i run the page, their html works.
Here is an example of the most basic code i've written that doesn't work, even though i've run it through validators. It doesn't matter what element im trying to apply styling to it doesn't work.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Test Page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Sup! </h1>
</body>
</html>
CSS
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
}
I have tried numerous solutions i've found online, but none of them work.
Can you check your network tab that your style.css is fetched from server and there is no 404 not found.
I would say try "/styles.css"
1. Check your Devtool, see if any error in network, make sure that style.css successfully loaded.
2. Try - Importing External Style Sheets
Write in html head tag:
<style>
#import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
This could be because of the folder structure. So maybe try and make sure your html file and css file are on the same level.
Or you could try "../styles.css" - Again this depends on where your files are in your dir
Everyone has given almost everything that I know. Sometimes its the silly things that we missed out that gives us tough time. Do try and follow this:
make sure both the html and css are under the same folder, in my case the folder is named "ROUGH"
Check for any white spaces before and after the file name. Example: "style " has one white space after the name, it should just be "style"
Using "/" inside the href. Example below href = "/style.css"
So, finnaly figured it out. The encoding was set to utf-16 and everything rendered as chinese kanji. This is the problem solution. Stylesheet taken-over/replaced by Chinese characters
My CSS file will not work and I have tried everything. They are both in the same "templates" directory in the app titled "bake".
Using a simple example that doesn't work, here's my HTML head and the code I'm trying to change:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="UTF-8">
<title>DataBake</title>
</head>
<body>
<th style="text-align:right"> <h5 id="green">Username:</h5></th>
<p id="test">If you're new to DataBake please register here.</p>
</body>
Here is my CSS file:
#charset "UTF-8";
#green{
color: green;
}
h5{
color: green;
}
#test{
color: red;
}
The CSS works when neither the HTML nor the CSS are in directories and they are the only two files I'm working with. But other than that, I have putting the css file in a separate directory. I have tried changing the link to the 'style.css' to using relative and absolute paths.
When I follow the link from the HTML , it takes me right to the CSS file. When I load the css file independently, it loads fine.
Both files are encoded to UTF-8.
I have cleared my cache and history and reloaded countless times.
I have moved the order between it and my bootstrap link around.
I have used different browsers.
I have checked for typos or little mistakes.
My coding teacher couldn't figure it out either.
Can someone help me figure out why it is not working?
UPDATE
When I put the absolute path into my browser, it works perfectly, but the relative path through my localhost turns up a 404 error for the css stylesheet.
FOUND THE ANSWER
I needed to incorporate {% load static %} into the header, and turn the href of the stylesheet link to "{% static 'css/style.css' %}". Couldn't be happier to finally have this solved.
First of all: There are many things that in my opinion could have been written better when drafting this question.
It's very difficult to help you with your problem when there's so little shared. You should at least share some code where you're actually using the styling. Time to time there's just some typos you end up missing and extra pair of eyes might pick them up.
The one thing that comes to mind that you could try is adding space between the css selector and the bracket. So not #green{ but rather #green {.
I'm suggesting this just because few months ago I agonized with some styles that did not show up in my React project where I was using css-modules. It took embarrassingly long time until I noticed that the class giving me grief was written without the space before bracket and it just didn't compile correctly.
try and remove bootstrap (or add it before you include your file). What kind of server are you using ? maybe it is serving your css file as TXT/html (look at it on the server response, which would mean your browser may not accept it as a stylesheet)
You have to put 1 more dot before ./
I hope it would work.
<link rel="stylesheet" type="text/css" href="../style.css">
EDIT: I never said that the problem was the dot anyway. The OP should share the entire CSS file together with more information so we could help find the answer.
I've never seen a reference to a path using a dot like:
<link rel="stylesheet" type="text/css" href="./style.css">
You should ask yourself if the file is in the same directory as the file referencing it? above? below?
Starting with “/” returns to the root directory and starts there
Starting with “../” moves one directory backwards and starts there
Starting with “../../” moves two directories backwards and starts there
Other than that, is difficult to understand the issue without more details, many things can cause this problem.
I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.
I need help again. I'm watching some tutorials, and I have an easy code that works fine with internal CSS, but I doesn't with external CSS. I think I'm doing everything right, since I don't change a single word of the code, excep for the external css reference. Any ideas why is it not working? Thanks for your answers! (By the way, I read all the post relationed with my problem, but nothing work out.) Here's the code:
div.box
{
width:320px;
padding:10px;
border:10px solid green;
margin:0px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: large;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<div class="box">This text in a box example uses css.<br /><b>Note:</b> there is a
DOCTYPE declaration (above the html element), so it displays correctly in all browsers.
</div>
</body>
</html>
It work out here! It is driving me insane. I tried it in Notepepad++, Brackets, and text editors. I really can't figure out what's happening.
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.
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
Change encoding of the css file to utf-8 using simple notepad.
Open css file by notepad, save as then choose utf-8 from encoding tab then save.
Remember to check that there is no inline style.
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
I had this problem too. But I understood that my wrong is here: when I was writing HTML file, I changed the direction of this file to a folder and created a CSS file next to it.
So my path for CSS file became wrong. Now I recommend to first close your editor of HTML or CSS, after choosing your direction of these files, then open your editor and write your code.
I'm pretty new to the realm of web design, however, I've been having a problem that really has me stumped. My CSS file will not link with my HTML file. I've checked everything(I think). The file paths are identical, I linked the files with the correct syntax, yet it's still not working. I've attached some photos to help you guys get a better understanding of my problem. If you need more info, I'll be happy to provide it.
The first image is the folder I'm keeping the files in. The second one is the syntax I'm using to link the HTML and CSS. And the third and fourth files are screenshots of my editor, with the file paths on top. (And yes, I'm aware the CSS file is empty. But since it wasn't working correctly, I left it blank for now)
How do you know its not working if the CSS is empty?
Type body { background-color: #f0f; } to test if it's working.
Sometimes you need to force the browser to use the latest styelsheet. You can achieve this by adding a query string in the link.
Like this:
<link rel="stylesheet" href="Joe.css?v=1.1" "type="text/css"/>
As you can see I've added ?v=1.1 after "Joe.css
Then simply change version number every time you have done some changes in your CSS file. So in this case, when you have updated the CSS file you can change the number to ?v=1.2 and so on. By doing this you are forcing the browser to use the latest css.
But please note that you should only add this to the link not to the actual filename Joe.css - that stays the same.
Hope that helps!
You should debug your code.
Firstly, replace your <link> tag with the following and see if it works:
<style type="text/css">
body { background-color: #000; }
</style>
If your background color is changed to black - that's a good sign.
If not, something's wrong with your script or browser.
Next, replace the above piece of code with the following:
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
Create the file style.css in the same directory as your HTML script and put the following code in it:
body { background-color: #000; }
If that doesn't work, something's wrong with your script or browser.
btw, try to clear your browser cache.
Use a debugging tool in a web browser - Firebug in firefox, or the F12 developer tools in IE for example - to see what CSS is being loaded with your web page.
Try using syntax: body { background-image: url("Joe-Image/Joe-logo.png");} and are you sure you added the CSS in your html file?
Try this:
<link href="./joe.css" rel="stylesheet" type="text/css" media="all" />
I inserted the relative path. You could also try this:
<link href="./Joe.css" rel="stylesheet" type="text/css" media="all" />
With upper case j. Perhaps your web server is case sensitive?