Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Form Styling Essentials - The Basics to Modern CSS Tips and Tricks

Kevin Powell via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
This tutorial explores essential CSS techniques for modern form styling, covering organizational strategies with .form-groups, font property inheritance, and when to choose CSS Grid over Flexbox for form layouts. Learn how to handle minimum input sizes, implement practical layout techniques, use advanced selectors to target specific form elements, and leverage newer CSS properties like accent-color for native styling. Discover bonus tips including using the ch unit for gap spacing and text-box-trim for improved text display. The 19-minute video includes both starting and finished code examples, with comprehensive timestamps covering everything from basic organization to advanced styling techniques.

Syllabus

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

Taught by

Kevin Powell

Reviews

Start your review of Form Styling Essentials - The Basics to Modern CSS Tips and Tricks

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.