Skip to content

Styling with CSS

Let's face the problem!

Our web application looks like the Internet in its early years:

Warning

No one is going to want to use our app if we keep it this way!

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 ("Courses") to be displayed a bit larger. I can simply add a style attribute to the header tag in the courses.hbs

1
<h1 style="font-size: larger;">Courses</h1>

The style="font-size: larger;" tells the browser to display whatever is written between the <h1></h1> at a larger scale (than it normally would).

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 CourseReVU App, I would add the style attribute to the "body" element inside the base.hbs.

1
<body style="font-size: larger;">

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 layout part. The layout is laid out in the HTML file. The style is defined in (one or more) CSS file. We can then link the HTML and CSS files together.

Note

CSS saves a lot of work as it can control the layout 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 main.css inside the css folder.
  • Add the following to the main.css: 
1
2
3
body{
    font-size: larger;
}
  • Update base.hbs and add the following line after the <title> tag: 
1
<link rel="stylesheet" href="/css/main.css">`
  • Add the following line at the start of WebServer.main
1
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.

Note

Before running the application, make sure you have deleted the inline styling that was added inside the HTML (hbs) files in the previous section.

Let's style!

Ok, our app is still ugly! Copy and past the following into main.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
body{
    background-color: #eaeaea;
    font-family: Arial;
}

a{
    color: #2c89ba;
    text-decoration: none;
}

a:hover{
    color: #174963;
    text-decoration: underline;
}

ul{
    padding: 0;
}

li{
    border-bottom: 1px solid #eaeaea;
    list-style: none;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
li:last-child{
    border: 0;
    margin: 0;
    padding: 0;
}

.page{
    background-color: #fff;
    border-radius: 5px;
    margin: 40px auto;
    padding: 20px 40px 40px 40px;
    width: 600px;
}

input{
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
}

button{
    background-color: #2c89ba;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 10px;
}

Before running the app, you must make a small adjustment: go to base.hbs and add the following inside the "header" block, after the <body> tag

1
<div class="page">

Moreover, add the following inside the "footer" block, before the </body> tag

1
</div>

What was that about?

If you look carefully at the CSS file's content, there is only one selector that has a dot in front of it: .page. The .page selector will be applied to all elements with a "page" class attribute.

CSS Selectors

CSS selectors are used to select different parts of a website to style in particular ways. An overview of CSS selectors are available here.

Okay! time to run the app again ...

... now I'm not saying my work is art but you would agree the app looks better than before!

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.