Uploaded May 2025 | Updated September 2026, 2 weeks ago
In this tutorial, we'll explore using .form-groups for better organization, making sure our elements inherit font properties, when to use CSS Grid over Flexbox for form layouts (plus one key flexbox use case), advanced selectors for targeting specific form elements, practical layout tips and tricks, the new accent-color property for native styling, and more.
🔗 Links
✅ The starting code: codepen.io/kevinpowell/pen/LEEzWOr
✅ The finished code: codepen.io/kevinpowell/pen/JodojoQ
✅ Why I don't like min-width: 0: youtu.be/FD3aC_Ke8uk?si=BsgpcAfLRCltNmtk
✅ MDN on accent-color: developer.mozilla.org/en-US/docs/Web/CSS/accent-color
✅ Improve your forms user experience: youtu.be/awNYtIAu6pI?si=2QKKuBqox8MPWxGA
⌚ Timestamps
00:00 - Introduction
00:10 - keeping things in form groups
00:50 - inheriting font properties
01:55 - use grid for forms and form groups
04:20 - dealing with the minimum size of some inputs
06:28 - layout tips
10:50 - strategies for styling specific elements
13:13 - bonus tip: using ch unit for gap
13:50 - accent-color
14:43 - bonus tip: text-box-trim
#css
✉ Keep up to date with everything I'm up to kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: youtube.com/@KevinPowell/join
---
🧑💻 My editor: VS Code - code.visualstudio.com
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia Code
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
In this tutorial, we'll explore using .form-groups for better organization, making sure our elements inherit font properties, when to use CSS Grid over Flexbox for form layouts (plus one key flexbox use case), advanced selectors for targeting specific form elements, practical layout tips and tricks, the new accent-color property for native styling, and more.
🔗 Links
✅ The starting code: codepen.io/kevinpowell/pen/LEEzWOr
✅ The finished code: codepen.io/kevinpowell/pen/JodojoQ
✅ Why I don't like min-width: 0: youtu.be/FD3aC_Ke8uk?si=BsgpcAfLRCltNmtk
✅ MDN on accent-color: developer.mozilla.org/en-US/docs/Web/CSS/accent-color
✅ Improve your forms user experience: youtu.be/awNYtIAu6pI?si=2QKKuBqox8MPWxGA
⌚ Timestamps
00:00 - Introduction
00:10 - keeping things in form groups
00:50 - inheriting font properties
01:55 - use grid for forms and form groups
04:20 - dealing with the minimum size of some inputs
06:28 - layout tips
10:50 - strategies for styling specific elements
13:13 - bonus tip: using ch unit for gap
13:50 - accent-color
14:43 - bonus tip: text-box-trim
#css
✉ Keep up to date with everything I'm up to kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: patreon.com/kevinpowell or through YT memberships: youtube.com/@KevinPowell/join
---
🧑💻 My editor: VS Code - code.visualstudio.com
🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia Code
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
