From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Applying the grid through CSS - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Applying the grid through CSS
Now that we've gotten the hard part out of the way--and trust me, the planning is definitely the hard part-- it's time to apply our grid to our layout using CSS. While we'll be using techniques like floats that we've already covered in previous chapters, we're going to see how our planning really pays off in making our CSS easier to write and how our typographic styles will tie in to our layout. So I've got the grid.htm file open here, and you can find that in the 05_04 directory. And there's just a couple of things that I need to do right off the bat. One is just sort of give you an overview of the structure of the page. If I scroll down past the styles here, you can see that we have a header, followed by a section with a class of col1. That has a lot of text in it. And as I mentioned before, this layout is very text focused. After that we have an aside with a class of col2, and at the very bottom we have a footer. So basic structure. And of course if I previewed the page in the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
Design considerations for fixed layouts3m 28s
-
(Locked)
Establishing the layout grid7m 57s
-
(Locked)
Defining column spacing9m 30s
-
(Locked)
Applying the grid through CSS8m 56s
-
(Locked)
Creating grid-based assets8m 26s
-
(Locked)
Grid design resources6m 22s
-
(Locked)
Building fixed layouts: Lab4m 7s
-
(Locked)
-
-
-
-