The CSS Podcast

The CSS Podcast

thecsspodcast.libsyn.com
Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.


019: Z-Index and Stacking Context
Aug 5 • 19 min
In today’s episode, we’re talking about z-index and stacking context. This is a pretty in-depth topic, but it’s something that we see all the time and it can definitely bite if you aren’t aware of what’s going on. Links: CSS Animations Level 1 →…
018: Focus
Jul 30 • 18 min
Today we discuss: focus! Focus is something we regularly deal with when writing styles and is also very tied to markup and attributes like tabindex, so we’ll be discussing all of those things in this episode! Links: User Action Pseudo-classes →…
017: Shadows
Jul 22 • 21 min
Today we’re talking about shadows! Box shadows, drop shadows, text shadows, & everything in between. Shadows can exist all over our UIs without us even realizing it because sometimes, they just look like borders. box-shadow spec → https://goo.gle/32JVdL4…
016: Borders
Jul 15 • 24 min
Today we’re talking about borders! And while this sounds relatively simplistic, borders in CSS can actually get pretty complex very quickly. It’s not just color and style that you can adjust, but also also border images, where you control how the image…
015: Pseudo Selectors
Jul 1 • 36 min
In this episode we break down functional and regular pseudo selectors, CSS’s special hook into encapsulated element states. We can’t control them, but we can leverage them to provide rich interactive feedback from our interfaces. Links: Selectors Level 4…
014: Pseudo Elements
Jun 24 • 20 min
::after and ::before? Do you know about ::first-letter, ::spelling-error, and ::backdrop? Dive into pseudo-elements & how to use these unique declarations that enable styling specific parts of some selected HTML. CSS Pseudo-Elements Module Level…
013: Spacing
Jun 17 • 24 min
In this episode we do our best to cover the many ways to create space on the web. From techniques like HTML entities nbsp; to gap, we cover the clever, hacky and clean ways you can create spatial relationships on the web. Links CSS Logical Properties and…
012: Logical Properties
May 27 • 20 min
The days of euro-centric spacing like `margin-top` are limited: instead, say hello to `margin-block-start` to define space that works within any linguistic context based on your layout needs.In this episode we shake the physical and lean into the logical…
011: Grid
May 20 • 31 min
Tracks, gaps, areas and flow are hot topics in this full coverage episode on CSS grid. We don’t leave anything out, so you’re bound to pick up something new. We talk about functions like min, max, and minmax, and how to combine all of the powers of CSS…
010: Flexbox
May 13 • 24 min
In this episode we flex our flexbox knowledge and dive deep into CSS layout using the flexible box model. We talk about content axis’, flex flow, wrapping, order, justification, alignment, and more! Links Flexbox Spec -…
009: Layout
May 6 • 25 min
In this episode we provide an overview and slight history of laying things out on the web, starting from blocks and framesets, ending with Grid and Houdini. Links: A History of CSS through 15 years of 24 ways → https://goo.gle/3fnrBXI Holy Grail Layout →…
008: Sizing Units
Apr 29 • 25 min
We’re sizing up sizing in CSS in this episode as we break down all the different lengths and measurements in CSS. CSS makes using these things seamless, it’s great, but let’s study some of the intricacies here; how it works and what that means for your…
007: Color Part 2 - Perception
Apr 22 • 21 min
Explore perceptual, human-centered, color in this episode as we review latest specs, latest syntaxes, theories & strategies for color on the web in 2020. Spec CSS color level-4 → https://goo.gle/3cFCaDr Draft Spec CSS color level-5 →…
006: Color Part 1 - Usage
Apr 15 • 31 min
In this part 1 episode, we dive deep into using CSS color. We discuss ways to write and code colors, places they can go, functions you can use on them, and then we top it off with a hex color challenge. As always, you’ll learn new jargon, pick up a trick…
005: Inheritance
Apr 8 • 8 min
Inheritance and its effects in CSS are found all over your styles, almost invisibly, until further investigation through devtools or docs. In today’s episode, we illuminate the aspects of inheritance, how they’re useful, things to watch out for, and of…
004: The Cascade
Apr 1 • 11 min
The “C” in CSS stands for the cascade! And that’s what today’s show is all about. Learn how the styles you write are affected by other styles, and how it all boils down to what the user sees. 4 Phases Of The Cascade: › Position › Specificity › Origin ›…
003: Specificity
Mar 24 • 12 min
In this episode we talk about how the browser resolves multiple selectors targeting the same subjects and how it determines which style to actually apply. Turns out, lots of code from many different locations is trying to style your elements, learning…
002: Selectors
Mar 18 • 15 min
Get ready to learn some new CSS vocabulary! In this episode we talk about selectors, a syntax used to find elements (subjects) in a tree. CSS uses selectors to bind styles to subjects, and it’s quite powerful. We go over universal selectors, type…
001: The Box Model
Mar 12 • 12 min
Where do scrollbars go, inside or outside the box? Una and Adam answer that and much more in their discussion of the CSS box model. Everything in CSS starts as a box, and while that’s a straight forward concept to initially think about, it can get complex…