How to Code a Website for BeginnersLesson Two: CSS Layouts
16 November 2016 | Mri Grout
In our last lesson of How to Code a Website for Beginners, we covered the creation of html and css files. Now we're going to build on those two files that we made in our text editor by learning how to code a layout with CSS. So go ahead and open your site.css file that we created in the previous lesson. If you made any changes to it, the only parts you need to change back to zero are the padding and margin. For those that have already styled the section, aside, and footer div tags, good on you and go ahead and skip to step two. For those that haven't, don't feel bad as I didn't technically cover that.
Styling Your HTML Tags With CSS
To get the above, copy everything in site.css and paste it three times in the same file with one line break inbetween each paste. Then go to the second set of brackets and replace #header with #section and change the background color to green. On the third set of brackets, replace #header with #aside and make the background black. For the fourth and final set, replace #header with #footer and again change the color of the background so you can easily see what's going on. Now save it and then open your home.html file in a browser to see the above.
Creating a Layout With CSS
As I mentioned in the previous lesson, we're going to stick with the basic website layout. If you don't know what that looks like, see Lesson One: Creating HTML & CSS Files. Now to get that look, all we're going to do is change the information that the computer processes by mostly just tweeking the site.css file. So go to #section and change the width attribute to 60% and the #aside width to 30%. Obvsiously this doesn't add up to 100%, but that's because we haven't messed with the margins yet, which we'll get to later. For now, however, just add the following code at the end of #section, but before its closing bracket.
Do the same for #aside, but change it to float:right; and then save your site.css file. You should now see something like this:
As you can see, however, that is not where you want your footer to be. To make it stick to the bottom of your content (not the screen), you're going to have to add the following to the #footer.
If you save the site.css file now, you'll see the footer cover the section and aside parts, which is definitely not what you want. What!? You made me make it worse! Lols. Actually, despite appearances, this is progress; it's just not complete. To finish it, go into your home.html file and add <div id="main"> before <div id="section"> and close it after the aside. IE: Your home.html code should look like this:
As you probably guessed, we now have to style the main tag in our site.css file which we do like this:
Personally, I would put this right above the #section part as that's where it goes in the home.html file, but it doesn't really matter. It just makes code easier to find if you want to change things later. Now go and make the #section and #aside margins 2.5%, save everything and refresh your browser to get:
Feel free to change the width percentages of the section and aside parts of your css file. If you want your sidebar (aside) to be on the left hand side of the screen, just swap the naming. For instance, #aside swaps with #section in the css file and id="section" gets swapped with id="aside" in your html file. So now you know the basics of how to design a website layout with css and next lesson you'll learn how to add and customize images. However, until then, familiarise yourself with how to style a website with CSS as you'll definitely need it all down the line.
If you liked How to Code a Website for Beginners Lesson Two: CSS Layouts then why not take a look at these other lessons for beginners:
Travel Tip #4
So have you managed to make a CSS layout of a website? Did you get stuck on anything or have any questions? If so, ask below!