This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.

Check out a free preview of the full CSS In-Depth, v2 course:
The "Introduction" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle introduces herself, her book "CSS: The Definitive Guide" co-authored with Eric Meyer, and demos a snowman. using many CSS features.

Get Unlimited Access Now

Transcript from the "Introduction" Lesson

>> Estelle Weyl: So for everyone the slides are going to be at So let me just go to the first deck, and here is the link right there.
>> Estelle Weyl: So this talk has a few names, CSS for Novice to Ninja, CSS in Depth Version 2. I've kind of changed the name to CSS Mastery, I don't know what it says online.

[00:00:33] I'd like to talk a little about myself before I get started. My name is Estelle Weyl, I tweet at the handle estellevw, my blog is at It says early release, but the book has been released. I co-authored this. Erik Meyer is, he's not the godfather of CSS because godfather to me reminds me of the movie, and he hasn't murdered anyone.

[00:01:03] He's more of the Oprah, trying to encourage and share knowledge, so he's the Oprah of CSS. So this is available if you wanna read it, if you need a seat for your kid to be able to reach the table, if you need a door stop. And it is not actually the definitive guide, there is stuff we were not able to reach but we had a book that you could actually open.

[00:01:30] Okay, so in this deck that you've seen just now with the snowflakes, and the snowman, or snow person, we have used lot of CSS properties. There's selectors, I selected the snow flakes to make the drop. There's linear gradients, it goes from blue to white because it always snows when it's sunny out.

[00:01:54] There's opacity, some of the snowflakes were darker than the others. There's RGBA colors, a as in alpa transparency. I used border radius, those snowflakes were round. I used transforms, they spun. And I used transitions and animations. And I used a text shadow in the deck, this has text shadow, a few of them actually.

[00:02:24] And I actually removed the fonts, so I'm not using any special fonts in this deck. And in fact that snowman right there is one element, it's a div, and that is not an image. It is done with, it is an image, it's done with CSS images, I did not pull in anything else.

[00:02:46] And I'll cover that a little bit.