title: What to do with css for JSP fragment?
body: <p>I'm writing my first dynamic webpage with JSP. Right now I've got a working <code>index.JSP</code> without a header. I wrote a <code>header.jspf</code> which looks like this:</p>
  
  <pre><code>&lt;header&gt;
  &lt;div id="head"&gt;
  &lt;img src="images/header/logo.png" alt="logo"&gt;
  &lt;h1&gt;Rewards&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>I included the header in my index.JSP with this line:  <code>&lt;%@ include file="header.jspf" %&gt;</code>, right after the body. But now I'm wondering. Where should I place the css for that header. I can put it inside the <code>header.JSPF</code>, 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 <code>&lt;head&gt;</code> tag inside the <code>index.JSP</code> page, but then I should include the css every time I use that fragment.</p>
  
  <p>Is there 'link' the css to <code>header.jspf</code> 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?</p>
  
  <p>==================================================================================</p>
  
  <p>EDIT:
  @San Krish</p>
  
  <p>My header.jspf will look like this, I guess if, I include my css:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="cssFiles/header.css"&gt;
  &lt;header&gt;
  &lt;div id="head"&gt;
  &lt;img src="images/header/logo.png" alt="logo"&gt;
  &lt;h1&gt;Rewards&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>The problem however is that when I do that, the <code>&lt;link rel="stylesheet" type="text/css" href="cssFiles/header.css"&gt;</code> gets inserted into the <code>body</code> of my <code>index.jsp</code> and that isn't valid HTML.</p>
  
  <p>==================================================================================</p>
  
  <p>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)</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="cssFiles/header.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="head"&gt;
  &lt;img id="logo" src="images/header/logo.png" alt="logo"&gt;
  &lt;h1&gt;Reward&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Then instead of including the jspf in the index page I've done : <code>&lt;%@ include file="header.jsp" %&gt;</code>
  The css however is still included inside the body :(.</p>