How to include a css style sheet in jsp

i’m trying to include a css style sheet in my jsp page but its not working.
i tried putting <link rel=“stylesheet” href=“/css/print.css” type=“text/css” media=“screen”> but its not working.
can any1 help me with the correct code syntax. thnx

<%@ taglib uri="tags-html-el" prefix="html-el"%>
<%
		  ClauseOavService cud =(ClauseOavService) AppContextUtil.getApplicationContext().getBean(BeanFactoryConstants.CLAUSE_OAV_SERVICE );
       request.getSession().getServletContext().setAttribute("app_clause_section_group",cud.getSectionGroup());
		   request.getSession().getServletContext().setAttribute("app_clause_section",cud.getSectionOrdered());
		   request.getSession().getServletContext().setAttribute("app_clause_group",cud.getGroup());
		   request.getSession().getServletContext().setAttribute("app_clause_title",cud.getClauseTitle() );
%>

<link rel="stylesheet" href="/css/print.css" type="text/css" media="screen">

<input:body title="OATool Signed Agreement" jsFile="form.js;Validate.js" >

<c:set var="cl_sec_special" value="3"/>
<c:set var="cl_gr_special" value="120"/>
<c:set var="section_adhoc_title" value="Ad Hoc Clauses - User" />

<table id="super" class="table_id">
<tr>
 <td><jsp:include page="ssi/topHeader.jsp" flush="true"></jsp:include></td>
</tr>
<tr>
    <td><table width="100%" class="table_id">
        <tr>
          <td width="20%" class="smallcell_left"><strong>OA Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaInfo.getOANumber()</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>CBR Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">cbrNumber</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>OA Version Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaVersionInfo.getVersion()</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Date Last Modified</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">lastModifiedDate</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong> OA Status</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaVersionStatus</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Location Code</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">buildingID</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Lease Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">leaseNumber</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Supplemental Reason</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">supplementalReasonText</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td align="right"><input:button onClick="" class="aSignButton" value="Generate PDF Report" title="Generate PDF Report"/> </td>
        </tr>

        <tr>
          <td>&nbsp;</td>
        </tr>
      </table></td>
    </tr>
  <tr>
      <td align="center" class="headersign">OCCUPANCY AGREEMENT<br>
        Between<br>
        agencyInfo<br>
        And<br>
        GENERAL SERVICES ADMINISTRATION
    </td>
  </tr>

  <tr>
    <td><br></td>
  </tr>
        <tr>
            <td> <table width="100%" border="0" cellpadding="2" cellspacing="0" class="table_id" >

              <c:forEach items="${app_clause_section}" var="section" >
              <c:if test="${section.key!=cl_sec_special }" >
              <tr><td>&nbsp;</td></tr>
                <tr>
                    <td class="headersign"> <c:out value="${section.title}" /> </td>
                </tr>
              </c:if>
                <tr>
                    <td valign="top">
                        <table class="table_id">
                            <c:forEach items='${app_clause_section_group[section.key]}' var="group" >
                            <c:if test="${not empty requestScope.request_ClauseGroupEvet[group.key]}" >
                             <c:if test="${group.key!=cl_gr_special }" >
                                  <tr><td>&nbsp;</td></tr>
                                  <tr>
                                      <td class="titlesign"> <c:out value="${group.groupTitle}"/> </td>	
                                  </tr>
                            </c:if>
                                    <c:forEach items='${request_ClauseEvet}' var="clause" >
                                     <c:if test="${clause.clauseGroupId==group.key }" >
                                  <tr><td>&nbsp;</td></tr>
                                  <tr>
                                      <td class="subtitlesign"> <c:out value='${applicationScope.app_clause_title[clause.key].title }'/>

                                      </td></tr>
                                      <tr><td> <c:out value="${requestScope.request_OnlyOAClause[clause.key].text}" />
                                      </td></tr>
                                          </c:if> </c:forEach>
                                        </c:if> </c:forEach>
                        </table>
                    </td>
              </tr>
            </c:forEach>

                <tr><td>&nbsp;</td></tr>
                <tr>
                  <td class="headersign"><c:out value="${section_adhoc_title}"/>
                  <table class="table_id">
                  <c:forEach items='${request_OnlyOAClauseList}' var="clause" >
                  <c:if test='${clause.groupId==0 and (clause.mandatoryInd  eq "Y")}' >
                  <tr><td>&nbsp;</td></tr>
                    <tr>
                        <td class="titlesign"> <c:out value='${clause.title }'/></td>
                    </tr>
                  <tr><td>&nbsp;</td></tr>
                  <tr>
                    <td> <c:out value='${clause.text }'/></td>
                  </tr>
                  </c:if>
                  </c:forEach>
                  </table></td>
                  </tr>


  <tr>
    <td><br></td>
  </tr>
  <tr>
    <td>I agree to the initial terms with the understanding modifications will be made over time. </td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="1" class="table_id">
        <tr>
          <td class="smallcell_topleft" height="25">Approved</td>
          <td class="smallcell_right" height="25">Approved</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Agency Representative</td>
          <td class="smallcell" height="25">GSA Representative</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Title</td>
          <td class="smallcell" height="25">Title</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Date</td>
          <td class="smallcell" height="25">Date</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><br></td>
  </tr>
  <tr>
    <td align="right"><input:button onClick="" class="aSignButton" value="Generate PDF Report" title="Generate PDF Report"/> </td>
  </tr>
</table></td>
 </tr></table>
</input:body> 

2 possible solutions.

1- Most likely - link tag should appear in a head block

2- path to css incorrect, test by using absolute reference. (http://localhost/contextname/css/css.css)

print.css includes
table#super { width: 100% }

<head>
<link rel=“stylesheet” href=“…/css/print.css” type=“text/css” media=“print”>
</head>

still didn’t work :frowning:

href=“…/css/print.css”

you was talking about “/css/print.css” before. Are you sure about the path ?? O_o

well actually i tried both links and it didn’t work…
i’m running the application on my local machine
http://192.168.109.9:8988/OATool/oavsignagrAction.do?method=showClauseEvent&oaVersionId=12027

how can i see if the css path is correct using this link???

should probably be css/print.css (no leading slash)

assuming css is a direct subdirectory of OATool.

no didn’t work as well…

if u take a look at the code u can see that i’m not even including a css page, yet all the design and colors and tables are showing… so i’ve come to the conclusion that even if i’m putting the print.css
<link rel=“stylesheet” href=“css/print.css” type=“text/css” media=“print”>
which contains only table#super { width: 100% }
its not overriding the table#super { width: 780px; } which is in style.css
so how can i include and make it work???

<input:body title="OATool Signed Agreement" jsFile="form.js;Validate.js" >

<c:set var="cl_sec_special" value="3"/>
<c:set var="cl_gr_special" value="120"/>
<c:set var="section_adhoc_title" value="Ad Hoc Clauses - User" />

<table id="super" class="table_id">
<tr>
 <td><jsp:include page="ssi/topHeader.jsp" flush="true"></jsp:include></td>
</tr>
<tr>
    <td><table width="100%" class="table_id">
        <tr>
          <td width="20%" class="smallcell_left"><strong>OA Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaInfo.getOANumber()</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>CBR Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">cbrNumber</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>OA Version Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaVersionInfo.getVersion()</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Date Last Modified</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">lastModifiedDate</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong> OA Status</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaVersionStatus</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Location Code</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">buildingID</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Lease Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">leaseNumber</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Supplemental Reason</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">supplementalReasonText</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td align="right"><input:button onClick="" class="aSignButton" value="Generate PDF Report" title="Generate PDF Report"/> </td>
        </tr>

        <tr>
          <td>&nbsp;</td>
        </tr>
      </table></td>
    </tr>
  <tr>
      <td align="center" class="headersign">OCCUPANCY AGREEMENT<br>
        Between<br>
        agencyInfo<br>
        And<br>
        GENERAL SERVICES ADMINISTRATION
    </td>
  </tr>

  <tr>
    <td><br></td>
  </tr>
        <tr>
            <td> <table width="100%" border="0" cellpadding="2" cellspacing="0" class="table_id" >

              <c:forEach items="${app_clause_section}" var="section" >
              <c:if test="${section.key!=cl_sec_special }" >
              <tr><td>&nbsp;</td></tr>
                <tr>
                    <td class="headersign"> <c:out value="${section.title}" /> </td>
                </tr>
              </c:if>
                <tr>
                    <td valign="top">
                        <table class="table_id">
                            <c:forEach items='${app_clause_section_group[section.key]}' var="group" >
                            <c:if test="${not empty requestScope.request_ClauseGroupEvet[group.key]}" >
                             <c:if test="${group.key!=cl_gr_special }" >
                                  <tr><td>&nbsp;</td></tr>
                                  <tr>
                                      <td class="titlesign"> <c:out value="${group.groupTitle}"/> </td>	
                                  </tr>
                            </c:if>
                                    <c:forEach items='${request_ClauseEvet}' var="clause" >
                                     <c:if test="${clause.clauseGroupId==group.key }" >
                                  <tr><td>&nbsp;</td></tr>
                                  <tr>
                                      <td class="subtitlesign"> <c:out value='${applicationScope.app_clause_title[clause.key].title }'/>

                                      </td></tr>
                                      <tr><td> <c:out value="${requestScope.request_OnlyOAClause[clause.key].text}" />
                                      </td></tr>
                                          </c:if> </c:forEach>
                                        </c:if> </c:forEach>
                        </table>
                    </td>
              </tr>
            </c:forEach>

                <tr><td>&nbsp;</td></tr>
                <tr>
                  <td class="headersign"><c:out value="${section_adhoc_title}"/>
                  <table class="table_id">
                  <c:forEach items='${request_OnlyOAClauseList}' var="clause" >
                  <c:if test='${clause.groupId==0 and (clause.mandatoryInd  eq "Y")}' >
                  <tr><td>&nbsp;</td></tr>
                    <tr>
                        <td class="titlesign"> <c:out value='${clause.title }'/></td>
                    </tr>
                  <tr><td>&nbsp;</td></tr>
                  <tr>
                    <td> <c:out value='${clause.text }'/></td>
                  </tr>
                  </c:if>
                  </c:forEach>
                  </table></td>
                  </tr>


  <tr>
    <td><br></td>
  </tr>
  <tr>
    <td>I agree to the initial terms with the understanding modifications will be made over time. </td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="1" class="table_id">
        <tr>
          <td class="smallcell_topleft" height="25">Approved</td>
          <td class="smallcell_right" height="25">Approved</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Agency Representative</td>
          <td class="smallcell" height="25">GSA Representative</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Title</td>
          <td class="smallcell" height="25">Title</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Date</td>
          <td class="smallcell" height="25">Date</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><br></td>
  </tr>
  <tr>
    <td align="right"><input:button onClick="" class="aSignButton" value="Generate PDF Report" title="Generate PDF Report"/> </td>
  </tr>
</table></td>
 </tr></table>
</input:body>

is this a correct place to implement the css page, since when i ran the jsp page and checked the view source the link was before the head. can please any1 help me and tell me how can i fix that???

<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<input:body title="OATool Signed Agreement" jsFile="form.js;Validate.js" >

<script>
function openPDFWindow()
{
   var pop = window.open("jsp/pdf.jsp", "pdfPopup", "status=0, toolbar=0, location=0, menubar=0, directories=0, resizable=0, scrollbars=1, height=600, width=800");
   pop.moveTo(200,200);
  return false;
}
</script>

<c:set var="cl_sec_special" value="3"/>
<c:set var="cl_gr_special" value="120"/>
<c:set var="section_adhoc_title" value="Ad Hoc Clauses - User" />

<table id="super" class="table_id">
<tr>
 <td><jsp:include page="ssi/topHeader.jsp" flush="true"></jsp:include></td>
</tr>
<tr>
    <td><table width="100%" class="table_id">
        <tr>
          <td width="20%" class="smallcell_left"><strong>OA Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaInfo.getOANumber()</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>CBR Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">cbrNumber</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>OA Version Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaVersionInfo.getVersion()</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Date Last Modified</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">lastModifiedDate</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong> OA Status</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">oaVersionStatus</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Location Code</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">buildingID</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Lease Number</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">leaseNumber</td>
        </tr>

        <tr>
          <td width="20%" class="smallcell_left"><strong>Supplemental Reason</strong></td>
          <td>&nbsp;</td>
          <td class="smallcell_left">supplementalReasonText</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <form name="passPDF">
          <input type="hidden" name="pdfURL" id="pdfURL" value="<%=response.encodeURL(Action.GATEWAY)%>?<%=Action.ACTION%>=<%=Action.PDF_SIGNED_AGREEMENT%>&<%=DBConstants.OA_ID%>=<%=data.get(DBConstants.OA_ID)%>&<%=DBConstants.OA_VERSION_ID%>=<%=data.get(DBConstants.OA_VERSION_ID)%>" />
          </form>
          <td align="right">
          <form action='<%=gateway%>' method=post>
          <input type=button onClick="return openPDFWindow();" class="aSignButton" value="Generate PDF Report" title="Generate PDF Report"/>
          </form>
          </td>
        </tr>

        <tr>
          <td>&nbsp;</td>
        </tr>
      </table></td>
    </tr>
  <tr>
      <td align="center" class="headersign">OCCUPANCY AGREEMENT<br>
        Between<br>
        agencyInfo<br>
        And<br>
        GENERAL SERVICES ADMINISTRATION
    </td>
  </tr>

  <tr>
    <td>&nbsp;</td>
  </tr>
        <tr>
            <td> <table width="100%" border="0" cellpadding="2" cellspacing="0" class="table_id" >

              <c:forEach items="${app_clause_section}" var="section">
              <c:if test="${section.key!=cl_sec_special }">
              <tr><td>&nbsp;</td></tr>
                <tr>
                    <td class="headersign"> <c:out value="${section.title}"/> </td>
                </tr>
              </c:if>
                <tr>
                    <td valign="top">
                        <table class="table_id">
                            <c:forEach items='${app_clause_section_group[section.key]}' var="group">
                            <c:if test="${not empty requestScope.request_ClauseGroupEvet[group.key]}">
                             <c:if test="${group.key!=cl_gr_special }">
                                  <tr><td>&nbsp;</td></tr>
                                  <tr>
                                      <td class="titlesign"> <c:out value="${group.groupTitle}"/> </td>	
                                  </tr>
                            </c:if>
                                    <c:forEach items='${request_ClauseEvet}' var="clause">
                                     <c:if test="${clause.clauseGroupId==group.key }">
                                  <tr><td>&nbsp;</td></tr>
                                  <tr>
                                      <td class="subtitlesign"> <c:out value='${applicationScope.app_clause_title[clause.key].title }'/>

                                      </td></tr>
                                      <tr><td> <c:out value="${requestScope.request_OnlyOAClause[clause.key].text}"/>
                                      </td></tr>
                                          </c:if> </c:forEach>
                                        </c:if> </c:forEach>
                        </table>
                    </td>
              </tr>
            </c:forEach>

                <tr><td>&nbsp;</td></tr>
                <tr>
                  <td class="headersign"><c:out value="${section_adhoc_title}"/>
                  <table class="table_id">
                  <c:forEach items='${request_OnlyOAClauseList}' var="clause" >
                  <c:if test='${clause.groupId==0 and (clause.mandatoryInd  eq "Y")}'>
                  <tr><td>&nbsp;</td></tr>
                    <tr>
                        <td class="titlesign"> <c:out value='${clause.title }'/></td>
                    </tr>
                  <tr><td>&nbsp;</td></tr>
                  <tr>
                    <td> <c:out value='${clause.text }'/></td>
                  </tr>
                  </c:if>
                  </c:forEach>
                  </table></td>
                  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>I agree to the initial terms with the understanding modifications will be made over time. </td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="1" class="table_id">
        <tr>
          <td class="smallcell_topleft" height="25">Approved</td>
          <td class="smallcell_right" height="25">Approved</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Agency Representative</td>
          <td class="smallcell" height="25">GSA Representative</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Title</td>
          <td class="smallcell" height="25">Title</td>
        </tr>
        <tr>
          <td class="smallcell_left" height="25">Date</td>
          <td class="smallcell" height="25">Date</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="right">
    <form action='<%=gateway%>' method=post>
          <input type=button onClick="return openPDFWindow();" class="aSignButton" value="Generate PDF Report" title="Generate PDF Report"/>
          </form>
    </td>
  </tr>
</table></td>
 </tr></table>
</input:body>

Well, if the link is before the head, then most likely no, it isn’t in the right place.

What is the input:body tag doing? My guess is that it creates the <html><head><title> and <body> tags. If so, then you will need to add the code for linking to your style sheet in that tag. Or even better, break up the input:body to be smaller distinct tabs.