Intro to CSS
Let’s explore CSS — how you can control styling and layout on the web. We’ll walk through the kinds of styles you can add to HTML elements to create a beautiful site, and some best practices for styling web content, using selectors and classes.
Video transcript
If HTML is all the boxes of content and the basic structure of the page, CSS is how we define styling and layout. And it’s an industry standard, because it lets us keep things even and consistent across a site.
In this lesson, we’ll cover the kinds of properties you can control, we’ll show how this works on the web using Slack’s marketing site — we’ll cover selectors, then we’ll use the MacBook Pro page to cover a specific kind of selector: and that’s classes.
Let’s start with properties. Starting with the main idea: CSS. Nobody knows what that stands for, but it still powers most of what you see on the web.
Two things: first, it stands for cascading style sheets, but second, most importantly, it lets us set these kinds of properties on pretty much anything.
There’s the standard stuff, like color (that’s a style property) and font and border and background image. Fine. But there are CSS properties for spacing. And layout. And 3D perspective. Animated transitions on hover. How far up the monitor hovers.
The only point to take away here is that there are properties for almost everything that let you control style and layout.
That’s CSS properties. What about selectors? Starting with…why do we use the word selectors? Here’s Slack’s marketing site (this is their product features), and if we scroll down, let’s look at this heading. Let’s do the same thing we did in HTML — we’ll right click, and inspect.
What is our goal here? If the content to the left is our HTML, then the styles — everything on the right — is our CSS.
So, if we hover over this box, we can see the heading — this is an H2 — a second-level heading. We can see it says “Work more easily with everyone.”
But because that node (that element) is selected, we can see the CSS. We can see the styles here. Let’s focus on just this H2 right here — the one that has font-family and a bunch of other properties. The H2? That’s the selector. A selector essentially says “select ALL H2s and apply this styling (all the stuff between the braces).” That’s it. So H2 is the selector.
So if we change the style? If we take the font-family and change it to Comic Sans MS? We just updated that style.
But here’s why CSS is powerful. If we scroll down? This is Comic Sans as well. And if we scroll farther? We can see ALL H2s were affected. (That CSS made the styling match, even though each heading has different content.)
That’s what a selector does: it lets you specify what things on the page to select, and it lets you define the styles on ALL of them at once. (We could do the same for paragraphs, links, tons of stuff — we can use different selectors to select and style different elements.)
But that’s selectors. What about our final topic: classes? Because what we showed on Slack was affecting all elements of a specific type: all those H2s.
With classes though, let’s look at Apple’s MacBook Pro page — right at this table here. Notice how these links (the buy links) don’t look like this link (the compare all whatever). Apple didn’t want to style all links on the page, just these four. And they can do that because they’re using…classes.
Let’s go in and inspect one of them. And when we do? When we go in and inspect. Let’s go over look at this part of our CSS, where it says button. And let's change some stuff. Let’s change the border radius; we can see the links are rounded, but let’s change the radius to 0 pixels. What happens? The links now have a sharp edge. Not just one; all four. And we can even click to the right and add our own CSS: let’s add a transform, where we rotate — let’s actually leave it just like that because the change is very obvious — kind of a head tilt. We could make it more dramatic though — the control here is, of course, entirely up to you.
But what happened? And more importantly, why wasn’t the link above affected?
The answer is: there’s a special kind of selector this time: of course, that’s a class. That’s actually what the dot at the front of it indicates. And the reason it’s affecting just these links and not that link above is because each of these links specifies that their class is “button.” And that’s why they’re so powerful. Classes let us target any elements that have that class applied.
So. Let’s recap. We covered that there are a ton of CSS properties for almost everything. We showed using Slack that selectors let us select any kind of thing — in that case, H2s, and they let you apply whatever styling you want. And of course, on Apple.com, we saw that classes are a special kind of selector which will add your styling to any elements that have that class applied.
This, of course, is just the start of CSS — and it only gets better from here. As you dig in more and more to mixing and matching styles, and going deeper with the power of selectors, you’ll get into how these things fit together and that’s where the cascading comes in. But that’s a high-level overview of CSS.
[Grimur] Nothing beats it. An empty coffee cup. You’ve gotta subscribe and like so I get coffee.
