Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:25Length:2.9 hours
  • Overview
  • Transcript

6.4 Adding Styles

Hi, I'm Daniel for Tuts+. In the last video, we added the finishing touches to our app's functionality. In this video, well, if you have a look at it it's pretty plain. HTML looks okay but not great. And like all apps, we want our app to look great. So, in this video we'll add some styles. As we know, styles are not related too much to JavaScript and are quite simple, so we'll be brief in our addition of styles. In the app directory, let's create a new folder called styles. And in the directory we'll create a new file called main.css. In our index file we have to include a link to that. So, let's navigate to our index. And in the head let's add a link. And while we're here in the head of our index.html, let's add a title to this app. Looking very professional. Let's go back to our main.css. I will now add the styles. As you can see, I've added various font sizes, margins, background colors to the application. It has no effect on the application's functionality whatsoever. However, it affects how it looks. You'll notice that it's too much to all fit on the screen at once. So, I recommend that you just copy these styles from the completed course files. If you don't want to, I'll just go ahead and scroll through this once so by pausing, you can still copy all these styles if you want. You'll notice at the top, we've chosen to use Roboto. Roboto is a font from Google Fonts, and we have to install it if we want it to work. So, here I am in Chrome and I'm going to Google Roboto font. Here at the top is the page for Google Fonts Roboto. We're going to click open it in Google Fonts. Scrolling down to the bottom. Here is my script. So, I have to copy this script. You'll also gonna want to copy and paste this into the head of your HTML file. You don't actually have to visit this page, it only contains a link, the link will work for anyone. Back to our index. And let's paste that in before main.css. I'd say this looks about right, so let's have another look at it in our browser. All right! So, our app now has some seriously cool style. It's still missing one or two things, but you can see the avatar now looks very cool. We have this cool font, and of course we have Google Roboto, which is making our whole app look pretty good. It doesn't look 100% correct yet. We need to add just one or two styles. For H1 and H2, let's wrap those in a DIV and give those the class app-title. The ContactController also requires a number of styles, so let's give it a class. And we'll give it to contact-list. And inline-module. And let's have a look at how it looks in our browser. Very cool. So, now this whole section on the left is looking very, very nice. Super readable, very clear. The one on the right isn't 100% finished yet. So, back to our index.html. To our AddContact controller, we must also add styles. So, we'll add a class. And we're going to call this, "add-contact". And like it's sibling, we'll also make it an inline module. Save that and open it in your browser. All right, and time for celebration it is, because our app is now fully styled and looking great. On the left are contacts, on the right is our add new contact. The whole thing kind of looks like a book, which is what I was trying to go for. If we add a new contact on the right. It appears instantaneously on the left. So, we now have a fully styled functional contact book app. This, for the most part, is as far as we're going to take the functionality.

Back to the top