Web design using classes, combo classes, and Rob Lowe global classes

With CSS classes, you're able to create unique styling changes. Making manual style changes to each and every element is tedious and time-consuming. Base classes are the main way to quickly create consistent styles across your website. If you make changes to one base class, it affects all base classes, because classes save styling information that you can apply to as many elements as you want throughout your website.
But it doesn't stop there. You can use combo classes to build upon your base classes. That's because a combo class references the original base class.
You can also use global classes to bring a specific style to any class in your website. Global classes are specific styles to a wide range of elements.
In this lesson, we'll cover these three types of classes, which will grant you the knowledge and superpowers to create your websites exponentially faster than before.
00:00 - Introduction
00:41 - Create and apply classes
01:36 - Edit classes
02:18 - Remove classes
02:53 - Duplicate classes
04:23 - Combo classes
07:39 - Global classes
14:02 - Recap
Learn more about classes on Webflow University: university.webflow.com/lesson...
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow

[@HybridProDotNet]

I laughed way too hard at the delete class bit lmao

[@JoaoVictor-yz8wy]

Same here hahaha

[@HACHmusic]

Honestly, at this point I've learned tons about webflow, and I didn't really need the tutorial. I came here for the laughs 😂👌

[@Tigeruppercut310876]

This is the most entertaining training videos I've ever taken. I actually look forward to taking the courses! Well done, Webflow!

[@sebxlopez]

Such an incredible video - I absolutely lost it at the Stanford bit 😂 brilliant work as always. Thank you!!

[@Erickhetfield]

I usually skip bits of videos to speed up the process, once I got the concepts. But here I'm afraid of missing a joke.

[@Webflow]

Us, too. 🤔

[@davidstar2362]

@@Webflow I love you man. great work!!!

[@victorioborge]

This is a true masterclass. Pure quality content! Drawings, examples, highlighting the features, funny, good pace. I have watched so many videos before to try to understand classes, and now I finally get it. Usually, the company that creates the product is not the one that makes excellent tutorials for it, but I'm glad that's changing. Keep up the great work!

[@_daybreaker_]

Thank you for making these videos humorous 😂 It's a fantastic experience!

[@tinashewertz1150]

I had overlooked the fact that duplicating a class ends the relationship with the original class. It is always good to refresh the fundamentals!

[@danielcobbjr1947]

facts

[@mariiazatorska]

you are awesome! I am not new to web dev, but still find a lof of valuable tips and tricks. Love how you explain web dev workflow concepts in such a fun way.

[@RehcamretsneF]

This is so smooth, so well articulated, for a website I've never heard of, by a guy i've never seen before. I'm hooked. This may be the best instructive video/series I've ever seen

[@TribuOlaf]

Amazing! As always. Thank you!

[@RandleMcMurphy123]

Thanks a lot for that. Finally got the concept of Global Classes. Actually I never noticed before that they existed… maybe some optical differentiation would be good in the Webflow Designer.

[@Webflow]

Great note, Tobi! We’ll pass along the suggestion to the team!

[@cryptified5161]

Great work! On to the next video

[@seochon]

Thank you! Such a Great class.

[@opaulofelipe]

Amazing! Like always.

[@om14796]

Sometimes I wonder how difficult it must've been for Webflow to find you. One that sounds like a professional voice-over artist and also knows how to hack into Stanford's website lol

[@bilal100]

Thank you for making such great content

[@buildwithtravis6125]

Rob Lowe is super funny as always!

[@davidstar2362]

I LOVE this Man. you are so cool.

[@danielgornak2613]

This guide is so good that you can learn to hate Webflow

[@live_in_islamic_way]

Very helpful, clear explnation, thank you

[@stevenbraun918]

Awesome! It would be really good if you could select like 10 different div blocks and assign a new global class to them (all at the same time). Is there a way to do it?

[@hasnatalislam6109]

thank u soo much you are amazing !!!!

[@z1sania]

omg! why didn't I know about this "duplicate class" thing... could have saved a ton of time...

[@NonTwinBrothers]

Good stuff, as always

[@dylandeheer]

Global classes offer a great way to create global advanced interactions and animations. Imagine you create a primary button, and you called that "Primary button", but then decided that you want any kind of button on your website to have a parallax effect based on your mouse position. You can now add a global class called "Parallax this" and create an animation that affects anything that has this global class applied 👌

[@abirahmed1292]

Thanks for sharing but I am confused because if you want button to have parallax effect then just edit the class and every other button that have the class will also change. If you want any specific button to have this feature then add a combo class or duplicate the class, if you want 2 button out of 100 to have this feature then add the combo class to the second button that already being created. What's the benefit of global class then?

[@dylandeheer]

@@abirahmed1292 the effect isn't limited to the object, so you can use the global class to add it to any other div as well. Let's take shadows for example: Maybe you designed a nice shadow for a button, and now you want to use the same shadow to a card element. Using a global class you can define the shadow separately and add it to any element that needs the styling.

[@abirahmed1292]

@@dylandeheer Thanks again, I just followed what you said on Webflow and now I clearly understand the difference. You are genius.

[@amcds2867]

World class tutorials, these guys.

[@jillianhoenig3247]

I'm having trouble wrapping my head around the idea of a global class. Aren't all classes technically global? Can't you apply any class, anywhere?

[@Webflow]

Hi Jillian! The big difference here is that you can append a global class to all different kinds of classes, whereas a combo class (like a red button vs. green button) builds on top of something specific (in that case a button).

[@Webflow]

99% of the time classes and combo classes work great for this kind of work. But a global class is excellent if you want to design a separate modifier (like adding a drop shadow) intended to be applied to all sorts of classes (images, buttons, cards - all things you might want to add the same drop shadow).

[@emersonlemos3669]

amazing!

[@danherzl]

😍🥰❤️🇧🇷 i love Webflow

[@Benlocsei]

Can you please explain what happens exactly when you rename the original global class once you applied it as a combo class?

[@goldenant9450]

do you have to create a combo class to center align an instance of H1?

[@jack_acid]

While global class settings will not overwrite combo class settings, it seems that global class settings *will* overwrite base class settings, despite the Zoe Saldana | Rob Lowe example at 11:43.

[@wh1tecl0ud]

for what do you always hold a pen in your hand?

[@AyushKumar-yn5co]

Awesome

[@jonathanhutchinson5649]

Regarding the global class sacrificial object; after you (presumably) remove the div block, then ho do you amend the global class? Just on one instance where the globally applied property is available?

[@yourmomfriend]

Did you ever figure this out? I have the same question

[@jonathanhutchinson5649]

@@yourmomfriendhonestly, I don't even understand the question I asked here now any longer.

[@goldenant9450]

how do i know if it's a global class or not? i don't see how it's any different than a main class. bc you applied it to a div block..?

[@shivamsoliya3919]

How do I know that I've applied a normal class or a global class. Because if I apply normal class then I can't change a particular element. But sometimes I want to. And sometimes if I change an element it'll affect every other element which I don't want to. Then how to differentiate between these classes ?

[@rasula9]

Can we delete that random div block created for creating the global class, without deleting that global class?

[@adrianvaladez5560]

Help! Hello, I am having issues on a template I bought and has a class already on it but I want to change the text and I cant, how can I edit? Thanks

[@vianneypercq]

Hi Webflow Team! Could you make the subtitles button appears for this video? Thanks

[@vianneypercq]

The subtitles button has appeared! Thank you.

[@andreaso.1549]

Can someone clarify... Is the specificity of the classes like this? 1 Combo class 2 Base Class 3 Global Class Also, by default we can't assign multiple classes to one element. But with a combo class we can. A combo class can only be assigned to an element that has the base class, which the cobo class was 'originally' assigned to? Whereas, Global classes can be assigned to any element?

[@juliennekita7128]

Thank you for this great video. I've learnt and this was funny. Can you tell what happens if we delete the div block to creat a global class "the perfect shadow" pls ?

[@Webflow]

Nothing happens to the style If you were to delete the element which has the style applied. The style is saved in the designer and can be applied to any other element.

[@TiagoRosa]

Webflow. U rule!

[@philipguidon4644]

what is the correct process to hide the global class element that you have used for styling? clearly you wouldn't want that element sitting on the page.

[@pixelperfectpravin]

Feedback : sometimes i get confused about what am editing ( classes or elements )

[@Erickhetfield]

Global classes should have a different color on the selector.

[@Webflow]

This is something that's being investigated - we agree that something to differentiate would be helpful!

[@helixdragon8637]

When i delete the div block from which I created Global Class does the Global class stay or does it get deleted?

[@Webflow]

The class is still saved. You can look in your Style manager panel to see it: university.webflow.com/lesson/style-manager

[@Khari99]

Webflow has become my new recommended technology just for the jokes

[@Webflow]

😂

[@ainemcdonnell6350]

I can't say webflow and I are in love. I can say we have a passionate relationship.

[@MistaSmith]

Today I learned: When I have Zoe Saldana I cannot have Rob Lowe at the same time. But adding a Perfect Shadow might still be possible.

[@TheMarkDrake]

The UX around combo classes still needs some addressing. When you apply the combo class, and make further changes, those changes are made to `.yourClass + .yourComboClass` together. Take for instance utility classes from most web frameworks - they usually come with a class named something like this: `text-center`. If I apply the global class `text-center` to my `heading` it works as expected. But then I continue making style changes and these new changes are applied to the combination of `.heading + .text-center`. This is wrong. There's no UI/UX to support the use of CSS classes in this very common, modular way.

[@balazsnagy3202]

Mark Drake wouldn’t using global classes solve this? Put the text centering into a global class and use that with a normal class?

[@balazsnagy3202]

What is the difference between global and combo classes? Why not use only global classes at all?

[@davidstar2362]

global apply universal changes combo added on top of those global changes.

[@stuartdoyle99]

If Rob Lowe appears in my dream tonight, I know who to blame

[@mattlillis6152]

I wish I had watched this video 2 weeks ago 🤦🏼‍♂️

[@_________________________.-]

Unlike css you can assign specific class with one classes

[@person81045]

I bet you the same folks who wrote jokes for Webflow videos are the same ones who did for Arrested Development. This is like watching extended Arrested Development. But its Arrested Web Development, but in reality not arrested at all and its just regular web development.

[@_________________________.-]

Why not add ID instead

[@Webflow]

In general, it's a good practice to use classes for styling purposes and for elements that share similar styles or behavior, while reserving IDs for unique elements or elements that require specific targeting or functionality. However, keep in mind that there are exceptions to these guidelines, and the choice between class names and IDs ultimately depends on your specific requirements and the structure of your project.

[@RandleMcMurphy123]

After 3 y of webflow I just learned you can duplicate a class instead of taking a screenshot and rebuilding a second one. f**k me.

[@mercedbread9045]

who is this guy?

[@_________________________.-]

It’s very confusing because you’re using the same global class across devices

[@Webflow]

This article and video may help you understand the reason why we use the same class name across devices: university.webflow.com/lesson/intro-to-responsive-design

[@theReal_WKD]

0/20. I was expecting the meaning of life at the end... Very disappointed

[@Webflow]

Couldn’t agree more. We think Miguel might have gone back and edited this out to prevent spoilers... 😭

[@theReal_WKD]

@Webflow Damn it Miguel!!! He’s keeping it for himself 😭😭

[@sholtomac]

commensalism /kəˈmɛnsəlɪz(ə)m/ nounBIOLOGY an association between two organisms in which one benefits and the other derives neither benefit nor harm

[@sholtomac]

7:09 commensalistic relationship. I love how these guys aren’t afraid to have assume an intelligent conversation. Teaching me new words…