WEBVTT 0 00:00.380 --> 00:05.690 Hey guys, welcome to the Introduction to CSS Section. 1 00:05.690 --> 00:10.430 And in this very first lesson, we're going to be introducing you to CSS. 2 00:10.460 --> 00:16.760 You'll be learning what it is, how it works and why we need it to be able to style our websites and 3 00:16.760 --> 00:18.740 make them look beautiful. 4 00:19.400 --> 00:21.470 What exactly is CSS? 5 00:21.500 --> 00:25.610 Well, it stands for "Cascading Style Sheets." 6 00:25.640 --> 00:29.270 It kind of conjures up the image of a cascade, 7 00:29.270 --> 00:29.570 right? 8 00:29.600 --> 00:33.540 And a cascade is simply like a waterfall. 9 00:33.560 --> 00:39.880 You have water at one level that then drops down through a waterfall into another level. 10 00:39.890 --> 00:46.940 And we're going to see as we start to use these cascading style sheets, why that analogy is so apt. 11 00:46.940 --> 00:51.960 Because the way that the style is applied cascades like a waterfall. 12 00:51.980 --> 00:59.000 We start from the most general all the way down to the most specific styling requirements, and we're 13 00:59.000 --> 01:03.560 going to see that in use as we use these cascading style sheets. 14 01:03.800 --> 01:07.550 The other part of this name is the, "Style Sheet." 15 01:07.820 --> 01:17.150 A style sheet is a type of language similar to how we had the HTML, which is a markup language, 16 01:17.150 --> 01:20.810 that's what the "ML" part of HTML stands for. 17 01:21.200 --> 01:29.150 We have the style sheet, which is what the "SS" part stands for, and this is a language that allows 18 01:29.150 --> 01:33.200 us to specify how things should look in our website. 19 01:33.200 --> 01:36.770 And there are many different types of stylesheet languages. 20 01:36.800 --> 01:42.710 The one that's most important and what we're going to be learning all about in this section is the cascading 21 01:42.710 --> 01:43.340 style sheet. 22 01:43.550 --> 01:52.520 But there's also others like Sass, which stands for Syntactically Awesome Style Sheet and Less, which 23 01:52.520 --> 01:57.110 stands for Leaner CSS and many, many others. 24 01:57.110 --> 02:03.530 But the most important one that every web developer needs to know is CSS, 25 02:03.530 --> 02:05.990 and that's what we're going to be focusing on today. 26 02:06.290 --> 02:09.770 So why did we need CSS? 27 02:09.800 --> 02:14.030 Where did it come from and what exactly is the history of this whole thing? 28 02:14.060 --> 02:20.820 Well, in the very beginning when the Internet was very, very new, there was no CSS, there was only 29 02:21.090 --> 02:21.800 HTML. 30 02:21.810 --> 02:28.350 And one of the things that developers started wanting to do is they wanted to style their website and 31 02:28.350 --> 02:33.830 make it look the way they wanted it to, but they were really, really limited by HTML. 32 02:33.840 --> 02:42.780 And this is a now famous email sent by Marc Andreessen, who is the founder of Mosaic, which is one 33 02:42.780 --> 02:49.320 of the earliest Internet browsers who later founded Netscape and now the very famous Andreessen Horowitz 34 02:49.350 --> 02:50.550 VC Fund. 35 02:50.550 --> 02:57.270 And in this email he famously said that the answer he has for so many developers who want to simply 36 02:57.270 --> 03:03.810 control what their documents look like, meaning what their websites look like in a way that would be 37 03:03.810 --> 03:05.880 trivial, say in Microsoft Word, 38 03:05.910 --> 03:09.330 his answer to these developers is just, "Sorry, you're screwed." 39 03:09.480 --> 03:14.430 There is no way to do it very easily at that point in HTML. 40 03:14.590 --> 03:17.490 That's why all the website looks pretty much the same, 41 03:17.490 --> 03:18.390 pretty boring, 42 03:18.390 --> 03:20.460 and there was no variation. 43 03:20.460 --> 03:21.930 So what happened next? 44 03:21.930 --> 03:31.140 Well, the W3C consortium responded by releasing a new version of HTML, HTML 3.2, and this came out 45 03:31.140 --> 03:35.040 in 1997, so it was still in the very early days of the Internet. 46 03:35.160 --> 03:44.700 And what this 3.2 HTML allowed was it introduced new HTML tags such as the font tag, which allows you 47 03:44.700 --> 03:48.870 to define the font size, the color and the font face. 48 03:48.870 --> 03:52.950 So the type of font you would want to use for your document. 49 03:53.160 --> 03:57.630 Similarly, there was also the color attribute for font. 50 03:57.660 --> 04:02.670 There was the face attribute, the size attribute, and these attributes allow you to change all sorts 51 04:02.670 --> 04:06.360 of things about the way the text looks on your website. 52 04:06.660 --> 04:14.340 And then there was also the center element which allows you to format your document and define how it 53 04:14.340 --> 04:16.380 would be laid out on the screen. 54 04:16.470 --> 04:23.680 Now, what you'll notice in all three of these Web pages is the deprecated symbol next to it. 55 04:23.700 --> 04:31.380 All of these are deprecated, which in programming lingo, simply means you should no longer be using 56 04:31.380 --> 04:34.140 these attributes and elements. 57 04:34.140 --> 04:41.730 And the reason for this is because, as you can imagine, HTML is supposed to be for content. 58 04:41.760 --> 04:49.710 Now, if you add in a ton of styling into all of that content, you tell the website how it should be 59 04:49.710 --> 04:56.400 centered, how it should be laid out, how the font should look, what color it should be, what kind 60 04:56.400 --> 05:01.680 of border your tables should have, and a whole bunch of other styling effectively, 61 05:01.710 --> 05:06.990 then this is going to massively clutter up all of your HTML. 62 05:06.990 --> 05:12.600 And you can imagine this is a really, really short website and it's already got so much junk in it 63 05:12.600 --> 05:18.510 that we can't really tell what exactly is the structure and the content of the website and 64 05:18.530 --> 05:24.560 if you extend this to a larger website and you just want to do some simple things like give it some 65 05:24.560 --> 05:32.270 colors or put things into the center, then your whole HTML file is going to be many, many, many thousands 66 05:32.270 --> 05:37.790 of lines long and it's impossible to differentiate the content from the styling. 67 05:38.060 --> 05:40.340 So what happened next? 68 05:40.880 --> 05:52.250 Well, in 1996, a new recommendation was proposed by the W3 consortium, and this was led by Hakon 69 05:52.250 --> 05:52.940 Wium. 70 05:53.930 --> 05:56.180 *struggles with pronunciation* 71 05:56.420 --> 05:59.980 *struggles with pronunciation* 72 05:59.990 --> 06:04.250 And he's basically the father of the Cascading Style Sheet. 73 06:04.250 --> 06:11.540 And what this recommendation allows us to do is to allows us to attach styles such as font colors and 74 06:11.540 --> 06:15.380 spacing to our HTML documents. 75 06:15.500 --> 06:22.890 And this is the breakthrough that allowed us to separate our styling from our content. 76 06:23.010 --> 06:31.110 And as in many different situations, a separation of concerns so that somebody is responsible for putting 77 06:31.140 --> 06:36.750 together the car headlights and somebody else is responsible for dealing with the wheels rather than 78 06:36.750 --> 06:39.590 one person making an entire car, 79 06:39.600 --> 06:46.710 this kind of modularity, as you'll see in coming lessons, is super important, not just in manufacturing 80 06:46.710 --> 06:49.830 and in real life, but also in programming. 81 06:50.100 --> 06:54.450 If you want to see what CSS is able to achieve, 82 06:54.540 --> 06:57.490 I've built this website for you to be able to do that. 83 06:57.510 --> 07:05.010 If you go over to appbrewery.github.io/just-add-css, you should be able 84 07:05.010 --> 07:06.540 to see this website. 85 07:06.540 --> 07:13.020 And when you first go over there, you'll see that it's just a very, very simple website, pretty bland. 86 07:13.050 --> 07:15.210 All it's got is HTML. 87 07:15.210 --> 07:22.710 And now if we go ahead and press this button to toggle and turn on CSS, then you'll see the entire 88 07:22.710 --> 07:26.300 website transform and look way more beautiful. 89 07:26.340 --> 07:30.840 It's now got different fonts, different colors and different layouts, 90 07:30.840 --> 07:39.270 but you'll notice that if you go ahead and right-click and view the Page Source, in these two versions, 91 07:39.270 --> 07:41.580 the HTML does not change at all. 92 07:41.580 --> 07:47.320 So let's toggle our CSS back and then let's go ahead and View Page Source again. 93 07:47.340 --> 07:49.710 You'll see that in these two versions, 94 07:49.710 --> 07:56.730 as you see me switch it on screen, nothing changes in our index.html. 95 07:56.820 --> 08:02.220 The only thing that is different is the CSS that gets added. 96 08:02.250 --> 08:08.910 Now don't worry too much about the script tags down here or how we've created our buttons, 97 08:08.910 --> 08:12.870 we're going to learn all of that later on when we learn JavaScript. 98 08:13.050 --> 08:19.890 But I created this website so that you can play around with toggling the CSS on and off to see how it 99 08:19.890 --> 08:27.000 can transform a simple HTML website without touching any of the code inside the HTML. 100 08:27.000 --> 08:34.260 And all that we're doing is adding style to our website in a completely separate language, 101 08:34.290 --> 08:36.060 the Cascading Style Sheet. 102 08:36.270 --> 08:42.570 To learn more about how CSS works, head over to the next lesson where we're going to get started styling 103 08:42.570 --> 08:43.740 up a website.