Chances are, if you see a modern layout on the web, it’s styled using classes. Because back in the days of the early internet, developers had to manually style things in HTML. Right when you’d get 53 paragraphs styled just right? You’d want to make a change to the style. Then change it 52 more times.
But the W3 Consortium said “no more.” And born was CSS. (Cascading style sheets. The greatest invention since the rotary telephone.) And it works like this: we USE a class to set styling ONCE, and we APPLY that class to everything we want. The result? Of course we have consistency in STYLING, but even more important: continuity. That is...if we make a CHANGE on the class...every OTHER element with that class...gets the update, too.
And over the past three decades, CSS has grown to include SO much more — it’s now become a superpower on par with telekinesis or x-ray vision, but without the moral and ethical complications associated with the latter.
We’ll start HERE with creating and applying classes, we’ll talk about editing classes (that’s CHANGING styles), we’ll do removing and duplicating classes, then we’ll end by covering two ACTUAL superpowers on the web: combo classes...and global classes.
So. To create a class? Select a thing...click in to the selector...and name your class. When you hit Return? You’ve created a class.
Why is this important? It’s not. Because we haven’t actually DONE anything with it yet. And here’s why that’s important to demonstrate: if we change something super basic (let’s change the background color to make it a bit darker). The moment we’ve done that on the class we just created? The label turns blue. That means on THIS class, this background color property has been set.
So check this out. Let’s just grab another button (by default, elements don’t COME with classes applied). And instead of clicking in to NAME a class? Let’s just start typing out the one we made before. When we select it? Darker background color.
That’s how classes work: you can use them on different elements, and when you add or change style properties, every element that USES that class is affected.
That’s creating and applying classes. What about editing classes? Well let’s go further (let’s apply that same class to the other buttons here) — and even if we copy and paste our button (just make a copy)? The class is brought along WITH that element (it still has that class applied). And to EDIT this class, do we have to go back to the ORIGINAL button? No. Because like we did before, we can just select ANY element that has our Main button class applied, and we edit the styling. (Again, the KEY with classes is this: you’re NOT editing styles on the ELEMENT; you’re editing the class that’s APPLIED to all these elements.)
And if we want to rename (we’re talking about RENAMING a class)? We can click into the thing, rename, hit Return.
That’s editing classes. Next let’s remove a class. Here’s a paragraph. Let’s select it, and of course, apply the Main button class. Terrible. So. Click the dropdown thing next to the name of the class? Remove. Class removed.
Let’s do it again. Select the Section, go over, apply the Main button class. Again. Terrible. But this time, let’s click to the RIGHT of the class label. Blinking cursor (we’ll get into THAT in a second). Delete (or Backspace depending on your keyboard). Class removed.
Stanford University. Log in as an administrator, Fall semester, delete and confirm?
That’s removing classes. What about duplicating? This is a two-parter, because MOST of the time, duplicating can be better served by OTHER stuff. But let’s suppose we have a div block here (a box that holds some other stuff inside...this is sort of a CARD design). If we open our Navigator, we see there’s an image, a heading, and a paragraph. OR, if we’re feeling adventurous, we can look on the canvas... and see the SAME... exact... thing.
The key here is the div block is STYLED (our card is styled) USING a class. The class is called Basic card. And it’s been applied to all three of these things. This third one? (The card on the right?) If we change ANY styling on it, it affects the other two as well (we KNOW
that’s how classes work.)
But what if we want the third one to be different? Again, this is going to be ONE way to do it. With our THIRD card selected, let’s go into the down arrow dropdown thing, and duplicate. And we’ll name this “Other card design.” (Of course, you can name yours whatever makes sense.) But when we hit Return, we’ve now created this NEW class which BROUGHT OVER all the stuff from the original one. From afar it looks the same, and that’s of course because it’s stylistically identical. But we can change ANY properties (and reuse this NEW class anywhere else).
But here’s the sad part: BECAUSE it’s fully duplicated, it is in no way whatsoever...associated with the original class. (Sometimes that’s what we WANT; that’s why we’re covering class duplication.)
But other times we want something DIFFERENT. Enter: 301 redirects. Except, no, that’s a separate lesson. Enter: combo classes. Just like duplicating a class, but actually not at all.
That’s because a combo class still REFERENCES the original class (the base class). All these buttons on this page use the same class (“Main button”). But here’s an example of when that doesn’t WORK so well: THIS section...is darker, so there’s not too much contrast between the button and the background. So what do we do? We LEAVE the class as-is. We keep that BASE class (the class we already added) ...we KEEP it.
And what we can DO...is click to the RIGHT of the class label and type to create a COMBO class (“Lighter”). Press return? And here’s the magic: this COMBO class is built UPON the base class. And we can prove it by clicking the AMBER color label (amber on a label means it’s grabbing styles from somewhere else) — and it shows that the color is being BROUGHT in from the Main button class. So what if we change it? Well, because it’s a COMBO class (because it’s more SPECIFIC than our original, base class), that change didn’t affect our Main button class (those stay the same). We can change the font color, too. (We’re making changes ONLY on buttons that have Main button AND Lighter applied.)
But here’s where this is different from duplicating: if we go back to our base class and change the padding? (Really if we style almost ANYTHING on the base class?) The combo class is affected, too. That’s because all the combo class does is OVERRIDE (it adds more specific STYLES, but it BUILDS on our base class). So when we’re styling that new combo class, it’s helpful to look at our indicators. (Where are styles coming from?) And if we want to override a style? We make that change.
Now. Combo classes work JUST like classes in that you can take a brand new element (here’s a blank button we’re just dragging in), and we can add our combo class by adding the base class? Hit return, then clicking in one more time to add our combo class. Hit return again? We’ve now applied the combo class.
Now. This is a LOT. And if you’re already super familiar with HTML and CSS, great — this’ll speed things up. But if this is all NEW to you (if you’re new to classes, and combo classes, and references to hacking a world-class university?) That’s okay. We’re going to recap all of this and we have highly-specific, practical examples to really REENFORCE these concepts throughout Webflow University — including TAGS, which are like SUPER classes...but completely different).
One note we’ll make here is that the DIFFERENCE between DUPLICATING a class and just using a COMBO class is that DUPLICATING is something that ENDS the relationship with the original class. (When a class is duplicated, it BRINGS all the styles from the ORIGINAL class, but that’s IT.) The relationship stops there. These are now two TOTALLY different classes that don’t talk to each other at all.
With a COMBO class, you’re still able to BRING IN styles from that base class. (It’s a commensalistic relationship where styles are still passed from the BASE class ONE WAY, and those styles can AFFECT the combo class, but all you’re really doing is building ON TOP of the original. And so while you can OVERRIDE styles on the COMBO class changes only go one way. (If you go back and change something on the base class?) That’s going to update in the Combo class as well — even though we can OVERRIDE that style in the combo class.
Now. We’ll summarize (we’ll recap all of this) as we move forward, but before we do, let’s complete our goals and talk about the concept of global classes.
A global class is great when you’re trying to apply SPECIFIC styles to a wide range of elements. First we’ll DEMONSTRATE this, then we’ll clarify EXACTLY what’s going on behind the scenes.
And we’ll start...with Rob Lowe. This is not Rob Lowe. It’s a div block. With nothing applied to it — no classes (it hasn’t been styled in any way). But we’re going to create a normal class on it — we’ll type Rob Lowe and hit Return. And here’s where it gets intense: let’s set the background (we’ll add a background IMAGE to the Rob Lowe class here), and we’ll choose from our many images of Rob Lowe.
And just like that, we’ve applied a Rob Lowe background image to the Rob Lowe class. (So far, it’s just like styling any OTHER class.) But here’s how it’s used GLOBALLY. Suppose we have all these different kinds of elements. A div block that’s used as a card, our navigation (a navbar), these buttons here — in fact, if we click into ANY of these elements, they already HAVE classes. Even if we click this HEADING here. Let’s name this “Example heading” — and when we do, let’s make a styling change HERE, too — let’s change the font size. And...of course...we can also mess with the line height.
So EACH of these has a Base class. And the point is this: what we’re ABOUT to do? Using our Rob Lowe class globally (a global class) will apply those SPECIFIC properties (specific styles) to something that ALREADY has a class.
And it works like this: we’ll click in to the right and start typing Rob Lowe. When we add it (notice how it’s listed as a Global class)? When we add it, that BACKGROUND image and all its styling is NOW applied to the card. But here’s why this is a big deal: suppose we do the same thing here on the navbar — with the navbar selected, we can ADD our Rob Lowe class globally. Same thing with these buttons — but notice here how we have to add it to EACH of them — adding a global class is done element-by-element; it doesn’t go over and mess with OTHER things that happen to have our Button class applied; so we have to apply Global classes to EACH instance of an element we want showing Rob Lowe.
And that heading? We can do the same thing here. (We can add Rob Lowe to the heading.)
And if we go back to the ORIGINAL div block? (With just our Rob Lowe class applied?) We can go in and tweak that background image. Maybe we want it NOT only to cover; but we want Rob Lowe’s eyes positioned perfectly. (Notice how it’s updating on ALL different kinds of elements.)
And that’s the big advantage here: if we added Rob Lowe as a background to ALL these different classes (if we went in and set the background image, and Cover, and position) — if we did that on ALL these classes, we’d develop significant wrist injuries and spend even MORE time if we wanted to make a change.
So. Let’s take a look at how this works technically. The Global class (Rob Lowe) has styling properties applied to it. And by adding that on TOP of (or more literally NEXT to any other class), we’re able to apply the styling properties that come from the GLOBAL class...to other classes.
And that really sets us up with an existential dilemma: how do we balance the fact that we can use COMBO classes or GLOBAL classes at any time? And also, what’s the meaning of life?
We’ll cover all of it, and the best way to do that is by breaking it down into three:
Base classes, combo classes, and global classes. We already KNOW base classes (it’s just the class that we create and use for basically all styling — a plain base class like Button). A combo class is built on TOP of a base class — in other words, it lets us COMBINE the base class with some more specific styling — like a dark version of the button, or a green one, or one that’s larger, pink, and upside down.
But a Global class? This is a separate thing entirely. A Global class is created on its OWN. And you can add whatever style properties you want. (Like a background image. Of Rob Lowe.) And you can append a Global class (you can ADD it) to really anything you want — a BASE class like a styled Button, a COMBO class like the dark button — it doesn’t matter.
The only thing that matters with Global classes is this: they’ll BRING their styling to ANY element with ANY class or combo class applied...AS LONG AS a more SPECIFIC property on those classes is NOT already applied.
Put more clearly? If we have a class named Zoe Saldana and a background is ALREADY set on that class, adding the global class of Rob Lowe? Won’t do a single thing. And that’s because Global classes will ONLY apply styles that AREN’T already set (we can click the label and see that the background image is being set on the Zoe Saldana class).
And a really practical way to think about it is this: say we’re starting to build a massive marketing site. And we want an ASSORTMENT of elements to ALL have a specific and CONSISTENT drop shadow. (This card, this button, this image...)
Let’s create a new class (a lot of times, to create something we’re using as a Global class, it makes sense to just use a temporary element like a div block) — and we’ll add a name: Perfect shadow. So we’ve CREATED this class (this’ll be our Global class) and we can shadow it very briefly right now — in fact, we’re not going to put much care into this ON PURPOSE to prove a point (because we’ll come back to it).
And all we have to do? Is add this as a Global class to all that other stuff. We can add it to the CARD as a Global class, we can add it to the BUTTON as a global class — that’ll add the shadow there, too...we can EVEN add the PERFECT shadow...to this image EVEN THOUGH it already has a COMBO class applied. (We can EVEN add Global classes on top of Combo classes.) And now they all have the same shadow.
And if we want to change the styling on our Global class? We’ll just select that sample div block from before (again, we’re just using this as a temporary THING so we can STYLE the Perfect shadow class)...and when we do, we’re able to perfect the shadow (all properties we’re changing here are affecting the box shadow on ALL of these different kinds of elements).
Now. Does that mean we should use Global classes all the time? Does it mean everything’s a complicated mess of Base classes, and Combo classes, and Global classes, and MasterClasses? Probably not so much. They’re a TOOL we can use if we plan on making Global changes that affect a bunch of elements in similar ways. In MOST cases, using Base classes on commonly styled elements? This is a pretty good deal. Using COMBO classes on some of those: also a pretty good deal. And in the event that we want to apply a specific type of styling (some properties we want applied to classes of ALL kinds), we can use Global classes.
But that’s the basic approach to styling for the modern web: we can CREATE classes and apply them wherever we want to keep styling unified and organized, we can EDIT styles on those classes which will affect ALL elements with that class applied, we can remove classes, we can duplicate classes if we want a starting point for a NEW kind of styling, we can use COMBO classes to make more specific versions or VARIANTS like dark modes with lighter text — and we can always create Global classes. When it’s called for, we can apply a GLOBAL class to pass specific styling to classes of DIFFERENT types.
Now, if it seems like a lot...that’s because it is. Classes and TAGS (which we cover in a SEPARATE lesson)...these are POWERFUL tools, and with them, you can style pretty much anything out there.
Remember: most of the internet is built USING classes. And because we don’t have to style everything one-by-one, we can USE classes to build almost any design we can dream up.
