CSS3 In Depth


Welcome to the review of the CSS3 In Depth course by Estelle Weyl.

Estelle Weyl

Estelle started her professional life in architecture and then managed teen health programs. In 2000, Estelle took the natural step of becoming a web standardista.

She is the Open Web and Performance Evangelist for Instart Logic and has consulted for Kodak Gallery, SurveyMonkey, Samsung, Yahoo, Visa and Apple, among others.

Estelle shares esoteric tidbits learned while programming and
detailed grids of CSS3 and HTML5 browser support in her blog.

She is a coauthor of Mobile HTML5CSS3: The Definitive Guide, and HTML5 and CSS3 for the Real World.

While not coding, Estelle works in construction, de-hippifying her 1960s throwback abode.

About This Course

This course is available from both Frontend Masters and Pluralsight

On Pluralsight, it is part of the following learning paths:

Even if you don’t have a Pluralsight or Frontend Masters subscription, you can still learn from Estelle by visiting her online CSS Workshop:

CSS3: From Knowledgeable to Ninja

This Github guide is continually updated (roughly monthly) and also contains a lot of information that is not covered in this course. This set of slides now covers information about CSS Selectors Level 4, which is currently at draft stage.

In this review I will be referring to this resource and point out any differences for you.

Frontend Masters have also published a PDF summarizing this talk.

You can also watch Estelle’s CSS Specificity lesson for free on Frontend Masters, and the first 3o seconds of each lesson is free on Safari Books Online. And if you want to watch the whole course but don’t want a subscription, it is available to download for $49 from O’Reilly. My personal opinion is you’ll get better value for money out of a subscription, but of course it’s up to you.

Before you spend your money, be aware that this course is aimed at professional web developers, in other words you need to have at least intermediate level CSS skills to get the most out of this course.

CSS Beginners

If you are a CSS beginner, or familiar with older version of CSS but completely new to CSS3, here are some options for you to study before tackling this course:

Estelle has a slide deck called Intro to CSS. This actually contains some pretty powerful tricks so I’d say worth checking out even if you know CSS quite well.

About 5 years ago, I found the book “CSS: The Missing Manual” very useful. This book has since been updated for CSS3, and you can find the first chapter here.

Estelle has also produced several books on CSS and HTML. I have not yet read them but the amazon reviews are favorable.

Pluralsight subscribers: follow the CSS learning path and you’ll cover this course halfway through it.


The second slide has the full list of CSS3 properties along with links to the relevant parts of the CSS3 specification and indicators to tell you which properties are also included in CSS 2.1 and earlier versions.

This course covers selectors, properties and values, pseudo-classes, pseudo-elements, prefixes, at rules and much more.


Follow along with this using Estelle’s Selectors Slides

There are now a number of introductory slides added, which I recommend reading to check that you understand the basics.

There are interactive sections along the way for you to experiment and play with CSS. This is very important because we learn best by actively doing rather than passively watching.

Basic Selectors, Relational Selectors

In this clip, Estelle very briefly covers slide 6 – basic selectors and then explains Slide 8 – Relational Selectors.

Attribute Selectors

The relevant slides and files for this clip are:

Characters such as ^ $ * are regular expression characters.

Estelle answers a question from a member of the audience about the performance considerations of using attribute selectors.

UI Pseudo-Classes

The relevant slides and files for this clip are:

Estelle shows how to change the style of a checkbox based on it’s state, i.e. change it’s color when it is checked (click on the checkbox in Slide 22 to see for yourself).

Click on the Slide 24 link for the number 5 to 7 range effect and also (not in the video) a number 0 to 10 range effect control.

Structural UI Pseudo-Classes

The relevant slides and files for this clip are:

Demo: Structural UI Pseudo-Classes

Estelle describes the example in Slide 33 as “completely useless stuff” but demonstrates it to let you know what’s possible.

Slide 34 is described as “even more useless”, adding “don’t do this, it’s really dumb!”

It’s interesting to see that this sort of thing can be done in CSS3 however.

Estelle also discusses alternative ways in which others such as Christopher Schmitt have produced the American Flag in CSS.

Navigation and Empty Pseudo-Classes


In this clip Estelle explains the difference between em and rem and why rem is cool.

It’s not part of this course, but also take a look through slides 41-46 to learn more about new CSS4 features.

In this clip, Estelle recommends HTML5 bolierplate (as a good read). If you are not familiar with this, see Get Started with HTML5 Boilerplate.

Estelle mentions recommends selectivizr which emulates CSS3 pseudo-classes in IE6-8, if you still need to support them.

She also mentions that she has a guide to jQuery and CSS3 selectors.

Also briefly discussed in the shadow DOM: see her HTML5 form, or if you want to go deeper watch Cory House’s HTML5 Web Component Fundamentals course.

Specificity (SpeciFISHity)

Slides and files relevant to this clip:

In this clip Estelle explains the specificity cheat sheet known as SpeciFISHity.


This is !important

I like the use of the BP oil tanker, and especially like the nuclear bomb used to represent the most brute force option of all, which is !important.


A lot of material has been covered already.

Before moving on, I recommend taking some time to complete the advanced selectors exercise, and then give yourself a well earned break.

Generated Content

Slides and files:

You can style pseudo elements in all of the same ways as normal elements (except for animation which was only supported by Mozilla at the time of recording).

Estelle explains how you can use special characters (like snowmen and sad faces)

Other Values for Generated Content

Slides and files

A member of the audience asks if you can use background image for spriting? You can!

Use-Cases for Generated Content

Estelle explains how to create triangles using generated content: this begins with creating a square and then making part of it transparent and setting the border color.

She shows that by changing the border widths, you can create a variety of different triangular shapes in CSS.

Estelle also explains how to create elliptic thought bubbles.

Generated Content Example By Chris Coyer


Chris Coyier, CSS Hero

Shapes of CSS shows you how to produce tons of different shapes including trapezoid, parallelogram, pentogon, hexagon, octagon, various star shapes, heart, pac man and many more.

Estelle also explains a couple of his other articles. I encourage you to read through all of them!

Generated Content Example

This lesson contains the solutions to some of the coding exercises, and Estelle answers questions from the audience.

Media Queries

Excluding the introduction, this is the shortest module in the course. Media queries are an essential part of doing Responsive Web Design.

The Viewport

In the first slide here, narrow the width of the screen to change the background-color from white to red to yellow.


Slides and files

This section is showing it’s age a bit. I haven’t used Firebug in a long time.

If you are interested in using the Opera debugger, see here for dragonfly info.

Weinre stands for Web Inspector Remote.

Adobe Edge Inspect is no longer supported by Adobe.

For a more in depth look at in browser debugging, Pluralsight subscribers can watch John Sonmez’s Using the Chrome Developer Tools course.


All of the color formats are codes for white.
Browsers now accept both spellings: grey and gray!
HSL stands for hue saturation luminance

I think Estelle’s color converter is pretty handy and deserving of more Github stars.

Transparency and Color Tips

Estelle explains the difference between Opacity and Alpha Transparency (something that has confused me in the past).

Fonts, Shadows and Text Effects


This begins with an explanation of font-face. Estelle then explains the difference between a font and a typeface.

Font Services

There are important, yet not very well known, legal issues around distributing fonts.

In this clip, Estelle introduces a couple of free font services: Google Fonts and Font Squirrel.

Estelle demonstrates how to use the Font Squirrel Generator. This is a useful performance tip: you can use a font containing just one character and only make users download that one character rather than the whole font.

Text Shadows and Box Shadows

Text-Shadow is demonstrated.

Mother Effing Text Shadow is created by Paul Irish.

There’s also a basic demo in w3schools that you can play with.

Holy Cow A Double Rainbow (a minute of your life that you’ll never get back)

I had not seen the spread effect used in box shadows before – really nice effect here.

See Can I Use for text-stroke browser support, and now use Text-Shadow instead!

Borders and Backgrounds

Background Repeat, Attachment and Position

You’ll see that the background-position slide has been updated since the course recording: this is widely supported in browsers and you can use it.

Background Clip, Origin and Size

The default values are:

  • background-clip : border-box
  • background-origin: padding-box
  • background-size: auto

Estelle explains why background-size is very important for mobile devices.

Border Properties

The default values are:

  • border-style: none
  • border-width: medium

The pneumonic TRouBLe stands for Top Right Bottom Left, because borders can cause you a lot of trouble!



The first few slides are interactive demos to play with. Then Estelle explains that there are four gradient types:

  • linear-gradient
  • radial-gradient
  • repeating-linear-gradient
  • repeating-radial-gradient

Slides and files:

Prefixed, Linear Gradients

Try it out: http://estelle.github.io/gradients/files/prefixedlinearsyntax.html

W3C Standard Syntax

W3C Standard Linear Gradient Syntax

Angles != Keyterms

Scroll the bar up and down

Hard Color Stops

Color Stops


Table cloth effect

Tips on Gradient

Estelle’s gradients library – dozens of free gradients

Radial Gradients

Radial Gradients


Estelle warns this could crash some mobile browsers by eating up all the memory.

with Background size


Transforms Transforming Elements

Transforming Elements

2D Transform Functions

2D Transform Functions

Estelle says that the plane icon transformation won’t make any sense to you now, but then explains how this works.

She says that only cyborgs code matrix transforms. This looks a lot like HTML5 Canvas matrix transforms to me?!?

Although Estelle had a problem on the day with demos not working quite right, I found the translate, rotate and scale plane demos  work fine on my PC (Chrome and IE11, didn’t work in Firefox) : just over the relevant piece of code to activate it. You may need to wait a second or two.


2D vs. 3D Transformations

Simple Transforms – Try It Out

transform-origin property

Transform Origin – Try It Out

Estelle explains that 3D transformations are hardware accelerated with there is an animation.


Transitions and Animations

Transitions in the Real World Animated navigation menus


The first 2 minutes of this clip is an explanation of the animated nav menu. Something that is no longer in the slide deck, but is very cool, is the pick a card demo: cards flip over to reveal themselves. No images are used, this is completely done with CSS.


Animation Features and limitations

Estelle recommend doing animation with CSS rather than with JavaScript. She explains that is because CSS has the lowest priority in the UI thread, meaning that the animation won’t block any other important process.


Hover over the plane for the animation

Animating CSS Transforms

Attaching animations to elements

Base CSS

Again there are similarities with CSS animations and HTML5 Canvas, both use Bezier Curves.


Rachel Nabors – Flashless Animation

Animation Delay

Advanced Animation Properties

animation shorthand

There is an even more advanced card animation demonstrated in this clip, sadly also missing from the online slide deck😦



Other Features

Other Features Part 1

We’ve come a long way, but there a still half a dozen topics left to discuss:

  • CSS Exclusions
  • CSS Regions
  • CSS3 Multi-column Layout
  • CSS3 Flexible Box (“Flexbox”) Layout
  • CSS3 Grid Layout
  • CSS Device Adaptation

Slides and files:

Other Features Part 2

Slides and files:

These many topics are only covered very quickly.
At the start of this lesson, Estelle demonstrates how frustratingly bad the old flexible box model is, and then how much better the new FlexBox is.
Flexbox is now supported by all modern browsers. For more info, Estelle has a full slide deck on Flexbox on Github
Estelle also shows off some of the filter effects you can create: blur, grayscale, drop shadow, saturate, sepia, contrast, invert etc.
I did not know about the Calc() function before, but this was actually introduced back in Firefox 4 6 years ago! It’s now broadly supported by browsers.
For more information on rem, either read Jonathan Snook’s Font sizing with rem or Estelle’s CSS Value Lengths, Times, Frequencies and Angles.


Estelle mentions the books she has written, and her Mobile Web Performance slides.

This course then ends with a Christmas themed CSS quiz!

Summary / Verdict

There was one brief moment in the course when Estelle says she cannot cover everything in CSS3 because “I’m only here for today, not for a month and a half”. The topic of CSS3 is huge!

This course has made me realize how much other courses (and books) merely skim over the topic. The shorter modules cover content equivalent to chapters in a book, and the selectors coverage is equivalent to several chapters.

There is plenty of detail that could not be covered in this course, but it covers more ground in greater detail than any other CSS course I have seen.

Again I recommend CSS newbies watch another course or read another book before tackling this course.

The combination of Estelle’s updated online slides with the video helped me a lot and I sincerely hope that this article brings it all together for you and guides you further towards mastering CSS3.

You will need to spend a decent amount of time coding the examples yourself to fully understand them, so (regardless of the playback speed) altogether you will need more than 6 hours to learn all of this.

If like me you are watching the entire course outside of your day job, you should schedule yourself at least a week for digesting and processing all of this information.

Alternatively you can use this as a reference for the part of CSS3 that you are interested in using. I think I will come back occasionally to both this article the relevant course clip when I need refresh my memory on a CSS3 topic.

At the very minimum, I recommend looking through Estelle’s slide decks on Github – this is a real treasure trove of information for front end developers.

Pluralsight Users recommended speed: x1.5 with pauses for trying out the demos

6 thoughts on “CSS3 In Depth

  1. Pingback: Front End Web Development Learning Path | Zombie Code Kill

  2. Pingback: Programming in HTML5 with JavaScript and CSS3 (Microsoft Exam 70-480) | Zombie Code Kill

  3. Pingback: Building Mobile Apps with the Ionic Framework and Angular JS | Zombie Code Kill

  4. Pingback: Bootstrap 3 | Zombie Code Kill

  5. Pingback: One ASP.NET From Scratch | Zombie Code Kill

  6. Pingback: Setting up Express JS | Zombie Code Kill

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s