What is CSS?

CSS (Cascading Style Sheets) is the language that controls how content on a webpage looks and behaves in different layouts. If HTML provides the structure of a page — like the framing and walls of a house — CSS is the paint, furniture, lighting, and even the room layout. 

With CSS, you can:

• Change text color and size
• Add padding and margins (spacing) around elements
• Set background colors or images
• Align content using layout tools like flexbox and grid
• Make a site responsive to different screen sizes

In Webflow, you use the Style panel to set CSS properties visually. When you apply styles in Webflow, CSS is generated automatically behind the scenes.

‍What are Style selectors?

When you apply styles in Webflow — like changing padding, font size, or color — you’re creating or editing a selector. Selectors tell the browser, “This is the element to style, and here’s how it should look.” Using the same selector on multiple elements lets you reuse and update styles consistently across your site.

There are a few main types of selectors:

• Tag selectors let you apply styles to all elements with the same HTML tag, such as all <h1> headings or all <p> paragraphs.
• Classes let you reuse styles by assigning them to individual elements that you want to have the same style, such as a button or section.
• Combo classes are variations that can be layered onto a base class to add or override styles. For example, a button is-secondary combo class could override the button color, but inherit all the rest of the properties from the base button class.  
• Global classes (sometimes called “utility classes") are single-purpose styles that can be added to many different elements. For example, a u-text-center global class could be used to center text, on top of other classes it's assigned.

There’s more to know about each of these, and we’ll dig deeper into them in this course.

How does layout work?

CSS doesn’t just handle styling — it also controls layout. Layout determines where elements go on a page and how they behave when the screen size changes.

In Webflow, you can use CSS layout tools like:

• Flexbox to align items in rows or columns
• Grid to build multi-row or multi-column layouts
• Block and inline display settings to control how elements flow

These tools let you design custom layouts without writing code, while still using the underlying power of CSS.

Parent & child elements in layout

When styling and laying out pages, it's important to understand element hierarchy. A parent element contains nested child elements. For example, a section (parent) might contain a heading, paragraph, and button (children).

CSS layout and styling often depend on this hierarchy. For example, if you set a parent element to Flexbox, it affects how its child elements are aligned and spaced — laying them out in rows or columns based on the options you select.

Ready to start?

Click Complete & continue in the Course progress box on the right to start exploring styling, classes, and layout in Webflow.

Need help finding your way around? Learn how to navigate Webflow University lessons, courses, and learning paths, including how to mark items complete.