I am writing a very simple web application project by "IntelliJ IDEA" and "Tomcat". I downloaded and HTML file and pasted it into my index.jsp, this HTML also has a css file, but I do not know where to put it.
you can put css anywhere in project . All you need to select correct path in href .
<head>
<link rel="stylesheet" type="text/css" href="path_to_css/xyz.css">
</head>
you can put css and html in same directory. then use
<head>
<link rel="stylesheet" type="text/css" href="xyz.css">
</head>
Related
I m trying to create a sidebar where I have a style.css for customize it. When I inspect my page, it seems it never loads and get 404 not found.
<head>
<h1>sidebar</h1>
<title>Responsive Sidebar Menu</title>
<link rel="stylesheet" type="text/css" href="style.css"></head>
My project is structured like in the following picture:
I can't figure out how to write the path so it can load properly.
Move your template folder right under resources:
src/main/resource/static/css (for CSS files);
src/main/resource/templates (for HTML templates).
Then correct the link tag as follows:
<link href="../static/css/style.css" th:href="#{/css/style.css}" rel="stylesheet" />
I have tried including the link to the stylesheet in the head of the JSP file as well as trying the #import option in my project stylesheet. Nothing has worked. I also haven't been able to find a webjar or any such thing.
CSS:
#import url('https://fonts.googleapis.com/css?family=Boogaloo');
body {
font-family: 'Boogaloo', cursive;
}
JSPF:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">
<link href="webjars/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
<title>HappyLibs Emailer</title>
</head>
There isn't anything special about Spring MVC or JSP in regards to using a Google Font.
In my experience, the external files (like css, javascript, and images) usually go in either the WebContent folder (standard build), or the webapp folder (maven build).
I don't believe the c:url tag is necessary for this.
Standard Example: [root]/WebContent/[whatever folder structure makes sense]/main.css
MVN Example: src/main/webapp/[whatever folder structure makes sense]/main.css
I happen to like the structure like -> /view/page/[specific page]/[files]
Then, in the JSP:
<!DOCTYPE html >
<html>
<head>
...
<link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
<link href="view/main.css" rel="stylesheet" >
...
</head>
<body>
...
</body>
</html>
Also, the browser's developer tools should show an error if it can't find a file in the specified location.
Chrome developer tools (ie: right-click on the page and choose 'inspect'):
The console tab will show an error if it can't find it. The Sources tab will show you the files your page actually loaded. The Elements tab will specify the styles being applied to the element in question -> to make sure something else isn't simply overriding the style you're expecting.
Found the issue - it was actually caused by the order of the links in my head. I needed my CSS to be applied after the Bootstrap link so that my styles wouldn't be overridden:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="webjars/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
<link href="<c:url value="/resources/css/main.css" />" rel="stylesheet" type="text/css">
<title>HappyLibs Emailer</title>
</head>
I have tried different apporaches. For me, most logical would be the standard way, as I have it now in my "Item.html":
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${item.name}"></title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
This is the form what "drag and drop" in netbeans gives me as a path.
My file structure is shown here:
Any ideas?
Create a directory static in your src/main/resources/ folder.
Create a directory css in created static folder to store css files.
Put the css files to the css folder.
In html you can include css like <link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
Here the static folder to serve static contents like css, js files.
My struts2 project structure as follows
Webcontent
css
abc.css
jsp
login.jsp
META-INF
WEB-INF
indeed to include the functions of abc.css in login page.How can i do that ? How can i give the path of css file in jsp page ?
Include your css with the following statement.
<head>
<link rel="stylesheet" type="text/css" href="../css/abc.css">
</head>
"../css/abc.css" is a relative path.
"../" represents one directory up. i.e., Login.jsp is in "jsp" directory "../" will make the directory as "Webcontent"
"../css" will traverse you upto "css" directory in the "Webcontent".
"../css/abc.css" will give the abc.css file.
you can include your css file like this.
<head>
<link rel="stylesheet" type="text/css" href="/Webcontent/css/abc.css">
</head>
I created a jsp page as follows:
<%# page contentType="text/css" %>
<html>
<head>
<title>Login page</title>
<link href="/css/loginstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> India welfare</h1>
<p> welcome </p>
</body>
</html>
and named it as login.jsp
and i also created a css file called loginstyle.css and the code of the .css file is as follows:
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
the directory structure for css and jsp's are as follows:
webcontent/welfare_web/css for .css files and
webcontent/welfare_web/login for jsp files
the programming editor is eclipse and the server i am using is tomcat 7.0. when i am trying to run the login.jsp file using tomcat server. The css file is not showing any effect. i mean the output is normal text and is not as per the CSS file.
please help me how to make the .css file to effect the jsp file.
css href link is incorrect. Use relative path instead:
<link href="../css/loginstyle.css" rel="stylesheet" type="text/css">
You can write like that. This is for whenever you change context path you don't need to modify your jsp file.
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css" />
I use this version
<style><%#include file="/WEB-INF/css/style.css"%></style>
I had the same problem too. Then i realized that in the MainPageServlet the urlPatterns parameter in #WebServlet annotation contained "/", because i wanted to forward to the MainPage if the user entered the section www.site.com/ . When i tried to open the css file from the browser, the url was www.site.com/css/desktop.css, but the page content was THE PAGE MainPage.jsp. So, i removed the "/" urlPattern and now i can use CSS files in my jsp file using one of the most common solutions (${pageContext.request.contextPath}/css/desktop.css).
Make sure your servlet doesn't contain the "/" urlPattern.
I hope this worked for u too,
- Axel Montini
if everything seems correct, and despite it still does not work I invite you to load the statics files in the web.xml like this
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/includes/*</url-pattern>
</servlet-mapping>
after
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="/includes/asserts/css/bootstrap.min.css"/>
use this it worked for me
<style><%#include file="/WEB-INF/view/style/style.css"%></style>
For CSS :
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
For JS :
<script type="text/javascript" src="js/bootstrap.js"></script>
Files location:
└───src
└───main
├───java
└───webapp
├───css/bootstrap.css
├───js/bootstrap.js
├───META-INF
└───WEB-INF/index.jsp
└───lib