Summary

CSS opens a wide array of options for styling the content (HTML) on your site — but wrapping your head around them when you're just getting started can be tough. This course walks through the different CSS styling options you can use in your designs, and shows you how to apply them visually using Webflow.

Use this version to clone the completed project
Blank pages without hitting page limits
Enroll for free

Lessons in this course

Getting started

Coming soon

Style panel overview
3:15
Coming soon

HTML tags
8:43
Coming soon

Classes
14:57
Coming soon

Style Manager
1:56
Coming soon

Text style inheritance overview
3:18
Coming soon

Interaction

Coming soon

States
2:47
Coming soon

Transitions
2:40
Coming soon

Responsive design

Coming soon

Breakpoints
16:00
Coming soon

Style across breakpoints
3:03
Coming soon

Typography styles

Coming soon

Set a default line height
1:38
Coming soon

Text shadow
2:36
Coming soon

Background & border styles

Coming soon

Backgrounds
8:15
Coming soon

Set background images
2:04
Coming soon

Create gradient backgrounds
3:02
Coming soon

Borders
7:14
Coming soon

Box shadow
3:34
Coming soon

3D styles

Coming soon

3D movement & parallax
2:25
Coming soon

3D Perspective
4:01
Coming soon

Transforms
4:53
Coming soon

Effects

Coming soon

Opacity
1:44
Coming soon

Filters
2:59
Coming soon

Override the default cursor for elements
1:45
Coming soon

Color

Coming soon

Color picker
3:51
Coming soon

Color values
3:22
Coming soon

Typography
21:28
Coming soon

CSS styling

30
Lessons
Getting started

Getting started

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
Interaction

Interaction

Coming soon

Coming soon

Coming soon
Responsive design

Responsive design

Coming soon

Coming soon

Coming soon
Typography styles

Typography styles

Coming soon

Coming soon

Coming soon
Background & border styles

Background & border styles

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
3D styles

3D styles

Coming soon

Coming soon

Coming soon

Coming soon
Effects

Effects

Coming soon

Coming soon

Coming soon

Coming soon
Color

Color

Coming soon

Coming soon

Coming soon

Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Style panel overview

Download assets
Clone this project
Transcript
Learn more

HTML tags

In Webflow, HTML tags give us an easy way to control the default styling for a particular element, without creating a unique class. For example, you can define the default styles for all paragraphs by editing the All Paragraphs tag. Adding a class with styles will override these default styles.

Download assets
Clone this project
Transcript
Learn more

Classes

Making manual style changes to each and every element is tedious and time-consuming. And entering repetitive values for hours and then trying to update those values one by one can be frustrating. Classes save styling information that you can apply to as many elements as you want throughout your project.

Download assets
Clone this project
Transcript
Learn more

Style Manager

The Style Manager displays the complete list of classes, combo classes, and tags you've created or edited in your project. Here, you can quickly rename or clean up any styles you aren't using anymore.

You'll find the Style Manager in the right panel. Just click the tab or press G to open it. In this video, we'll cover the contents of the Style Manager, and show you how to delete individual styles, rename classes, and even clean out all your unused styles with a single click.

Download assets
Clone this project
Transcript
Learn more

Text style inheritance overview

In Webflow, as in code, elements pass their typographic style information down to their children. You can set text styles on parent elements, these styles will cascade down, and you can override these styles on their child elements.

It’s common to use this technique to set global font styles on the Body tag, to align text and other elements inside of sections, and to override default link block styles. In this article, we’ll cover three examples of how text style cascading works:

  1. From the body tag
  2. ‍From Webflow's section element
  3. ‍From Webflow's link block
Download assets
Clone this project
Transcript
Learn more

States

To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style.

In this video, we'll explain the four states you can style for any element:

  1. None
  2. ‍Hover
  3. ‍Pressed
  4. ‍Focused

Then show you how to style those states to indicate interactivity. Then we'll dig into applying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links.

Download assets
Clone this project
Transcript
Learn more

Style across breakpoints

Download assets
Clone this project
Transcript
Learn more

Set a default line height

Download assets
Clone this project
Transcript
Learn more

Set background images

Download assets
Clone this project
Transcript
Learn more

Create gradient backgrounds

Download assets
Clone this project
Transcript
Learn more

3D movement & parallax

In this article we’ll cover some fundamental 3D concepts on the web. Check out the 2D & 3D transforms guide to learn how to put these concepts into practice on your Webflow project.

Download assets
Clone this project
Transcript
Learn more

Override the default cursor for elements

Download assets
Clone this project
Transcript
Learn more

Typography

Format your text with search engines and accessibility in mind.

Download assets
Clone this project
Transcript
Learn more

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser
Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits
Download course assets

Directed by

McGuire Brannon

Director of Education

Produced by

Stacy Han

Video Producer

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Anna Kelian

Learning & Development Coach

Edited by

Stacy Han

Video Producer

Grímur Grimsson

Video Producer

Designs by

-

Related courses

Be the first to get the newest lessons

We release 2 new lessons every week, always first on Webflow University.

Sign up to learn more about Webflow University releases, including lesson and course launches, certifications, sneak peaks, and Grímur's top secret tips for reversing time.

Shoot, something didn't work. Try again later, bud.