CSS: Page Layouts
Illustration by John Hersey

CSS debugging tools


CSS: Page Layouts

with James Williamson

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: CSS debugging tools

One of the things that I've really been intrigued with over the past few years is how the browser has evolved from being simply a passive receiver of web content to being a very active part of the web development process. Now that's especially true for CSS authoring, as most browsers now have built- in debugging tools for checking and modifying your CSS. Now if you're using a HTML editors like Dreamweaver, you already have a robust set of CSS debugging tools built right into the editor itself.
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 16s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 4s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 22s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 26s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 36s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

please wait ...
Watch the Online Video Course CSS: Page Layouts
8h 57m Beginner Feb 07, 2012

Viewers: in countries Watching now:

CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
James Williamson

CSS debugging tools

One of the things that I've really been intrigued with over the past few years is how the browser has evolved from being simply a passive receiver of web content to being a very active part of the web development process. Now that's especially true for CSS authoring, as most browsers now have built- in debugging tools for checking and modifying your CSS. Now if you're using a HTML editors like Dreamweaver, you already have a robust set of CSS debugging tools built right into the editor itself.

If on the other hand, you are using one of the more lightweight editors, such as the one that I'm using for this title, Aptana Studio, then you are going to rely on the browser for much more of your testing and tweaking. Now this process can be made a lot easier if you know how to use the browser debugging tools, so in this movie, I am going to introduce you to a few of those tools, show you have set them up, and give your brief tour of some of their CSS capabilities. Now one of things that I want to point out here is that the tools that I am about to show you change all the time, I mean even weekly. They are constantly being updated, so there's a good chance that the interfaces and functionality that you are going to see here might differ slightly from what you see as you use them, because you might be using updated version.

Now since each browser has its own set of tools, I want to introduce you to them one at a time. Now to do that, I have the index.htm file opened up here from the 01_10 folder, and I want to start with Firefox. Now Firefox has a set of tools called Firebug, and if you have been doing web design or web development for any time at all, you've probably heard of this. If you want to get a little bit of more information on it or read the documentation or download latest build, go to getfirebug.com. So I am going to switch over to our page being previewed in our browser, and let's say I want to start inspecting some of these elements or checking out the CSS or even tweaking some of the properties.

To do that, I could launch the Firebug console. Now there are couple of ways for me to do this. One of the easiest ways is to go right over here in the toolbar and just click Firebug. Now that will turn it on. Now what I get is this console at the bottom. Now most browser debugging tools are going to look exactly like this, so if you get comfortable using one, moving into another browser and using its set of tools is pretty much just making a lateral move. Okay now I'll notice if I go right over here to Inspect Element, I can mouse around the page, find elements to inspect, and click on them.

And when I do that inside of the HTML, it shows me exactly where this is. As I mouse around the HTML, you will notice that's highlighting different elements as well. It's even showing the CSS box model properties. Padding is indicated by that sort of purple color that you are seeing there and margins is that yellow color. Now I have different panels here. I have an HTML panel. I have a CSS panel. The CSS goes ahead and let's me inspect any of the CSS. And if I'm looking HTML panel and I inspect my elements and I settle on a specific element, you will notice that I also get these panels right over here that show me the computed styles. I can even turn certain things off. For example, I could say, hey, only show me the applied styles. And within that, I can do things like well, what would it look like if its color wasn't white, or if the font style wasn't italic.

So I can begin to sort of tweak my styles right here by turning certain features on and off again, and I can even start writing some styles. So I can begin authoring in this environment and then copy and paste the styles into my own code, so there are a lot of really cool things that we can do here. We even have a console where I can run different profiles and warnings. So for example, if I reload this page and say I want to know what the CSS warnings for this page are, I can get all the warnings on it. Now don't be too alarmed here. These are just certain properties or selectors that Firefox doesn't support; it doesn't mean that the code isn't going to work.

Okay, so that's Firefox. Next I want to switch over to Chrome and show you some of Google Chrome's tools. Now Google Chrome is WebKit-based browser, so it uses something known as WebKit Web Inspector. Chrome and Safari use the exact same set of tools, so I am going to show you these in chrome, but in Safari it works exactly the same way. So if you browse in Safari and test in Safari, you can use exactly the same set of tools. And if you want to learn a little bit more about Web Inspector, you can go to trac.WebKit.org/wiki/Webinspector and get a little bit more information on this.

So I am going to switch over to our previewed page again. And here, we don't have a console button, but the easiest way to activate Web Inspector is just finding an element that you want to learn a little bit more about and inspect, right-click it, and I can say, hey, I want to inspect this element. So as soon as I do that, I have the WebKit Web Inspector open up, you can see it looks very similar to Firebug. Some slight differences obviously. But as I mouse through the code, again I am getting the CSS box model properties visualized, which is very nice. And again, I get my computed styles and here. I can begin to sort of play around with those, turn them on and off again.

So I get a lot of the same functionality with the Web Inspector that I get with Firebug. Now if you use Opera, Opera has a tool called Dragonfly and I really like Dragonfly. It's very, very good. Very similar Web Inspector, very similar to Firebug, but it's very powerful in its own right. If you want to learn more about Dragonfly, go to opera.com/dragonfly and they have the whole section of their web site dedicated to teaching you how to use this. All right, so I am going to go over to my page opened in Opera, and again, it's a same drill. I just find an element, I right-click it, and I say okay, inspect that element for me, and Dragonfly opens up. And let me just make this a little bit larger.

As I begin to mouse around elements and inspect those elements, notice that I get a series of guides that help me find out whether elements that I am wanting to are lining up with each other and how much space they are taking up within the layout. I also get a nice little preview of some of those CSS box model properties as well. Just as before, we have a console that we can work with. We have styles that show us computed styles. We have different elements that we could sort of turn on and off here. We could get in sort of a preview how the styles are working. And Dragonfly even has a zoom, so you can zoom up on certain elements as well, baked right into the console, which is really nice.

Now I'm sort of focusing on the CSS capabilities of these tools, but obviously there is a lot more to them. They all have JavaScript consoles where you go in and debug your JavaScript. They have a lot of web development tools available to them as well. So there's a lot to these tools. Now if you are on the PC and you are using Internet Explorer, Microsoft does have a similar set of tools. And if you go to microsoft.com/download, and search their Download Center for the Internet Explorer Developer toolbar, you'll find a toolbar that you can download and install into Internet Explorer, and it gives you a similar set of functionality.

So, now that we gotten a good idea as to where to find CSS testing and debugging tools within the browser, we need to explore exactly how these tools can help us author our CSS, and we are going to go ahead and do that in our next movie.

There are currently no FAQs about CSS: Page Layouts.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.