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 6 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 tags.

  • 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. Create a CSS file using <

    New Files > Web > Cascading Style Sheet">>.

    Name the file style and place it in a folder named css. This file should be created in the Web Pages source directory, and not the Source Packages directory.

  2. We need to link the HTML in the JSP files to the CSS. Add the following to the <head> section of all three JSP files.

     <link rel="stylesheet" href="css/style.css"/>
  3. Let's center things. Add the following CSS:

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

    This will centre the main content area and headings. Restart and reload the page in the browser. You should see that everything is now centered.

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

     /* nav links */
     nav a {
         border:solid;
         padding: 5px;
         margin: 5px;
         text-decoration: none;
         border-radius: 10px;
     }
    
     nav {
         text-align: center;
     }

    Restart, reload, and test.

  5. 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;
    }

    Restart, reload, and test.

  6. The following will make the forms more presentable:

     /* forms */
     form {
         display: grid;
         grid-template-columns: max-content 1fr;
         grid-gap: 1em 0.5em;
     }
    
     label {
         grid-column: 1 / 2;
         text-align: right;
     }
    
     input, button, select, textarea {
         grid-column: 2 / 3;
     }
    
     textarea {
         height: 4em;
         resize: vertical;
     }

    There are eleventy gazillion ways of laying out forms. This method is using CSS grids.

    Restart, reload, and test.

  7. 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;
     }

    Restart, reload, and test. You can refer to the following sites for more information about styling with CSS:

https://developer.mozilla.org/en-US/docs/Web/CSS

https://www.w3schools.com/css/