My project structure:
hello.jsp:
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link href="<c:url value="/resources/myStyle.css" />" rel="stylesheet">
</head>
<body>
<h1>Text</h1>
<p>Text.</p>
</body>
</html>
myStyle.css:
body {
font-family: Arial, Verdana, sans-serif;
font-size: 11pt;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #a52a2a;
font-size: 24pt;
font-family: Georgia, Times, serif;
font-weight: normal;
}
p {
text-align: justify;
margin-left: 60px;
margin-right: 10px;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
padding-left: 10px;
padding-bottom: 10px;
}
Could someone please explain me why css doesn't work?
I use Intellij IDEA as IDE and Tomcat.
This works though:
<style>
<%#include file="/resources/myStyle.css" %>
</style>
Simply try with any one. All these are relative path with respect to webapp folder.
<link rel="stylesheet" type="text/css" href="/resources/myStyle.css" >
OR
<link rel="stylesheet" type="text/css"
href="<%=application.getContextPath() %>/resources/myStyle.css" >
OR
<jsp:directive.include file="/resources/myStyle.css" />
JSP - The include Directive
The filename in the include directive is actually a relative URL. If you just specify a filename with no associated path, the JSP compiler assumes that the file is in the same directory as your JSP.
The include directive is used to includes a file during the translation phase. This directive tells the container to merge the content of other external files with the current JSP during the translation phase. You may code include directives anywhere in your JSP page.
Related
Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.
I also try to do this, nothing happen :
<link href= "CSS\index.css" rel="stylesheet" type="text/css">
CSS code :
style
h1 {
background-color: blue;
}
I am also new but I think I can help. You have two options, that I am aware of.
The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>yourwebsite.com</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<img src="your.jpg" alt="Handsome Man" width="100"
height="100">
<h1><b>your name</b></h1>
<p>your tag line</p>
<a href="https://twitter.com/yourtwitter"</a>
</body>
</html>
(styles.css)
body{
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* Same as above */
/* font: normal 12px Arial, Helvetica, sans-serif; */
line-height: 1.6em;
}
h1{
color: #00ff00;
}
p{
color: rgb(0,0,255);
}
The second and worst option is to include your css within your main html file.
(Copied from https://ryanstutorials.net/css-tutorial/css-
including.php)
<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>
Make sure the index.css file is inside the CSS folder, then add the below link tag.
<link rel="stylesheet" href="./CSS/index.css">
i'm using vs code
i tried :
-removing all other styles but one
-checking all semicolons and tags
-using another browser
none of these worked.
please reply if you have a plausible answer :) thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<a class = "one" href = "/index.html">MAIN</a>
</head>
<body>
<p id="p1">Websites by Froggy Sites!</p>
<p id="p2">Nelson Mandela - The Promotion</p>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON\ CLUB\ MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON\ CLUB\ MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
</body>
</html>
Your are probably using your CSS without including it or in wrong place.
Try using in style tag in head section above your body or create a new file named for example index.css and connect this file to your code.
If you use external version. For example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
<title>My site</title>
</head>
<body>
Other HTML STUFF HERE
</body>
</html>
Or if you use style tag
<!DOCTYPE html>
<html lang="en">
<head>
<style>
all styling here
body {
margin: 0;
}
</style>
<title>My site</title>
</head>
<body>
All HTML HERE
</body>
</html>
You are trying to access a class name while using: .p1, however it looks like your html is set up with p1 as an id. To access IDs in css you will need to change the "." to a "#".
ex. #p1{ ... } instead of .p1{ ... }
As stated above first you should make sure to reference the elements
in the proper way, either if you need to do it by class (".") or by
Id ("#") in the CSS code.
I have give some standard order to your code within the HTML
structure for improving readability.
Also there are some typos and invalid spaces.
Check the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON/CLUB/MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON/CLUB/MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
<title>Main</title>
</head>
<body>
<a class="one" href="index.html">MAIN</a>
<p class="p1">Websites by Froggy Sites!</p>
<p class="p2">Nelson Mandela - The Promotion</p>
</body>
</html>
I left the HTML and CSS in one single file as it is in your initial example.
Inside my Java EE app I created a jsp page as follows: I'm creating a table showing the flights in rows . The flights are inside "fList" List under the "flight_list" request attribute .
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../resources/css/styles.css"
type="text/css" />
</head>
<body>
<h1>List of Flights</h1>
<table>
<tr>
<th>From</th>
<th>To</th>
<th>Time</th>
<th>Price</th>
<th>Airplane</th>
<th>Seating</th>
<th>Number of Pilotes</th>
<th>Pilots names</th>
</tr>
<%
List<Flight> fList = (List<Flight>) request.getAttribute("flight_list");
for (Integer i = 0; i < fList.size(); i++) {
%>
<tr>
<td><%=fList.get(i).getFlightOrigin()%></td>
<td><%=fList.get(i).getFlightDestination()%></td>
<td><%=fList.get(i).getFlightTime()%></td>
<td><%=fList.get(i).getPrice()%></td>
</tr>
<%
}
%>
</table>
</body>
</html>
And styles.css as follows
h1{
font-family: Trebuchet MS;
}
table {
display: block;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
overflow: auto;
width: auto;
}
th {
background-color: #1e90ff;
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: rgb(238, 238, 238);
color: rgb(111, 111, 111);
padding: 20px 30px;
}
Here you see my project structure
WebContent-->WEB-INF-->views-->flights-list.jsp
WebContent-->resources-->css-->styles.css
Project Structure
CSS effects are seen only in eclipse
The CSS file is loaded only on the JSP preview tab . The problem is that they don't appear on the browser unless I put the css code inside <style>...</styles> .
Please help me to load the page correctly on my browser.
Use below link tag to load/include .css/.js file in jsp at header Part
<head>
<link rel="stylesheet" href="resources/css/styles.css" type="text/css"/>
<script type="text/javascript" language="javascript" src="resources/javascript/foo.js"></script>
---
</head>
or if you want to include third party css/js specify full path from url:
<link rel="stylesheet" href="htts://..../foo.css" type="text/css"/>
<script type="text/javascript" language="javascript" src="htts://..../foo.css"></script>
I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.
Here are my files:
<!DOCTYPE css>
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!
You don't define a doctype for CSS files, remove <!DOCTYPE css>.
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
Make sure file path for css file is correct.
Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.
I can't see what is wrong with this. I have 2 HTML sheets and a CSS sheet.
The first HTML sheet (index.html) is like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Olive</h1>
Enter
</body>
</html>
The second HTML sheet (page1.html) is this:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
And the CSS external sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
The issue is that the id from the second HTML sheet (page1.html) doesn't work. I don't know why. I don't know if it's the syntaxis or what.
The body attributes are working in page1.html, but the id attributes don't. The <p> element only appears with any style. Could someone tell me what's wrong with this?
Few tips for debugging... try to make cache refresh few times when you have modified your css styles (with chrome and windows: ctrl+shift+r) then if it doesnt work try to use code below and cache refresh again:
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
Edit:
Solution was to put .css stylesheet to correct folder.
Cheers.
Not sure if this is the issue, but your first line should be:
<!DOCTYPE html>
If you don't declare it properly, your browser could render in quirks mode which can result in all sorts of odd behavior.
The syntax is correct, but maybe the script is any command that changes the style for this id.