Welcome to this review of the Pluralsight course CSS3 by J. “Michael” Palermo IV.

Michael is a Senior Alexa Evangelist with Amazon. Michael has authored several technical books and has published several online courses with Pluralsight.

Prior to joining Amazon, Michael worked at Microsoft evangelizing web technologies (ASP.NET 5, AngularJS, Bootstrap) and developing apps/games for mobile devices.

Michael takes his evangelism seriously, and can be seen speaking at developer events around the world.

About this Course

This is a CSS3 beginner friendly course, but not aimed at developers who have never used any version CSS at all. If you have no experience of CSS, I recommend starting with Scott Allen’s Introduction to CSS.

This course is part of the second course in the CSS Learning Path.

This course is four years old, so I will be pointing out any areas which are no longer fully up to date.

Introduction to CSS3

Michael states the scope of this course as follows

“You will have a strong foundation of CSS3 skills and complete this course knowing how (and where) to ask the right questions to advance to a deeper level.”

He adds that the focus of the course is on the most common and valuable features of CSS3.

The topics covered in this course are:

• Core
• Selectors
• Fonts
• Layout
• Background
• Colors
• Shadowing
• Borders
• Transformations
• Animations
• Media Queries
• Scripting

Michael explains that the foundation of CSS3 is level 2 revision 1 and that you can find full details on the W3C CSS site.

CSS Syntax

Michael begins with some basics, such as setting the color of an element, linking to external CSS files, formatting options, and using IDs and Classes.

Introductory Demonstrations

These are done in Visual Studio with Web Essentials but the examples will work with any text editor that you may prefer.

Starting with a completely plain and boring unstyled HTML5 page, Michael adds a link to his style.css spreadsheet.

In this CSS file, he uses Eric Meyer’s CSS Reset, and he adds code for elements and IDs.

Already the page looks a lot better, but so far none of these styles are CSS3 features.

Content

This module covers Fonts, Selectors and Form Inputs.

The @font-face syntax is introduced, and Michael explains how to add a new font, and how to use it.

Michael recommends Font Squirrel for free fonts, where he downloaded Aaargh-webfont.woff and DJ-webfont.woff

He adds it into style.css. The header now looks a lot more stylish.

Next, he adds text-shadow, which puts an orange shadow behind the text.

There are many new selectors available in CSS3, and we see a list of them followed by some demonstrations:

Positional Selectors Demos

We learn how to use:

• first-child to select the first element in a list
• last-child to select the last element in a list
• nth-child with a specified number to select any element of interest in a list
• nth-child to select every even numbered element
• nth-child to select every odd numbered element
• nth-child to select every third element

Target Selector Demos

Michael specifies different z-index values for three selectors:

• #intro
• :target
• all items directly underneath a content element, which are not either the target the intro element

The effect of this is to create the appearance of different pages being shown when the user clicks on different links.

Selection Selector Demos

When Michael initially selects a paragraph of text, we see that it shows as white text on a blue background, which is the browser default.

Once the ::selection rule is added, we see that it now has an orange background.

Michael also demonstrates the :root selector, which changes the entire background to brown.

Styling Form Inputs

In this clip we see a number of selectors of state, including the vendor prefixed definitions.

Stateful Selectors Demo

We see these aesthetic information popups:

“Please enter an email address”

This clip demos :required and :valid with and without vendor prefixes, :not and :optional

Layout

This module describes how to position things into your page, and looks at some background options.

Colors

This module covers Opacity, RGBA & HSLA, Alpha and Gradients

Borders

This module covers how to make borders resizeable, how to round them, and how to provide shadowing to them.

Transforms

Transforms allow us to change things, and in this module we learn how to rotate, skew, scale and translate.

All of these concepts are described, and then we see a demo of them all in action.

Animations

This modules covers two related concepts: Animations, and Transitions.Michael explains the difference between these two so that you can pick the best one for your website.

Media Queries

This module begins with an overview of Responsive Web Design, and then looks at adjusting styles based on viewing dimensions and device constraints.

Micheal demonstrates the site before the changes, how to apply the media queries, and their dramatically improved look.

Script

In this final module, we learn how and why you would change styles programmatically in JavaScript.

It covers feature detection and browser support.

Michael says that there is so much in CSS3 that you can do without any script but there are very good reasons why in some situations you should use JavaScript.

It’s much less of an issue today than at the time of recording, but still not all of the CSS3 features will work in some older browsers. In this module we see that Internet Explorer 9 has incomplete support for CSS3.

Michael recommends Modernizr for doing feature detection and gives a demonstration of how to use it.

He also demonstrates using jQuery to change the style. If you have not used jQuery before, check out Dan Wahlin’s jQuery Fundamentals

Resources

Here is a list of resources recommended by Michael Palermo:

Palermo4 list of CSS3 articles
W3C Cascading Style Sheets
Modernizr
MSDN CSS3 with Internet Explorer 10
CSS 3.0 Maker

Where to Next?

If you enjoyed this course and want to kick your CSS3 skills up to the next level, try CSS3 In Depth by Estell Weyl.

Recommended Speeds

New to CSS: x1.2
Experienced in CSS: x2.0