CSS In-Depth, v2 CSS Introduction
This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "CSS Introduction" Lesson
>> Estelle: So CSS stands for Cascading Style Sheets. It does not stand for cascading shit show.
>> 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.
>> 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: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.
>> 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,
[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.