This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "CSS Introduction" Lesson
[00:00:02]
>> Estelle: So CSS stands for Cascading Style Sheets. It does not stand for cascading shit show.
>> [LAUGH]
>> Estelle: And by the end of this two-day session, hopefully, you'll agree with me on that. And nor does it stand for California style sheets.
>> Estelle: So the deck that I had, I'm just gonna start the snowflakes again.
[00:00:28] Basically all I did was put in the eyes because they were a small character. And then I had the div of class snowman, and that made the whole thing work. So during this talk we're not gonna actually talk about this deck because this deck was retired in 2012.
[00:00:46] Cuz you can only look at snowflakes for so long before you get sick of snowflakes. And I've been in Minneapolis for a few hours and I'm sick of snowflakes.
>> [LAUGH]
>> Estelle: But CSS, with selectors, you can basically target anything, and with CSS you can make those snowflakes random.
[00:01:10] They look random, right? They're rotating, they're dropping, they're spinning, they're moving naturally down the page. That's all done with CSS. So CSS is the presentation layer of the web. There's a lot of people who talk about putting JS, or CSS in their JS, they're all wrong. Not that I have an opinion on it, they're just wrong, it's not an opinion, it's just a fact.
[00:01:36] Because JavaScript is supposed to be for the behavior. So is animation a behavior, or is it a presentation? It is actually a presentation because there's no information being garnered from it, and there's nothing you can do with it. And then content, as you see here, I didn't even need to put the id of flakes or the class of snowman.
[00:02:02] I could have targeted this whole thing without classes or ids. You can use CSS no matter what your HTML is like.
>> Estelle: There's a few ways to include your CSS. You can do an external style sheet. Generally this is considered the best way to include your CSS. If you wanna improve performance and your CSS is minimal, and hopefully I will teach you how to make minimal CSS instead of long CSS.
[00:02:34] You can improve performance by putting some of you CSS in the style block in a head of your page because your CSS, your external CSS and your internal CSS is blocking, it will not present until your CSS is downloaded. So if it's already downloaded, your CSS, instead of having to make another HTTP request, that could help improve first load.
[00:02:53] But if you have to download the CSS every single time you change pages, that is bad for performance. So you have to weigh it, you could put a little bit of CSS on your home page for that first load, but always have an external style sheet if you have a multi-page website because you wanna cache that.
[00:03:11] And then you can do inline styles like the one on the bottom. You'd be wrong to do that.
>> [LAUGH]
>> Estelle: Not that I have an opinion on it. A lot of times you'll see this, and it will be because it was put in with JavaScript. You'll see it actually in my decks because I was in the middle of something and I'm like, let me just add this and test it and I forgot to pull it out.
[00:03:38] But my deck is not a production-ready website, it is a PowerPoint presentation. And my decks are much smaller than any PowerPoint presentation you will ever see because it is done purely in CSS, HTML, and JavaScript. In fact, the only images that you've seen so far in this whole deck are the pictures of my book covers, everything else is just purely CSS.
[00:04:02]
>> Estelle: So why use external style sheets? It allows for reusability cuz you can cache it. You can maintain your CSS if it's on one spot, if it's in every different page, you have to actually edit. If it's in every individual p element, like we saw on that inline, you'll have to maintain that.
[00:04:22] If it's in your Java Script,
>> Estelle: How do you maintain? I don't know how to maintain CSS in JavaScript cuz you have to keep going back to your JavaScript when you wanna change a color or something. With CSS the changes are instantaneous, and we'll see that a lot during our deck because we are gonna be editing a lot of CSS right in the header of a document and it will load immediately.
[00:04:45] And I've no clue what interchangeable presentation layer is cuz I wrote this a few weeks ago and I don't remember what that meant. Okay, so here is the CSS thing code that I had wanted to show. And that was the exact same HTML, this site has the exact same HTML as this site.
[00:05:02] Do those two look like the same pages? The content is the exact same, the markup is the exact same. It's only the presentation file that is different. And that is why using external CSS style sheets, or just using CSS in general allows you to do the look and feel that you so choose.