Question

I have a site that I built with jsp’s and I would like to implement css. I am a noob when it comes to jsp’s so any help on how to implement it would be great. I know css is pretty easy and I have worked with it before in wordpress and other things, the implementation is the hard part for me.

Here a sample jsp of mine:

<%@page import="java.util.List"%>
<%@page import="ttp.data.Physical_PackageDAO"%>
<%@page import="ttp.data.Physical_Package"%>
<%@page import="ttp.data.Conceptual_PackageDAO"%>
<%@page import="ttp.data.Conceptual_Package"%>
<%@page import="ttp.data.ProductionDAO"%>
<%@page import="ttp.data.Production"%>
<%@page import="ttp.data.VenueDAO"%>
<%@page import="ttp.data.Venue"%>
<jsp:include page="/header.jsp">
  <jsp:param name="title" value="Choose a Production" />
</jsp:include>


<script type="text/javascript">

function doAjax(responseFunc, url, parameters) {
  // create the AJAX object
  var xmlHttp = undefined;
  if (window.ActiveXObject){
    try {
      xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
    } catch (othermicrosoft){
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {}
    }
  }
  if (xmlHttp == undefined && window.XMLHttpRequest) {
    // If IE7+, Mozilla, Safari, etc: Use native object
    xmlHttp = new XMLHttpRequest();
  }
  if (xmlHttp != undefined) {
    // open the connections
    xmlHttp.open("POST", url, true);
    // callback handler
    xmlHttp.onreadystatechange = function() {
      // test if the response is finished coming down
      if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        // create a JS object out of the response text
            var obj = eval("(" + xmlHttp.responseText + ")");
        // call the response function
        responseFunc(obj);
      }
    }

    // create the parameter string
    // iterate the parameters array
    var parameterString = "";
    for (var i = 0; i < parameters.length; i++) {
      parameterString += (i > 0 ? "&" : "") + parameters[i][0] + "=" + encodeURI(parameters[i][1]);
    }

    // set the necessary request headers
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", parameterString.length);
    xmlHttp.setRequestHeader("Connection", "close");

    // send the parameters
    xmlHttp.send(parameterString);
  }
}//doAjax

function getSeats() {
  var packInput = document.getElementById("packid");
  var packid = packInput.value;
  doAjax(receiveAnswer, "ttp.actions.Sale3PackAction.action", [["packid", packid]]);
}

function receiveAnswer(response) {

  var aSeats = document.getElementById("aSeats");
  //var checks = document.getElementById("checks");
    while (aSeats.childNodes.length > 0) { // clear it out
    aSeats.removeChild(aSeats.childNodes[0]);
  }

   for (var i = 0; i < response.aSeats.length; i++) { // add the items back in

    var check = aSeats.appendChild(document.createElement("input"));
    check.type = "checkbox";
    check.id = i;
    check.name = "aSeats";
    check.value = i;
    var input = aSeats.appendChild(document.createElement("text"));
    var br = aSeats.appendChild(document.createElement("br"));
    input.appendChild(document.createTextNode(response.aSeats[i]));    
  }
}

//function addToCart(){
//    var select = document.getElementById('aSeats');
//    var selectedOption = select.options[select.selectedIndex];
//    //alert("Selected option: " + selectedOption.value);
//    //select.removeChild(selectedOption);
//    var option = document.getElementById("seat2");
//    option.appendChild(selectedOption);
//
//}
//
//function removeFromCart(){
//    var select = document.getElementById('seat2');
//    var selectedOption = select.options[select.selectedIndex];
//    //alert("Selected option: " + selectedOption.value);
//    //select.removeChild(selectedOption);
//
//    var option = document.getElementById("aSeats");
//    option.appendChild(selectedOption);
//}
</script>


<% Venue v = (Venue)session.getAttribute("currentVenue"); %>
<% List<Conceptual_Package> cpList = Conceptual_PackageDAO.getInstance().getByVenue(v.getId()); %>

What Packages do you want to see?

 <form method="post" action="ttp.actions.Sale3PackAction.action">
 <select name="packid" id="packid">
     <% for (Conceptual_Package cp: cpList) { %>
    <option value="<%=cp.getId()%>"><%=cp.getName1()%></option>
    <% } %>


 </select>

    <input type="button" value="  next  " onclick="getSeats();"/>

    </form>


<!--new-->


Available Seats:

<div>

</div>

<form method="post" action="ttp.actions.finalizeSaleAction.action">

<div name="aSeats" id="aSeats">
</div>
    <br>


Customer Information:

<br>
<input name="name" value="Name">
<br>
<input name="address" value="Address">
<br>
<input name="telephone" value="Telephone">
<br>


    <input type="submit" value="  Buy Tickets  "/>

    </form>



<jsp:include page="/footer.jsp"/>

Answer 1

In header.jsp (or wherever you generate your <head> element:

<link rel="stylesheet" type="text/css" href="/path/to/your/style.css">