facebook google plus twitter

Webucator's Free Advanced CSS Tutorial

Welcome to our free Advanced CSS tutorial. This tutorial is based on Webucator's Advanced CSS Training course.
Start Tutorial or choose from a lesson below
In this lesson, we will learn about the CSS building blocks for laying out pages. In the next lesson, we'll learn how to use these building blocks to create common layouts.
Originally, web designers were forced to use tables for anything beyond the most basic layout. CSS has changed that: as browser support for CSS became ubiquitous, pages could be laid out with standard CSS to look the same across browsers. With more features and finer control, CSS now allows us to craft complex page layouts, even to the point of styling differently for different devices. So the challenge is more deciding what you want to do rather than what you can do. Let's take a look at some of the decision points and some common page layouts.
CSS3 media queries allow us to tailor the style of our pages to visitors' media features, offering specific views for width, height, color or other aspects of users' device or browser.
A CSS shorthand property is a property that can take multiple values, with each value relating to a different regular CSS property. CSS shorthand properties can make CSS pages quicker to develop and to load and easier to maintain.
Navigation bars or menus present a list of choices to the visitor. For example, Home Services Products Support Blog About Contact Often these choices will have nested options. For example, under About, you might find: Company History Our Staff Press Releases Investor Information In this lesson, you'll learn how to properly mark up these menus using HTML lists and to use CSS to style them.
Background images can be used to create effects not available in standard CSS (or yet supported by browsers). They can also be used to combine images into a single file to save on download time. Some of the graphics used in this lesson were contributed by RamblingSoul.com.
HTML Forms are often laid out with two-column tables with the label in the left column and the form field in the right. One could argue that there is nothing semantically wrong with this as the labels are really like headers for the values in the form controls. However, that argument falls apart when table cells are joined (with colspan) to fit wider form controls such as textareas. Even if you were to carefully layout the form so that the label were in the left column and the form field in the right, the table is not needed. The label tag serves the purpose of providing a "heading" for the form field. In this lesson, we'll learn how to layout forms without tables using CSS.
In this lesson, we layout practices that we recommend that you consider. We feel more strongly about some than others. At the end of the lesson, we provide a summary table, in which we indicate how strongly we recommend the practice.
Although browsers have much better support for the CSS standard than they did back in the version 4 days, there are still some bugs of which web designers need to be aware. For the most part, these are Internet Explorer bugs, especially in older (9 or earlier) versions. In this lesson, we'll cover some of the most common ones and discuss how to deal with them.