CSS In-Depth, v2

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

Estelle introduces Cascading Stylesheets, its role in web development and how to include CSS files.

Estelle shows a short demo on selectors and discusses the pros and cons of vendor prefixes. Afterward, Estelle reviews tools to edit, debug and share CSS.

Basic selectors include class, id and element selectors. She also introduces the CSS selectors available in level 1, 2, 3 & 4 of the CSS specification.

Estelle introduces the concept of CSS specificity and how the final style gets applied based on its selector weight.

Estelle reviews a demo of the selectors based on parent and descendant relationships. After introducing combinators. Estelle covers how to use the selectors API.

Select elements using the attributes from your HTML markup, including partial value matches, similar to regular expressions

Estelle recaps and demos the various attribute selectors.

Several UI selectors can target elements based on their current state, such as whether a checkbox is checked, or a form input is valid or invalid.

Structural Selectors target elements based on relationship to other DOM nodes. We take a deeper dive into understanding first-child, last-child, only-child, and only-of-type.

Estelle shows hot to select elements based on where they are about their siblings, such as targeting every third element starting with the ninth element from the end.

Estelle shows a complex example of creating a U.S. flag with structural selectors

Select the root element of the page with :root. What is an empty element? Select them with :empty.

Exclude elements from being matched with :not. Choose from multiple different elements with :matches and :any.

Estelle illustrates how to select elements based on the language declaration of that element, an element's ancestor, or the document language.

Estelle demonstrates how to style links and other elements based on states like active, focus, visited, or whether they are the current target of the document. Then Estelle shows a demonstration created with :target and :checked, without JavaScript, and a tabbed navigation updated with the target selector.

An in-depth look at CSS specificity and the cascade using "SpeciFISHity" illustrations showing the weight of IDs, classes, element and pseudo selectors as well as !important using plankton, fish, and sharks.

Estelle introduces an example of pseudo elements using first-letter and selection pseudo selectors.

A quick look at generating content with ::before and ::after

After showing how to style selected text, and not allowing text to be selected on touch devices, Estelle provides a quick overview on how to discover different browser-specific shadow pseudo elements.

Estelle generates content on the page using the ::before and ::after pseudo selectors.

Understanding how CSS Counters work: a counter you can display a number based on a condition in CSS.

A look at various values of the content property, including quotes and no-quotes

Understanding how CSS Counters work: a counter you can display a number based on a condition in CSS.

how to include images in generated content, but mostly how the value of the content property is not interpolated

Estelle reviews what makes for a valid string in the the content attribute.

A look at UTF-8 characters and material design icons with a focus on accessibility of generated content.

Estelle looks at different design features people have created with generated content.

Estelle provides an overview of the history of media queries along with an explanation of how, with the proliferation of various device, you have to think about screen resolutions, orientation, and sizes. An explanation of what media queries are and how to determine the breakpoints.

The syntax and punctuation of media queries

Using @supports to determine what features a browser supports, and targeting CSS based on what a browser can handle.

Why it's vital to set the viewport meta tag, why developers should never disable zoom, and all the current and future viewport values.

Overview of CSS Hyphenation, HTML's &shy; character and the <wbr> element.

Estelle introduces to CSS Multi-Column layout. Column count, column size, and how column counts change without needing media queries.

Estelle discusses the viewport. The viewport is the size of the device or the browser window, unlike in SVG, which refers to the size of the SVG container itself.

Estelle looks at all the different ways of declaring colors in CSS, including currentColor and 8-digit hexadecimal alpha transparent color notation.

Estelle differentiates between opacity and alpha transparency, why it matters, and provides tips to make the right choice.

Estelle shows that buttons, scrollbars, audio control are stylable elements. Then Estelle looks at how the browser defines appearance, and how to discover how to control it.

Previously difficult problems like lining up column heights or changing the structural position of elements become easy with Flexbox.

Flexbox is widely supported across browsers. Estelle demonstrates the power of Flexbox while giving an overview of the Flexbox properties and the simplification of layout when using flexbox instead of floats.

Estelle shows how to set up the Flexbox container and basic Flexbox Item properties.

Estelle reviews that the essentials of flexible boxes are creating a flex container, defining the flex-direction, and wrapping of flex lines. Estelle also covers the concepts of the main and cross axes, to ensure developers fully understand the power of flexbox.

Deep dive into flex container properties of justify-content, align-items and align-content, by which you can align flex items along their flex lines, and flex lines within their flex container.

The look and feel of flex items can be set with flex container properties, but there are flex item properties to alter the look and order of individual flex items.

A key to flexible layout is the flexibility of individual flex items. In this section, Estelle explains flex-grow, flex-shrink, and flex-basis. The growth factor determines whether items can grow, and defines how much they can grow proportionally to other growable items. Similarly, flex shrink factor sets how much items can shrink if there isn't enough space for them to fit without wrapping. Flex basis defines the basis of each flex item before growth or shrinking occurs, thereby defining whether there is room for flex items to grow, or whether shrinkable flex items need to shrink.

While not appropriate, or needed, for layout, tables are still important, but only for presenting data. Estelle gives an overview of the semantic elements that make up tables, including caption, colgroup, col, thead, tbody, tfoot, tr and td.

The function, placement and styling of table captions.

The CSS properties are impacting the borders, padding, and spacing within and between table cells. Cell spacing can be collapsed to style the rows of tables.

CSS provides the ability to style or even hide empty cells separately. Vertical alignment within cells and rows, including at baseline, is covered.

Estelle live codes styling a table and invites you to try it out on your own.

Estelle discusses the role of Flexbox vs. grid and where to use each.

Estelle reviews basic grid terminology: lines, cell, area, track, row, column, and gutter.

Estelle demos using display: grid with grid-template-columns, repeat notation, and fraction units.

Estelle shows how to mix units of measure when defining grid columns and rows.

Estelle demos using repeat() notation and fr units, as well as covers the ability to use minimums and maximums.

An overview of the grid-gap() property

Estelle walks through her code she created during the exercise break.

You can position a grid item anywhere in the grid by listing the start and end gridlines

Estelle show how to name grid rows and columns to reference and reuse them to easily place an item in the grid.

Estelle walks through item properties and shows the "Holy Grail" layout which most web pages use to lay out the header, sidebar, content, and footer.

Live code walkthrough of coding the Holy Grail Layout with CSS Grid.

Estelle shows how to name column and row areas to lay out your grid based on template names.

Estelle demonstrates how individual items can be justified and aligned based on the grid line, row track and can stretch or shrink to the content inside.

Estelle uses align-content and justify-content to set the position of the grid, grid columns, and grid rows. You are also able to add a grid-gap.

Estelle illustrates how to use automatic flow to dynamically assign default sizing to rows and columns that are added not as part of grid-template-row and columns.

Estelle shows some of her favorite CSS Grid resources and shows a few more demo websites.

Demo of the CSS Grid Dev Tools built into Firefox.

Overview of the background properties and acceptable values for background color.

Background images can be jpg, gifs or even SVGs or data blobs. You can also add multiple background images.

Estelle discusses how future background support will support crossfade, image sets, media fragments, canvas and more.

Repeat background, attach a background even with scroll and set the position of the background.

After showing how to clip the background color to the border, padding or content and set the origin of the background image, Estelle resizes the background image to a specific size or use cover or contain.

Estelle demonstrates how to set all the properties in order with the background shorthand, but suggests not to use it unless you fully understand the syntax and want to override all the properties. Then Estelle plays around with various properties to make a shark background change.

After showing how to set the border's color, style, and width, Estelle shows how to set all of these properties with shorthand.

Estelle illustrates how to set the border-radius for rounded corners and even more styles as well as images as the border of elements and image details.

Estelle demonstrates different gradient combinations as a way of overview of the types of gradients. She then looks at conical gradients, which will be available in the future.

Linear and radial gradients go from one color to another. The default direction is "to bottom" which is from top to bottom.

Color stops allow you to transition between more than one color in between the start and end positions.

Color hints allow you to specify the mid-point between two color stops.

Make gradients render in any direction using "to" top, left, bottom or right. You can also use degrees to set the specific angle for a gradient direction, and a quick note on animation.

Render stripes using gradients with repeating-linear-gradient.

Radial gradients start from a center point and move outwards. You can position the center of the gradient.

Radial gradients can be a circle or ellipse. The ellipse can be resized to be more tall or wide.

You can set color stops and color hints on radial gradients too.

Estelle demos using transforms to translate, rotate and skew elements.

Overview of the functions available to transform: translate, scale, rotate, skew and matrix.

Transforms can be combined using multiple functions. Transform functions are implemented in the order declared, and can be impacted by the transform-origin property.

Transforming in 3D adds a few more functions including scale3d, rotate3d, matrix3d & perspective.

Perspective effects how close you are looking at the object when you translate it into 3D space. A smaller value appears closer to the object and has a greater impact.

Estelle shows how to hide the back of a 3D translated element. The box will be added in the future.

Transitions can change styles over time. A link hover style is a transition that happens over 0 milliseconds. You can specify a time, easing function, which properties you will transition, and whether you should wait before starting a transition.

Not all style properties can be animated. In general, properties that are animatable have a midpoint: if you can determine what the midpoint is between to property values, then the change between those two values can be transitioned or animated.

All transitions have transitioned events in both directions of the transition, including the individual transitionable longhand properties of a shorthand property. Estelle walks through examples of using CSS transitions.

Many animations can be solved with a bit of CSS instead of large JavaScript frameworks.

Keyframe animations can be named and define the duration and properties animating to using percentage values. Estelle demos the ability to create animations that animate properties between keyframes.

Estelle shows how to name an animation and apply it to an element. Estelle also discusses the order of animations and specificity.

An overview of cubic beziers, the easing timing functions, which can be used to improve your animation, making them look more natural instead of robotic.

The steps timing functions allow you to animate between keyframes in a specified number of steps rather than easing between them. Steps are great for sprite character animations.

Iteration allows you to specify the number of times to perform an animation. Delay allows the animation to start later or part-way through the animation with negative values.

You can change the direction of the animation, and define what happens before an animation starts and after an animation has ceased. Estelle also shows the shorthand version of specifying CSS animations.

Use the animation play state to stop or pause the animation. DOM events are thrown on the elements that you can listen to and interact with the element using JavaScript.

Columns allow the flow of text between multiple columns. Estelle covers properties including fill, gap, span, break, orphans, and widows.

Estelle reviews the old IE box model and the standard box model. The "box-sizing: border-box" property value converts elements in modern browsers to the old IE box model, including padding and width within the box size.

CSS Filters, which are also known as Shaders, allow using Photoshop-like effects on images with a single line of CSS, saving time and bytes. Other CSS effects include using blend modes to blend multiple background images.

Text and images don't have to be rectangular. You can reshape images and flow text around shapes and jagged edges using clip-path and shape-outside. Estelle uses an SVG to clip a shape out of an element.

Estelle shows how to make icons accessible with fallback text. Putting your font through Font Squirrel, Estelle demonstrates how to use the expert settings to subset the fonts.

People often default to using JavaScript libraries instead of using CSS as solutions to UX features. Estelle gives some examples of starting with CSS as a base instead to address designer requests, including include providing input masking and creating a carousel with a few lines of CSS and a few lines of JavaScript, instead of a full-fledged framework.

We only use two cursor values, but there are lots of cursors available to provide more context to the user.

Estelle shows how to wrap text or hide the overflow, which showing ellipses to indicate there's missing text. Then she reviews the ellipses and word-wrap properties and discusses using calc() in the value to compute property values on the fly.

Lengths and font sizes can be declared relative to the root em size or the width or height of the actual viewport with rem, vh, vw, vmin and vmax.

"Pointer-events: none" allows click through an element. Estelle uses contenteditable in all her slides to make the slides interactive. In fact, attendees have been updating CSS directly in the examples because the <style> blocks have been set to visible with contenteditable.

Estelle shares how she uses Sass to organize and modularize her CSS.