INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator

Navigator

New

2:45

Element Basics

Element Basics

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Navbar

Navbar

New

9:38

Slider

Slider

New

4:56

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

States

States

New

2:47

Layout

Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Padding & Margin

Padding & Margin

New

2:48

Display Settings

Display Settings

New

2:54

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Positioning Overview

Positioning Overview

New

1:48

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

Intro to Breakpoints

Intro to Breakpoints

New

INTERACTIONS CORE CONCEPTS

INTERACTIONS CORE CONCEPTS

New

Triggers & animations

Triggers & animations

New

4:31

CMS & Dynamic Content

CMS & Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

Intro to Webflow CMS

Intro to Webflow CMS

New

2:02

CMS Collections

CMS Collections

New

2:05

Collection List

Collection List

New

3:33

Filtering Collection Lists

Filtering Collection Lists

New

2:47

Collection Page

Collection Page

New

3:01

Using the Editor

Using the Editor

New

2:22

CMS Collection Fields

CMS Collection Fields

New

Plain Text Field

Plain Text Field

New

0:51

Rich Text Field

Rich Text Field

New

1:16

Image Field

Image Field

New

1:24

Switch Field

Switch Field

New

0:58

Reference Field

Reference Field

New

1:11

Multi-reference Field

Multi-reference Field

New

2:31

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

This is it. This is the Style Panel. From here, we can control each and every aspect of styling. We can create classes which let us reuse our styles throughout the project.

And we’re going to cover some of the more powerful features and functions of the Style Panel. And this will give us extremely granular control over the way elements are styled throughout our project.

Three things we'll cover: the top section which includes our Selector field, the anatomy of the style sections, and the indicators we'll see when we're using the Style Panel.

Let's start at the top. When we select an element, we can see the element type right at the top of the Style Panel.

Under that is the Selector field. This is where we'll see the option to select a class or a tag which will apply to the selected element. When we're styling, we'll see that class or tag right inside the Selector field.

The other feature here is the target icon. This will give us a page and project count — how many times this class or tag is used.

We can even click on this to toggle a pink or magenta outline to identify these elements if they're visible.

For now, we'll move on to the various style sections.

Some of these have an Advanced toggle. When we activate or deactivate that option, the number of options we can see increases or decreases.

We can also collapse any of these style sections. We can click right on the label for each pane to collapse or expand.

And as we go through Layout, Typography, Background — we can see all the CSS properties we can visually manipulate. We've created instructional content on each of these, but something we want to highlight right now is the indicators we can already see on the screen.

In the Style Panel, orange indicators tell us that a value is being inherited from somewhere else. If we click that orange indicator, we can see exactly where the style is coming from.

If our current class or tag has its own value for something, that's indicated in blue.

So when we collapse these style sections — when these panes are collapsed, the blue and orange indicators are giving us a quick overview so we can glance and see what's affecting the current class or tag.

Now, we can also use the Inheritance Menu to quickly visualize and select from the different classes and tags affecting our current styling. We can make a change — in this case we're changing the font — then, at any time, go right back to where we were styling.

So. We have the top section which contains our Selector field: show's what we're styling.

We have our style sections, which can collapse or expand — these panes give us control over all our CSS properties — all our styling options.

And finally, we have orange and blue indicators. Orange means whatever we're styling is inheriting a value from something else, and blue means we've added or styled something on the current class or tag.

We'll cover all of this comprehensively — but this is a good overview of the layout and the anatomy of the Style Panel.