This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "CSS Playground" Lesson
[00:00:00]
>> Brian Holt: I gave you, here, this CodePen. So CodePen is a website that I just kind of hold near and dear to my heart. I think most web developers do. It's kind of like the playground I gave you, but it's even more elaborate and has more things. So what I would actually invite you to do is click on this edit on CodePen, right here.
[00:00:18]
>> Brian Holt: It's gonna open this website for you. You can kind of just ignore the JS part, cuz we're not doing any JS right now.
>> Brian Holt: And you can see here, I did a bunch of HTML.
>> Brian Holt: So, h1, h2, h1, a bunch of CSS over here
>> Brian Holt: To affect that and then you can see down here is like what that actually ends up looking like.
[00:00:47] So I would say just like play with it to your heart's content. And I'll kind of like step through like how these things are working with a and yeah, why.
>> Brian Holt: So this h1, right here. First thing I want you to point out cuz there's an h1 here and there's another one right there, and I have an h1, select right here.
[00:01:12] So it affects both of them no matter where they are on the page, right? Cuz it matches like anytime this is an h1 then apply these things. Make sense? So that's why this one is equally affected as this one. Cuz they both match the rule, so the rule can be matched multiple times, okay.
[00:01:32] Font family, this is a font, right, so the font is like how the font looks. You can see that this font looks different than this one. Right, they're using different fonts. Font could also be called like a type set or something like that. Is anyone confused by the word font?
[00:01:54]
>> Brian Holt: Okay, color red font size 50 pixels. It's quite large and then text align right. So you can see here that it's being pushed over to the right. That's what the text align right does. It says move this all the way to the right side of the page.
[00:02:12]
>> Brian Holt: Okay, then we go down to the h2, where it says this is the h2. Font family Monaco. Monaco is a monospaced font. And all that means is that every character is exactly the same width. Whereas, if you look at this one this i, is not nearly as wide as this h, right the h is far wider.
[00:02:35] Whereas Monaco, every one of these is exactly the same width. It's monospace. That's what that means. The color is sea green. You can see that it's a nice tealish color. Font size 40 pixels you can see it's slightly smaller than this one. The border is 9 pixels dotted gray, so you can see here they're dots on the side.
[00:03:00] There's also dashed and there's also double I think is one, right? So there's a bunch of different kind of border styles that you can use. I'll be honest I think really the only one that I ever use is solid. But just they're out there. There's a bunch of stuff out there, and then text to line center.
[00:03:21] So a curious thing you might be noticing is, well, I have this h2 and the border goes all the way to the edge, right? That's because these h1 will take the entire line, unless you tell them not to, they take the entire line. We'll get to how to tell them to not take the entire line, but by default divs take the whole line, h1 through h6, they all take the whole line, paragraphs take the whole line, that's just what they do.
[00:03:50] Unless you again instruct them otherwise which we'll get there.
>> Brian Holt: Okay, paragraph. So we go down to the paragraph. Font family comic sans, everyone's favorite font, I would say.
>> Speaker 2: Are the font families standard from computer to computer whether you're on Mac or is it?
>> Brian Holt: The answer to that question is yes and no, as any good question should be answered.
[00:04:20] There are a handful that you can pretty well rely, every computer has Aerial on it, every computer as Helveticca on it, only Mac has San Francisco on it, for example. So if you're on a Mac, there is a thing called Font Book.
>> Brian Holt: And you can see on here, these are the web fonts.
[00:04:41] If something, I don't what the equivalent is on Windows for this but this it happens to exist for Mac, like every computer has times new roman on it. So, there's certain things that you can depend on being there. There's, whereas like I think mono code, I'm not sure you can depend on that being on a every computer.
[00:04:59]
>> Speaker 2: So what if you wanna use a font, that you're not guaranteed it is gonna be on somebody's computer, then how does that work?
>> Brian Holt: My first answer to that question is don't. I know, I'm a jerk, I know. My second answer to that question is it is possible, there's a thing called web fonts where you can basically include fonts from Google usually.
[00:05:24] Google has a thing where you can just like conclude their fonts on your page. But usually it's unnecessary. Usually you can just say like well you're trying to use this like super impact ms font. Just use helvetica and call it a day or something like that right. Usually you can just switch to something else and not really sacrifice too much in the way of design.
[00:05:46] And the reason why I say that is those fonts usually end up being several hundred kilobytes, which is, that's a lot of page weight, which in my opinion is not worth it. I know, been telling them for years, and I will be telling them for years. Does that answer your question?
[00:06:04] Okay, cool.
>> Brian Holt: So a bunch of these that I'm showing you are, well, Comic Sans is on every computer. Not that you should do anything in Comic Sans, [LAUGH] but you can. So that's what you can see here is that font size 30 pixels, background black. So that's why its black and then the color is white and that's why it's on there, and then you can see in here that I have some spans in here, right?
[00:06:37] And if you go down to span, you can see that I have yellow underlined in italic and you can see just that text that is inside the span is yellow and underlined and italic. So that's what spans do, they they do specific blocks of text.
>> Brian Holt: Div, so you can see here that did color blue and then inside of the div there's an h3, but the selector says div color blue, so that h3 is still blue.
[00:07:15] So that's how it got that. Then if you go down to the ol, you can see here, there is a thing called list style and there's several ways of doing list styles. So in this case I'm doing roman numeral numbering. Roman numeral numbering. But you can also do, well if I just get rid of it.
[00:07:41] It'll go back to being numbers, cuz that's what it is by default. Then you can change it to upper Roman numerals and I think you can also do lower and that also works as well, right? And they're lowercase instead of uppercase.
>> Brian Holt: But something you can do, which just to show you how flexible CSS is, I can also do, I think, bullet.
[00:08:03] Nope, not bullet, but I know square will work. So I change this to squares. Here's the problem, right? This is an ordered list, right? An ordered list has to be in that order or it's considered not an ordered list, right? It would be an unordered list. But I can style use CSS to style it exactly the same way.
[00:08:26] This is going to be a common theme throughout html and CSS for you. You can use and abuse CSS as much as you want. You can play outside the system as much as you want, but don't. The reason why you don't wanna do it is, you screw up screen readers.
[00:08:41] And like that is a huge problem. So, you should learn how to and then never do it. [LAUGH] That's what I'm trying to teach you. So, if something is an ordered list, make sure that it looks like an ordered list, that's all I'm trying to say.
>> Brian Holt: So here, this is the square instead of the normal circle.
[00:09:05] If I remove this, you'll see that they go back to being circles.
>> Brian Holt: Okay, and then I made everything brown with by changing the LI to brown.
>> Brian Holt: And then I have another h2 at the end of the page.
>> Brian Holt: Any questions about what you saw here?
>> Brian Holt: Yeah?
[00:09:32]
>> Speaker 2: There's a question from Chad, about selectors. If you have two selectors like a div and an h3 and you try and change the color in CSS, what are the operations in terms of, which one decides the color of h3 if you have the h3 separate, but also within a div?
[00:09:50]
>> Brian Holt: That's a good question and the entire next section talks about it. So, yeah, I'm glad that you're thinking about that. It's a pain in the ass. [LAUGH]
>> Brian Holt: Yeah, go ahead.
>> Speaker 3: And is it okay to, within a span, assign a class to that?
>> Brian Holt: Yes.
>> Speaker 3: Okay.
[00:10:13]
>> Brian Holt: And we'll be talking about classes here in just a second as well.
>> Speaker 3: Okay.
>> Brian Holt: So I also like that you're thinking about that.
>> Speaker 3: Yeah.
>> Speaker 4: She's asking about boiler plate.
>> Speaker 2: Boiler plate for CSS.
>> Brian Holt: I see what you're saying. No, there's no like ceremony or rituals with CSS.
[00:10:29] This is exactly what your CSS style sheet will look like. It's just a bunch of rules. Does that answer your question?
>> Speaker 4: Yeah.
>> Brian Holt: Okay cool, thank you, that's a good question. So with this HTML, this HTML does not have the ceremony, the ritual boilerplate around it, but it would.
[00:10:52] And if you actually like inspect element and go through it, you would see it. This guy Justice is awesome. He's from Nigeria. He can't wait to see what you unleash. Neither can I.