This course has been updated! We now recommend you take the CSS In-Depth, v2 course.
Table of Contents
IntroductionEstelle gives a brief introduction to the course and a number of resources. Exercise files are incorporated within the slide deck. - Workshop Files: http://estelle.github.com/CSS-Workshop
Part 1: Selectors
Basic selectors, relational selectorsDefinition 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 support
Attribute selectorsAttribute selectors can be used to style elements based on the existence or value of an attribute. Demonstration of attribute selectors
UI pseudo-classesUI 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-classes
Structural UI pseudo-classesUI 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-classesEstelle demonstrates some techniques using structural pseudo classes to create different column widths and design a US Flag
Negation and empty pseudo-classesThe 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-classesEstelle 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.
Part 2: Specificity
Understanding SpecificityElement selectors carry the least “weight” when it comes to specificity. From there, adding classes or pseudo-classes increase the weight of a selector. IDs carry the most weight in specificity. Estelle walks through her “Speci-FISH-ity” chart describing how these rules relate to specificity. Specificity for the newer selectors like the global selector, combinatory, and negation selector are not as obvious. Remember that specificity is not inheritance.
Part 3: Generated Content
Generated contentGenerated 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 contentIncorporating 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 contentEstelle 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 CoyerThere 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 exampleEstelle 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 queriesPrint 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 viewportThe 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 browserMost modern browser, both mobile and desktop, have tools for debugging content in-browser. Some browser debuggers and better than others.
Debugging mobile browsersWith 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 formatsThere 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 tipsReducing 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 FontsThe 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 ServicesFont 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 size
Text Shadows and Box ShadowsThe 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 ImagesPreviously, 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 positionRepeated 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 sizeThe 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 propertiesWhen 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 imagesBorder 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
GradientsGradients 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 gradientsThe prefixed, older linear gradient syntax is another version of the gradient syntax that is still supported in web browsers. This syntax requires a vendor prefix
W3C Standard syntaxThe final linear gradient syntax is the W3C standard syntax which enables a number of additional techniques like hard-stops, color-stops and endpoints.
Radial GradientsEstelle demonstrates a number of useful techniques for using radial gradients in CSS.
Part 10: Transforms
Transforming elementsIn CSS, there are a number of two-dimensional transform functions that will move, scale, rotate and skew elements.
2D vs. 3D transformationsEstelle 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 BasicsTransitions 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.
Attaching animations to elementsAnimations 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 propertiesWhile 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 1Estelle quickly covers a number of additional CSS features including multi-column content, box sizing, CSS regions, and CSS exclusions.
Other CSS features, part 2Estelle 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 units
ConclusionEstelle concludes with a few additional resources and a brief quiz to test your recognition of CSS properties.