Creating style definitions within your JSP files

In addition to using style sheet files to enhance the design of your JSP files, you can also code style definitions within your JSP files.

  1. Double-click the JSP file to open it in the editor view.
  2. Click the Source tab to display the source for the JSP file.
  3. Add the following tags between the <HEAD> and </HEAD> tags in the file:

    <style type="text/css">

    </style>

    If the JSP file contains links to style sheet files, add the style tags after these link tags. In this way, the style definitions that you include take precedence over style definitions in the style sheet files for the same element.

  4. For example, if you want to change the color of the H1 heading tag in your JSP file:
    1. Copy the style definition for the H1 from the Master.css file. The content within the style tags is now like this:

      <style type="text/css">
      H1
      {
          COLOR: #6666CC;
          FONT-FAMILY: 'Times New Roman';
          TEXT-TRANSFORM: capitalize
      }
      </style>

    2. You can now change the color definition for the H1 tag. (You can change the other style definitions for the H1, or add new definitions.) If you change the color to green, your style definition appears as:

      <style type="text/css">
      H1
      {
          COLOR: green;
          FONT-FAMILY: 'Times New Roman';
          TEXT-TRANSFORM: capitalize
      }
      </style>

  5. If you want to change the font for the Label Web component in your JSP file:
    1. Copy the style definition for the Label Web component from the iSeriesWebComponents.css file. The content within the style tags is now like this:

      <style type="text/css">
      /* styles of a WLabel */
      .iwLbl {
          font-family: Arial, Helvetica, sans-serif;
      }
      </style>

    2. You can now change the font definition for the Label Web component. If you change the font to Times New Roman, your style definition looks like this:

      <style type="text/css">
      /* styles of a WLabel */
      .iwLbl {
          font-family: Times New Roman;
      }
      </style>