Let's face the problem!
Our web application looks nothing like an app that would attract users!
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
style="font-family: Book Antiqua, serif; font-style: italic; padding: 10px;" tells the browser to display whatever is written between the
Book Antiqua font face (
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:
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
HTML elements that are nested inside the
<body></body> will inherit the style attribute of
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).
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
- Create the file
- Add the following to the
top.vmand add the following line after the
- Add the following line at the start of
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.
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:
- Selecting by element type e.g. the
h1selector at the top of
- Selecting by elements' attributes, specifically:
id: a unique identifier that you can assign to an html element e.g.
class: a identifier that can be assigned to multiple elements to form a group of elements e.g.
- Selecting based on where an element is located relative to other elements e.g.
form labelwould select all
labeltags nested inside all
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!
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.