CSS Styling and Typography
Units, color, selectors, type and motion with modern CSS.
Take the CSS basics further and style pages the way professional front end teams do. You will choose between px, em, rem, viewport units and ch, write fluid sizes with calc() and clamp(), use hex, hsl() and oklch() colors and measure their contrast, layer backgrounds and gradients, select precisely with attribute selectors, sibling combinators, :has(), :is() and :where(), set type with font stacks, unitless line heights and self-hosted web fonts, build navigation bars and link states in the right order with a focus ring everyone can see, style form controls, theme a site light and dark with custom properties, and add transitions and animations that respect reduced motion. Every exercise is graded on the styles a real browser computes, and every color you pick must pass WCAG contrast. The course ends with four components: a themeable button set, a blog post card, a pricing table and an accessible contact form.
What you will learn
- CSS units and sizing
- Color and contrast
- Advanced selectors
- Typography
- Web fonts
- Link and focus states
- Custom properties and theming
- Transitions and animations
Lessons
- 1
Values, Units, Sizing and Overflow
px, em, rem, %, viewport units and ch; calc(), min(), max() and clamp(); min and max widths, aspect-ratio, intrinsic size and overflow.
10 exercises
- 2
Color, Backgrounds and Borders
Hex, rgb(), hsl() and oklch() with alpha, currentColor, contrast you can measure, background images and gradients, borders, rounded corners and shadows.
10 exercises
- 3
Selectors in Depth
Attribute selectors, sibling combinators, user action and structural pseudo-classes, :not(), :is(), :where() and :has(), and the ::before, ::after, ::marker and ::placeholder pseudo-elements.
11 exercises
- 4
Typography and Web Fonts
Font stacks, size, weight and style, unitless line height, spacing and decoration that survive reader settings, and loading web fonts with @font-face at a sensible cost.
11 exercises
- 5
Lists, Links, Form Controls and Custom Properties
List markers and navigation bars, link states in LVHFA order, focus you can see, links that do not rely on color, styled form controls, and themes built from custom properties.
10 exercises
- 6
Transforms, Transitions and Animations
translate, rotate and scale, transitions between states, @keyframes animations, animating transform and opacity for performance, and motion that respects prefers-reduced-motion and the flashing and pausing rules.
10 exercises
- 7
Putting It Together
Four components from a brief: a themeable button set with every state, a blog post card, a pricing table and an accessible contact form with a dark theme.
6 exercises
How you practice
You practice in the browser and every exercise gives you feedback right away. This course uses these formats:
- Code exercise: 23
- Fix the bug: 15
- Type the answer: 8
- Predict the output: 6
- Fill in the blank: 6
- Multiple choice: 3
- Match the pairs: 3
- Select all that apply: 2
- Spot the bug: 1
- Reorder lines: 1
Aligned to
- Specialized Platform Development
- SPD-WebWeb Platforms
- Semantic HTML
- 2.3Lists
- CSS fundamentals
- 3.1Basic CSS syntax
- 3.2Selectors
- 3.5Values and units
- 3.6Sizing
- 3.7Backgrounds and borders
- 3.8Overflow
- 3.9Styling form elements
- CSS text styling
- 4.1Fonts and text
- 4.2Styling lists and links
- 4.3Web fonts
- Accessibility
- 7.2Accessible styling
- Perceivable
- 1.4.1Use of Color
- 1.4.3Contrast (Minimum)
- 1.4.11Non-text Contrast
- 1.4.12Text Spacing
- Operable
- 2.2.2Pause, Stop, Hide
- 2.3.1Three Flashes or Below Threshold
- 2.4.7Focus Visible
Proto Node Labs is not affiliated with or endorsed by ACM / IEEE-CS / AAAI, Mozilla and W3C. Exam names are trademarks of their owners.