CSS In-Depth, v2
Table of Contents
IntroductionEstelle introduces herself, her book "CSS: The Definitive Guide" co-authored with Eric Meyer, and demos a snowman. using many CSS features.
CSS IntroductionEstelle introduces Cascading Stylesheets, its role in web development and how to include CSS files.
CSS SetupEstelle 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 & CSS LevelsBasic selectors include class, id and element selectors. She also introduces the CSS selectors available in level 1, 2, 3 & 4 of the CSS specification.
Specificity IntroductionEstelle introduces the concept of CSS specificity and how the final style gets applied based on its selector weight.
Relational Selectors & CombinatorsEstelle reviews a demo of the selectors based on parent and descendant relationships. After introducing combinators. Estelle covers how to use the selectors API.
Attribute SelectorsSelect elements using the attributes from your HTML markup, including partial value matches, similar to regular expressions
Attribute Selectors RecapEstelle recaps and demos the various attribute selectors.
User Interface SelectorsSeveral 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 SelectorsStructural 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.
nth-of-type Structural SelectorsEstelle 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.
Structural Selectors DemoEstelle shows a complex example of creating a U.S. flag with structural selectors
Root, Empty & BlankSelect the root element of the page with :root. What is an empty element? Select them with :empty.
Negation, Matching & ParentExclude elements from being matched with :not. Choose from multiple different elements with :matches and :any.
Linguistic Pseudo ClassesEstelle illustrates how to select elements based on the language declaration of that element, an element's ancestor, or the document language.
SpecificityAn 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.
Introduction to Pseudo-ElementsEstelle introduces an example of pseudo elements using first-letter and selection pseudo selectors.
Before, After and Generated ContentA quick look at generating content with ::before and ::after
Selection & More Pseudo ElementsAfter 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.
Before and AfterEstelle generates content on the page using the ::before and ::after pseudo selectors.
CountersUnderstanding how CSS Counters work: a counter you can display a number based on a condition in CSS.
Quotes & AttributesA look at various values of the content property, including quotes and no-quotes
Counters ReviewUnderstanding how CSS Counters work: a counter you can display a number based on a condition in CSS.
Imageshow to include images in generated content, but mostly how the value of the content property is not interpolated
Strings & Special CharactersEstelle reviews what makes for a valid string in the the content attribute.
Icon AccessibilityA look at UTF-8 characters and material design icons with a focus on accessibility of generated content.
Design ElementsEstelle looks at different design features people have created with generated content.
Media Type, Screen Size, ResolutionEstelle 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.
Syntax & PunctuationThe syntax and punctuation of media queries
Browser Capability @supportsUsing @supports to determine what features a browser supports, and targeting CSS based on what a browser can handle.
ViewportWhy it's vital to set the viewport meta tag, why developers should never disable zoom, and all the current and future viewport values.
Use Cases: HyphenationsOverview of CSS Hyphenation, HTML's ­ character and the <wbr> element.
Use Cases: ColumnsEstelle introduces to CSS Multi-Column layout. Column count, column size, and how column counts change without needing media queries.
Use Cases: SVGEstelle 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.
Colors & Appearance
Colors: RGB, HSL & HEXEstelle looks at all the different ways of declaring colors in CSS, including currentColor and 8-digit hexadecimal alpha transparent color notation.
Opacity vs. Alpha TransparencyEstelle differentiates between opacity and alpha transparency, why it matters, and provides tips to make the right choice.
AppearanceEstelle 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.
Goal of Flexbox and DemosPreviously difficult problems like lining up column heights or changing the structural position of elements become easy with Flexbox.
Browser Support and OverviewFlexbox 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.
Setup Flex Container and ItemsEstelle shows how to set up the Flexbox container and basic Flexbox Item properties.
Understanding FlexboxEstelle 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.
Flex Container PropertiesDeep 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.
Flex Item PropertiesThe 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.
Flexibility & ShorthandA 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.
Overview & SemanticsWhile 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.
CaptionThe function, placement and styling of table captions.
Table Borders & SpacingThe 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.
Other Table PropertiesCSS provides the ability to style or even hide empty cells separately. Vertical alignment within cells and rows, including at baseline, is covered.
Styling a TableEstelle live codes styling a table and invites you to try it out on your own.
Flexbox vs. GridsEstelle discusses the role of Flexbox vs. grid and where to use each.
Grid BasicsEstelle reviews basic grid terminology: lines, cell, area, track, row, column, and gutter.
Display PropertyEstelle demos using display: grid with grid-template-columns, repeat notation, and fraction units.
Columns & RowsEstelle shows how to mix units of measure when defining grid columns and rows.
Fraction Unit & Repeat NotationEstelle demos using repeat() notation and fr units, as well as covers the ability to use minimums and maximums.
Adding Gutters & ExerciseAn overview of the grid-gap() property
Exercise WalkthroughEstelle walks through her code she created during the exercise break.
Positioning Grid ItemsYou can position a grid item anywhere in the grid by listing the start and end gridlines
Grid Column & Row NamingEstelle show how to name grid rows and columns to reference and reuse them to easily place an item in the grid.
Item Properties & Holy Grail LayoutEstelle walks through item properties and shows the "Holy Grail" layout which most web pages use to lay out the header, sidebar, content, and footer.
Coding the Holy Grail LayoutLive code walkthrough of coding the Holy Grail Layout with CSS Grid.
Named Template AreasEstelle shows how to name column and row areas to lay out your grid based on template names.
Align and Justify ItemsEstelle 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.
Align and Justify ContentEstelle 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.
Track Sizing & Auto FlowEstelle 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.
More Grid ResourcesEstelle shows some of her favorite CSS Grid resources and shows a few more demo websites.
Grid Dev ToolsDemo of the CSS Grid Dev Tools built into Firefox.
Backgrounds & Borders
Background Properties & ColorOverview of the background properties and acceptable values for background color.
Background ImageBackground images can be jpg, gifs or even SVGs or data blobs. You can also add multiple background images.
Background Image FutureEstelle discusses how future background support will support crossfade, image sets, media fragments, canvas and more.
Repeat, Attachment & PositionRepeat background, attach a background even with scroll and set the position of the background.
Clip, Origin & SizeAfter 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.
Shorthand & DemoEstelle 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.
Border Color, Style & WidthAfter showing how to set the border's color, style, and width, Estelle shows how to set all of these properties with shorthand.
Border Radius & Border ImageEstelle 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.
Gradient Demos & OverviewEstelle 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 & Radial Gradient SyntaxLinear and radial gradients go from one color to another. The default direction is "to bottom" which is from top to bottom.
Color StopsColor stops allow you to transition between more than one color in between the start and end positions.
Color HintsColor hints allow you to specify the mid-point between two color stops.
Gradient DirectionsMake 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.
Stripes with Repeat Linear GradientRender stripes using gradients with repeating-linear-gradient.
Radial Gradients & PositionRadial gradients start from a center point and move outwards. You can position the center of the gradient.
Shape, Size & Sizing KeyTermsRadial gradients can be a circle or ellipse. The ellipse can be resized to be more tall or wide.
Color Stops, Hints & RepeatingYou can set color stops and color hints on radial gradients too.
Transform OverviewEstelle demos using transforms to translate, rotate and skew elements.
2D Transform FunctionsOverview of the functions available to transform: translate, scale, rotate, skew and matrix.
Function & Transform OrderTransforms can be combined using multiple functions. Transform functions are implemented in the order declared, and can be impacted by the transform-origin property.
3D Transform Functions & PropertiesTransforming in 3D adds a few more functions including scale3d, rotate3d, matrix3d & perspective.
Perspective & Perspective OriginPerspective 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.
Backface Visibility & BoxEstelle shows how to hide the back of a 3D translated element. The box will be added in the future.
Overview & Transition PropertiesTransitions 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.
Animatable PropertiesNot 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.
Events & Transition ExamplesAll 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.
@keyframesKeyframe 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.
Naming Animations & SpecificityEstelle shows how to name an animation and apply it to an element. Estelle also discusses the order of animations and specificity.
Timing FunctionsAn overview of cubic beziers, the easing timing functions, which can be used to improve your animation, making them look more natural instead of robotic.
StepsThe 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 Count & DelaysIteration 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.
Direction, Shorthand & Fill ModeYou 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.
CSS ColumnsColumns allow the flow of text between multiple columns. Estelle covers properties including fill, gap, span, break, orphans, and widows.
Box SizingEstelle 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.
Shaders & Blend ModesCSS 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.
CSS ShapesText 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.
Fonts, Icons & SubsettingEstelle 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.
CursorsWe only use two cursor values, but there are lots of cursors available to provide more context to the user.
Text Overflow, Word Wrap & CalcEstelle 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.
rem & Viewport WidthLengths 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 & Content Editable"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.
SassEstelle shares how she uses Sass to organize and modularize her CSS.