So I am trying to make my first mobile-first website and my first problem is that the index.html file doesn't recognize my style.css file to stylize all the different div tags. The style.css file is located in a css folder, along with the normalization.css file. Here is my code for the index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Put on a Show, Monkey-Boy</title>
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<link href="/css/style.css" rel="stylesheet">
<link href="/css/normalization.css" rel="stylesheet">
</head>
<body>
Were the CSS working properly, there would be a background color, the divs would have their own individual colors and sizes, fonts would be stylized in Nunito and Lato respectively, and positions of block text would be different. I am using the latest version of Chrome.
I looked at the other threads relating to this topic, but none seemed exactly the same as the problem that I am having.
Any help would be much appreciated!
Thanks so much in advance,
Todd
you forget a closing curly bracket after the *-selector.
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/6pxn0oro/2/
Also you should put your normalization.css before the style.css , so you don't overwrite your created styles.
you can try to remove / on your link.
Before:
<head>
<link href="/css/style.css" rel="stylesheet">
<link href="/css/normalization.css" rel="stylesheet">
</head>
After:
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/normalization.css" rel="stylesheet">
</head>
Hope that helps.
After how many years of development, you wouldn't believe how often I find myself scratching my head with this exact problem.
Firstly, make sure the css folder is in the root directory of your site. This is where the leading slash (/) is pointing to. Alternatively, if you remove this as suggested, then it becomes a relative path. Relative to the directory you're in. So in that case, the css folder should be in the same directory as the your index.html file. (Note, that depending on how you have your webserver setup, what you see as the root directory, may not be the actual root directory. In which case a relative path can be useful).
Also, make sure your css is correct, no typos in class names or anything like that. I'll usually apply something very simple that I know will work, such as a background color to the body element. For example:
body {
background-color: #000000;
}
Use a code editor with syntax highlighting to help you address any errors both in your CSS, and in your HTML.
Related
Please help to check why I cannot link club.css to index.html.
index.html (Please note: I have to use the direct local path as the CSS link, or it will show that "some content has been disabled in this document.")
<head>
<meta charset="utf-8">
<title>The California Corgi Dog Club</title>
<link rel="stylesheet" type="text/css" href="C:\Users\leeson\Desktop\CS651 Web Systems\assignment\assignmentfall2021-Rijutady\clubProject\club.css" />
</head>
club.css (Please note that the css file is under Encoding utf-8)
h1 {
background-color: skyblue
}
The Simple Answer
Using a relative path should resolve your issue for most situations.
<link rel="stylesheet" type="text/css" href="./club.css"/>
The Alternative
You could also include the CSS directly into the HTML document, however this is not always ideal or recommended. Here's an article on that.
<style>
h1 {
background-color: skyblue
}
</style>
#NullPointDev's answer is correct. Use Relative path to your projects. It will make your work easier without errors. I just put some additional information for make your project easier.
If both HTML and CSS files in same directory, You can link your CSS like this,
<link rel="stylesheet" type="text/css" href="club.css"/>
If the CSS file is located in another directory in the directory which the HTML file located, you can use this method.
<link rel="stylesheet" type="text/css" href="name_of_the_subdirectory/club.css"/>
If the CSS file located in out of the directory which the HTML file located, Use ../ to go back.
<link rel="stylesheet" type="text/css" href="../club.css"/>
Read this Article for more info. Relative Path | W3 Schools
Now you know all the basics of Relative path. Wish you all the best.
no ,
it will be <link rel="stylesheet" type="text/css" href="club.css" />
if its under the clubproject
The solution code for your question is:
<link rel="stylesheet" type ="text/css" href = "club.css">
Your mistake : You have written the complete folder path instead of relative file path.
Advice: Have a look to the below link to clear concept.
https://www.w3schools.com/html/html_filepaths.asp
I prefer simple solution which is using relative path.
club.css
<link rel="stylesheet" type="text/css" href=".\club.css" />
Where is the problem:
URLs cannot contain spaces
This question already has answers here:
Can't get stylesheet to work with ejs for node.js
(5 answers)
Closed 2 years ago.
(Beginner here...)
My CSS won't link to my HTML. I am using GOORM IDE, I have read other questions on this topic and tried the solutions from them but none seem to work (when I apply the CSS inline, it works perfectly), I have so far tried:
Moving the main.css to the same folder as the header.ejs file
Adding type="text/css"
Changing the href to:
main.css
/main.css
/stylesheets/main.css
/public/stylesheets/main.css
../stylesheets/main.css
None of which have worked. Any ideas? I want to keep the CSS in a separate folder if possible. I have included a screenshot of the file structure on GOORM also if that is useful.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
mmm I'm not sure really but I think your path based on the image should be
<link rel="stylesheet" href="stylesheets/main.css">
Yes, I also think, there should be the path to the .css-File.
for example, I called my css in the head like this:
<link rel="stylesheet" href="app/css/app.css" />
So you need to call your file:
<link rel="stylesheet" href="public/stylesheets/main.css" />
Btw: is the link to the fonts correct? Is this a valid repository?
Tested in VSCode, this works for me:
You've got your header.ejs in views/partials and your main.css in public/stylesheets.
This means your link has to move up two directories. Use:
<link rel="stylesheet" href="../../public/stylesheets/main.css>
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
I have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>
I'm a new web design student and I just learned about Cascading Style sheets and how to link them externally; however, I'm encountering a problem. I have the file linked in my <head> with no problem and the file directory is correct, but my changes are not showing up. If I had a <style> tag or attribute then my CSS works, but not from the external file. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Protein Structures</title>
<link href="styles/main.css">
</head>
I make this same mistake when I'm in a rush. The problem is, you're linking the file correctly, but the browser doesn't know how to interpret the file. Is it a stylesheet, icon, alternate stylesheet? You need to add the rel attribute and set it equal to stylesheet.
<link rel="stylesheet" type="text/css" href="styles/main.css">
I'm not sure if type="text/css" is still mandatory. I know that when doing Javascript you don't have to have type="text/javascript".
Here's a good link explaining why.
You need to add what the relationship of the link is. Change your <link> tag to:
<link href="styles/main.css" rel="stylesheet">
You might want to take a look at the documentation for link types to understand why the rel is necessary.
try this i hope this is working.
<link type="text/css" rel="stylesheet" href="styles/main.css" media="all">