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.
Related
So, I've spent like last hour trying to solve it, but I just can't get custom .css file to get linked with html files in Spring 5. I'm using Thymeleaf, Bootstrap & jQuery for frontend works. I'm using Intellij Community Edition.
My files hierarchy looks like this:
java
project_files
resources
static
css
main.css
templates
main.html
I have a line in main.html:
<link rel="stylesheet" type="text/css" th:href="#{/css/main.css}" href="../../css/main.css"/>
that should link my styles with the .html file. What can be wrong?
Try changing a little bit your folder structure, create a folder under resources called static, and a folder called css under static and place the css files there, something like:
🗁 resources
└─── 🗁 static
└─── 🗁 css
└─── main.css
Then you should be able to access it by using:
<link rel="stylesheet" type="text/css" th:href="#{/css/main.css}"/>
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';
Is it possible that LESS files don't work in dreamweaver CC? Because probably my syntaxt is correct, but I don't understand why my style.less file doesn't work, even with simple commands like "color: #ff0"
use this in head: make sure you are using rel="stylesheet/less"
<link rel="stylesheet/less" type="text/css" href="styles.less" />
and before the html closing tag
<script src="less.js" type="text/javascript"></script>
Source:
client-side-usage
if you want include less direct to html file you have to read this topic: Less css file include in <head> section
or you can convert .less to .css file: http://koala-app.com/
or you can use gruntJS: http://gruntjs.com/
It's working if I put the entire project inside the "local server folder" (xampp in this case) even if I 'm using only simple html tag, .js and .less file. No php, mysql and others.
Could you tell me why of this behaviour?
I am using JSF 2.2 in a regular dynamic web project , i have included a css code in a xhtml page.
Web-content WEB-CONTENT Ressources css style.ss
in my index.xhtml i used this code
<link rel="stylesheet" href="WEB-INF/Ressources/css/style.css" type="text/css"/>
but the css doesn't work
Files inside WEB-INF aren't accessible from the outside. You have to place them in some other directory. For example:
<link rel="stylesheet"
href="#{request.contextPath}/Ressources/css/style.css" type="text/css"/>
I had the same problem.. If you are using maven or not sure where the css file is just open the war file with winzip and see what the css path is..
Maybe this question has been asked a lot,
but I still can't understand how to load CSS files when using django...
Please can anyone explain to me step by step how to load it?
Can I load the CSS file without the static folder or link, so I don't need to change the urls.conf but just setting in "setting.py" file?
(Sorry if my English is bad") :(
on local machine: you have to add:
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/path/to/media'}),
on a server you don't (and more you shouldn't for security reasons) need the previous line.
So finally: here is my architecture:
project/
app1/
__init.py__
views.py
public/
site_media/
js/
example.js
css/
example.css
in my settings.py:
MEDIA_ROOT = '/thecompletepath/public/site_media/'
MEDIA_URL = '/site_media/'
and in my templates, i use:
<link rel="stylesheet" type="text/css" href="/site_media/css/example.css" media="screen" />
Just add a normal link tag to your template.
<link rel="stylesheet" type="text/css" href="http://example.com/path/to.file.css">
Unless you have a dynamic CSS file, you would not want to have it related to anything in urls.py. Likewise, if you're not using the media (static) folder, you don't need to change anything in settings.py. Just insert it into your HTML in the template.
If you don't want to use an external CSS file, of course, you can always just put <style> tags into your templates.