DiscoverThe CSS Podcast
The CSS Podcast
Claim Ownership

The CSS Podcast

Author: Google

Subscribed: 159Played: 1,058
Share

Description

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.
12 Episodes
Reverse
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 as we break down CSS logical properties. Links: https://goo.gle/3gw7FTp  Flow-relative syntax for margin - like shorthands - https://goo.gle/2ZLoS4W    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬  Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘 The CSS Podcast #CSSpodcast
011: Grid

011: Grid

2020-05-2031:50

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 Grid to create explicit and auto layouts. This episode will set you up to reach for the right parts of grid at the right time. Links Grid Spec → https://goo.gle/3bLLfcW  3 CSS Grid Features Una Loves → https://goo.gle/2LGJAL8  Grid to Flex → https://goo.gle/2ThGBx0    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome host of @toolsday & Designing in the Browser 🎬  Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘 The CSS Podcast #CSSpodcast
010: Flexbox

010: Flexbox

2020-05-1324:02

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 - https://www.w3.org/TR/css-flexbox-1/ Flow-flow with writing mode - https://codepen.io/argyleink/pen/mdeedye Grid to Flex: https://gridtoflex.com   Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome host of @toolsday & Designing in the Browser 🎬    Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘   The CSS Podcast #CSSpodcast
009: Layout

009: Layout

2020-05-0625:31

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 → https://goo.gle/2ynld2l  Complete Guide to Flexbox → https://goo.gle/2A2Wtg9  Grid Guide → https://goo.gle/2SEldBM    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome host of @toolsday & Designing in the Browser 🎬  Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘 The CSS Podcast #CSSpodcast
008: Sizing Units

008: Sizing Units

2020-04-2925:43

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 day to day usage.  Links CSS Spec Values and Units Level 4 → https://goo.gle/2KKdttw  Sizing and Units on MDC → https://goo.gle/2VMkros  Speech Module → https://goo.gle/2YbLISJ  All About Ems → https://goo.gle/3bMViiV    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome. Host of @toolsday & Designing in the Browser 🎬  Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘 The CSS Podcast #CSSpodcast
Explore perceptual, human-centered, color in this episode as we review latest specs, latest syntaxes, theories and strategies for color on the web in 2020.   Links: Spec CSS color level-4 → https://goo.gle/3cFCaDr  Draft Spec CSS color level-5  → https://goo.gle/3cL4CUF  How Color Gamut & Display Technology Can Affect Your Content → https://goo.gle/3eIH5p3  WICG Contrast Ratio → https://goo.gle/2XWxZyZ  Lea Verou LCH color picker→ https://goo.gle/2VvVopn  Webkit Working on Color Level 4 → https://goo.gle/353yf0D  Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬  Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘 The CSS Podcast #CSSpodcast
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 or two, and learn something new.  #C55 is #ace not #5ad Links The Evolution of Color - Chris Lilley Read color hex codes - Dave DeSandro CSS color level 3 “flavor” system color Web Almanac 2019: CSS Chapter -- https://almanac.httparchive.org/en/2019/css Nerds Guide to Web Color -> https://css-tricks.com/nerds-guide-color-web/ HSL hue turn rotate codepen   Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬    Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘   The CSS Podcast #CSSpodcast
005: Inheritance

005: Inheritance

2020-04-0808:07

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 course tips, tricks and vocabulary.    Links Spec: css-cascade-3 → https://goo.gle/39KZPR6  List of inherits or not → https://goo.gle/2wn0yKF    Una Kravets (co-host) Twitter | Blog | Instagram | YouTube Making the web more colorful ✨🎨CSS & Web DevRel @GoogleChrome 🦄 Host of the @toolsday podcast & Designing in the Browser show 🎬 Speaker & technical writer Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘 The CSS Podcast #CSSpodcast
004: The Cascade

004: The Cascade

2020-04-0111:49

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 › Importance Links MDN on the Cascade and Inheritance → https://goo.gle/39jAEES  CSS Cascade Interactive Article → https://goo.gle/2UhqIHV  Una’s Doodle → https://goo.gle/2QKTy13    Una Kravets (co-host) Twitter | Blog | Instagram | YouTube Making the web more colorful ✨🎨CSS & Web DevRel @GoogleChrome 🦄 Host of the @toolsday podcast & Designing in the Browser show 🎬 Speaker & technical writer Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘 The CSS Podcast on Twitter #CSSpodcast
003: Specificity

003: Specificity

2020-03-2412:582

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 about specificity will help you debug and understand why or why not certain styles are winning over others.    Links Diagram by Estelle Weyl → http://specifishity.com Specificity Calculator → https://specificity.keegan.st   Una Kravets (co-host) Twitter | Blog | Instagram | YouTube Making the web more colorful ✨🎨CSS & Web DevRel @GoogleChrome 🦄 Host of the @toolsday podcast & Designing in the Browser show 🎬 Speaker & technical writer Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘   The CSS Podcast on Twitter #CSSpodcast  
002: Selectors

002: Selectors

2020-03-1815:021

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 selectors, class selectors, ID selectors, attribute selectors, pseudo selectors, complex and compound selectors, and various combinators. A lot of things! Links CSS selectors level 3 →https://goo.gle/39MHdRp  CSS - Tricks: How Selectors Work → https://goo.gle/3cUSb9y  Una Kravets (co-host) Twitter | Blog | Instagram | YouTube Making the web more colorful ✨🎨CSS & Web DevRel @GoogleChrome 🦄 Host of the @toolsday podcast & Designing in the Browser show 🎬 Speaker & technical writer Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘
001: The Box Model

001: The Box Model

2020-03-1212:052

Where do scrollbars go, inside or outside the box? In this episode 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 quite quickly. Not only do boxes surround elements, but letters in a sentence each have a box too. How many boxes are there!? Lots. Lots of boxes.    Links Box Model CSS Spec: https://goo.gle/39KwDud  Adam’s Box Model CodePen: https://goo.gle/38JFZ8n  CSS Tricks on the Box Model: https://goo.gle/3aM4a7p Check out the Instagram: https://goo.gle/2W97OEg  Una Kravets (co-host) Twitter | Blog | Instagram | YouTube Making the web more colorful ✨🎨CSS & Web DevRel @GoogleChrome 🦄 Host of the @toolsday podcast & Designing in the Browser show 🎬 Speaker & technical writer   Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; dev += design; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, design, develop, deploy]); 💀🤘
Comments (6)

sky

great episode guys , but it would be nice if maybe you could clarify a little more about the key topics (I e origin , specificity etc etc .) , I only understood what all the key topics were at the end lol.

Apr 3rd
Reply

Denys Tsybka

Hi! I am really enjoying the podcast and want to thank you personally for the amazing work you are doing. Also I want to ask you to make a podcast about sizing one day. All these, px, em, rem, etc and what is the best way to use them. I am learning web development myself and it is so far very confusing to me. Thank you so much!!! Sincerely,  Denys

Apr 1st
Reply

sky

great podcast guys , loving the enthusiasm lol , keep it up.

Mar 18th
Reply

Denys Tsybka

Easy to listen and understand! I would like to suggest that you use analogies every time, when explaining something. It makes it much easier to visualize for those, who don't have access to computer or internet at the moment. Thank you very much for the job you are doing!!!

Mar 17th
Reply

Ross Savill

Really cool and easy to understand podcast, subscribed!

Mar 14th
Reply

Amir Naziri

This is Awesome. Keep it up! ✌️

Mar 14th
Reply
Download from Google Play
Download from App Store