Light mode Switch to Dark mode High contrast

All courses

Lay out & style your site

Login with your Webflow account to track your progress

Lay out & style your site

Learn how to lay out and visually style pages to fit your look and brand.

In this course, you’ll learn how CSS properties give you control over where elements are placed and how they look on pages. You’ll explore how to apply and reuse styles with classes, helping you build consistently and stay on brand.

This course is designed for website builders — those who lead or support the hands-on design and building of websites, and who have design permissions in Webflow.

By the end of this course, you’ll know:

• What CSS is, how CSS properties work, and how to set them in Webflow’s Style panel
• How to organize and manage styles on a site via the Style selectors panel
• How and when to use classes, combo classes, and global classes
• How elements inherit styles from classes, tags, and other style selectors
• How to use layout tools like flexbox, grid, and block display to build structured, responsive pages
• How to develop a class naming system that’s scalable, clear, and easy to manage

Table of contents

1

Getting started

Coming soon

1

Background & preview 2:00

Background & preview

Coming soon

1

Intro to styling in Webflow 6:38

Intro to styling in Webflow

Coming soon

2

Style selectors

Coming soon

2

Style selectors 3:46

Style selectors

Coming soon

2

Working with classes in Webflow 10:21

Working with classes in Webflow

Coming soon

2

Review: Style selector types 3:00

Review: Style selector types

Coming soon

2

Viewing & managing selectors 2:00

Viewing & managing selectors

Coming soon

3

Layout & display settings

Coming soon

3

Intro to the box model 3:04

Intro to the box model

Coming soon

3

Intro to CSS layout 10:48

Intro to CSS layout

Coming soon

3

Review: CSS layout 3:00

Review: CSS layout

Coming soon

4

Wrap up

Coming soon

4

Bonus: Class naming convention 2:00

Bonus: Class naming convention

Coming soon

4

Additional resources 2:00

Additional resources

Coming soon

Progress

0%

Details

Beginner

49m

11

Lessons

Assets & links

Assessment

Test your knowledge

Enroll Now →

Continue Learning

<h3>Intro to Optimize</h3>Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and AI Optimize.

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

<h3>Prepare to publish your site</h3>Learn how publishing works in Webflow, manage site changes with confidence, and prepare for launch.

<h3>Webflow SEO fundamentals</h3>Learn how to plan, build, and maintain a search-friendly Webflow site using best practices and built-in SEO tools.

<h3>Take your app live with Webflow Cloud</h3>Prepare and deploy an existing app, connect live data, and keep it running.

<h3>Collaborate with your team</h3>Learn how to set up roles, permissions, and workflows in Webflow so your entire team can work together safely, confidently, and efficiently.

{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Lay out & style your site",
  "description": "Learn how to lay out and visually style pages to fit your look and brand.",
  "url": "https://university.webflow.com/courses/lay-out-style-your-site",
  "inLanguage": "en",
  "provider": {
    "@type": "Organization",
    "name": "Webflow University",
    "sameAs": "https://university.webflow.com"
  }
}