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

What is CSS3?


CSS Fundamentals

with James Williamson

Video: What is CSS3?

What is CSS3? provides you with in-depth training on Web. Taught by James Williamson as part of the CSS Fundamentals
please wait ...
Watch the Online Video Course CSS Fundamentals
Video Duration: 6m 15s3h 14m Beginner Sep 26, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

View Course Description

This course contains a high-level overview of Cascading Style Sheets, while exploring the basic concepts, terminology, and tools of the language. Beginning with an exploration of CSS syntax, author James Williamson explains how CSS modifies text, borders, backgrounds, and color; demonstrates CSS and HTML integration; and contextualizes the current state of CSS. The course also tours some of the most popular CSS editors and frameworks and lists online tools and resources for further study. This course is for people who want a big-picture overview before taking hands-on courses.

Topics include:
  • Understanding basic selector types
  • Integrating CSS with HTML
  • Examining browser rendering differences
  • Exploring CSS specifications
  • Checking browser support
  • Understanding the box model
  • Adjusting margins and padding
  • Positioning elements
  • Exploring basic layout concepts
  • Understanding media queries
  • Introducing CSS3
  • Using CSS Reset
James Williamson

What is CSS3?

I know we talked briefly about CSS3 earlier when we discussed the history and current state of CSS. So we know that CSS3 isn't really a specification itself, as CSS has been broken up into series of modules that are evolving at different paces. That still, however, leaves the question open: what exactly is CSS3, and why are so many people talking about it? Well, in many ways, CSS3 is simply a brand much, like HTML5 is.

People are using it as a blanket term to describe the new CSS features and the functionality that have emerged over the last few years. Now, part of this new functionality is the continued development of CSS through the W3C. Another part of it is being driven by a new generation of browsers that are focused on giving designers more powerful tools for creating sites. In fact, some of the syntax and features being added to the CSS modules are coming straight from people like Mozilla and WebKit, as they continue to stretch the boundaries of what's possible through CSS.

So let's take a look at some of the features most commonly associated with CSS3. Keep in mind that many of these features are in the early stages of being supported by browsers. Many are experimental, and many are features that have been around for some time, but are just now being widely implemented. Taken as a whole together, they will give you a good idea as to what people are talking about when they mention CSS3. In many cases, enhancements to older capabilities are defined as CSS3. This include things like border radius, which allow you create rounded corners for elements; border images; background property editions, like the ability to have multiple backgrounds; and enhancements to controlling background image size, orientation, and clipping.

In some cases, it's also associated with enhancements to existing property values. The new color values of HSL and the addition of RGBA and HSLA, which add alpha values to color values, are also often labeled as being features of CSS3. Many of the new text-formatting features are often also classified as CSS3. These include things like the new text shadow property, creating multiple columns, and working with web fonts. Now, web fonts aren't new, and they've been around since the CSS2.0 specifications, but browsers have only recently started adding widespread support.

Web fonts allow you to use fonts that aren't installed on the client's system, and greatly increase their creative control that designers have over their sites. Quite a few new selector types have been added to CSS as well, and although they don't get a lot of attention when people discuss CSS3, I would actually argue that they are among the most important additions to CSS, as they dramatically increase a designer's ability to target elements on the page. There are also a few features that are almost always mentioned when CSS3 is discussed.

If you've been researching it at all, I am guessing you've come across these. First, box shadow gives us the ability to add drop shadows to element boxes. You can control the color, offset, blur, and whether this shadow is offset or inset in relation to the element. One of the features that gets a tremendous amount of attention is CSS gradients. CSS gradients are incredibly powerful and allow you to set the background color of an element to a gradient. You can use a simple two-color gradient, or you can go all out by using numerous color stops and varying levels of opacity throughout the gradient.

Now, these can be linear or radial, and designers are currently using them to create all kinds of impressive visual effects, from creating buttons all the way to building background patterns. CSS transforms are also getting a fair amount of recent attention. Transforms allow you to do things like rotate items, scale them, skew them, or otherwise transform elements on the page. While this has powerful implications on how page layout can be controlled, it's also often used in conjunction with another new CSS feature, CSS transitions.

CSS transitions lets you animate from one CSS property value to another. For example, you could animate the height of an element from 0 pixels to 100 pixels to reveal the contents of the element. When combined with transforms, you can animate the position, rotation, and even scale of an element. One of the properties gaining the most attention currently is CSS-based animations. Although the two are similar, don't confuse transitions with animations. CSS animations are contained within their own specification, and they allow you to create keyframes to control animations and properties that allow you to control the timing, duration, and looping of the animations.

While that's not a comprehensive list of all the features that are being attributed to CSS3, it should give you a good idea of what people are referring to when they discuss it. There's another thing that you should consider when approaching many of the features that I've talked about here: most are either not widely supported or not supported at all in older browsers. Now, many of them are experimental and are only supported through the use of vendor prefixes, which we're going to discuss in more detail in just a little bit. What that means is that if you decide to use these new features, you will need to--at least in a short term--plan for how you want to deal with older browsers, or browsers that don't support the features.

In some cases, like gradients, browsers differ in syntax and execution. You'll also need to keep an eye on how the syntax is evolving. Many of those features are still being refined, and it's not uncommon to see the syntax and behavior go through significant changes before they're stabilized. In other words, proceed with caution until the features are supported evenly across browsers. So keep in mind that CSS3 isn't really any one specification; it's more of a general term used to describe evolving CSS features.

Keep an eye on emerging techniques and how they're being implemented, so that you can make intelligent decisions about when to start using them. For more information on many of the CSS3 features I've mentioned here, be sure to check out my CSS3 First Look title in the Online Training Library.

Find answers to the most frequently asked questions about CSS Fundamentals .

Expand all | Collapse all
please wait ...
Q: This course was updated on 12/13/2011. Can you tell me what has changed?
A: One movie called "Who is this course for?" was added to provide information on what you can expect to get from the course, depending on your level of familiarity with CSS.
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.

* 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 Fundamentals.

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


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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:

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 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.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about 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

Sign up and receive emails about 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.