CSS Vocab & Syntax

[00:00:00]
>> Kevin Powell: Now, very quickly, I was writing some CSS. I just want to quickly go over vocabulary and syntax. We've seen the CSS, there's a bit of some jargony words. I'm going to be using these jargony words as we're going through, so I just want to make sure we're on the same page for what these words actually mean. There's CSS. Everyone knows what CSS stands for. Yeah, who wants? Zoey, cascading style sheets.

[00:00:21]
Yeah, thank you. So cascading style sheets, what it stands for, the style sheets part's really straightforward. We're styling our pages. The cascade part's a little bit more complicated. We'll be talking about it as we go through the course and looking at some of what that is, but it's basically the algorithm that the browser is using to decide what styles to apply to what elements, and the calculations that go on there.

[00:00:42]
So we've already seen a basic bit of code that looked a bit like this. This one's a little bit more. There's a few extra lines that are in here. And when you have this entire block of code like this, it's called a rule or a rule set. The rule set, I think, is the official one, but I usually and most people will say that's the CSS rule. So it's the entire thing from the very top to the closing curly brace that you have at the bottom.

[00:01:07]
The rule is made up of a bunch of pieces. The first one is your selector. The selector is pretty straightforward. It's the thing you're selecting, what you want to be applying styles to. Then you do your opening, closing curly brace. Inside there, we have a whole bunch of stuff. Before we get to those things really fast, you can have multiple selectors, and we're going to be seeing some more advanced selectors a little bit later on as well.

[00:01:29]
But you can have multiple selectors that are a comma separated list if you want to select more than one thing. It's still part of one rule, but it's a single selector. Inside the curly braces, we have declarations. This is a word I'm going to use a lot. It's a bit of a strange word, jargony word. You have a declaration. I'm declaring my font-family to be System UI. And so anytime I say, you might say I'm going to declare the font-family, or I'm going to declare a color, just means you're deciding what your color is going to be.

[00:01:58]
Declarations are made up of property-value pairs. The property is what you're going to be changing, so I'm choosing my font-family property, and then the value is whatever you're setting it to. So my font-size property, value 3 rem. In between the property and value, there's always a colon, and at the end of the value, there's always the semicolon. And we don't need that demo, we just sort of ran through it all already, so we can jump down into taking a look at some basic selectors.

[00:02:30]
There are three common types of selectors, and then there's some more advanced ones. We've already seen element selectors. It's when we select just the element very quickly. For example, in ours, the original design that we had, we had some headings and it was the headings in our links should have been a gold color. I'm actually going to really quickly go back to the before we start lesson. If you want, because we're going to be referencing the designs every now and then.

[00:03:00]
Oh no, sorry, not that one, the project setup. In the project setup, if you want to go to the starting designs, you can also save these, so I'm just going to take the homepage and save that, and in my FEM chess, I'll make a new folder for it called designs. Just so I can reference it in VS Code, if ever I want to, it's going to be a strange file name, but you can change that. So in there, we'll just call this page one.

[00:03:31]
So now if I opened up VS Code, if I forget sort of what I want, we can open it directly. Oh, there it is. So we can see that I want my headings and my links to be a goldish color. We'll get some actual color values in here in a little bit, but for now we don't want blue text, so I can remove my blue text and I can, if we come and look here, I have my H1s at the top, that makes sense, and the H2s, as well as my links that I had, all want to be using that gold color.

[00:04:05]
So I'm going to say we'll start with just H1. Color, and if you know color values, you can come up with something else. I'm going to write goldenrod. There's some fun color names in CSS, goldenrod being one of them. And localhost, I think I closed it. One second, we'll do it. Nope. I think it's 5500. There we go. So now we can see the H1 has switched over to that gold color at the top. I can also then change my H2s, because those ones as well, H2.

[00:04:50]
Color goldenrod. And the H2s have switched, and the last one I want to do is the links. So all of these are just the element selectors. I'm choosing whatever the element is without any angle brackets on it. Color goldenrod.