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">
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'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 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"
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.
I'm developing a website and I need to use external CSS stylesheets.
The only drawback is I'm using a new Chromebook after migrating from Windows.
I'm using CDE, so how should I link an external stylesheet to an HTML file?
To be more specific, how do I find the full file path of a CSS file on a Chromebook?
For all of the noobs out there, I figured it out.
You have to link an external stylesheet (if on a Chromebook) using relative linking, so what you will want to do is this:
<link rel="stylesheet" type="text/css" href="name_of_stylesheet_in_same_folder_as_html.css">
Basically, keep your CSS file in the same folder as your HTML or Javascript file and it will most likely work when there is no standard full file path.
Can you view the css directly in the browser? If so, whatever url you're using should work. If not, perhaps something else is going on. Chromebook should be no different from any other browser.