Sign up to save your podcasts
Or
Share Form Styling Essentials | The basics to modern CSS tips & tricks
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Form Styling Essentials | The basics to modern CSS tips & tricks
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: https://codepen.io/kevinpowell/pen/LEEzWOr
✅ The finished code: https://codepen.io/kevinpowell/pen/JodojoQ
✅ Why I don't like min-width: 0: https://youtu.be/FD3aC_Ke8uk?si=BsgpcAfLRCltNmtk
✅ MDN on accent-color: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
✅ Improve your forms user experience: https://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 https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
🧑💻 My editor: VS Code - https://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: https://codepen.io/kevinpowell/
Github: https://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!
View all episodes
By 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: https://codepen.io/kevinpowell/pen/LEEzWOr
✅ The finished code: https://codepen.io/kevinpowell/pen/JodojoQ
✅ Why I don't like min-width: 0: https://youtu.be/FD3aC_Ke8uk?si=BsgpcAfLRCltNmtk
✅ MDN on accent-color: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
✅ Improve your forms user experience: https://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 https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: https://cssdemystified.com
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join
🧑💻 My editor: VS Code - https://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: https://codepen.io/kevinpowell/
Github: https://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!