What to do with css for JSP fragment?

1.6k views Asked by At

I'm writing my first dynamic webpage with JSP. Right now I've got a working index.JSP without a header. I wrote a header.jspf which looks like this:

<header>
<div id="head">
<img src="images/header/logo.png" alt="logo">
<h1>Rewards</h1>
</div>
</header>

I included the header in my index.JSP with this line: <%@ include file="header.jspf" %>, right after the body. But now I'm wondering. Where should I place the css for that header. I can put it inside the header.JSPF, but if I do that it get's inserted into the body when the page is 'built' by the server. I can place it in the <head> tag inside the index.JSP page, but then I should include the css every time I use that fragment.

Is there 'link' the css to header.jspf and everytime I include the header, the server automatically knows it should include that css for the header, without me typing everytime in my jsp, that I need that css file for the header?

==================================================================================

EDIT: @San Krish

My header.jspf will look like this, I guess if, I include my css:

<link rel="stylesheet" type="text/css" href="cssFiles/header.css">
<header>
<div id="head">
<img src="images/header/logo.png" alt="logo">
<h1>Rewards</h1>
</div>
</header>

The problem however is that when I do that, the <link rel="stylesheet" type="text/css" href="cssFiles/header.css"> gets inserted into the body of my index.jsp and that isn't valid HTML.

==================================================================================

EDIT2: I've deleted the jspf and created a header.jsp file which looks like this (I copied all the content, I don't know if it is complete)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<head>
<link rel="stylesheet" type="text/css" href="cssFiles/header.css">
</head>

<body>
<div id="head">
<img id="logo" src="images/header/logo.png" alt="logo">
<h1>Reward</h1>
</div>
</body>

Then instead of including the jspf in the index page I've done : <%@ include file="header.jsp" %> The css however is still included inside the body :(.

1

There are 1 answers

10
Santhosh On

Is there 'link' the css to header.jspf and everytime I include the header, the server automatically knows it should include that css for the header

jspf files are not compiled on their own so it needs to be executed with other jsp files.

You can include the common css and js files in the common.jsp so that all other files which uses header.jspf will lose the burden of linking the common css and js files.

Update:

I've deleted the jspf and created a header.jsp file ,Then instead of including the jspf in the index page I've done : <%@ include file="header.jsp" %> The css however is still included inside the body

You have included the header.jsp with the css in the index.jsp , it is like emebedding the html page into another html page like below,

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!-- when the app server interprets the jsp you have included it simply interprets like below -->
    <html>
<head>
<link rel="stylesheet" type="text/css" href="cssFiles/header.css">
</head>
<body>
    <div id="head">
        <img id="logo" src="images/header/logo.png" alt="logo">
            <h1>Reward</h1>
    </div>
</body>
<html>
<h1>Content of the index page</h1>
</body>
</html>

jsp's contains precompiled java code other than that it is similar to html, so you need not worry where it will place the css files (it is the work of browsers to render the external CSS into the head tag and it will happen normal)

An extract from docs,

The jsp:include action inserts additional static or dynamic resources into the page at request time as the page is displayed. Specify the resource with a relative URL (either page-relative or application-relative).

Learn More :