Styling with CSS

Let's face the problem! Our web application looks like the Internet in its early years!! No one is going to want to use our app if we keep it this way!

The good news is that styling a web app is not that difficult. To start, we can add style attributes to HTML. For example, suppose I want everything in the homepage to center aligned (instead of left aligned by default). I can wrap all the HTML elements inside the body element and simply add a style attribute to center align it.

<div style="text-align: center;">
    <h1>Course Search</h1>
    <form action="/search" method="post">
        <input type="text" placeholder="" name="query">
        <button type="submit">GO</button>
    </form>
</div>

If you apply the update, run the application and visit http://localhost:4567 you get the following view:

The style="text-align: center;" tells the browser to display whatever is written between the <div></div> at the (horizontal) center of the page. Notice all HTML elements that are nested inside the <div></div> will inherit the style attribute of it.

Setting the style of an HTML element can be done with the style attribute. The HTML style attribute has the general form of: <tag style="property:value;">. It is a common practice to separate the "style" from "content" in HTML files. This means moving all the styling into a separate CSS file.

CSS stands for Cascading Style Sheets. It is a language used for describing the presentation of a document written in a markup language such as HTML. It is beyond the scope of this module to explore CSS. I have provided a primer in the Appendix and resources to learn and explore the subject further.

Create a folder inside src/resources and call it public. Create a file style.css inside the public folder with the following content:

.wrap {
    text-align: center;
}

Update the index.hbs:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JHU Course Search</title>
+       <link rel="stylesheet" href="style.css">
    </head>
    <body>
-       <div style="text-align: center;">
+       <div class="wrap">
            <h1>Course Search</h1>
            <form action="/search" method="post">
                <input type="text" placeholder="" name="query">
                <button type="submit">GO</button>
            </form>
        </div>
    </body>
</html>

Update the WebServer.java:

import spark.ModelAndView;
import spark.template.handlebars.HandlebarsTemplateEngine;

import static spark.Spark.*;

public class WebServer {
  public static void main(String[] args) {
+   staticFiles.location("/public");

    get("/", (req, res) -> {
      return new ModelAndView(null, "index.hbs");
    }, new HandlebarsTemplateEngine());

    get("/search", (req, res) -> {
      return new ModelAndView(null, "search.hbs");
    }, new HandlebarsTemplateEngine());
  }
}

In web development lingo, "static files" are the files that don't change during user's interaction with the web application. Their content will be delivered "as is" from server to client (and a client like a browser usually caches such files so it would not need to download it over when you revisit the page).

Run the application and visit http://localhost:4567. The view must be exactly the same as before.

CS421 Notes

Styling with CSS