Newer
Older
labs / tiddlers / content / labs / lab04 / _Labs_04_Styling.md

As you have probably noticed, unstyled HTML pages are pretty ugly. It is time to fix that.

We are not going to explain how the styling works since this was covered in lecture 24 and most of it is fairly obvious from the context. However, there are something things you need to know that are not obvious.

  • There are block components and inline components. Block components will appear on their own line and will usually fill their containers unless a width has been applied to them. Inline components will share a line with other inline components.

    You can change an inline component to a block component using display: block.

  • margin will add space around the outside of components. If you set a block component's margin to auto it will usually centre the component in its container.

  • padding will add additional space to the interior of a component.

We will incrementally add the styling so that you can see what is happening:

  1. Note that each of the HTML and JSP pages link in the style.css file in the <head> section. This means that we have a single file that we can use to style the entire web applicaion.

  2. Add the following to the style.css file:

    /* main content area */
    main {
        max-width: 600px;
        margin: auto;
    }
    
    /* page headings */
    h1 {
        text-align: center;
        padding: 10px;
    }

    This will centre the main content area and headings. Build, redeploy, and reload the page in the browser. You should see the new style in action.

  3. The following will make the navigation links look like buttons.

     /* navigation links */
     a.nav {
         display: block;
         width: 10em;
         margin: 5px;
         margin-left: auto;
         margin-right: auto;
         padding: 5px;
         border: solid;
         border-radius: 10px;
         text-decoration: none;
         text-align: center;
     }

    Build, redeploy, and reload.

  4. The following will make the table a little more presentable:

    /* tables */
    table {
        margin: 20px;
        margin-left: auto;
        margin-right: auto;
        border-spacing: 0px 0px;
    }
    
    td, th {
        border: thin;
        border-width: 0px 0px 1px 0px;
        border-style: solid;
        padding: 5px;
        padding-left: 20px;
        padding-right: 20px;
    }

    Build, redeploy, and reload.

  5. The following will make the forms more presentable:

     /* forms */
     fieldset {
         margin-bottom: 20px;
     }
    
     fieldset textarea {
         height: 4em;
         resize: vertical;
     }
    
     label {
         display: block;
     }
    
     input, textarea {
         width: 560px;
         margin-bottom: 10px;
     }
    
     button {
         width: 560px;
         display: block;
         margin: auto;
         padding: 5px;
     }

    Build, redeploy, and reload.

  6. The following will add some colour:

     /* colours */
     th, a.nav, legend, label {
         color: darkslategray;
     }
    
     h1, button {
         background-color: darkslategrey;
         color: white;
     }
    
     td, th {
         border-color: darkslategrey;
     }

    Build, redeploy, and reload.