Free CSS3 Tutorials

Free CSS3 Tutorials
Why HTML5 Alone Is Not Enough

In the early days of the web, before CSS3 came to the fore, there were a bunch of tags you could use to format your page. The <body> supported various attributes to help define colours, websites based on tables were commonplace and the font could be varied throughout with the liberal use of <font> tags.

Some older attributes can still be used but many have been phased out and although you could still use tables to build a web layout, the birth of responsive design meant that this method of laying out a page was too restrictive and not fluid enough.

The need for consistency of layout, colours and fonts meant that CSS came to the fore. HTML5 needs to be coupled with up-to-date CSS practice in order to yield the best design possible. And CSS3’s @media queries is the most common way to build a mobile-friendly website.

Take Advantage Of Our Free CSS3 Tutorials!

Our online lessons will take you from beginner level and teach you about CSS from the ground up. I aim to add one or two tutorials every week so pop back every once in a while to see what’s new!

What is CSS3?

As of the writing of this post, CSS3 is the current form of Cascading Style Sheets. On a per-page basis, CSS can be found within <style> </style> tags, written inside existing HTML tags, or stored in an external file via the <link> tag.

Although CSS is not a programming language, it has led to more programmatic off-shoots such as SASS. The tutorial set here will focus on styles, layout and responsive design, rather than the programming-esque feel of SASS.

Why Cascading?

This is important, so I’ll highlight it

CSS Rules start from the top to bottom. This means, unless you tell it otherwise, if you define how an element will display at the top of your CSS and then re-define it later further down, the rules cascade downwards. So rules nearer the bottom of your CSS code override any rules set earlier in your stylesheet.

External File or in a <style> Tag?

I am going to focus on putting your CSS into an external file because external files are cached by your browser, making subsequent pages load quicker. It also ensures all the rules apply to all of your pages so that the ‘theme’ of your website is kept consistent throughout.

So with no further ado, let’s get on with setting up your stylesheet file!