[MUSIC] So you can see, that we can go through and use CSS to control how the browser displays all these different elements on our page. So we've changed the way the heading is displayed, we've played around with different fonts. We've even made sort of interactive elements where, when you mouse over a link, it kind of highlights it, to make it really clear to the user that that link is going to go somewhere. The problem is, though, there's so many different HTML tags that we could use, and the browser has a whole bunch of default settings for all of those HTML tags. And if we really want to escape from the default look, that looks a bit like the world's first Web page that we saw previously, if you want to escape from that, and really get towards this more modern look, then we're gonna have to do a lot of work in the style sheets to really style everything up. So as you might imagine, there's an easy way to do it, because obviously, everybody who's made a professional website has pretty much had to do this process. So there's a whole bunch of libraries out there, which basically give you ready made sets of CSS Customizations on the default way the browser displays it. And one of the more popular ones is called bootstrap, and we're gonna be using bootstrap in the rest of this course, and going into the specialization. Bootstrap's really nice because it doesn't just sort of customize the fonts and so on, it also gives you loads of ready made, kind of navigation components, and different widgets that you can embed on your site, and again, we'll dig much more into those in a following course. But for now, we're just gonna find out how we can install bootstrap, and then what it does to the look and feel of our site. So, I'm looking at the folder containing my web files here, and the first thing I want to do is, essentially, get that bootstrap file in there, so let's go. I've grabbed the bootstrap file here, and you can access the bootstrap.css file online, or you can get it from our course resources, and so bootstrap.css, there it is, well let's have a quick look at it. So here it is, and you can see it's quite a big file, and you know, 6,800 lines, and why is it so big? As I said earlier, actually, there are so many HTML tags, and so many things that you can reconfigure to really get a more modern look to your site, and as Bootstrap, we've kind of done it all for you. And not only that, they've added extra new things, which allow you to choose different ways of formatting things. So let's get this style sheet installed on our pages. So we go in, load up the pages, index.html, and instead of styles, I'm just gonna load the bootstrap file, like that, okay? And then let's load up the other ones, and contact, right. And that one is bootstrap, save over here, bootstrap. And let's then reload the page and see what happens. Okay, that's kind of a transformation, right? So, without the CSS, if I just remove all CSS, so basically get rid of that, it looks like this. So we've got these Serif fonts which we found out about earlier, and then we got that kinda default link display. If I put that back in, let's just reload and see what happens. Okay, so you can see it's kind of taken, things jumped around a bit and it's changed the padding, and neutralizes the display, so you've kind of got the minimum set of styles, and it neutralizes it to quite a sort of a modern look. You can see it's taken the Serif font and replaced it with a Sans Serif, there's no wiggly bits on the end of the s, and again for the links as well. And the links, they've got a default sort of dynamic behavior, so instead of having the underline there all the time, it just pops up when you mouse over them. Okay, so that's the simplest thing that bootstrap can do for us, and that's how to install the bootstrap library. So, in the next lesson, we're gonna see one of the extra things that bootstrap gives us which is the grid. And this is where the website starts becoming really responsive, so I'll see you in the next lesson. [MUSIC]