CSS

Let's face the problem!

Our web application looks nothing like an app that would attract users!

tip

The look and feel of an app and how user-friendly and intuitive it is can very well make the distincation between a successful app that people love and potentiall would pay for, and an app that people hate that quickly goes out of competition.

Styling in HTML

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 the header Welcome to MyBooksApp to be displayed a bit larger. I can simply add a style attribute to the header tag in the index.vm

<h1 style="font-family: Book Antiqua, serif; font-style: italic; padding: 10px;">Welcome to MyBooksApp $username</h1>

The style="font-family: Book Antiqua, serif; font-style: italic; padding: 10px;" tells the browser to display whatever is written between the <h1></h1> with Book Antiqua font face (serif if Book Antiqua is not available). It also specifies that the text should be displayed in italic and also some "padding" must be added to create extra space around the header.

The HTML Style Attribute

Setting the style of an HTML element can be done with the style attribute. The HTML style attribute has the general form of: <tagname style="property:value;">.

If I want to apply the same style to the entire content of every page of the MyBooksApp App, I can add the style attribute to the "body" element inside the base.hbs.

<body style="font-family: Book Antiqua, serif;">

HTML elements that are nested inside the <body></body> will inherit the style attribute of <body> element.

tip

Look at w3school's notes on HTML Styles and HTML Formatting for an overview of most commonly used styling/formatting properties.

Styling HTML with CSS

CSS stands for Cascading Style Sheets. When styling HTML files, it is considered a good practice to separate the styling part from the content. The style can be defined in (one or more) CSS files and be linked from the HTML page(s).

info

CSS saves a lot of work as it can control the style of multiple web pages all at once.

Let's do this together; follow these steps:

  • Create the following folder src/main/resources/public/css
  • Create the file mybooksapp.css inside the css folder.
  • Add the following to the mybooksapp.css:
h1 {
font-family: "Book Antiqua", serif;
font-style: italic;
padding: 10px;
}
.divContents, form{
background: #566573;
text-align: left;
border-radius: 9px;
padding: 10px 30px 10px 30px;
float: left;
}
.indexLinkWrapper {
margin-left: 10px;
}
.content {
color: #F1C40F;
font-family: Bahnschrift, serif;
}
.indexLink {
font-size: 27px;
}
.author {
padding: 7px;
font-size: 18px;
}
#divSubmit {
text-align: center;
}
.submit {
background: #273746 ;
color: #F1C40F;
font-family: "Book Antiqua", serif ;
font-weight: bolder;
font-size: 30px;
padding: 0 40px 0 40px;
border-radius: 0 16px 0 16px;
}
form label {
padding: 22px;
font-size: 20px;
}
form input[type=text], input[type=number] {
padding: 10px;
margin: 10px;
font-family: "Book Antiqua", serif;
font-weight: bold;
font-size: 18px;
border-radius: 6px;
}
  • Update top.vm and add the following line after the <title> tag:
<link rel="stylesheet" href="css/mybooksapp.css">`
  • Add the following line at the start of Server.main
staticFiles.location("/public");
"Static files"

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).

Now run the application and checkout the styling effect.

info

Before running the application, make sure you have deleted the inline styling that was added inside the HTML (.vm) file in the previous part.

What was that about?

If you look carefully at the CSS file's content, we have a bunch of selectors written and then a list of stylings that we want applied to all elements selected by that selector. In general, there are three main kinds of selectors:

  1. Selecting by element type e.g. the h1 selector at the top of mybooksapp.css
  2. Selecting by elements' attributes, specifically:
    • id: a unique identifier that you can assign to an html element e.g. #divSubmit
    • class: a identifier that can be assigned to multiple elements to form a group of elements e.g. .author, .content etc.
  3. Selecting based on where an element is located relative to other elements e.g. form label would select all label tags nested inside all forms.

An overview of CSS selectors can be found here. :::

Okay! time to run the app again ...

This is still nowhere near a perfect looking app, but it is an improvement from what we had.

Case in point

With CSS, you can change the look of an entire web site, by changing one file!

Resources

There is a lot that you can do with CSS. A great reference (including tutorials) is Mozilla's MDN Web docs on CSS.

Responsive Design & Bootstrap

Responsive design is the idea that a website should look good regardless of the platform its viewed from.

Bootstrap is a CSS library written to help make clean, responsive, and nice-looking websites without having to remember the gritty details about styling and layout.

You can follow a tutorial here to add Bootstrap (and use it) with SparkJava applications.

Edit this page