Style Forms with CSS

4.8 Average Customer Rating

Detailed form looking dull? Use this course to spruce it up

  • 71 Videos
  • 3 hours 49 minutes
  • 2838 Happy Students

About the course

“Styling forms with CSS” takes you through the process of marking up and styling a detailed form. Along the way you will learn about form elements and their purpose, accessible form markup, and most importantly, how to style form layouts and form elements from the ground up.

  • 71 Videos
  • 3 hours 49 minutes
  • 2838 Happy Students

Courses Outline

Lesson 1: Checking out the design and markup
Free
Lesson 1 - Introduction
2:28
Browser support
0:56
The design
7:08
Finished form zip file
The markup
9:41
Hiding some labels
3:57
Lesson 2: Form elements
Lesson 2 - Introduction
1:29
Lesson 2 zip file
A quick exercise
9:04
Lesson 2 finished zip file
Form elements PDF
Lesson 3: Let's get styling
Lesson 3 - Introduction
1:07
CSS global resets
CSS Font stacks
Lesson 3 zip file
Styling the basic elements
5:23
Styling the container
1:43
Styling the heading
4:02
Styling the form container
4:29
Lesson 3 finished zip file
Lesson 4: Styling the key form elements
Lesson 4 zip file
Lesson 4 - Styling the form div
6:05
Styling the special classes
4:18
Styling the labels
6:40
Styling the legend span
4:44
Styling the inputs
7:23
Lesson 4 finished zip file
Lesson 5: Live Q&A
Live Q&A
Exercise
:before and :after
Recording of Live Q&A session
1:00:22
Lesson 6: Styling buttons and icons
Lesson 6 zip file
Lesson 6 - Introduction
1:49
Styling the submit button
6:37
Styling the select
5:44
Explaining sprites
4:20
About background-positioning
6:18
Using background-positioning
8:40
Lesson 6 finished zip file
Lesson 7: Adding warning styles
Lesson 7 zip file
Lesson 7 - Introduction
1:58
Styling the warning messages
2:39
Styling the links
2:30
Styling the warning div
4:41
Styling the hover
3:01
Styling the input
1:24
Styling the icons
1:54
The Cascade
1:14
CSS Cascade
Lesson 7 finished zip file
Lesson 8: The enhanced design
Lesson 8 - Introduction
2:04
An Intro to CSS3
CSS3 border-radius
CSS3 box-shadow
CSS3 gradients
Lesson 8 zip file
Adding border-radius
6:35
Adding box-shadows
4:12
Adding gradients - part 1
2:38
Adding gradients - part 2
2:30
Adding gradients - part 3
2:57
Lesson 8 - Wrap up
0:37
Lesson 8 finished zip file
Lesson 9: Final testing
Lesson 9 - Introduction
0:29
Lesson 9 zip file
Basic tests
3:02
Time for some validating
3:54
Browser testing
3:36
Dealing with IE
2:33
Wrap up
0:56
Lesson 9 finished zip file
  • 71 Videos
  • 3 hours 49 minutes
  • 2838 Happy Students