This course has been updated! We now recommend you take the CSS In-Depth, v2 course.
Table of Contents
Introduction
Part 1: Selectors
Basic selectors, relational selectors
Definition and explanation of both basic and relational selectors Demonstration of basic and relational selectors Estelle shows a brief list of the additional selectors that she will be covering and provides a reference for determining browser supportAttribute selectors
Attribute selectors can be used to style elements based on the existence or value of an attribute. Demonstration of attribute selectorsUI pseudo-classes
UI pseudo classes are based on the current state or structure of the UI. For example, a style may be applied if an item is enabled, disabled or checked. HTML5 web forms also introduce a number of additional pseudo-classes that accompany the new input types. Demonstration of UI selectors and pseudo-classesStructural UI pseudo-classes
UI pseudo-classes can also target elements based on their relationship to other elements in the DOM. The first step is to understand the difference between child and type. Nth pseudo-classes target elements based on arguments passed to the selector.Demonstration of Structural UI pseudo-classes
Estelle demonstrates some techniques using structural pseudo classes to create different column widths and design a US FlagNegation and empty pseudo-classes
The negation pseudo-class can add exclusion to a CSS rule. The empty pseudo-class, used more rarely, will match any element that doesn’t contain any content or whose content is only an HTML comment.Other pseudo-classes
Estelle finishes up covering a few additional pseudo-classes and demonstrates some uses cases for each one. The additional pseudo elements include :lang, :target, and :root.Pseudo-elements
While pseudo-classes classes select elements that already exist, pseudo-elements create “faux” elements that you can style. Pseudo elements are often indicated by double-colon notation however for IE support, single colons should be used. It’s a good idea to use Selectivizr along with other JavaScript libraries for backward compatibility.
Part 2: Specificity
Part 3: Generated Content
Generated content
Generated content is content created with CSS that can be placed before or after the content of an element. The difference is the generated content is not part of the DOM. Essentially you have two stylable elements (<before> and <after>) for every non-empty element. Within the content property, you can put any text, unicode character, attribute, or counter.Other values for generated content
Incorporating images and counters in the generated content can be useful. Estelle demonstrates a few of these techniques and also describes a use-case for sprite sheets. Counters allow generated content rules to “count” elements in the DOM and display a numeric value. While the attr(X) syntax for generated content is not widely supported yet, in the future it will add some extremely powerful techniques since it can pull from any attribute value within and element.Use-cases for generated content
Estelle demonstrates some common use-cases for generated content. These include adding iconography and tool-tip hover effects based on href values.Generated content example by Chris Coyer
There are many more generated content example on the CSS-Tricks.com website. Some incorporate shapes created with CSS. Others add complex graphical effects or interactive content.Generated content code example
Estelle codes a more complex generated content hover interaction. While answering an audience question, Estelle demonstrates how to use the debugger with hover pseudo-classes
Part 4: Media Queries
Introduction to media queries
Print and screen media queries have been used for many years in web development. With the multi-device landscape, media queries around screen width, height, and orientation are more widely used. Media queries can also be written based on device capabilities.The viewport
The viewport of a webpage has traditionally been set in an HTML meta element, however this is not appropriate for presentation. CSS adds a “@viewport” declaration that allows the viewport to be set via CSS.
Part 5: Debugging
Debugging in the browser
Most modern browser, both mobile and desktop, have tools for debugging content in-browser. Some browser debuggers and better than others.Debugging mobile browsers
With mobile devices, it’s helpful to use a remote debugger to inspect the DOM of the content as it’s rendered in the device’s browser. Using Weinre, remote debugging can be done very easily.
Part 6: Colors
CSS color formats
There are a variety of color formats in CSS include hexadecimal, RGB, RGBA, HSA, and HSLA. The “A” in RGBA and HSLA stands for “alpha” or transparency. HSL stands for hue, saturation, and luminosity. It’s a more intuitive way to select and alter colors as opposed to hexadecimal.Transparency and color tips
Reducing an object’s opacity will make both the object and its children transparent. It’s often better to use a background color with transparency so the children of the object aren’t affected. Using RGBA or HSLA is often best for shadows. The appearance property in CSS allows developers to change the look of an element. Currently, the appearance property requires vendor prefixes.
Part 7: Fonts, Shadows, and Text Effects
CSS Fonts
The font-face rule declares a font family that can be used within a CSS document. It’s important to know what font types are compatible in different browsers.Font Services
Font licensing can be an issue with web fonts. Also, font files are large and can take a while to download. Using a font service like Google Fonts will help with both of these issues. Font Squirrel font-face generator will generate the font files needed for a webpage and optimize the files for the smallest download sizeText Shadows and Box Shadows
The key to a good-looking shadow is transparency. Don’t use opaque shadows. The four settings for a shadow are left, top, blur and color. Create better looking text-shadows by including multiple shadows. Multiple shadows can be added by separating each text shadow with a comma. Box shadows are similar in syntax to text-shadows, however, they add two additional values: inset and spread. Estelle experiments with generated content and box-shadow. Text stroke in CSS allows you to outline text. However, it currently only works in webkit and can be re-created using text-shadow.
Part 8: Borders and Backgrounds
Background Images
Previously, developers often used the background shortcut in css to declare their backgrounds. Estelle describes why that’s not a best practice any more. There are many additional background-image values added in CSS3 including gradients, SVG, and sprites.Background repeat, attachment and position
Repeated backgrounds are controlled with the background-repeat property. This enables vertical/horizontal tiling or allows developers to turn off repeating. Using background-attachment allows images to be fixed to the background of an element or its parent. If you use percentages to position your background images, the browser uses a ratio for positioning. With the introduction of CSS3, some browsers now support background positioning relative to any corner.Background clip, origin and size
The background-clip property in CSS indicates which part of the background is showing. Background origin indicates where you the background image begins. When considering hiDPI images, the background-size property determines how backgrounds will grow or shrink.Border properties
When declaring border properties, they follow the top-right-bottom-left shorthand rules. Unlike backgrounds, it’s acceptable to use the border shorthand syntax. Estelle experiments with different border-radius values.Border images
Border images are use a 9-slice scaling technique where the images is “sliced” into nine regions and the corners maintain their aspect ratio while the other regions shrink/grow.
Part 9: Gradients
Gradients
Gradients can theoretically be used anywhere an image can be used. There are four gradient types. Currently there are three different syntaxes to support. The first is the original Webkit syntax.Prefixed, linear gradients
The prefixed, older linear gradient syntax is another version of the gradient syntax that is still supported in web browsers. This syntax requires a vendor prefixW3C Standard syntax
The final linear gradient syntax is the W3C standard syntax which enables a number of additional techniques like hard-stops, color-stops and endpoints.Radial Gradients
Estelle demonstrates a number of useful techniques for using radial gradients in CSS.
Part 10: Transforms
Transforming elements
In CSS, there are a number of two-dimensional transform functions that will move, scale, rotate and skew elements.2D vs. 3D transformations
Estelle begins experimenting with different 2d transformations and explains various customizations like transform-origin The main difference between 2d and 3d transformations is that 3d transformations are rendered by the GPU, not the CPU.
Part 11: Transitions & Animations
Transition Basics
Transitions can be as simple as changing the color of a link on hover. Adding a duration makes those transitions animate. Any property with an intermediate value can be transitioned.Transitions in the real world
Transitions enable web developers to produces effects with CSS that would typically require a lot of JavaScript code to create.Animation principles
CSS animations can have single or infinite iterations and have more granular control than transitions. They also have a more robust API for hooking into JavaScript. Animations are defined with the @keyframe property.Attaching animations to elements
Animations are attached to elements using the animation-name property as well as animation-duration property. In addition, the animation-timing-function can be applied to change the way the animation plays.Advanced animation properties
While hard to read, the animation shorthand syntax can make your code less verbose. There are also other properties like animation-fill-mode and animation-delay that give you a more granular control of your animations.
Part 12: Other CSS Features
Other CSS features, part 1
Estelle quickly covers a number of additional CSS features including multi-column content, box sizing, CSS regions, and CSS exclusions.Other CSS features, part 2
Estelle continues here brief coverage of additional CSS features that currently are not widely supported but worth noting. They include the new flexible box model, grid layouts, CSS shaders, cursors, text wrapping, the calc method, and rem unitsConclusion
Estelle concludes with a few additional resources and a brief quiz to test your recognition of CSS properties.