5.2 CSS overview and history - Video Tutorials & Practice Problems

<v Michael>All right, let's take a quick look</v> at a typical series of CSS declarations just to make this a little more concrete right from the start. The way we use CSS in practice is by opening up a text editor and just typing in text, so this is pretty much just the way you would write HTML. So let's take a look at this. I'm just gonna open up a text editor here and, actually let me just do this here. This is the name of every like random file, foo.css. And it's not important to understand the details here. I just want to get started with the basic syntax. Probably want to make this a little bigger. Yeah. So let's just take a look at the structure of this, in particular I want to discuss the word cascading in cascading style sheets. So what that refers to is the way the rules are interpreted as we go down the file. Right, so here's the body and so, Lee, if we wanted to change the body color for the entire site, how do we do that? <v Lee>Just like it is showing right here.</v> So this will be passed down to all the other elements that are on the page to have black text color. So the paragraph that's in the next style right below the body, you wouldn't have to define color black again if you wanted the color to be black. So it has, like a river going down a series of rocks cascading down to all these other elements. <v Michael>Right, and so if we changed this color</v> to, say, white, it would automatically affect every element on the page unless it were overridden by something down here. So for example, we've got, this is a paragraph tag with a font size of 1em, but then we'll be talking about what this is later on, but this is a more specific rule with a new font size. <v Lee>So the more specific rule</v> is gonna have a larger font and like Michael said, we're gonna get deep, deep into this but just so you can see how CSS looks on the page so that you're familiar with it and how the conventions work with the enclosures, the curly braces around, and the semicolon at the end of lines. This is what CSS looks like and this is what we're gonna be doing. <v Michael>We talked and learned enough HTML</v> to be dangerous about inline styles. We'll be using those sorts of styles briefly in this tutorial, and then we'll quickly move on to what's called an internal style sheet, and then we'll do it the right way using a file that contain CSS which is called an external style sheet. <v Lee>And to give it a little more context,</v> an internal style sheet is just a collection of styles that is actually on the HTML document itself and not kept in a separate document. Most sites now use an external style sheet that's linked, but there is actually use cases for an internal style sheet because they load faster. So some sites like Google will actually bake all of the CSS onto the page so that there doesn't have to be another server request, but that is far more advanced than we need to be. <v Michael>Yeah, there's pretty much no way</v> you're gonna have to do anything like that when designing a site that is operating at any scale smaller than Google. One thing to bear in mind about CSS is that it's constantly evolving to better serve the needs of developers and designers and ultimately the people who use the web. Things like this, in this file, these simple rules are pretty much the same and have been for a long time, but it is important to bear in mind that we're gonna give you a foundation but you'll have to keep paying attention as things go forward in order to keep your skills fresh. <v Lee>And part of the reason for that</v> is that as we are sure you know there are a variety of different web browsers and different browsers want to be on the cutting edge and they wanna implement new ideas in CSS all the time even before they've become a standard, so there are oftentimes where one browser will support a feature in one way and another browser will support a feature in another way and you need to use specific special CSS to talk to the different browsers. So it can get kind of complicated. It's always changing. Again, this is one of those reasons why resources online exist that can tell you, you know, how far, how widely adopted different features are. <v Michael>The good news is that CSS has matured</v> to the point where there's a core of functionality that hasn't changed in quite a while, that's quite stable. But it wasn't always that way, so let's take a quick look at some of the history of styling on the web. Lee came up with this analogy of the Cambrian explosion where there are all of these different body plans that evolution found, and there was all this variety, so here are some of the different kinds of styling choices that emerged early on. <v Lee>And the reason for this</v> is that the original HTML spec had no way for the actual owner of content to define how that should look on a user's browser. That was actually controlled by the users, so you could change how big the font was, what color it was, but the person who owned the content had no control over that, which is, you know, a pretty bad idea if you have any specific idea in mind how you want your content to be laid out. So over time, a variety of different proposals were put forward, some more complicated than others, some were more like actual programming languages, and over time, we kind of winnowed things down into a few options and eventually one was picked. (chuckles) <v Michael>Right, so CSS is the product</v> of this sort of evolutionary explosion that eventually got condensed down to the rules that we use today. <v Lee>And the interesting thing</v> is that there wasn't even full support of the CSS spec in any browser until the year 2000. So up until then, it was a just wide open playing field and you never knew what to expect. And even after the year 2000, there were still old browsers that handled CSS in completely idiosyncratic ways that made designing really difficult. It's really only been in the last, let's say, five to eight years (chuckles) that things have settled down to the point where, you know, we can very comfortably expect all browsers to display content in the same way. And similarly, no one has any solid best practice for everything. This is ultimately a very subjective enterprise and so everybody has their own opinions on this one, and it's very easy to get trapped in holy wars when you start talking about design. So we've tried to keep this as simple and uncontroversial as possible, but just so you know, this is always changing and people always come up with new ideas for how to do styling. Really the most important thing overall when you're learning this is to be consistent. If you're consistent within a project, that's fine. No one can fault you for doing your styling this way or that way as long as you do it the same way everywhere. Once you start mixing and matching, that's when things get really complicated and really out of hand. <v Michael>And throughout this tutorial,</v> we'll be giving you some style notes just to give you some guidance about how to design your markup on the text editor side of things. But it is important to recognize that this is a holy war situation where people will argue about it until they're blue in the face, but it's important not to get distracted by that sort of conflict. Just like Lee said, be consistent within a project and don't worry too much about, you know, always doing things the, quote, "right way" because the right way is often a matter of subjective judgment. And so part of our role is to help you develop that judgment.