HTML and CSS in Webflow

This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production.

This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages.

This page describes how Webflow relates to HTML and CSS as it was on 2026-10-28, the date on which its facts were checked against the official documentation and against the markup of a live, published Webflow site. Webflow is a hosted service without version numbers, so the page is dated rather than versioned; Webflow updates and the developer changelog announce changes, and Product Changes and Deprecations tracks the ones that matter for this sub-section. Everything described here is available on every plan, including the free Starter plan inside a Starter Workspace; the only exception is exporting the code, which needs a paid Workspace plan and is flagged where it appears. Plans are named by tier only, and this page quotes no prices (see Plans, Workspaces, Seats and Roles).

Webflow is often described as a "no-code" tool, and that description hides the most useful fact about it for a designer or developer: the Designer is a visual editor for ordinary web standards. Every element on the canvas becomes an HTML tag, every style becomes a CSS declaration, and the published page is static HTML, CSS and a small amount of JavaScript. Knowing which Designer action writes which line of HTML or CSS is what separates a site that is easy to maintain from one that fights its own styles. This page builds that mental model. The following pages go deep into each area: Elements and Page Structure, Style Panel and Box Model and Classes, Combo Classes and Selectors.

The running example is the Fernbrook Gardens site, a fictitious botanical garden. The examples follow one small job: building a "Plant of the month" card on the Home page, with a photo, a heading, a short text and a button, and looking at the markup and rules Webflow writes for it.

The idea: a visual editor for web standards

A web page is three layers: HTML describes the structure and meaning, CSS describes the presentation, and JavaScript adds behaviour. Webflow keeps these layers separate in its model, exactly as they are on the web.

Structure is the tree of elements in the Navigator. Adding an element from the Add panel inserts a tag; the Settings panel sets its attributes (id, href, alt, aria-label, custom attributes).
Presentation is a set of rules stored against selectors. The Style panel never styles "an element" directly. It edits the rule of the selector currently chosen in the selector field at the top of the panel: a class, a combination of classes, or a tag.
Behaviour is made of Interactions (data attributes plus a script), the built-in widgets (Navbar, Tabs, Slider, Lightbox, Dropdown) and your own custom code.

The consequence for beginners is that "I changed the colour and it changed everywhere" is not a bug: the colour was written to a class, and every element that uses that class follows. The consequence for experienced web developers is reassuring: the mental model of selectors, specificity, the cascade and inheritance applies unchanged. The CSS fundamentals are taught in the HTML & CSS section of this site, to which this page links where relevant, starting with HTML & CSS.

From a Designer action to a CSS rule

flowchart LR A["Select an element on the canvas"] --> B["Selector field: class, combo class or tag"] B --> C["Breakpoint and state: Desktop, Tablet, hover, pressed"] C --> D["Style panel control: Layout, Spacing, Size, Typography..."] D --> E["CSS declaration"] E --> F["Rule stored for that selector, breakpoint and state"] F --> G["Published stylesheet"] G --> H["Page rendered by the browser"]

The diagram is a schematic. A rule in Webflow is always the combination of three choices, and the Style panel shows all three at the top.

Choice Where it is shown What it becomes in CSS

Choice	Where it is shown	What it becomes in CSS
Selector	The selector field with the class name, combo classes or tag name	The left-hand side of the rule: `.plant-card`, `.plant-card.is-featured`, `h2`
Breakpoint	The breakpoint bar in the top bar	A `@media` query wrapping the rule; the base (Desktop) breakpoint has no query
State	The state dropdown next to the selector	A pseudo-class appended to the selector: `:hover`, `:active`, `:focus`, `:focus-visible`

Selector

The selector field with the class name, combo classes or tag name

The left-hand side of the rule: .plant-card, .plant-card.is-featured, h2

Breakpoint

The breakpoint bar in the top bar

A @media query wrapping the rule; the base (Desktop) breakpoint has no query

State

The state dropdown next to the selector

A pseudo-class appended to the selector: :hover, :active, :focus, :focus-visible

Once the three are chosen, every control writes a declaration into that rule. The following sections show the result for the Fernbrook card.

The element becomes a tag

Building the card on the canvas means adding a Div Block, an Image, a Heading, a Text Block and a Link Block or Button inside it. In the Navigator the structure looks like this.

Section
└── Container
    └── Div Block   (class: plant-card)
        ├── Image        (class: plant-card-photo)
        ├── Heading H3   (class: plant-card-title)
        ├── Text Block   (class: plant-card-text)
        └── Link Block   (class: plant-card-button)

The markup that Webflow publishes for the same structure is plain HTML. The class names are exactly the ones typed in the selector field, and Webflow adds a few utility classes with the w- prefix where a built-in behaviour needs them (a Container becomes w-container, an inline-block link gets w-inline-block).

<section class="section-plants">
  <div class="w-container">
    <div class="plant-card">
      <img src="https://cdn.prod.website-files.com/SITE_ID/ASSET_ID_hellebore.jpg"
           loading="lazy" alt="Pink hellebore flowers in the shade garden"
           class="plant-card-photo">
      <h3 class="plant-card-title">Hellebore</h3>
      <div class="plant-card-text">A winter-flowering perennial for the shade garden.</div>
      <a href="/plants/hellebore" class="plant-card-button w-inline-block">
        <div>Read more</div>
      </a>
    </div>
  </div>
</section>

The identifiers SITE_ID and ASSET_ID are placeholders for the values Webflow generates. The code shows the typical shape of the output; the exact attributes differ between element types and over time, and the Navigator names ("Div Block 3") are never published.

Source: Webflow Help Center: Style panel overview

The Style panel writes declarations

Selecting plant-card and setting padding, a border radius and a background in the Style panel writes the following rule.

.plant-card {
  padding: 24px;
  border-radius: 8px;
  background-color: #f4f1ea;
}

Switching the breakpoint bar to Tablet and reducing the padding writes a second rule, wrapped in a media query, that only overrides the property that changed.

@media screen and (max-width: 991px) {
  .plant-card {
    padding: 16px;
  }
}

Selecting hover in the state dropdown and changing the background writes a third rule with a pseudo-class.

.plant-card:hover {
  background-color: #e9efe2;
}

The Designer does not show the CSS text; it shows the controls, and the generated CSS is the faithful translation of those controls. Reading the controls as CSS is the skill this page teaches. The breakpoint widths and the cascade between breakpoints are explained in Responsive Design and Breakpoints; for the base breakpoint, "Desktop" is the starting point and Tablet (991 px and below), Mobile landscape (767 px and below) and Mobile portrait (478 px and below) cascade down from it.

Source: Webflow Help Center: Style panel overview

Classes, combo classes and tags

A class is a selector you create by naming it. An element can carry several classes. A combo class is a class added on top of another so that the rule applies only to the element that has both; Webflow writes it as a compound selector.

.plant-card.is-featured {
  border: 2px solid #3b6b3a;
}

An element (tag) selector such as "All H3 Headings" writes a rule against the tag itself, and so affects every h3 on the site that does not override it. The Style selectors panel lists every class, combo class and tag selector the site has, with tags in one colour and classes in another, so they can be renamed, reviewed and cleaned. The design guidance and the cost of overusing tag selectors are discussed in Classes, Combo Classes and Selectors and the naming conventions in Class Naming Systems. The rules of specificity that decide which of these rules wins are the standard CSS ones, covered in Selectors and Specificity.

Source: Webflow Help Center: Style selectors panel

Mapping Designer concepts to web standards

In the Designer In the published site Notes

In the Designer	In the published site	Notes
Element (Div Block, Heading, Link Block…)	An HTML tag with attributes	The Settings panel can change the tag of many elements (for example a Div Block to `header`, `main` or `article`), which matters for accessibility and SEO
Class	A class attribute and a `.name` rule	Shared by every element that carries it
Combo class	An additional class and a `.base.combo` rule	Overrides the base only when both are present
Tag selector	A rule such as `h2 { ... }`	Affects all elements of that tag
State	A pseudo-class on the rule	`:hover`, `:active`, `:focus`, `:focus-visible`, `:visited`, placeholder and others
Breakpoint	A `@media` query around the rule	Desktop is the base and has no query
Variable	A CSS custom property and `var()`	See Variables and Modes
Component	The markup of each instance	The definition stays in the Designer
Interaction	Data attributes plus script	See Interactions with GSAP
Custom attribute	An attribute on the tag	`aria-` and `data-` are common examples
Navigator name	Nothing	Exists only in the Designer

Element (Div Block, Heading, Link Block…)

An HTML tag with attributes

The Settings panel can change the tag of many elements (for example a Div Block to header, main or article), which matters for accessibility and SEO

Class

A class attribute and a .name rule

Shared by every element that carries it

Combo class

An additional class and a .base.combo rule

Overrides the base only when both are present

Tag selector

A rule such as h2 { ... }

Affects all elements of that tag

State

A pseudo-class on the rule

:hover, :active, :focus, :focus-visible, :visited, placeholder and others

Breakpoint

A @media query around the rule

Desktop is the base and has no query

Variable

A CSS custom property and var()

See Variables and Modes

Component

The markup of each instance

The definition stays in the Designer

Interaction

Data attributes plus script

See Interactions with GSAP

Custom attribute

An attribute on the tag

aria-* and data-* are common examples

Navigator name

Nothing

Exists only in the Designer

The structure of a published page

A published Webflow page is a normal HTML document. The following is the skeleton of a page, abbreviated from the markup of a live site published by Webflow on 2026-10-28 and adapted to the Fernbrook example. The generated file names carry a hash that changes whenever the content changes, so the names below are placeholders of the same shape.

<!DOCTYPE html>
<!-- This site was created in Webflow. https://webflow.com -->
<!-- Last Published: Wed Oct 28 2026 09:13:26 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-domain="fernbrook.example" data-wf-page="PAGE_ID" data-wf-site="SITE_ID" lang="en">
<head>
  <meta charset="utf-8">
  <title>Fernbrook Gardens</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="https://cdn.prod.website-files.com/SITE_ID/css/fernbrook.webflow.shared.HASH.min.css"
        rel="stylesheet" type="text/css">
  <link href="https://cdn.prod.website-files.com/SITE_ID/css/fernbrook.webflow.PAGE_ID.HASH.min.css"
        rel="stylesheet" type="text/css">
  <!-- site and page custom code (head) -->
</head>
<body>
  <!-- the page elements -->
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.HASH.js?site=SITE_ID"></script>
  <script src="https://cdn.prod.website-files.com/SITE_ID/js/webflow.HASH.js"></script>
  <!-- site and page custom code (footer) -->
</body>
</html>

The pieces, in the order they appear, are the following.

The comment lines. The first comment states that the site was created in Webflow, and the second states when it was last published. Both are added by Webflow.
The html tag. It carries data-wf-site (the identifier of the site), data-wf-page (the identifier of the page), data-wf-domain (the domain the page was published for) and lang. Webflow uses these identifiers to match a page with its project, for example when a form submission is sent to Webflow, and its scripts rely on them, so they should not be removed. On a published site they also show that the page came from Webflow.
The shared stylesheet. <site>.webflow.shared.<hash>.min.css holds the styles common to the whole site: the normalisation rules, the base Webflow framework styles and the rules of the site’s classes. It is cached across pages.
The page stylesheet. <site>.webflow.<page id>.<hash>.min.css holds the rules that only that page needs. Splitting shared and page rules keeps each page’s own download small. This two-file layout is what the markup of a published site showed on 2026-10-28; earlier sites used a single site stylesheet, and exported code still lays the files out as described in the next section.
The body. The elements of the page, with their classes and attributes.
The scripts. A jQuery build served from a Webflow-controlled content network, then webflow.js, which initialises the built-in widgets (Navbar, Tabs, Slider, Lightbox, Dropdown), the Interactions, form handling and the w-mod-* helper classes.

Webflow scripts also add classes to the html element at run time: w-mod-js once JavaScript runs, w-mod-touch on touch devices and w-mod-ix when Interactions are used. A rule that starts with html.w-mod-js therefore does not apply until webflow.js has run, which is the reason some initial states set by Interactions are hidden only when scripts are available.

Source: Webflow Help Center: How do I export my Webflow site code?

What the stylesheet contains

The first part of the shared stylesheet is a normalisation layer: a set of rules in the spirit of the widely used normalize.css that makes browsers render elements consistently (the html text-size adjustment, body { margin: 0 }, main, nav and section as block elements, form controls inheriting the font, and so on). Then come the base styles of the Webflow framework, whose selectors start with w-: containers, rows and columns of the legacy grid, buttons, the Navbar, Dropdown, Tabs, Slider, Lightbox and rich text. After these come the site’s own rules, one per class, breakpoint and state.

/* Normalisation (excerpt) */
html { -webkit-text-size-adjust: 100%; font-family: sans-serif; }
body { margin: 0; }
article, aside, footer, header, main, nav, section { display: block; }

/* Webflow framework (excerpt) */
* { box-sizing: border-box; }
.w-container { max-width: 940px; margin-left: auto; margin-right: auto; }
.w-inline-block { max-width: 100%; display: inline-block; }

/* The site's own classes */
.plant-card { padding: 24px; border-radius: 8px; background-color: #f4f1ea; }

Two points follow from this layout.

box-sizing: border-box is global. The framework sets it on every element, so the width and height set in the Size section include padding and border unless the element’s box sizing is changed. This explains why a 300 px wide card with padding is still 300 px wide in Webflow, unlike in a bare HTML file where content-box is the default. The next sections explain the box model in detail.
Framework classes are not yours. Rules whose selectors start with w- come from Webflow. Overriding them with your own classes is normal, but renaming or deleting an element that uses them in custom code is an easy way to break a widget.

The w- classes are an implementation detail that can change without notice; do not build CSS or JavaScript on them when a class of your own can be used instead.

Source: Webflow Help Center: How do I export my Webflow site code?

Seeing the generated code

There is no code editor for the design in the Designer; the generated CSS is not meant to be edited by hand. There are four ways to look at it.

Method What it shows Requirements

Method	What it shows	Requirements
Preview mode and the browser’s developer tools	The real rendered markup and styles of the page at a chosen width	None
The published or `webflow.io` staging site and the browser’s developer tools	The final output, exactly as visitors receive it	The site must be published
Code export	The whole site as HTML, CSS, JS and image files in a ZIP	A paid Workspace plan
The Designer API and the Data API	Elements, styles and variables as structured data	A Developer workspace or an app; see the developer pages

Preview mode and the browser’s developer tools

The real rendered markup and styles of the page at a chosen width

None

The published or webflow.io staging site and the browser’s developer tools

The final output, exactly as visitors receive it

The site must be published

Code export

The whole site as HTML, CSS, JS and image files in a ZIP

A paid Workspace plan

The Designer API and the Data API

Elements, styles and variables as structured data

A Developer workspace or an app; see the developer pages

Preview mode and the browser tools

Preview mode hides most of the interface and shows the page much as it will behave once published. Custom code is turned off in Preview by default and must be enabled with a toggle at the bottom left of the canvas; when it is enabled, the page is served from a <short name>.canvas.webflow.com address so that scripts that depend on the domain behave. Opening the browser’s developer tools on the Preview shows the exact element tree, the classes applied and the computed styles, which is the fastest way to find out why a value is not what you expected.

Right-clicking an element and choosing Inspect in Chrome is also the best way to find the source of an unexpected value, because the Styles tab lists the matching rules from the most to the least specific and strikes through the ones that were overridden.

Source: Webflow Help Center: Preview mode

Code export

A paid Workspace plan allows exporting the site’s code from the Site settings. The export is a ZIP archive with an HTML file for every static page and three folders.

fernbrook-gardens/
├── index.html
├── visit.html
├── 404.html
├── css/
│   ├── normalize.css
│   ├── webflow.css
│   └── fernbrook-gardens.webflow.css
├── js/
│   └── webflow.js
└── images/
    └── hellebore.jpg

The export is the same layered CSS that the published site uses, separated into three files so the Webflow framework is distinguishable from your own rules. The names and the exact layout can differ between exports and over time, which is why the list above is indicative. Several things are not part of an export: the CMS (Collection pages become a single template and the items are not included), Ecommerce, code components, localized content and anything that depends on Webflow’s services, such as form handling and site search. Export is therefore best suited to static marketing pages, to prototypes and to handing a design to a developer, and not to taking a CMS-driven site off Webflow. The decisions around portability, hosting the export elsewhere and the alternatives are covered in Code Export and Portability.

Source: Webflow Help Center: How do I export my Webflow site code?

The box model in Webflow

Every element on a web page is a rectangular box with four layers, from the inside out: the content, the padding, the border and the margin. This is true in any HTML page and is explained in The CSS Box Model. The Style panel exposes the four layers directly.

Content. Set in the Size section (width, height, min and max, overflow, aspect ratio). The content box is what contains the text, the image or the child elements.
Padding. Set in the Spacing section, on the inner edges, to separate the content from the border. In the Style panel the padding values are shown inside the box diagram.
Border. Set in the Borders section. It surrounds the padding and is also where the radius is set.
Margin. Set in the Spacing section, on the outer edges, to separate the box from its neighbours. Vertical margins of adjacent blocks can collapse in normal flow, as in plain CSS.

The Spacing section draws the margin and the padding as nested boxes around the element, and clicking on a side edits that side.

/* Margin outside the border, padding inside it */
.plant-card {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid #c9d3c0;
  width: 320px;
}

Box sizing

Because the framework sets box-sizing: border-box, the 320 px in this rule is the width of the content, padding and border together, so the card is 320 px wide in total. If an element is switched to content-box in the Size section, the same 320 px applies to the content only, and the card becomes 320 plus 48 plus 2 = 370 px wide. Mixing the two models on elements that sit side by side is a frequent source of "why is this 6 pixels wider" problems. The recommendation is to leave the global border-box alone and change the box sizing on a single element only when it is really needed. The detailed comparison of the two models is in the HTML & CSS section, and the panel-level treatment is in Style Panel and Box Model.

Block, inline and display

Which boxes can have a width, a height and vertical margin depends on the display of the element, set in the Layout section.

Display	Behaviour	Typical Webflow elements
Block	Starts on a new line and fills the available width	Section, Container, Div Block, Heading, Paragraph
Inline	Flows with the text; width, height and vertical margins are ignored	Text Link, a span inside text
Inline block	Flows with the text but accepts width, height and margins	Link Block, Button
Flex	A flex container laying out its children in one dimension	Div Block set to Flex, Quick Stack
Grid	A grid container laying out its children in two dimensions	Grid element, Div Block set to Grid
None	The element is not rendered and takes no space	Elements hidden for a breakpoint

Display

Behaviour

Typical Webflow elements

Block

Starts on a new line and fills the available width

Section, Container, Div Block, Heading, Paragraph

Inline

Flows with the text; width, height and vertical margins are ignored

Text Link, a span inside text

Inline block

Flows with the text but accepts width, height and margins

Link Block, Button

Flex

A flex container laying out its children in one dimension

Div Block set to Flex, Quick Stack

Grid

A grid container laying out its children in two dimensions

Grid element, Div Block set to Grid

None

The element is not rendered and takes no space

Elements hidden for a breakpoint

Choosing between Flex and Grid, their properties and the CSS each one writes are the subject of Flexbox and Grid Layouts, with the underlying standard explained in Layout. Setting Display: None on a breakpoint hides the element on that breakpoint and below; it is a style, so it does not remove the element from the page source.

Inheritance and the cascade

Two mechanisms decide the final value of every property: inheritance and the cascade. They are standard CSS, and the Style panel makes both visible.

Inheritance

Some properties are passed from a parent to its children when the child does not set a value of its own. Typography properties (font family, size, weight, line height, colour, text alignment, letter spacing) are inherited. Layout properties (margin, padding, border, width, background) are not. For the Fernbrook page, a font set on the Body is the font of every paragraph unless something overrides it, but a background set on a section does not flow into its children.

body {
  font-family: "Source Sans 3", Arial, sans-serif;
  color: #26332a;
  line-height: 1.5;
}
/* The card, heading and text inherit font family, colour and line height. */

This is the recommended way to build a type system: set the family, colour and line height once on the Body, set sizes on the headings and on a small number of text classes, and let everything else inherit. Typography is developed in Typography and Fonts.

The cascade

When more than one rule matches an element and sets the same property, the browser chooses the winner by three criteria, in order.

Importance. Declarations marked !important beat normal ones. Webflow does not offer a control for it, so it appears only in custom code.
Specificity. The more specific selector wins. A combo class (.plant-card.is-featured) is more specific than its base class (.plant-card), and a class is more specific than a tag.
Order. When specificity is equal, the rule that appears later in the stylesheet wins.

The breakpoints add one more dimension. Webflow writes the media queries so that, for the same selector, the rule for a narrower breakpoint appears after the Desktop rule and therefore wins on narrow viewports; for the larger breakpoints (1280, 1440 and 1920 px) the rules cascade upwards. Both directions are explained in Responsive Design and Breakpoints.

How the Style panel shows where a value comes from

The Style panel labels each property by the colour of its name or value, which tells you where the value you are seeing is defined.

Indicator	Meaning
Blue	The value is set on the selector currently being edited at the current breakpoint and state
Amber (orange)	The value is inherited, from a parent element or from another breakpoint, state or class, and is not set here
No colour	The property is at its default and has not been set anywhere

Indicator

Meaning

Blue

The value is set on the selector currently being edited at the current breakpoint and state

Amber (orange)

The value is inherited, from a parent element or from another breakpoint, state or class, and is not set here

No colour

The property is at its default and has not been set anywhere

Hovering over a coloured label tells you where the value is defined, and the label’s menu lets you clear it, so the property is inherited again. Clearing a value is different from setting it to zero: clearing removes the declaration from the rule, while zero writes one. Reading these indicators before changing a value is the most useful habit in the Designer, because it answers the question "if I change this, what else changes?" before the change is made. In practice a quick check is: look at the selector name, look at the breakpoint, then look at the colour of the property.

Source: Webflow Help Center: Style panel overview

Webflow’s defaults and resets

A new Webflow site starts with two kinds of defaults.

Browser normalisation and the framework (described above), which cannot be edited.
Default tag styles, such as the size and margins of headings and the family and colour of the Body. These are real rules, visible and editable in the Style panel when the tag selector (for example "All H1 Headings" or "Body (All Pages)") is selected.

A new site therefore does not look like an unstyled HTML page. A common practice is to define the site’s typography on the Body and on the tags, and to build everything else with classes. This keeps the number of rules small and the default look of any new element acceptable. Setting a global rule is cheap, but it also affects every page, including CMS templates and anything added later by another team member. The effect of those tag selectors on specificity is covered in the classes page.

Beyond the Style panel: custom CSS

The Style panel covers most of CSS, but not all of it. For the rest there are several places to add your own CSS, each with a different scope.

Site settings, Custom code, Head code. A style block that applies to every page.
Page settings, Custom code, Inside head tag. A style block for one page.
Embed element. A style block placed in the middle of the page, used for rules that depend on the content next to it.
Custom properties. In the Style panel, Custom properties lets you add an arbitrary CSS property and value to a class, which is the cleanest option because the declaration stays attached to its class and follows the breakpoint, state and combo rules of every other style.

<style>
  /* Fernbrook: smooth scrolling for in-page links */
  html { scroll-behavior: smooth; }

  /* Respect users who ask for less motion */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
</style>

Code in the head or in an embed is not executed on the canvas; check it in Preview with custom code enabled or on the published site. The practice of keeping custom CSS short, and attaching it to classes through Custom properties wherever possible, is developed in Custom Code: Head, Footer and Embeds. Variables, which are written to CSS custom properties, are described in Variables and Modes.

Source: Webflow Help Center: Style selectors panel

Working with the generated code: a short session

The following exercise ties the page together using the Fernbrook card.

Add a Div Block to the Home page and give it the class plant-card. In the Style panel, set padding to 24 px, background to the Fernbrook cream and a border radius of 8 px. Note the blue indicators on those three properties.
Add a Heading inside the card and give it the class plant-card-title. Notice that its colour and font appear in amber, because they are inherited from the Body.
Switch the breakpoint bar to Tablet and reduce the card padding to 16 px. The property is blue on Tablet and amber on Mobile, because Mobile inherits from Tablet.
Add a combo class is-featured to the card and give it a green border. Create a second card with only the base class and confirm that it has no border.
Open Preview, turn the browser’s developer tools on, and select the card. Compare the Styles tab with what you set: the .plant-card rule, the .plant-card.is-featured rule and the Tablet media query are all there.
Publish to the webflow.io staging domain and view the page source to find the two stylesheets and the scripts described above.

If a value differs from what you expected, the cause is nearly always one of three things: the wrong selector was being edited, the wrong breakpoint was selected, or the value is inherited from a parent. The Style panel’s colours and the browser’s tools together answer all three.

Common mistakes and pitfalls

Editing a class when only one element should change. The change applies to everything with that class. Check the selector and the count of elements using it, and use a combo class for a variation.
Styling Tablet when the problem is on Desktop. Always check the breakpoint label before changing a value.
Overusing tag selectors. A rule on "All H2 Headings" changes every h2, including those in CMS rich text and in components. Prefer classes for anything that is not the site’s baseline.
Relying on w- classes. They belong to Webflow’s framework and can change. Use your own classes for your own CSS and JavaScript.
Removing the data-wf-* attributes or the stylesheets from exported code. The attributes and files are part of what keeps forms, widgets and Interactions working.
Expecting the export to include the CMS. It does not; CMS-driven pages become templates without their items.
Judging custom CSS on the canvas. Custom code does not run on the canvas, so verify it in Preview with custom code enabled.
Mixing content-box and border-box on neighbouring elements. It produces boxes whose total sizes disagree.
Judging specificity by eye. When two rules disagree, use the browser tools to see which one won instead of guessing.

Corrections to older tutorials

The book Webflow by Example (Packt, 2021) explains the box model, block and inline display, and inheritance in its second chapter and uses them to explain the Style panel. Those explanations are standard web concepts and remain correct. What has changed is the interface and the output around them. The book’s screenshots use the Designer as it was before the 2023 redesign, the Style panel’s sections have been rearranged, and the published structure now uses a shared stylesheet plus a page stylesheet where older exports and tutorials show a single site stylesheet and separate normalize.css and webflow.css files. Where the book and the official documentation disagree on a label or a location, follow the Help Center. The full list of outdated claims is in Where Older Books and Tutorials Are Outdated.

Where to go next

To see how elements and the page structure are built, read Elements and Page Structure.
To learn every Style panel section and the CSS it writes, read Style Panel and Box Model.
To learn how classes, combo classes and states compile to selectors, read Classes, Combo Classes and Selectors.
To learn the underlying web standards in depth, read HTML Structure, The CSS Box Model and Variables and Media Queries.

HTML and CSS in Webflow

The idea: a visual editor for web standards

From a Designer action to a CSS rule

The element becomes a tag

The Style panel writes declarations

Classes, combo classes and tags

Mapping Designer concepts to web standards

The structure of a published page

What the stylesheet contains

Seeing the generated code

Preview mode and the browser tools

Code export

The box model in Webflow

Box sizing

Block, inline and display

Inheritance and the cascade

Inheritance

The cascade

How the Style panel shows where a value comes from

Webflow’s defaults and resets

Beyond the Style panel: custom CSS

Working with the generated code: a short session

Common mistakes and pitfalls

Corrections to older tutorials

Where to go next

References