Learn how to add basic text styles to forms.
- [Tutor] Forms will work perfectly okay…without any styles at all,…but you can use CSS to make them look more consistent,…visually appealing and match the overall design…of your site.…In the next few videos, we'll be looking at how…to style individual form elements.…With this video, we'll start by just looking…at how to style a color and size of text…on various input types.…Usually elements inherit font styles…from the containing element,…for example, if you apply font-family to a body element,…it's inherited by most elements in the body,…but that doesn't always work in forms,…some elements may not inherit font-family or font-size.…
So for example, on this form you can see…that most of the text on here is a serif text,…there's no styles on this page at all…or you can see already on the Choose File button…and No file chosen text next to it,…those are a sans serif,…so they're obviously not the same typeface,…also if you type in the fields here,…that's also a sans serif,…so it's a different typeface than the text on the page.…
- How users interact with forms
- Designing forms that are easy to use
- Following data privacy laws when collecting information
- Choosing which HTML input types to use
- Adding buttons
- Adding interactive validation
- Styling form fields with CSS
- Using positioning and flexbox to create responsive form layouts
Skill Level Beginner
1. Designing a Form Experience
2. Creating Forms with HTML
3. Making Forms Interactive
4. Styling Form Fields with CSS
5. Form Layout with CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.