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:
Related
This is pretty much my first go at HTML and CSS. I thought I was getting a hang of it until I added more pages. I wanted each page to have the same top navigation bar format, but when I linked the same CSS Stylesheet to all of my pages it just doesn't want to work? How should I go about fixing this?
Also, somehow my google fonts link did work at first, but once I added in the pages and tried linking the single stylesheet to all the pages, it stopped working completely.
Here's what is going on:
index.html file code & link href to css
Preview of index.html/my homepage
menu.html file code & link href to the same css stylesheet
Preview of menu.html/menu page
My CSS stylesheet
The preview works with index.html, but when I navigate to the menu page, or contact page I have created through the preview, it completely breaks and doesn't have the navigation bar I created across all the pages at all.
Did I do something wrong here? I tried creating multiple CSS files and gave them different names since each page is going to look different anyways, but kept the html the same across all the other html pages and the css the same.
The reason why the css script is working for the index page only is because index.html is the only script that has the right directory to your css script. So the browser can't find the css script as a result. Remember that the other pages are not in the same location as index.html (they are in Pages instead of the root directory). All you would have you do is just change the directory path on the other scripts.
Add this on all your other scripts (excluding index.html):
<link rel="stylesheet" href="../CSS/style.css"/>
It should work after this.
Here is an example:
Your actual problem is not knowing how to navigate from one/folder to another. This link below will help you further on how to navigate around folders.
https://learn-the-web.algonquindesign.ca/topics/paths-folders/
Don't take out the files from Pages but leave them where they, all you need to do is to change the path to the different files. You'll see how I did on the screenshots above.
If I had more time I would go more in detail but this should be sufficient info for you to solve the problem and understand what mistakes you made. I hope this helps.
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"
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
I'm new to ASP, ASP not ASP.NET. I've programmed before, had experience in PHP. I have many experience with HTML and CSS. I like to organise my files. I know (in php file) I only have to link the external css in the tags to style my webpages. I assume it's the same for ASP. It does, but not for me.
Whenever I tried to edit the style of my asp program and run it in the server it doesn't work. I created other pages as well and same thing happened. Whenever I used Google Chrome to see the elements, I could see my code, but when I click on the style sheet in the 'INSPECT ELEMENT' tool, it opens at the side with nothing there. I did script the css, and tried to make the background color black. The styling works only when I do an internal styling within the asp file between the tags.
Does anyone know how I may solve this issue? I hate using internal css as external ones are faster and more organised.
Check the following common issues:
Make sure your stylesheet file has a file extension of .css
Check if you have a MimeType setup for .css files as text/css in your IIS.
If you're returning CSS code from a .asp page file extension, make sure you first call Response.ContentType = "text/css" at the top of the page.
When including it in your html document make sure you're using something along the lines of the following syntax:
.
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
I have made my first website and in the preview in Safari and Chrome from Dreamweaver it works fine. But after uploading my files with Filezilla to 000webhost and typing in the URL, only the index page loads, links to other pages on the site don't work, images are broken and the css isn't applied.
I'm think it is because I haven't named the files correctly in the code, but I have no idea what to call them in order to get it right.
The file you upload to is public_html. So I've tried http://www.webaddress/public_html/Pages/entertainment.html but it didn't change anything.
Thanks for any help!
Without code examples it's very difficult to answer this, but it's probably just that your URL format is incorrect.
For example, if you've got example.com/example/example.html and that page contains a CSS file with a location of /css/style.css, the web browser will look for example.com/css/style.css because the slash at the beginning of the URL tells it to go to the root.
In this case, your CSS file is probably actually in example.com/example/css/style.css. Remove the beginning slash so the location is css/style.css and the web browser will look for the file using the current page's location as it's starting point.