FREELessons: 10Length: 50 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Adding Some Style

Markup alone does not a website make. In this lesson, you'll learn how to incorporate some basic styles into your site using CSS that is stored in an external stylesheet.

2.3 Adding Some Style

One of the next logical questions at this point is, I've got some basic markup here. I've got my doctype, I've got my HTML and all that good stuff. Now I wanna be able to actually provide some styling, how do I do that? Well any web developer that is worth their salt is going to know that we're not gonna wanna do much inline styling here. It'd be much better if we actually use some CSS, so how do we do that in GitHub Pages? Well you can basically do that in just the same way that you would do any sort of other CSS stylings in any other sort of web development. So let's kinda go back into our source code here, and let's be a little bit smart about this. And let's say that we don't wanna just throw a bunch of files all together in the same directory. We wanna provide some structure, so let's go ahead and add in a CSS folder with some CSS files or a file, however you want to break it all up. And then start to actually add some styles. All right, so the first thing that I'm gonna do is I wanna create another new file. But I don't just wanna throw it in the same directory as that index.html, that would be kind of ugly. I want to kind of nest this a little bit, so the way that I can do that is within GitHub. When I'm in this edit mode, I can go ahead and say, I wanna create a CSS directory. Now as soon as I put that in there and put a forward slash, GitHub is smart enough to say, I see that you want to create the css directory, if it doesn't already exist, and put a file in there. And that's exactly what I wanna do. So let's just call this main.css, and let's go ahead and add this new file. So, right now, just for interesting purposes, let's go ahead and say that I want to add some stylings to the body. And then for the body here I simply want to change the background color to be, let's say, gray. Something like that, just something that will stand out. So what I can do now is, once again, I can go down to the bottom. And I'm going to create main.css, so let's go ahead and commit directly to the master brand, so I'll commit that new file. So now I'm gonna have my main.css file, as we see right here, so that's good. And if I go back far enough, I'm also going to see that I have my index.html. I have that new css folder, and then that main CSS file lives within there. So now I wanna use that within my index.html, so let's go ahead and come in here, and let's edit this. So I can hit this little pencil here, so this is gonna edit this file, and I can do this manually right here. Now I don't necessarily recommend you building [LAUGH] GitHub Pages sites this way, but just to show you that you can create very simple ones this way, I think is very powerful. So what I'm gonna do now is I'm gonna come into the head, and, just above my title, I'm going to create a link. And this is going to have a rel of stylesheet, and then I'm going to create an href here. And now I want to put in the relative path to my CSS. So now I'm in my index.html file, and I know that I have another folder called css, and then main.css in there, so I can say css/main.css. So now I am referring to that particular CSS file through this href of css/main.css. All right, so let's come down to the bottom here, and I wanna update HTML now. Granted, you would typically also wanna put in better comments. These are very poor comments, but I'm not worried about those types of things at this moment. I simply wanna show you how to use these GitHub pages, so let's go ahead and commit these changes. So now, as you can see here, I have this updated file. I am now linking and referring to my main.css file. So now I'm gonna come up here, back to my tab that has my main page here. And let's go ahead and refresh this, now it did update. Now if for some reason you're following along and you hit update there and it didn't take, the changes didn't take, sometimes it can take a little bit of time. Sometimes it can take a couple seconds, a few minutes, it just depends. It's all a little bit different, depending on the time of day and where you are, and all of that sort of good stuff. So one thing that's gonna be very important for you to understand, and kind of important for you to do while you're learning this, is that if you start making these changes and things aren't working, don't go back into your code right away and start making changes in those CSS or in that index.html, and refreshing your page. A better thing to do first is, depending on your browser, in my case, I'm using Chrome. I can open up the developer tools. I can come into More Tools, and I can say, I wanna go into the Developer Tools. And now I can see what's actually happening in my network traffic. So the first thing that I would do is I would hit this refresh page, and then you're gonna see everything that's loading. You can see all the requests, it's actually making a request here to pages-demo, and all the sort of good stuff. Now one thing that I also recommend you to do is, if you were to come in here and actually hold down this refresh button at this point, you're gonna see now I have a couple of options now. This is Chrome-specific, there are other ways to do this in Internet Explorer, or Firefox, or what have you. But in this particular case, I can hold down this button and I can say, I want to Empty Cache and Hard Reload. Which means it's going to empty everything, it's gonna dump everything that was cached, and it's gonna reload everything. So what does everything mean? Well if you look over to the right here now, instead of having just pages-demo, I have pages-demo and I have main.css. So because I'm emptying my cache, all of the browsers want to take their time and be very cognizant of network traffic and requests that are being made. So a lot of them are going to cache requested resources like JavaScript files, like CSS files and things like that. So if you make changes to your CSS, or the JavaScript, or whatever have you, inside your repo and you're not seeing those updates happen right away, then do that hard page refresh. And then you can come in here and see what's actually being served up. So you could see maybe that your change in here, maybe adding this link tag element did not make its way in there yet. Maybe it just hasn't fully updated yet. Or maybe if you go into your main.css file and maybe you made some other changes to this and you're not seeing those yet, that just means those changes haven't been published to your GitHub Pages yet. They probably will, but sometimes it just takes a little bit longer, so like I said, open up those developer tools. Clear your cache, do a hard refresh, and eventually all those changes will come in. But sometimes it takes a matter of seconds, sometimes it's minutes, you just never know. Okay, so now we've got our main.css file in here, then we can reference within our pages-demo. The next thing we're gonna do is we're gonna add in a little bit of JavaScript

Back to the top