I'm working on a web-application built upon the MEAN stack.
I use bootstrap as css lib, and have some css override in two files of mine "app.css" and "mio.css"
the app works just fine until I hit refresh in a controller that handles two partials, than everything gets reloaded except for my 2 css files.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/mio.css">
If I inspect them they contain the index.html data (head body dcc)
could you suggest what's happening??
Try using full file paths to the css files. For example..
<link rel="stylesheet" href="/assets/css/app.css">
The issue might be on the server side. Since angular apps are single page ajax applications, the server has to redirect all requests to the index.html page EXCEPT for assets. Your server might be returning the index.html page instead of your css files.
Related
I have been trying very hard to find the right path to my local Bootstrap 5 files, but what ever I do it's not finding it. At the moment I am in index.html (react). There I'm doing this:
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<script src="./js/bootstrap.min.js"></script>
and yes Bootstrap files are inside the css and js folder. What am I doing wrong?
It seems it is working at localhost:3000 but not in localhost:5001 (this one is with server/backend). What is the reason?
Yesterday I was working on my college project, everything was running smooth so I decided to upload it to github where my partner could access it. Today I opened the local repo and suddenly my CSS wasn't displaying correctly. I'm using Bootstrap 4.
This is how it looks now:
This is how it should look:
I've been using a Bootstrap template. I already tried making a new CSS file but it doesn't change. Also using this post ASP.Net website - doesn't load css file correctly
How I was calling my css
<link rel="stylesheet" href="css/style.css">
I tried
<link rel="stylesheet" href="~/css/style.css">
Even
<head runat="server">
<link rel="stylesheet" href="~/css/style.css" runat="server">
</head>
Css folder is located in asp default folder
Well, after a little attempt, it looks like the project had been corrupted when it was loaded. Since I had finished it on time, I created a new project and include the previous files.
It works like a charm.
I'm currently learning about html and css. I've learnt about this code,
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
It was said that external stylesheets can be loaded with 3 ways, and that's one of the ways.
So my question is, does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet my html document?
ps. sorry for bad english
edit: the link comes from w3schools, i'm learning the basics from there. if i shouldn't have done that please tell me so i can remove it.
The following
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Will download the styles.css file from www.w3schools.com/html/. In that case, you only have to upload your html file. The downside is that if the w3schools.com admin deletes the file you don't have control over his decision , your page will not find it anymore.
The best thing to do is to put a local my_styles.css file in the same folder as your html file and then
<link rel="stylesheet" href="my_styles.css">
This means you will have to upload your html file and my_styles.css. In this case the style will be always available for the webbrowsers to download.
does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet
No. The stylesheet needs a URL so the browser can access it. It doesn't have to be a URL hosted by a particular website.
It doesn't matter where that URL resolves to (unless it is one that isn't accessible to the browser — e.g. if the URL is on a private LAN and the browser isn't on that LAN).
No it doesn't have to be uploaded anywhere. The href attribute simply expresses where the file is. The value of the href can be relative or absolute.
Relative
Relative paths are relative to the folder your HTML file is in. So imagine you have an HTML page webpage.html and a CSS file styles.css in the following folder structure:
My Website
|-- css
| `-- style.css
|-- images
`-- webpage.html
Your link element could use a relative path like this:
<link rel="stylesheet" href="../css/styles.css">
../ to go up a folder, then css/ to go into the css foler.
Absolute
An absolute path points to the same place no matter where you're pointing from. In the folder structure above, if My Website was the root directory of our website, we could use absolute paths a couple different ways:
<link rel="stylesheet" href="/css/styles.css">
/ to start at the root directory, then css/ to go into the css folder
OR
<link rel="stylesheet" href="http://www.mywebsite.com/css/styles.css">
This would directly load your CSS from the URL like the w3schools example.
https://www.w3schools.com/tags/tag_link.asp
<link rel="stylesheet" type="text/css" href="my_style.css" />
https://www.w3schools.com/tags/att_style_type.asp
<style type="text/css">
...
</style>
https://developer.mozilla.org/tr/docs/Web/CSS/#import
#import 'custom.css';
I have an application that let's users specify custom css along with our pre-determined css. I'd like it so that when we request the user's css file, we return a file that dynamically compiles the base css with the user-specific css. This is relatively easy to do if we're serving the assets from our own server, but if at some point I'd like to serve all my static assets from a CDN, is there a CDN that would let you do this? I know I could always upload a separate css file for each user to the CDN, but there would be tons of duplication of the base CSS which would unneccessarily raise storage costs.
Why don't you split your CSS into two separate files?
static CSS served by the CDN
dynamic (user generated) CSS served by a script on your server
Your HTML will then look something like this:
<link href="./dynStyles.css" rel="stylesheet" type="text/css" media="all">
<link href="http://my.cdn.com/staticStyles.css" rel="stylesheet" type="text/css" media="all">
In Eclipse, I created a Dynamic Web Project and a JSP file under WebContent folder. I also created a CSS file under the WebContent folder. Then I use <link rel="stylesheet" type="text/css" href="XXX.css"> in the JSP to link to the CSS file but when I run on web server (Tomcat) the CSS didn't apply. Can someone tell me why?
You must put your web project name before the address path of your css file
Example:
<link rel="stylesheet" href="/YourProjectName/XXX.css" type="text/css">
or in more dynamic way:
<link rel="stylesheet" href="${pageContext.request.contextPath}/XXX.css" />
Have fun :)
You can use: With style.css file in WEB-INF/jsp folder
<style type="text/css">
<%#include file="css/style.css" %>
</style>
NOTE
This however copies the entire source of the CSS file into the HTML
output of the JSP page. In other words, this is a server-side include,
not a client-side resource reference. So you effectively miss the
advantage that the browser can cache static resources and this way you
end up with a bandwidth waste because the very same CSS file is
embedded in every single page. In other words, a bad idea in terms of
performance and efficiency.
as #BalusC described in comment! you want to test your style.css file anyway, this is a solution.
you can use
<link rel="stylesheet" type="text/css" href="path/css">
You should restart eclipse so that it maps all css and javascript files again.
I worked for me.