Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:60 minutes

Next lesson playing in 5 seconds


Free Preview: Start Here: Learn CSS Layout


  • Overview
  • Transcript

Now that you’ve learned the essentials of typography in the previous “Start Here” course, you’re ready to move on to the next fundamental element of web design: layout.

In this course you’ll learn everything you need to know to create the most common types of layouts in web design. So let’s get going with “Start Here: Learn CSS Layout”.

More from our Start Here course series:

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

1. Introduction

1.1 Welcome

If you're an up and coming CSS developer and you're ready to learn about CSS layouts then start here. In this installation of our start here series you're gonna learn all about controlling layouts with CSS. The first thing that we'll do is take a sneak peek at the layout that you'll be creating throughout this course and running you through why we're using the RAM unit to control our layout. Then we'll move into learning about all of the properties that control layout in the CSS. Those that control sizing, alignment, spacing and responsiveness. We'll begin with sizing where you learn about all the different width and height properties that you can work with. From there we'll move on to alignment where you'll learn about floating and clearing as well as the text align property and the difference between block and inline elements. From there we'll get into spacing CSS. You'll learn about margins and padding, about applying borders and also how the the box sizing property can make your life much easier when creating CSS layouts. And then finally you'll take the layout that you've put together and you'll make it responsive by adding media queries and adjusting your columns, spacing, and text sizing. By the end of this course, you'll have taken some raw HTML and applied a fully responsive CSS driven layout to it. So let's go ahead and start here and learn layout CSS. I'll see you in the first lesson.

2. Learn CSS Layout

2.1 Rem-Based Layouts

Hey, I'm Kezz Bracey for TutsPlus. Welcome to the first lesson of Start Here, Learn CSS Layout and before we actually hook into coding, I'm wanna give you a little preview of the lab that you're going to be creating. Now along with the source files that you get access to as part of this course, you find a little package in there that gives you all the starter files that you need to kick off this course with. What we've got is the HTML that you've been working on so far with the content modified a little bit and a style sheet with the styles that you created in the last course on typography already inside. The content you'll be starting out with looks like this and you'll be adding in layout code so that you end up with this. You'll have a header with the logo in it, you'll have a two column layout, you'll have a little frame around this image here and you'll have a photo with some scented text. You'll also have appropriate spacing all the way throughout the design. And if you shrink down the window, you'll see that the layout adapts, so that it still looks good no matter what size window you're working with. Now the reason I'm showing you this now is because as you go through coding, all of our layout specifications are going to be done using the rem unit. You should remember from our typography course that a rem unit is a multiple of the root font size for your page. The rem unit is useful not just typography but also for your layout and I'm going to show you why you should use rem units when you're setting up your layout. Now just scroll down a little bit so you can see the area that is controlled by our text and I'm just going to grab the settings. Scroll down to show advanced settings and then we're looking for our font settings. We're just going to hit Customize Fonts and just drag that out so we can see what we're working with a little bit more easily. Now if I bump up the font size of our browser, you'll see the font size change in the side. I'm just gonna pull this off screen so you can see a little bit more clearly. Now if I keep increasing the front size and I just refresh, now you could say that the whole layout has adapted so that it's larger font size. Everything is still readable and that's possible because by using rim units to set up our entire layout, everything can be flexible depending on the root front size of our document, which comes, as you remember from our previous courses, from the browser settings. In the same sense, if I decrease our front size back to a really small size and I'll just refresh once again to let the browser just reflow that, you can see the whole layout has shrunk down once again. Now just put that back to the default of 16, so by using these rem units, we make sure that when a user changes the front size, not only does the text itself change to suit, but so too does the entire layout. Now I just wanted to step you through that before we got into the rest of the course, so that as we go through and start entering our dimensions that we'll be working with, and our spacing sizes and everything else. You'll know why we're using rem units rather than pixel units. Now that you're aware of that, we're ready to move on and get started with our coding. There are basically four different aspects to layout CSS. They are sizing, so controlling the height and width of something. Spacing, controlling the amount of spacing that an element has around its interior and around its outside. Alignment, so whether something is on the left side or the right side or the center. Responsiveness, making sure that your layout can respond to the size of viewport that it's being looked at through, and remain readable and easy to digest no matter what the dimensions of the viewport are. In the next lesson, you're gonna start learning about sizing. We're gonna look at three types of width property and they're width, min width and max width. We're also gonna look at three height properties. We'll be looking at height min height and max height. I'll see in the next lesson.