Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

What is CSS3?

From: CSS Fundamentals

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

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 lynda.com Online Training Library.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 73396 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.

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

Congratulations

You have completed CSS Fundamentals.

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


OK
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 ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


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

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