CSS Playground

[00:00:00]
>> So I wanted to just play around with this a little bit, so I have this little CodePen here that you can go and mess around with. I'm just gonna open this directly all the way in CodePen. We don't need the JavaScript portion, so you can kind of just hide that and, let's make this a bit bigger.

[00:00:23]
Okay. So let's kind of just go through this piece by piece a little bit. By the way CodePen is just like HTML and CSS that you can edit directly in the browser. See you can totally put this into your project, and it would just work, but this is just like little snippets to share with other people.

[00:00:44]
So I have this h1 here and I have this h1 selector here, I changed the font, so this is Helvetica font. Color red, font size 50, we can make this 10. Now it's tiny, right, or we can make this 75 or 750, that's gonna be enormous, okay, so now, 75 right now it's huge.

[00:01:09]
And then I did text-align right, so notice it's aligning all the way on the right instead of on the left, right. So that's what pushed this all the way over here. So notice I have this h1 here and this h1 here, as you might expect, they're both affected by the same rule.

[00:01:24]
Because that h1 selector matches both of them, right. Okay, we have the h2 here, this I chose Monaco as the font, which is a nice monospaced font for example, your code might be in Monaco. It's a nice font for coding in, I made it seagreen, which, arguably that's not super seagreeny in my opinion.

[00:01:52]
But that's what the browser thinks is seagreen, smaller font size, it's got this really thick dotted border. I mean, gonna make 19 this should be real thick dots, right, and we can make them lightgray, Or We can make them black, and then notice that this is center aligned, right.

[00:02:20]
So it takes the entire line and then its center aligns itself. Okay, then I had this paragraph down here. I made it Comic Sans because that's everyone's favorite font, right, it's the best font. So it's Comic Sans, it's 30 pixels, it's got a black background, and the color is white, right.

[00:02:46]
But then we have these yellow things going on here, what's going with that. So notice we have spans here, and then down here underneath that here, I modify the spans to be yellow. To be underlined and italic, so that's when you would wanna use a span. If you remember talking about that in the original sections.

[00:03:04]
If you wanna change the style of something in the middle of a paragraph, that's what the span is there for. So again, a span is like a Ziploc bag, it's just a generic container for something. In this particular case, you could kind of argue this is emphasized, right.

[00:03:22]
So the more correct thing to do would have been to call this an instead of a span. But, it's kind of just up to you on how you choose to do something. Okay So I have a div here, it says here's an h3. Notice I don't have h3 styled anywhere in here, but I do have div color blue.

[00:03:52]
So notice that div color blue is affecting the h3 here despite the fact that there's no h3 selector. That's because the parent here can affect the child. Now, not everything permeates down. For example, if I say border, one pixel solid red, notice that the entire div here, got a border of one pixel solid red, right.

[00:04:18]
But there's not another one inside of it, right. So here if I come down and say an h3 border one pixel solid green or blue. Notice that there's a second one inside of it, right. So only some things permeate down, color being one of them. And frankly, not many of them do but color is one of the things, font will permeate down to the children.

[00:04:48]
Some of them do, not all of them do. Okay, more paragraphs here, and then I got a ul here. Of list items, so got a list styles you can just say I want this to be a bullet. Or what's another one on here, I can never remember what they are, but square is one of them.

[00:05:23]
So you can actually affect what kind of bullet is shown there. You can even say list style, none, it'll take away, so now notice that there's no bullet there. Or if you just delete it there's a default when I think of just a circle, yeah. You can say list position of inside, so notice if I say change this from inside to outside, I'll actually move it around.

[00:05:59]
Maybe it won't. But basically it's like do you want the positioning of that bullet to be relative with where the text would have been. Or do you want me to shift everything in, so it's inside of where it would have been. There's a bunch of positioning stuff you can do with that.

[00:06:16]
And they're brown notice because I did the li is brown. And then down notice with the ol the ordered list, I did upper Roman, right, so now they're Roman characters. Instead of just the normal numbers or you can do lower Roman. Right, you can even just do square, right, so both of them apply.

[00:06:42]
If you have an ol and you still want it to be with bullet points you can still change it however you want. It's not that it won't let you change, it'll let you change whatever you want to. Is that a good idea? Probably not, if you're using an ordered list, you probably want that some semblance of order expressed.

[00:07:00]
But it's totally up to you. Cool, and then I added a h2 at the end of the page to show you whatever we change at the top, also applied down here at the bottom. Cool, any questions about anything that I've shown you with the HTML and CSS. I just wanted to show you a bunch of examples of how everything can relate to each other.

[00:07:26]
And why we keep HTML separate from the CSS. That was another thing that I wanted to harp on is that, the concerns of HTML. Which is just content on a page are different than how you wanna style it, right. Technically, you can inline all of your CSS. I'm just gonna show you something and hopefully you'll never do it, but I can say style equals color pink here.

[00:07:56]
And that will work, right, you can inline all of your CSS. It's an awful idea, though don't. I'm gonna say right now, literally never do this. Because now I've made some one off unicorn kind of thing that I can only use in this one particular place. Whereas if I put a rule here, I now have a reusable use rule that I can use throughout my entire website.

[00:08:18]
And when your website is 100,000 lines of HTML and CSS, you wanna have some reusability to your code. You separate the content from the style and just makes both things easier to maintain. So, before this section, we learned how to use CSS rules, how to affect how your page looks.

[00:08:38]
I was showing you kind of naive implementation to this, I'm assuming that. Every paragraph I have on the page, has to affect every paragraph right. What if I have one kind of paragraph here, and a different kind of paragraph over here, and I want them to look different.

[00:08:54]
What if they need to share some of the styles? Well, I'm gonna show you how to select both of them differently, and how you would do that, and why you would do it. And some of the other tips and tricks on how to do that. So, for example, what if I wanted to have a red p here and a blue p here.

[00:09:10]
How would we do that? Cuz they're both paragraphs, so we can't just use the p selector. So I'll show you that here just a second. So first of all, we're gonna have to remember the part on classes that we talked about in the first part of this course.

[00:09:27]
We're gonna reuse that again here, so that we can style the same types of tags in different ways. So for example, you can imagine here I'd have an h1 with the brand of my particular page. And maybe I have another h1 later that says, blog post title my cool blog post, how how would I style those differently.

[00:09:52]
Now the first question you might ask me is well, I thought you couldn't have multiple h1's on a page. You can, the question is do you want to and I'm not going to tell you yes or no. But I'm going to show you how to make them different and this applies to anything.

[00:10:04]
So the first one here is I have this h1, and I give it the class of branding. And I called it my super cool brand, and then I have another one over here called blog-post-title. And that one's called my cool blog post, and this one's red and this one's green.

[00:10:24]
So instead of selecting by h1 here, which I didn't. I selected by dot, that dot is also critical, branding. So the dot means look for the class, branding, right, instead of looking for h1, right. Which you don't have anything prefixing it, it'll look for a literal tag called h1.

[00:10:52]
It's looking for a class, again, class here called branding. So that's what dot branding is. And now I can select different ones, right, class equals branding of my super cool brand it'll select that. And .blog-post-title, it'll select anything called blog-post-title. Now keep in mind, I don't know, you might need to do this in the future.

[00:11:17]
I can have p class equals branding, other cool text. Obviously p and h1 are different, but they both have the class I can even reuse that across tag types, right, cuz now this is red. Just a little note here on class naming, I told you you can name classes whatever you want, that stands.

[00:11:48]
But some personal advice to you, don't name it red brand or something like that. Because this is red, you wanna name things after what they are and not what they look like. Just as a general tip, the reason being is, what happens later when my company rebrands and all sudden our branding is now teal, right.

[00:12:12]
So I come in here and I say teal, so now the red branding class is color teal. Really confusing, right, so you either have to now go refactor in every single place that use red branding. Or you just have a red branding that's teal, and you're stuck with this really weird cognitive dissonance that lives in your code base.

[00:12:34]
Whereas if you just call it branding, you call it what it's supposed to be, it's the branding for your website. You never have any concerns about what that is. So that's my advice, just don't name it what it looks like. That took me a really long time to wrap my head around, but now it's just kind of second nature, okay.

[00:12:54]
So that's what the period is, the period refers to class names, that's fine. So you might ask me next, when should I select tags versus when should I select classes. My advice to you is 99.99% of the time classes, just use classes everywhere, avoid styling tags directly, almost always.

[00:13:21]
The only time that I will style tags directly is if I literally intend on styling every tag of that on my webpage. My intent is literally every single one of them, which is not frequently. Normally it's this one looks like this, this one looks like this, this one looks like this, right.

[00:13:38]
But for example, maybe your anchor tags, you want all of the anchor tags across your entire website to look exactly the same. That would be an acceptable reason to style just the a tag, right. So, if you intend on styling everything the same way, you use the tag, otherwise, just use classes.

[00:13:56]
It just makes everything way simpler.