Welcome back! This is the last installment of this tutorial. Here we will learn about styling the page. By no means are my styles perfect. So, I want you to mess around as much as you can to make the style of the page your own. I will show you how to use the Bootstrap framework, how to add your own CSS, and how to use SVG images for your background. So, let’s get started.
We will start by introducing Bootstrap and how to setup and use this powerful framework. Before we can use any Bootstrap classes, we must link to the framework. You can follow the Get Started page on the Bootstrap documentation. Notice, below that between lines 7 and 16 I am setting up the use of the Bootstrap framework and referencing an external stylesheet that we will set up later. Now, I can start using the Bootstrap classes to style my page. Notice, that I have added the class “form-group” and “form-control” to elements within our form. I also use the class “btn btn-primary” on the submit button. These classes will style these elements based on Bootstrap forms, and buttons. Notice that I am also using some similar classes for the output table. With these Bootstrap table classes, I am making the table bordered, the rows will be of the light theme, and the hover call will change the color of the row when the user hovers the mouse over the element. Pretty cool, right? Bootstrap takes care of a lot of the heavy lifting, and allows us to use simple classes to style the elements.
The first part of the CSS is going to deal with setting an SVG for the background image of our page. Go ahead and head over to Hero Patterns and choose an image that you like. I chose the tic-tac-toe for mine. Download the file and put it in the same directory as all your other files (Amortization folder). Now, in VS Code, create a new file named app.css. Notice below, that I am setting the background image of the document body equal to my SVG image. I am also changing the background color. Go ahead and give it a shot and then open it up in Chrome. Notice that the SVG automatically repeats for the entire background. This is one thing that makes SVGs so powerful.
Now, let’s add some animation. The button hover and label hover will activate when the user hovers over the elements with the mouse. We call the transform property and use scale to scale the image by 10% (*1.1). Next, I added some CSS to the form so that it wouldn’t wash out into the background of the body and some styling to the alert so that it matches the form better. And viola…we now have a page that is functional and styled. Please, mess around with the style on the page and come up with your own. Thanks for joining me, and I hope that you were able to take something away form this tutorial. Stay tuned for more tutorials coming up on CodingFromNull.