Learn CSS: top 15 tutorial videos

Learning CSS can be a daunting task. Whether you're an absolute beginner or learning the ropes, it's always important to get the best advice and instruction that you can.

Advertisement

There's plenty of that in our huge list of CSS and JavaScript tutorials. However, sometimes it's easier to see what's happening with CSS markup than reading about it, so we've collected these 15 top CSS video tutorials to keep you going.

From quick introduction videos to tracking 3D text and CSS sprites, there's plenty to learn!

01. A CSS introduction

If you're new to CSS, don't fret. This tutorial here answers some common questions - "What is CSS?", "How do we start using it?" - and it also includes some basics to get you started.

02. Creating your first web page

Bucky of video tutorial site The New Boston is already hugely popular on YouTube with his extensive array of "Learn CSS" videos. This one is perfect for beginners, and there are plenty more as you progress in your CSS training.

03. Centering: CSS for beginners

This video demonstrates how to use CSS to horizontally centre HTML elements. This tutorial is based on XHTML 1.0 and CSS 2.1, and is a great starting point for any CSS beginner.

04. Basic page design

Online learning company Lynda is a great resource for CSS training. This tutorial overview discusses different web site design workflow concepts including creating web site mockups and using type treatments.

05. Create a simple navigation bar

It's important to get the basics of CSS down before you head off into the abyss. A navigation bar is just as important as the look and feel of your site, so make sure you pay attention to this video tutorial.

06. Quick overview of CSS position values

Chris Coyier's site CSS-Tricks is the go-to place for tutorials, articles and videos to learn CSS. Here, he presents this beginner-level overview of the different values for CSS positioning.

07. Absolute and relative postitioning

In this CSS tutorial, delve into more detail on absolute and relative positioning and how the two interact with each other.

08. CSS Sprites

This video takes a look at CSS Sprites. You'll learn both why and how to use this wonderful technique, which reduces the HTTP requests a page makes, whilst gaining a basic understanding of placing images in a grid in one unified file.

09. CSS layouts

Fixed width, fluid width and elastic width are the three different types of layouts for websites. This tutorial covers these three varieties and other techniques for making use of wider browser windows.

10. CSS typography

Typography is a hugely important aspect of CSS practice. In this CSS video you'll learn the basic properties and values that can be used to control the styling of text on web pages.

11. Image overlay effect

This popular effect involves laying a transparent block with text over an image. You'll discover how to create it, with a look at Internet Explorer problems and fallbacks.

12. CSS grids

Grids are an invisible foundation that form the structure of a website. With this tutorial, discover how to easily make your own grids.

13. CSS: column height considerations

This CSS tutorial from Lynda describes how to customise your web site's column size to accommodate how browsers calculate the height of elements.

14. Quick and easy CSS triangles

This simple tutorial showcases how to quickly and easily create triangles in CSS with any colour, size, shape or direction.

15. CSS3 Animation

SitePoint is a great resource for seasoned web designers and developers, and this video is a great introduction to the basics of CSS animation. You can watch part two here.

Like this? Now read:

• Inspirational examples of CSS
• Web design training: Top online tools

What CSS video tutorials would you like to see? Let us know in the comments box so we can include them next time!