CSS styling

Start off the year with a 21-day portfolio challenge

Intermediate
1hr 30min

Start off the year with a 21-day portfolio challenge

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.

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

Yes, this course is from the future.

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

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
Typography
21:28
Coming soon

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12
Bring your portfolio to life
13

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

Course outline

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

Related courses

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!
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!
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!
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

Transcript
Download assets
Clone this project
Read the full article

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.

Transcript
Download assets
Clone this project
Read the full article

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.

Transcript
Download assets
Clone this project
Read the full article

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.

Transcript
Download assets
Clone this project
Read the full article

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
Transcript
Download assets
Clone this project
Read the full article

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.

Transcript
Download assets
Clone this project
Read the full article

Backgrounds

Setting the background on an element gives you control over appearance and legibility. In the Backgrounds section of the Style panel, you can add a background image, gradient, or color to most elements (except media elements like video and image).

Transcript
Download assets
Clone this project
Read the full article

Create gradient backgrounds

Transcript
Download assets
Clone this project
Read the full article

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.

Transcript
Download assets
Clone this project
Read the full article

Override the default cursor for elements

Transcript
Download assets
Clone this project
Read the full article

Typography

Format your text with search engines and accessibility in mind.

Transcript
Download assets
Clone this project
Read the full article

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

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

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

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