HTML5 is the next big thing in the land of web developers, so I figured the best way to show you how it’s all gonna come together is by giving you a lesson on how to make your own HTML5 and CSS3 layout. Although this isn’t a practical solution to building websites today, in a couple of years it’s going to make our lives so much easier.

The Flexible Box Model is part of the CSS3 Specification that doesn’t really get a lot of attention. While everyone’s off checking out how to use selectors, the flexible box model is crying in the corner asking why no one pays him any attention, and rightfully so! The flexible box model has the potential to change the way we design our websites.

Shorthand CSS When you’re designing a website, you’ll often find yourself adding class after class to your CSS Stylesheet. Eventually your CSS file becomes incredibly bloated and loading it takes forever and a day. Shortening down your CSS file, quite obviously, is the perfect way to make your web pages load faster, and the best way to go about making your CSS file smaller is to use shorthand CSS. Shorthand CSS is simply a way of writing CSS in a must more palatable form; a way to make your CSS tidier.

Pseudo classes are those things with colons in them, you know, like :hover or :link. They let you control the CSS of stuff in different forms, states and places easily and efficiently, without taking up too much room. CSS3 is going to introduce a ton of new pseudo classes, and they’re going to make our lives a lot easier (if you take browser compatibility out of the equation). They help both aesthetics and usability, and can make things that were once hard easier than ever before.

CSS is a pretty complicated language, what with its many selectors and what have you. That’s why I have decided to put together this nice little guide for you, to get started in what, for many, can be a difficult to conquer language. We’ll be concentrating mainly on selectors in this part, but hopefully later on, i’ll be able to show you some other stuff.

Why use CSS? CSS is one of the most useful languages you can have when it comes to web design. I know I couldn’t design a website without CSS. It used to be people used tables and images, but today, modern web design has moved to more efficient methods, such as those presented in CSS. That’s why it is such an important language to know when it comes to contemporary web development.

In this tutorial we’ll be learning how to code this web layout, which I wrote a tutorial on how to make, which you can find by clicking this incredibly long link. Hopefully it’ll be good practice for anyone who doesn’t really know how to use XHTML and CSS. Moreover, this tutorial acts as a great introduction to CSS and XHTML.