I am very new to CSS.
I am putting the following line in the header of my html, but CSS doesn't load:
<link type="text/css" rel="stylesheet" href="static/main.css" />
Basically my HTML doesn't see the CSS file. I am probably missing a very obvious point. My CSS file is in the "static" folder of my project and my HTML file is in the "templates" folder.
While writing this, I realized that I might be directing to the wrong path, but changing it to "../static/main.css" didn't help either.
Should I use SRC instead of HREF, when using this locally? Or is it something completely different?
Thank you for your help!
UPDATED:
The project tree is as follows:
|____.gitignore
|____app.yaml
|____appblog.py
|____appblog.pyc
|____README.md
|____static
| |____main.css
|____templates
| |____front.html
| |____newpost.html
I am linking to main.css from inside my front.html
You are giving the wrong route to the CSS file. It is currently looking for the file in templates/static/main.css, which doesn't exist. You need to add ../ to back out of the templates directory, and then head to the static directory.
Example:
<link rel="stylesheet" type="text/css" href="../static/main.css">
If the directory structure is in your root directory, you could also link relative to root by adding /. This will start in the root directory, and then look for the static directory.
Example:
<link rel="stylesheet" type="text/css" href="/static/main.css">
Also, make sure you are adding that in the head of the document.
The answer was somewhere else:
I am using Google App Engine for the app development and I should've included the following under -handlers:
- url: /static
static_dir: static
Thank you for all your helps.
Chrome browser: Open developer tool (F12) and look at right top of the panel, or click "Console" tab, if the develper tool console return Not found error with your main.css file then check your css path. You can try to locate html file and css file in one directory and then change link tag to
Can you show me how did you open the html file? direct click on the html or browse through webserver project?
Related
I just started using html and css and I have to do something with it but I am getting the error Unable to open 'style.css'. I don't know what the problem is since the path that I used is the same as the file path.
Make sure the CSS file and the HTML file are in the same folder.
based on your image it should be
href="mywebs\site\style.css"
if you want to link site/style.css to mywebs/smth.html you should go one folder back.
<link href="../site/style.css">
or put the site folder inside mywebs, because based on the picture the site folder is not inside mywebs folder.
Sometimes the file may missed directory. You can close and open the code editor and it will work. Also, make sure your html and css file is in same directory. If you css file is in a different directory then use the following code:
<link type="text/css" href=".../style.css"/>
I'm having trouble referencing an external css file in my file manager. My html page is in a folder called "homepage" and my css file is in a folder called "library".
Currently, I have
<link rel="stylesheet" href="library/homepagecss.css">
but that won't reference the css file.
My only option is to have the homepage html file and css file in the same folder but i'd like to have them separated for organization.
Anyone know how to do this in Domain's file manager?
You should either write an absolute path there, like
<link rel="stylesheet" href="C:/User/Documents/public_html/library/homepagecss.css">
(I am assuming your path to the current directory)
BUt if I understood well your both folders library and homepage are in the same folder called public_html you can try this one
<link rel="stylesheet" href="../library/homepagecss.css">
By entering .. you go up in the directory tree, you go up at the parent directory, and you need to go up at public_html cause there is where you library folder is located.
If the homepage of your site is at example.com, and your homepage is in a “homepage” folder, then the href you currently have is going to be looking for a file at example.com/homepage/public_html/library/homepagecss.css. And that’s obviously not correct.
You have two options to fix it.
Use an absolute path to the CSS file: href="http://example.com/library/homepage.css"
Use the HTML <base> tag to set your base path as your homepage in the <head> of your site, and then specify the relative URL in the link to your stylesheet: href="/library/homepagecss.css"
I have made a .css file for a html i'm using in a dynamic web project. The css implementation clearly works because if i run the tomcat server from the html i can clearly see the css effect but if i run it from the main project it opens the same html page but without the css effect. How am i supposed to fix this? Do i have to write something into the web.xml file ?
This is the link tag in the html file
<link rel="stylesheet" type="text/css" href="style.css"/>
Am i supposed to add something else ?
it depends on location of css file. Your path will if css is in same folder as html/jsp file. If it is in sub folder in webcontent folder then use href="foldername/filename" if its in root folder then href="../foldername/filename"
I'm taking a course on CSS3 and HTML5, and I ran into some trouble: my CSS folder isn't located in the correct spot... or something. I have no clue what's going on, but after a few hours of messing around, I went into the inspect element tool, and noticed some files aren't loading, so that's why my CSS isn't working! I attached an image, can you tell me what it means?
Also, where should my CSS file be? I'm using bootstrap and sublime text.
Thanks in advance.
Well, nvm on that image. It says I need 10 credits...
It says in inspect element:
Failed to load resource: net :: ERR_FILE_NOT_FOUND
CSS files can be called from a path relative to the document calling them. For instance, given you have a folder directory that looks like this:
/(your root directory)
-css
-bootstrap
app.css
-img
-js
index.html
-pages
pageone.html
...your css link in your index should look like this:
<link rel="stylesheet" href="css/bootstrap/app.css" />
whereas the link for pageone.html would look like this:
<link rel="stylesheet" href="../css/bootstrap/app.css" />
the ../ tells the server to look in a directory directly above the calling file for the path described in the link
With Bootstrap, are you using straight CSS, LESS, or SCSS? If you're using a pre-compiler, check your pre-compiler's settings file to ensure your compiled css files end up in the proper directory.
In sublime text for getting directory path please install a package called Auto File Name if you have a package control already installed in your sublime if not, the google package control and install in your sublime editor , auto file name lets you go well in your directory path and call your files.
I have encountered the same problem before. the external stylesheets is not recongnized !!
Failed to load resource: net::ERR_FILE_NOT_FOUND
If your HTML is in the root and your CSS folder is also in the root then your links are incorrect. You shouldn't have a slash / in front of the file name.
try:
<link rel="stylesheet" href="css/style.css" type="text/css">
see this
There is my problem:
Since I had some organization issues with my website, I wanted to arrange my files to a better classification.
Now, the folder tree looks like:
www
ressources
images
...
css
design.css
mypage1
index.html
mypage2
index.html
index.html
And now I don't know how to link the css file to the pages stored in a folder like the "mypage1" folder.
To start from my C: drive will will produce path errors once online, I tried the "shortcuts to the css file in each folder" solution too, but I think there is a far better way to proceed.
Need some help!
Thanks again!
use the link:
<link type="text/css" rel="stylesheet" href="../ressources/css/design.css">
here, used ../ going back folder..
You can use:
<link rel="stylesheet" href="../ressources/css/design.css" type="text/css" media="all">
The .. will go one directory top. Since the html files are in a directory (like mypage1), this will go to the parent directory, which is www. Then the next that should be done is to pass the directory path to your CSS file, which in your case is /ressources/css/design.css.