Log in as an administrator, Fall semester, delete and confirm? Delete (or Backspace depending on your keyboard). Blinking cursor (we’ll get into THAT in a second). But this time, let’s click to the RIGHT of the class label. Select the Section, go over, apply the Main button class. Click the dropdown thing next to the name of the class? Remove. Let’s select it, and of course, apply the Main button class. (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.)Īnd if we want to rename (we’re talking about RENAMING a class)? We can click into the thing, rename, hit Return. Because like we did before, we can just select ANY element that has our Main button class applied, and we edit the styling. And to EDIT this class, do we have to go back to the ORIGINAL button? No. 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). 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. When we select it? Darker background color. And instead of clicking in to NAME a class? Let’s just start typing out the one we made before. Let’s just grab another button (by default, elements don’t COME with classes applied). That means on THIS class, this background color property has been set. The moment we’ve done that on the class we just created? The label turns blue.
![inherit font combination inherit font combination](https://programmer.ink/images/think/08f5872012d6a69fe042dda172e3102b.jpg)
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). Because we haven’t actually DONE anything with it yet. When you hit Return? You’ve created a class.
![inherit font combination inherit font combination](https://imgs.developpaper.com/imgs/2022-03-17-14-19-17-p0ee5apdtxc.png)
To create a class? Select a thing.click in to the selector.and name your class. 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. That is.if we make a CHANGE on the class.every OTHER element with that class.gets the update, too.Īnd 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. The result? Of course we have consistency in STYLING, but even more important: continuity. 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. Then change it 52 more times.īut the W3 Consortium said “no more.” And born was CSS. Right when you’d get 53 paragraphs styled just right? You’d want to make a change to the style. Because back in the days of the early internet, developers had to manually style things in HTML. Chances are, if you see a modern layout on the web, it’s styled using classes.