I am trying to practice some web development with a simple HTML file and some external styling. I have my HTML and CSS files saved in the same folder, and am attempting to link the CSS to my HTML file. When I go to view the page, none of the styling is applied. There is a file called "styles.css" loaded into the sources tab, but it just looks like my HTML file. The HTML included is from the file I want to link by the name of the file in the sources. You can see the link attempt (I've tried with and without specifying type, and I've tried putting a slash in front of the name of the file), and you can see the file included in sources:
I've looked at each element, I've looked at the computed styles, and nothing suggests that the file is properly loaded. I've looked through several questions and most of the solutions are things I've already tried. Thanks!
Make sure the index file is saved as a .html file.
If it's still not working try href="./styles.css"
try writing href="./style.css"
Related
I'm working on an assignment for class and I cannot get my CSS to attach at all to the html. I'll upload files as well as give the text-format of what exactly is going on but I've tried a few different things. I am a beginner but I have checked and double checked file paths. When I ctrl+click on the link within svc I consistently open the file. Chrome dev tools shows it as unable to find though.
This is my current set up in html5 :
what I see on vsc
my files are located in the same folder - the wireframe_stylesheet.css is definitely spelled correctly in both places. I've tried doing a / in front of wireframe. I've tried moving the file around and then adding / and folders. I've tried doing a long rout (not sure if it's the name) but all the way from C:// down to the file itself, and nothing seems to want to link it. I've also tried adding style="text/css" that didn't work either. I've tried adding the (.) before and after the file name, I've tried adding the folder above it so that it will go back into the file, I've tried adding a / after the " - still nope.
My html
My Css (sort of, there's more but this is the gist)
Try this
<link rel="stylesheet" href="./wireframe_stylesheet.css">
But I believe you've done something wrong in HTML code, share the full code so I can figure out what's wrong in it.
Use this snippet in between the head tag
<link rel="stylesheet" href=".Your CDs file name.css">
I'm practicing using HTML in VSC. I want to use external CSS, since I've already figured out inline CSS and internal CSS. However, when I try to use external CSS, the page doesn't change.
I've tried different documents, and I've tried copying the code from documents that already work. I've tried typing the code into different spots etc. But nothing seems to work.
Any ideas why this might be happening? enter image description hereenter image description here
enter image description here
First of all you need to save both the files with .html or .htm extension for html file and .css for css file
Second the path of the css must be correct if both the html and css path are on same directory then code this
<link rel="stylesheet" href="./styles.css">
I think it works if not can you post the screenshot of the directory you are working and the css and html file
Thank You!!!
I'm moved styles.css file to every location in my project and tried to link it in html file. I moved it even in the same folder where html files are, href autocompletion works(line 9 on image), seems styles.css is visible from html file but still it's doesn't applied to the page. Can't find out the reason...
As far as your syntax for the style link, it's fine. You could get into a browser console (typically hit F12), then browse the page watching the network tab to make sure the browser finds the css file and loads it.
But I think your problem may be elsewhere. On the code you show, your entire nav (navigation) section is inside the head section of the page (i.e. before /head appears). That's not where it belongs. It should be inside the body section section further down. That's certainly a problem and may be what you think is a css issue.
sorry about the edit. I didn't know html tags would be eliminated
Edit: As regards the html MIME type instead of the correct CSS MIME type, you might look at this link and check your server configuration and/or .htaccess file to make sure the server hasn't been told to parse css as if it was html: "The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"
Also please show the CSS file, to confirm it actually is css and not actually html.
I found the problem. It was in express.js code. I didn't use spatial middleware for static files:
app.use(express.static(path.join(__dirname, "public")));
here is the documentation page:https://expressjs.com/en/starter/static-files.html
After adding this in server code, in html href should be the rest of path to css file, in my case:
I was wondering if there is a file format around where I can put (one or multiple) .css and (one or multiple) .html files, for example as a .zip (or similar) file AND your favourite browser can recognize it and opens it as a sort of static local "web page".
My use case would be to create html reports of some program execution, style it with a standardized css file and upload it on a cloud service, such that anyone with access can view it direcly in the browser.
I know a litte about html and css, but not enough to answer this question myself.
And "combine html and css" is not searchable on the web, so I'm asking you.
I'm not looking for a solution which bakes everything into one file.
I'm also not looking for an unzipped version of this (a folder), since that is not uploadable to most cloud storages I am aiming for.
Thank you.
AFAIK, there is no file format for that, but what you can do is create a folder in your htdocs or public folder and add all your .css and .html files in there. Then access it in localhost/yourfolder or if you are using a host http://yourdomain.com/yourfolder. For your HTML files to display the style correctly, they should be linked with the .css files or with the style inside each .html file between <style></style> tags in the <head> section.
You will see something like this, where you and others can preview and navigate through all HTML and CSS files.
Note: I've never done this on a host only on localhost, if you are using a host you will probably need to create permisions to access this folder, in that case contact your host so they can explain.
While making a personal website I've encountered a problem with adding a CSS Style Sheet.
That Style Sheet was a local one (in the same folder has the .htm file) called "Rodrigo.css".
Here is the HTML Link tag with the CSS in the hrc:
Here is a screenshot of the CSS Style Sheet (only the beginning part):
As you can see there are not HTML Tags.
Note: The CSS that I'm using in the style sheet was previously in an internal style sheet and worked, so I don't know why it isn't working.
While making the website I used the w3schools tutorials. To do this part specifically the "CSS How to... Three ways to incert CSS".
Solved
I've found what the problem was, the HTML file was encoded in a format that wasn't supported by some browsers, and was a different format to the one of the external style sheet.
I downloaded both your HTML file and CSS file, placed them in the same folder on my desktop and the CSS file took proper effect on the HTML file. I confirmed this by removing the CSS file from the folder, observing the difference in appearance and verifying the appearance was back to normal when I copied the CSS back in.
Your code appears to be correct. Try clearing your cache, trying a different browser or open the html file in incognito mode.
Edit: Another thing you can try is replacing
<link rel="stylesheet" type="text/css" href="Rodrigo.css">
with
<link rel="stylesheet" type="text/css" href="./Rodrigo.css">
Notice the addition of ./ before your file name. This forces the browser to look in the same directory as the CSS file. I could be making this up but I think I remember having problems with either links, images or hyperlinks in older browsers when I omitted the ./
So, I've found the problem. It turned out I encoded it in UTF-8 Bom( I'm not sure that's the name of the enconding type) and that was causing problems with the browsers and the external style sheet, witch wasn't enconded in the same format. I'm going to mark this awnser had having solved my problem.
The solution is enconding the HTML source file in UTP-8, or other files that are supported and enconding the HTML and CSS source files in the same format.
Thank you for anwsering, tough.