Revisit the explanations and examples from the video, then open the guided exercises and animations when you need a specific step. To start the tutorial, return to the lesson and load the file into your AI assistant.
This explanation brings back ideas and examples from the original video, updated with the tutorial’s technical clarifications. Read it as a review or jump to the section you need.
A class connects one or more elements to a set of style rules. If three cards share a class, changing its background can update all three. Titles and paragraphs inside each card remain separate content: changing the words in one card does not change the others.
To picture a shared style, think of one clothing design worn by several elements. The analogy helps explain shared styling, but an actual page depends on the classes applied, their combinations and overlapping rules. Sharing one class does not make two elements identical in every respect.
Rename: changing the shared name
Imagine renaming a class from “service-card” to “project-card”. Rename changes the name of the shared class, so the other elements using it remain connected under its new name. It does not create an independent class for the selected card.
Before renaming, decide whether you want to change the label of the common style. If you want one card to behave independently, choose a different operation.
Duplicate class: start with a style, then make it independent
For example, you may want to turn a vertical card into a horizontal card while keeping part of its appearance. Duplicate class creates a separate class with a copy of the rules. You can then edit it without changing the original class.
Duplicating a class and duplicating an element are different actions. The first separates the style; the second creates another element that may keep using the shared class. Choose according to what you want to keep connected.
Combo class: a variation in the right context
A combo class lets you define a variation when a class is applied together with its base. For example, a card can keep its common styling while using a variant with a different background. The base still contributes, so you do not need to copy all its properties.
Check the combination selected in the Style panel. The change affects elements matching that combination, not just the selected element. The variant’s name alone does not tell you which elements receive the rule: the class context matters too.
Utility: reuse a specific choice
A utility is an ordinary class used for a focused purpose, such as a color or spacing. Prefixes such as “u-” and “g-” are naming conventions, not special Webflow commands.
Applying a utility and editing it are different actions. If you edit it with another class already in the selector, you may be working on their combination. To update the utility’s shared rule, select its isolated context and check the effect on elements using it. The class does not turn into a different type: the context in which you save the rule changes.
Names on the published site
When adding custom CSS or JavaScript, check the actual class name on the published site. That is the name your code must find. Avoid reconstructing it from memory based on what you typed in the Designer.
This becomes useful when you start writing code. For the tutorial exercises, focus first on which elements share a rule and which ones an edit will affect.
Revisit the guided exercises and animationsOn this page
Before starting
This lesson is for someone who can add and select elements in the Designer and
wants to understand which elements change when a class is edited. We will share
a style, rename a class, create an independent copy, and use combo and utility
classes deliberately. Finally, you will apply those choices to a different example. By the end, you should be able to choose a shared class, independent class, combo or utility for the effect you want, and predict which elements an edit reaches. The final new-case challenge checks that understanding with your own solution.
You may explore the concepts or work in a blank practice project. For hands-on
work the tutor guides setup and confirms the exercise site/page. No publication
is required. The original project is only an optional read-only reference.
Control labels below are English; inspect the learner's actual UI if they differ.
The tutor checks available access and helps connect Webflow, or accepts screenshots
and reported settings. A connector is helpful but not necessary to follow the lesson.
If something does not work, retain the selected element, class stack and pending
check, explain the difficulty, and resolve it before the next dependent action.
HTML demonstrations reconstruct the Designer: they are replicas, not captures
of a live Webflow session. They start paused and stop at the selected segment's
end; they can be replayed or scrubbed and return to the reference lesson. Schematics
and authentic reference screenshots have separate provenance. Demonstration captions and written references are available in English and Italian;
the tutor explains them in the learner’s language. Webflow controls retain their
original English labels.
Use three distinct examples: A/B/C for Rename and Duplicate, a new A/B/C group
for Combo, and Universal with Card A/Card B for Utility. Preserve earlier groups.
Each replica shows only its own example group. If your page contains all groups,
the Style selector's “on this page” count may include other matching elements.
Compare class names, contexts and consequences rather than reproducing that number.
Current controls and the prepared layout
Webflow's current Add panel uses Box for structural elements. A new Box has
the Div tag; change/read its HTML tag in Settings → Tag. Use a Box with the
Section tag for the outer section and Div for the inner exercise area and cards.
The HTML tag, Navigator label and CSS class are separate. Existing legacy Section,
Container and Div Block elements still work: do not rebuild a valid structure just
to replace its historical element type. Inspect the tag and hierarchy instead.
Prepare a readable area, then focus on class behavior. Default properties need
no routine instructions or confirmation; inspect them only if an actual conflict
changes the result. The wrapper's maximum 960px and spacing are suggested
presentation, not pass/fail learning criteria. A harmless difference such as 26px
rather than 16px wrapper padding does not require repair or another inspection.
Demonstration card bases use fixed Height 160px and suggested 16px padding.
Keep labels short and readable; do not hide overflow to force a label to fit.
The Notice transfer retains its independent 20px→24px test: that padding change
is the learning criterion and remains exact. Universal retains only its color
utility; do not add card dimensions to the standalone utility.
Updated replicas show the exercise grid and colors. The shell retains observed Designer controls with illustrative framing. New structure uses Box with the indicated tag. Replicas are not authentic live captures; enlargement helps read a control without changing the represented result.
Prepare the lab
Goal. Make comparisons readable in the Designer. Layout preparation is not the subject of this lesson; we will place cards side by side so changes are visible.
A class is a name linking elements to reusable style rules. An element can
have multiple classes; the rule you are editing depends on the selected context
in the Style selector. The Navigator shows the element hierarchy. Its display
label alone does not establish which classes an element uses. Select the element
and read Style panel → Style selector. A paragraph's text is separate again.
Classes are not the only source of styling: HTML tag rules, inherited properties
and browser defaults also contribute. We use a controlled exercise area to make
the effects of our class rules visible.
Before explaining the outcome, ask only the first open question: two paragraphs have
the same class; what happens to the other paragraph if the words of one change?
Wait. Then ask separately what happens if a property of their shared class changes,
and wait again. Do not offer suggested or preselected answers.
Prepare the area. In the confirmed practice project at Desktop and normal
state, add a Box with the Section tag in the empty exercise area. Use
Settings → Tag to read/choose Section (or Quick find's Box <section> where available).
Assign academy-classes-section and set padding 24px on every side. Do not
style All Sections or change Body for this preparation.
Inside it add a Box with the Div tag, assign academy-classes-demo and make
these explicit exercise declarations on that class:
Property
Exercise value
Purpose
Width
100%
Use the section's available inner width
Max W
960px
Keep the exercise readable on a wide canvas
Margin left/right
Auto
Center the exercise area
Padding, every side
16px
Separate content from its edge
Text color
#111111
A controlled inherited text color
These are suggested teaching-layout choices, not Webflow defaults or requirements
of class sharing. Give this whole preparation, including the paragraph below, as
one task and check once. Keep an existing readable equivalent rather than forcing
cosmetic corrections. Investigate sizing/display only if the actual result conflicts.
Add a child paragraph with “Classes: shared, independent, combined” (translated
content is fine). Verify in the Navigator: Box <section> > Box <div> > Paragraph. This
area will contain the exercises. Create a dedicated Box wrapper for the first example group; later create separate wrappers for Combo and Utility, a sibling of the introduction, with class academy-example-grid: Display Grid, three equal 1fr columns, gap 16px; use one column on mobile. Card bases keep Height 160px. Group headings stay outside their grids. A/B occupy the first two columns and C later occupies the third. This is presentation preparation, not a Grid assessment. Universal retains only its color utility: wrapper cell stretch gives it a visible area without adding layout to that utility. Do not declare background on the Utility card base.
Before creating any named class, check whether
it already exists. If occupied, choose a free prefix and use it consistently;
do not reuse an existing class without checking its rules.
Check: correct page, free area, visible text, Div selected rather than the
paragraph. If the paragraph is selected, move to the outer Div in the Navigator
before changing container styles. The orientation image in the reference is a
updated Designer replica, not evidence of the learner's own project.
Preparation recap. The area is ready; next apply the same class to two cards and distinguish their words from their shared style. Harmless presentation differences do not block the experiment.
Shared style, different content
Goal. Apply an existing class and predict which cards change when that class is edited.
Inside the first academy-example-grid, add a Box with the Div tag. Create academy-class-card in
its Style selector, and add a paragraph: “Card A — shared style”. Select the
outer card Box again and set these presentation values:
Property
Value
Padding, every side
16px
Margin bottom
12px
Height
160px
Background color
#F2F2F2
Fixed Height 160px gives the demonstration a card-like appearance. These
sizes are presentation, not a separate assessment. Create both cards before the
checkpoint; do not stop to approve Card A alone.
Text inherits the exercise area's dark color. Add a second sibling Box with the Div tag, choose
the existingacademy-class-card from the suggestions and add “Card B — same
style, different content”. Do not create a similarly spelled new class.
Select each outer Div separately: both must have one class with exactly the same
name; their child paragraphs have different words.
Predict, then try. Before editing, ask which cards will change if Background
color is edited with A selected. Then set Background color to #FFF0B3 on A
and inspect A/B at the same breakpoint and state.
Expected: both get the new background; their text remains distinct. The edit
belongs to a shared rule. Editing A's paragraph words does not rewrite B's words.
If only one changes, compare full names, extra classes, selected outer Div,
breakpoint and state. Look for a different context or override before adding a
replacement class. Correct the mismatch and check both again.
Recap. The cards have independent words and shared styling. The background edit belongs to the class, not only to the selected card.
Rename a shared class
Goal. Predict whether changing the name creates a new class or renames the already shared one.
The intention is to rename the class while retaining shared styles. Before acting,
predict what A/B should show after the rename. Select A's outer Div. In the class
name menu in the Style selector choose Rename class, enter
academy-class-panel and confirm. Select B and read its Style selector.
Expected: both use academy-class-panel, with the previous padding and
background. You renamed the shared class, not just the selected element.
If only a Navigator label changed, return to the Style selector to check what
was renamed. Renaming alone cannot make an independent variation.
If custom CSS/JavaScript refers to the old selector, check those references;
do not assume Webflow rewrites every external reference automatically.
Recap. Rename changes the name of the same class; A/B remain linked and keep their styles.
Create an independent class
Goal. Change only C while preserving A/B. Before receiving the procedure, propose what must become independent. Wait for that plan before explaining the difference between duplicating the element and duplicating its class.
Duplicate element B, keeping the new Div as a sibling of A/B. Change its child
paragraph to “Card C — independent variation”. C initially retains
academy-class-panel: duplicating an element does not create a new class. The
demo starts with this preparation already completed.
Select C's outer Div. From its class menu choose Duplicate class, name the
copy academy-class-panel-alt and confirm. Check that C uses the new class as
its base, rather than adding it after the previous base. Then set Background
color to #D9E8FF.
Expected: C is light blue; A/B stay yellow. C retains the copied 16px padding and 160px height,
but its new class is independent. A future edit to the original class does not
automatically update the copy.
Card
Base class
Expected background
A
academy-class-panel
#FFF0B3
B
academy-class-panel
#FFF0B3
C
academy-class-panel-alt
#D9E8FF
Duplicating an element normally retains applied classes. Duplicating a
class creates a new class. Duplicating the outer Div's class does not duplicate
classes on its children: a nested heading can still share a class with other
headings. If A/B change with C, verify that C really uses the independent copy;
renaming its Navigator label will not isolate it. Keep the same layout here;
color is enough to check independence.
Recap. C now uses a new initially copied class; changes to it can affect C without changing A/B.
Create a variation with a combo
Goal. Add and reuse a variation while reading the base and combined contexts separately.
A combo defines a variation in the base class's context. Here two classes are
on the same element.
Prepare a separate example. Preserve the earlier cards. Add a new academy-example-grid wrapper with
three sibling Boxes with the Div tag with content “Card A”, “Card B”, “Card C”. Give all three the
existing academy-class-panel. Each must initially have only that class and
background #FFF0B3. For this phase, A/B/C refer only to this new group. The earlier
blue C keeps its independent class.
Add a border and reuse it
Select B. After academy-class-panel in the Style selector add the new class
academy-has-border. The Style selector now shows the base followed by the combo. In this combined context, set every border to
Solid, 2px, #000000. A/C should stay without this border. Now select C, which
already has academy-class-panel, and apply the existingacademy-has-border after its base. Do not re-enter the border on C; check whether
it receives the rule already defined.
Expected: B/C share the black border; A does not have it.
Card
Applied classes, in order
Combination's border
A
academy-class-panel
None
B
academy-class-panel + academy-has-border
Solid, 2px, #000000
C
academy-class-panel + academy-has-border
Solid, 2px, #000000
The + in the table means two classes on the same element; do not type it. A
selector identifies the elements a rule targets. This combination in CSS is:
.academy-class-panel.academy-has-border
There is no space between names. It matches every element with both classes,
even with additional classes. It is not bound only to B, which was selected when
the rule was edited.
Edit the shared border from C
Predict before opening the demo or editing: with C selected and its base followed by academy-has-border shown in the Style selector, what happens to B and A if the border color changes? Ask why and wait.
On C, keep the Style-selector context academy-class-panel followed by academy-has-border and change only Border
color #000000 → #D45B5B. Keep Solid and 2px.
Expected: B/C have red borders; A remains without one. The edit belongs to
the combination even when made from another instance.
Override a base property
Use A, which still has only academy-class-panel. Add the new class
academy-is-white after the base. Without switching to only the base through Inheriting, set Background
color to #FFFFFF. The base already had a background: you are overriding it in
a more specific context.
To compare rules without editing, open Inheriting above the Style selector
and select base academy-class-panel. Its background must still be #FFF0B3.
Use Back to return to the combination: there the value is #FFFFFF. The
card can remain white while you read the base, because its override remains applied.
Check: A white; B/C yellow with red borders. The first example's cards are not
changed by this override. If the reading-context control differs or is unavailable,
inspect the learner's UI; do not invent a command. Leave that verification open.
Card
Classes
Background
Border
A
academy-class-panel + academy-is-white
#FFFFFF
None
B
academy-class-panel + academy-has-border
#FFF0B3
Solid, 2px, #D45B5B
C
academy-class-panel + academy-has-border
#FFF0B3
Solid, 2px, #D45B5B
A's text stays dark #111111 throughout. Merely adding academy-is-white
does not change appearance. The background becomes white only when the Background
color edit is committed in that combination. Do not add a paragraph class or
change its text color.
Read the complete context
The suffix alone is not enough. A card's combined rule with academy-has-border
is not automatically the rule for a section with another base and the same suffix.
They are different combined selectors. A standalone .academy-has-border rule,
if present, could contribute to both elements' styling.
The original reference has a card and a section using has-border in different
contexts. Recognizing the distinction is enough here; no extra section is required.
If a border appears unexpectedly, read all applied classes and the selected rule
instead of concluding that the combo belongs to just one card.
Recap. Reading the base does not remove its applied override; Back restores the combined reading context.
Reuse a utility
Goal. Distinguish applying an existing utility from saving a combined override. A style rule associates a selector (which elements match) with declarations (properties and values). Explain those terms through visible classes and effects before using them in a question.
A utility, also called a global class, is an ordinary class used for a reusable
purpose, such as a background or radius. When we name u-academy-bg-red below, u- is our convention for recognizing
reusable utilities. It gives the class no special Webflow behavior. A single property can make a utility
easy to read, but is not a technical requirement; a reusable shadow can need several
values. Prepare a third, separate example: Universal, Card A, Card B.
Universal is the specimen's visible name, not CSS's universal selector or a special
class type. Preserve the earlier examples and their backgrounds.
First create Universal and its standalone utility
In a new Utility wrapper with the existing academy-example-grid, create the
FIRST child Box with the Div tag and paragraph “Universal”. Give it ONLY
u-academy-bg-red and set Background color to #D45B5B. Do not add a second
class. Grid-cell stretch provides its surface; its utility declares only color.
This creates the utility in isolation before reusing it on the cards.
Then add Card A and Card B, with no base background
After Universal, add the NEXT sibling Box with the Div tag in that same grid with a paragraph “Card A — shared utility”. Assign
new class academy-utility-card to the Box. Set padding 16px, margin bottom
12px, and Height 160px. Do not declare a background on this
base. Add a second card with “Card B — same utility” and the existing base.
Both outer Divs must have only academy-utility-card, not earlier examples'
classes. The base's Background color must have no declaration introduced by this
exercise. If other site rules impose a background, identify that context first.
Before applying the utility, the card base declares no background and can look white on the canvas. Text and separate grid cells identify the cards. Do not add a gray base background to match an old fixture; that would change this experiment.
The left-to-right order is Universal, Card A, Card B, matching the animation.
This is presentation order, not a CSS matching requirement. An existing equivalent
with another readable order does not require changing class assignments.
Apply the existing utility to the cards
Select Card A and apply the existingu-academy-bg-red after its base. Repeat
on Card B. Do not edit Background color in that combined Style-selector context during
this step: you are only applying the existing utility.
Expected: Universal and both cards have red backgrounds. Cards keep their
base spacing; Universal does not acquire it from the utility. If a card stays
non-red, check the selected Div, exact names and competing background rules.
Do not create an override just to make utility application appear successful.
Edit the combined context
Before editing, ask what should happen to Card A, Card B and Universal if Background
color is changed with the base followed by the utility shown in the Style selector on Card A. Wait for the prediction.
Select Card A's outer Div. Read the complete Style selector context:
academy-utility-card followed by u-academy-bg-red. In that combined context, set Background color to #FFC6C6. Select Universal and Card B and read
their separate contexts.
Element
Classes
Background after the combined edit
Universal
u-academy-bg-red
#D45B5B, red
Card A
academy-utility-card + u-academy-bg-red
#FFC6C6, pink
Card B
academy-utility-card + u-academy-bg-red
#FFC6C6, pink
The standalone red rule has not been deleted. The combination declares a different
background for matching elements. Card B changes with A without being selected
during the edit. Applying a utility does not stop it being reusable globally or
edit its standalone declaration by itself. Applied classes and the rule in which
a property is saved are different things.
If Universal turns pink, check whether the standalone utility was edited, or
whether Universal also received the base. If only A changes, compare B's full
class stack, breakpoint, state and other overrides. Do not claim a combined rule
was created before reading its actual context/value. An outside declaration can
change the result: identify it and check again. Visible color alone does not prove
where a declaration was saved.
In this setup, select Universal to edit the standalone utility: it is its only
class. On A/B, normal edits target academy-utility-card + u-academy-bg-red;
their base is academy-utility-card, not the utility. Do not suggest editing the
second token alone from that stack. To edit the pink declaration, select either
card and keep its combined context; Universal cannot edit that combination.
The standalone declaration still applies to all three elements, but A/B's combined
background overrides that property. If the standalone background changes, A/B
stay pink while Universal reflects the standalone change. Explain the mechanism;
do not quiz the learner on class names/order we just prescribed. If a reasoning
probe is useful, ask why the cards retain pink after a standalone edit, without
performing another practical color change.
Recap. Applying the utility reused red; editing the base+utility context added pink for the two matching cards while Universal stayed red.
Final challenge — Design two notices
Goal. Choose classes for a new requirement, explain your plan, build it and predict a change. This is a comprehension/application check, not another recipe. Ask for a hint if needed; retain the first attempt and record support.
Let the learner choose before giving more hints. Add two new Notice blocks with
distinct texts in the exercise area. Both need padding 20px, background
#F2F2F2 and readable text. Only one needs a Solid, 2px, #111111 border.
A future padding edit must update both without editing two independent classes.
The learner chooses new names, implements their solution and explains why it
meets the requirements. References are allowed: record what was consulted and
what help was received. Do not supply the class structure before their attempt.
Before a verification edit, ask them to predict which elements will change. Then
change padding 20px → 24px in their chosen context and check both Notice blocks
and the one intended border. In conceptual-only mode, assess the proposed choice
and reasoning separately from ability to execute it.
Final review and recap
After a sound plan, let the learner implement without supplying a solved recipe.
Class names alone do not prove construction: check the built result before the
padding test. Ask the editing-context question openly, without listing alternatives;
after a valid choice let the learner execute before offering control instructions.
Check the initial plan, prediction, actual execution and causal explanation separately. Do not give class names or a solved class structure before the attempt. The shared padding20px→24px change is the test variable, not incidental decoration. The optional naming/browser and radius extensions are not required for main-path completion.
Check saved classes/properties separately from rendered Preview. Main-path
completion does not require an extra responsive test. As a separate optional
presentation extension after completion, at Desktop and a narrow width such as
393px, inspect legible text, distinguishable cards, clipping and unintended
horizontal scrolling. If overflow appears, investigate
fixed widths, spacing or content rather than hiding it. Leave unavailable views
explicitly unverified. The Webflow exercise needs no animation; the HTML demo's
motion illustrates a procedure and is not an effect to rebuild on the cards.
Produce a recap in the learner's language: language/mode, exercise site/page,
chosen names, actual class/property checks, observed widths, Notice attempt,
help received, open checks and next step. A later conversation needs the package
and recap and must recheck current state. Preserve the first Notice attempt,
not just the corrected result. Guided completion shows performance with that
support, not independent transfer. Ask which part remains unclear.
Optional extension — Read actual class names in the browser
The Designer may show Look At My Card, while the published reference's observed
token is look-at-my-card. Read actual markup rather than guessing names for code.
The DOM is the browser's representation of page elements. Here we inspect an
already published reference, without editing or publishing anything.
Open https://all-you-need-to-know-about-classes.webflow.io/ in a desktop browser.
In Chrome right-click a card and choose Inspect to open Elements.
Check the highlighted element. If it is the paragraph/heading, move to the
card's outer Div. Hovering its DOM row should highlight the whole card.
Read class="...", for example class="look-at-my-card has-border". The
space separates two tokens: look-at-my-card and has-border.
A class selector adds a dot: .look-at-my-card. To require both classes on
the same element use .look-at-my-card.has-border, without a space.
A space inside the HTML class attribute separates applied class tokens.
A space between CSS selectors describes a descendant relationship instead.
No coding is required; recognize the tokens actually read. For other browsers use
their equivalent of Inspect; ask for guidance if needed. Reading the textual
example alone is conceptual study, not an actual page inspection.
The reference's naming table shows examples, not a universal guarantee for every
special character or possible name. Verify actual markup and use simple consistent
names in code. The reference image combines authentic Designer/Elements captures
with separate annotations; it is not the learner's exercise project.
Optional — Radius: the same logic on another property
The main path is complete without this exercise. In a separate small area create
two Boxes with the Div tag, R1/R2, using new base academy-radius-card, distinct text, padding 16px,
margin bottom 12px, Height 160px and background #F2F2F2. Do not set radius on the base.
Add a separate specimen Box with the Div tag with an identifying paragraph, only u-academy-radius,
and set Radius 8px on all corners. Apply that existing utility after R1/R2's
base without editing it in their combined contexts. Cards should show rounded
corners. The specimen without a background may not make the corners visible, but
lets you read the standalone rule.
Before each edit predict the effect on all three:
On the specimen's standalone utility set Radius 16px. Expected: R1/R2
receive 16px if no competing rules apply.
On R1 select academy-radius-card + u-academy-radius and set 24px.
Both cards use 24px; the standalone utility retains 16px.
On the standalone specimen set 20px. Cards retain their 24px combined
override; the standalone rule now has 20px.
Inspect corners in Preview and values in their actual contexts. If different,
compare names, breakpoint/state and other declarations. Radius follows the same
rule/context logic as background. A class name does not impose a numeric value.
Sources and provenance
This Academy adaptation derives from Francesco's Classes lesson with reviewed
technical qualifications and new exercises. Simplified examples, their names,
values and second instances are not a transcript of the original clicks.
Original video: https://www.youtube.com/watch?v=fzpeZ4i1VkE
Published reference: https://all-you-need-to-know-about-classes.webflow.io/
Original cloneable: https://webflow.com/made-in-webflow/website/all-you-need-to-know-about-classes
Preparation compared a recovered English transcript, visual video samples and
relevant original Designer configurations in read-only access. This does not
certify learning or the state of a learner's project. The English adaptation
preserves the Italian approved lesson's sequence and technical examples; it
does not replace Portfolio's canonical technical/editorial sources.