CSS styling

Login with your Webflow account to track your progress

CSS styling

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

Webflow has a new UI, so visuals may vary slightly, but the course content is still relevant.

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.

Table of contents

1

Getting started

Coming soon

1

Style panel overview

Style panel overview

Coming soon

1

HTML tags

Coming soon

1

Classes

Coming soon

1

Combo classes

Coming soon

1

Style Manager

Coming soon

1

Text style inheritance overview

Text style inheritance overview

Coming soon

2

Interaction

Coming soon

2

States

Coming soon

2

Transitions

Coming soon

3

Responsive design

Coming soon

3

Breakpoints

Coming soon

4

Typography styles

Coming soon

4

Text shadow

Coming soon

5

Background & border styles

Coming soon

5

Backgrounds

Coming soon

5

Set background images

Set background images

Coming soon

5

Create gradient backgrounds

Create gradient backgrounds

Coming soon

5

Borders

Coming soon

5

Box shadow

Coming soon

6

3D styles

Coming soon

6

3D movement & parallax

3D movement & parallax

Coming soon

6

3D perspective

Coming soon

6

Transforms

Coming soon

7

Effects

Coming soon

7

Opacity

Coming soon

7

Filters

Coming soon

7

Override the default cursor for elements

Override the default cursor for elements

Coming soon

8

Color

Coming soon

8

Color picker

Coming soon

8

Color values

Coming soon

8

Typography

Coming soon

Progress

0%

Details

Intermediate

2h 13m

24

Lessons

Assets & links

Assessment

Test your knowledge

Continue learning

Manage dynamic content with the Webflow CMS

Learn how to create, manage, and display dynamic content across your site using the Webflow CMS.

Web elements

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

Getting started with Webflow Enterprise

Get familiar with Webflow’s website experience platform and Enterprise features.

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

Getting started with Webflow

Get familiar with Webflow’s website experience platform.

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

Design systems in Webflow

Learn how to create a design system in Webflow for consistent and scalable site building.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

Welcome to Optimize

Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and the power of AI.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.