WEBVTT X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000 00:00:00.000 --> 00:00:17.000 [MUSIC] 00:00:17.310 --> 00:00:19.730 BRIAN YU: All right, welcome, everyone, to Web Programming 00:00:19.730 --> 00:00:21.110 with Python and JavaScript. 00:00:21.110 --> 00:00:22.280 My name is Brian Yu. 00:00:22.280 --> 00:00:25.030 And in this course, we'll dive into the design and implementation 00:00:25.030 --> 00:00:26.510 of web applications. 00:00:26.510 --> 00:00:29.450 In lectures, we'll have an opportunity to discuss and explore 00:00:29.450 --> 00:00:31.700 many of the ideas and tools and languages 00:00:31.700 --> 00:00:33.860 that are central to modern web programming. 00:00:33.860 --> 00:00:37.700 And through hands-on projects, you'll have an opportunity to take those ideas 00:00:37.700 --> 00:00:41.270 and put them into practice, designing multiple web applications of your own, 00:00:41.270 --> 00:00:44.300 culminating in a final project of your own choosing. 00:00:44.300 --> 00:00:46.430 Throughout the term, we'll cover a number of topics 00:00:46.430 --> 00:00:48.740 in this world of web programming, beginning 00:00:48.740 --> 00:00:52.280 with HTML5 and CSS3, two of the languages 00:00:52.280 --> 00:00:55.070 that are central to the understanding of web pages. 00:00:55.070 --> 00:00:58.850 HTML is a language we'll use to describe the structure of a web page. 00:00:58.850 --> 00:01:01.160 And CSS is the language we'll use to describe 00:01:01.160 --> 00:01:03.770 the style of a web page, the colors and the fonts 00:01:03.770 --> 00:01:06.470 and the layouts and the spacing that make the web page look 00:01:06.470 --> 00:01:08.870 exactly the way we want it to look. 00:01:08.870 --> 00:01:11.210 After that, we'll turn our attention to Git, 00:01:11.210 --> 00:01:13.850 a tool not specific to web programming per se, 00:01:13.850 --> 00:01:17.120 but that we can use in order to version control our programs, 00:01:17.120 --> 00:01:20.030 to keep track of the different changes we make to our web programs, 00:01:20.030 --> 00:01:23.030 and to allow us to be able to work on various different parts of the web 00:01:23.030 --> 00:01:27.080 application at the same time before merging those pieces back together. 00:01:27.080 --> 00:01:30.080 After that, we'll take a look at Python, one of the first main languages 00:01:30.080 --> 00:01:32.280 that we're going to be exploring in the course, which 00:01:32.280 --> 00:01:35.780 is the language that we are going to use in order to build our web applications. 00:01:35.780 --> 00:01:39.440 Specifically, we'll use Python using a framework called Django. 00:01:39.440 --> 00:01:42.590 Django is a web programming framework written in the Python programming 00:01:42.590 --> 00:01:46.790 language that we're going to use to make it easy to design and develop our web 00:01:46.790 --> 00:01:51.020 applications Django in particular makes it easy to design web applications 00:01:51.020 --> 00:01:52.560 that interact with data. 00:01:52.560 --> 00:01:55.400 So after that, we'll turn our attention to SQL, a language 00:01:55.400 --> 00:01:58.790 that we can use to interact with databases, in particular looking 00:01:58.790 --> 00:02:02.900 at how Django allows us to use models and migrations to interact with data 00:02:02.900 --> 00:02:06.840 and allow users to interact with data all the more easily. 00:02:06.840 --> 00:02:09.680 Next, we'll turn our attention to the second of the main programming 00:02:09.680 --> 00:02:12.830 languages that we'll be exploring in this class, JavaScript, 00:02:12.830 --> 00:02:16.310 and looking at how we can use JavaScript to run in users' web browsers 00:02:16.310 --> 00:02:19.250 to make web pages just a little bit more interactive. 00:02:19.250 --> 00:02:22.910 In particular, we'll use JavaScript in the context of user interfaces, 00:02:22.910 --> 00:02:25.220 looking at modern user interfaces and exploring 00:02:25.220 --> 00:02:27.680 how it is that those interfaces work and how 00:02:27.680 --> 00:02:31.280 we can develop those user interfaces with a combination of Python 00:02:31.280 --> 00:02:32.930 and JavaScript. 00:02:32.930 --> 00:02:35.030 Next, we'll turn our attention to testing 00:02:35.030 --> 00:02:39.680 and CI/CD, or Continuous Integration and Continuous Delivery, 00:02:39.680 --> 00:02:43.070 which are tools that we can use and software best practices to make sure 00:02:43.070 --> 00:02:46.190 that we're able to design and develop code more efficiently. 00:02:46.190 --> 00:02:49.950 And testing in particular makes sure that as we make changes to our code, 00:02:49.950 --> 00:02:52.590 we're not breaking existing parts of our web application 00:02:52.590 --> 00:02:54.680 by making sure that we have a whole suite of tests 00:02:54.680 --> 00:02:57.680 that we can use to ensure that our web application is always 00:02:57.680 --> 00:02:59.630 behaving as it should. 00:02:59.630 --> 00:03:03.100 And finally, we'll turn our attention to scalability and security 00:03:03.100 --> 00:03:04.940 on the internet, thinking about what happens 00:03:04.940 --> 00:03:06.740 as our web application grows larger. 00:03:06.740 --> 00:03:10.230 As more and more different users start to use our web application, 00:03:10.230 --> 00:03:12.080 how do we load balance between those people? 00:03:12.080 --> 00:03:15.500 And what do we need to change about our database to make sure lots of users 00:03:15.500 --> 00:03:18.520 are able to connect to our web application at the same time? 00:03:18.520 --> 00:03:20.570 Moreover, we'll look at the security implications 00:03:20.570 --> 00:03:22.460 behind designing our web applications. 00:03:22.460 --> 00:03:25.140 What might an adversary do if we're not careful? 00:03:25.140 --> 00:03:28.160 And how should we proactively be designing our web application 00:03:28.160 --> 00:03:30.560 to make sure that it's secure? 00:03:30.560 --> 00:03:34.250 But today, we begin our conversation with HTML and CSS, 00:03:34.250 --> 00:03:37.580 two of the languages that are foundational to understanding web pages 00:03:37.580 --> 00:03:41.000 and how web browsers are able to display those web pages. 00:03:41.000 --> 00:03:44.840 And we'll start with each HTML, or HyperText Markup Language, 00:03:44.840 --> 00:03:48.320 which is a language that we can use to describe the structure of the web page, 00:03:48.320 --> 00:03:52.220 all of the buttons and the text and the forms and other parts of the web page 00:03:52.220 --> 00:03:55.730 that the user ultimately sees and interacts with. 00:03:55.730 --> 00:03:59.240 Our very first HTML page is going to look a little something like this. 00:03:59.240 --> 00:04:03.110 It's going to be text-based code that we write that a web browser, like Safari 00:04:03.110 --> 00:04:07.220 or Chrome or Firefox, is then able to look at, parse, understand, 00:04:07.220 --> 00:04:09.330 and display to the user. 00:04:09.330 --> 00:04:11.570 So let's take a look at this page one line at a time 00:04:11.570 --> 00:04:13.670 and get an understanding for how it works. 00:04:13.670 --> 00:04:16.610 Even if you don't quite understand all the nuances of the syntax, 00:04:16.610 --> 00:04:19.190 there are probably a couple of things that stand out to you. 00:04:19.190 --> 00:04:21.350 You might notice the word title, which probably 00:04:21.350 --> 00:04:24.650 reflects the title of the web page, for example, which in this case 00:04:24.650 --> 00:04:26.540 appears to be the word hello. 00:04:26.540 --> 00:04:30.110 And then down further below, we see that we have the body of the web page 00:04:30.110 --> 00:04:33.060 that seems to contain the words hello world. 00:04:33.060 --> 00:04:35.450 So what is this web page actually going to look like? 00:04:35.450 --> 00:04:37.560 Well, let's take a look at it. 00:04:37.560 --> 00:04:39.410 We'll go ahead and open up a text editor. 00:04:39.410 --> 00:04:41.140 You can use any text editor you want. 00:04:41.140 --> 00:04:44.600 But for this course, I'm going to use Microsoft's Visual Studio Code. 00:04:44.600 --> 00:04:50.690 And I'm going to open up a new file that I'm just going to call hello.html. 00:04:50.690 --> 00:04:54.710 Inside of hello.html I'm going to write the same HTML that we just 00:04:54.710 --> 00:04:55.610 saw a moment ago. 00:04:55.610 --> 00:04:58.340 And we'll explain each of these lines in due time. 00:04:58.340 --> 00:05:04.040 But recall that we had a title of the page that said something like hello 00:05:04.040 --> 00:05:08.060 and then a body of the page where we said something like hello world, 00:05:08.060 --> 00:05:09.570 for example. 00:05:09.570 --> 00:05:12.160 So this is our very first HTML page. 00:05:12.160 --> 00:05:16.370 And if I go ahead and open that HTML page as my opening hello.html HTML, 00:05:16.370 --> 00:05:20.990 for example, inside of a web browser, what I'll see is something like this. 00:05:20.990 --> 00:05:24.330 In the body of the page, I see the words hello world. 00:05:24.330 --> 00:05:27.020 And if you notice up here at the top of my web browser, 00:05:27.020 --> 00:05:31.190 I see the title bar, where I have the title for this page, which in this case 00:05:31.190 --> 00:05:33.110 is just the word hello. 00:05:33.110 --> 00:05:36.020 So this is our very first web program that we've 00:05:36.020 --> 00:05:38.270 been able to develop just using HTML. 00:05:38.270 --> 00:05:42.860 And now let's explore in more detail how exactly this program works. 00:05:42.860 --> 00:05:46.010 So here again was the web page that we were just looking at. 00:05:46.010 --> 00:05:49.430 And this very first line here, DOCTYPE html 00:05:49.430 --> 00:05:52.340 is what we might call a DOCTYPE declaration. 00:05:52.340 --> 00:05:55.910 It's a way of telling the web browser what version of HTML 00:05:55.910 --> 00:05:59.000 we're using in this particular web page, because depending 00:05:59.000 --> 00:06:01.200 on the version of HTML, the web browser might 00:06:01.200 --> 00:06:03.830 want to display different information or it might need to parse 00:06:03.830 --> 00:06:05.660 the page a little bit differently. 00:06:05.660 --> 00:06:08.420 Each version of HTML has had a slightly different way 00:06:08.420 --> 00:06:09.890 of indicating that version. 00:06:09.890 --> 00:06:13.040 But this line here, DOCTYPE html is our way 00:06:13.040 --> 00:06:15.890 of saying that this HTML page is written using 00:06:15.890 --> 00:06:19.760 HTML5, the latest version of HTML. 00:06:19.760 --> 00:06:25.910 After that our HTML page is structured as a series of nested HTML elements, 00:06:25.910 --> 00:06:29.370 where an HTML element describes something on the page. 00:06:29.370 --> 00:06:33.080 And we might have elements that are inside of other elements. 00:06:33.080 --> 00:06:35.300 Each of those elements is indicated by what 00:06:35.300 --> 00:06:39.530 we're going to call an HTML tag, enclosed using those angled brackets. 00:06:39.530 --> 00:06:43.340 And right here, we'll see the beginning of the HTML tag, which 00:06:43.340 --> 00:06:47.660 means that this is the beginning of the HTML content of our page. 00:06:47.660 --> 00:06:51.170 Down below this slash HTML means that this 00:06:51.170 --> 00:06:54.050 is the end of the HTML content of the page. 00:06:54.050 --> 00:06:57.570 And in between is the actual HTML content of the page, 00:06:57.570 --> 00:07:00.930 which might include other HTML elements. 00:07:00.930 --> 00:07:03.600 You might also notice that in this HTML tag 00:07:03.600 --> 00:07:06.990 we've specified what we're going to call an HTML attribute, 00:07:06.990 --> 00:07:10.440 some additional information that we're giving about this tag. 00:07:10.440 --> 00:07:14.250 In particular, we're giving it a lang, or language, attribute, 00:07:14.250 --> 00:07:17.550 which is equal to en, or English. 00:07:17.550 --> 00:07:21.420 This just tells the web browser or anyone looking at the HTML of this page 00:07:21.420 --> 00:07:24.520 that this page is written in a language, and the language it's written in 00:07:24.520 --> 00:07:25.590 is English. 00:07:25.590 --> 00:07:27.810 And this is helpful for search engines, for example. 00:07:27.810 --> 00:07:30.000 When they're looking through many different web pages trying 00:07:30.000 --> 00:07:32.220 to figure out what language each web page is in we 00:07:32.220 --> 00:07:35.370 can just tell the search engine or anyone else who's looking at the page 00:07:35.370 --> 00:07:38.560 that this page is written in English. 00:07:38.560 --> 00:07:41.120 Now, inside of the HTML body of the page, 00:07:41.120 --> 00:07:43.030 we have a number of different elements that 00:07:43.030 --> 00:07:45.850 are going to describe what we want on this page, 00:07:45.850 --> 00:07:49.840 starting with the head section of the web page, which describes stuff 00:07:49.840 --> 00:07:52.450 not in the main body of the web page, the part of the web page 00:07:52.450 --> 00:07:55.330 the user sees, but other information about the web 00:07:55.330 --> 00:07:59.120 page that's going to be helpful or useful for web browsers to know about. 00:07:59.120 --> 00:08:02.020 For example, one important thing that a web browser needs to know 00:08:02.020 --> 00:08:05.050 is, what is the title of the web page? 00:08:05.050 --> 00:08:08.860 And here, we see a title tag, again, indicated by the word title 00:08:08.860 --> 00:08:12.460 in those angled brackets, followed by the end of the title tag, 00:08:12.460 --> 00:08:15.130 indicated by a slash before the title. 00:08:15.130 --> 00:08:18.280 And in between the two title tags is the word hello, 00:08:18.280 --> 00:08:22.020 which means the title of this page should be the word hello. 00:08:22.020 --> 00:08:24.930 And that's all the information we'll have in the head of the page. 00:08:24.930 --> 00:08:27.050 We'll add more information there later, but for now 00:08:27.050 --> 00:08:29.910 all the web page needs to know is that it has a title 00:08:29.910 --> 00:08:32.440 and the title is the word hello. 00:08:32.440 --> 00:08:36.430 Next up comes the body of the page, again, indicated by a body tag 00:08:36.430 --> 00:08:39.040 and that ends with a tag with slash body, 00:08:39.040 --> 00:08:41.470 meaning this is the end of the body of the page. 00:08:41.470 --> 00:08:44.380 And the body of the page, again, is just the visible part of the page 00:08:44.380 --> 00:08:45.940 that the user can see. 00:08:45.940 --> 00:08:48.370 And what do we want inside the body of the page? 00:08:48.370 --> 00:08:50.840 For now, we just want the text, hello world. 00:08:50.840 --> 00:08:53.140 And that's the information that's going to be displayed 00:08:53.140 --> 00:08:55.520 when someone visits this web page. 00:08:55.520 --> 00:08:58.170 And so that's all there really is to this HTML page. 00:08:58.170 --> 00:09:01.780 We specified in the header that there's a title of the page called hello. 00:09:01.780 --> 00:09:06.320 And inside the body, we're saying the page should say the words hello world. 00:09:06.320 --> 00:09:08.620 And if you want to visually think about the way 00:09:08.620 --> 00:09:11.080 that all these HTML elements are structured, 00:09:11.080 --> 00:09:13.960 it can sometimes be helpful to think about an HTML page 00:09:13.960 --> 00:09:16.240 in terms of a tree-like structure that we 00:09:16.240 --> 00:09:19.360 call the document object model, or DOM. 00:09:19.360 --> 00:09:23.050 And so, here, for example, is what the DOM for this web page 00:09:23.050 --> 00:09:24.340 might actually look like. 00:09:24.340 --> 00:09:27.730 Here on the left is the HTML content that we just saw a moment ago. 00:09:27.730 --> 00:09:31.570 And over here on the right is the DOM, the document object model, 00:09:31.570 --> 00:09:35.890 the tree-like structure that describes how all of these HTML elements 00:09:35.890 --> 00:09:37.490 are related to each other. 00:09:37.490 --> 00:09:39.970 So we start up here with the HTML element. 00:09:39.970 --> 00:09:44.020 And this parent element, so to speak, has two child elements 00:09:44.020 --> 00:09:47.080 within it, a head element and a body element. 00:09:47.080 --> 00:09:49.720 As we can see here, we're inside of HTML. 00:09:49.720 --> 00:09:52.150 We have a head section and a body section. 00:09:52.150 --> 00:09:55.690 And the indentation here that we're including in the HTML text, 00:09:55.690 --> 00:09:57.220 it's not strictly necessary. 00:09:57.220 --> 00:09:59.860 The web browser doesn't care what the indentation is. 00:09:59.860 --> 00:10:02.680 But it can be helpful for someone who's reading the page just 00:10:02.680 --> 00:10:06.580 to see the indentation to understand visually that the head is inside 00:10:06.580 --> 00:10:11.440 of the HTML element and the body is inside of the HTML element too. 00:10:11.440 --> 00:10:14.020 So inside of the head element, we have a title element. 00:10:14.020 --> 00:10:17.800 And inside of the title element is just the text, the word hello. 00:10:17.800 --> 00:10:19.940 And likewise, inside of the body element, 00:10:19.940 --> 00:10:23.050 we also have some text, the text hello world. 00:10:23.050 --> 00:10:27.310 So thinking about HTML and HTML documents in terms of this structure 00:10:27.310 --> 00:10:31.360 can be helpful for understanding which HTML elements are inside of which 00:10:31.360 --> 00:10:32.890 other HTML elements. 00:10:32.890 --> 00:10:35.890 And that's going to make it easier for us to reason about these pages 00:10:35.890 --> 00:10:36.700 later on. 00:10:36.700 --> 00:10:39.970 And especially as we later transition into the world of JavaScript, 00:10:39.970 --> 00:10:42.340 JavaScript is going to make it all the more powerful 00:10:42.340 --> 00:10:46.120 and give us the ability to actually modify parts of this DOM as well. 00:10:46.120 --> 00:10:49.040 But we'll certainly get to that in due time. 00:10:49.040 --> 00:10:53.320 So now, let's take a look at some of the other common HTML tags and HTML 00:10:53.320 --> 00:10:56.650 elements that we might be interacting with in our web page. 00:10:56.650 --> 00:11:00.460 And we'll start by thinking about HTML headings, so big banners 00:11:00.460 --> 00:11:02.800 at the top of the page, for example, some headline that 00:11:02.800 --> 00:11:05.300 describes what a page is about. 00:11:05.300 --> 00:11:08.350 So I'll go ahead into my text editor and create a new file 00:11:08.350 --> 00:11:11.540 that I'll call headings.html. 00:11:11.540 --> 00:11:14.590 And the structure of this page is going to be pretty similar to the pages 00:11:14.590 --> 00:11:16.220 that we've seen before already. 00:11:16.220 --> 00:11:21.390 So I'm going to start by just using the hello.html text and paste it in here. 00:11:21.390 --> 00:11:22.810 I'll change the title of the page. 00:11:22.810 --> 00:11:26.600 Instead of hello, we'll go ahead and call it headings. 00:11:26.600 --> 00:11:31.150 But inside the body of this page now, I want something a little bit different. 00:11:31.150 --> 00:11:34.950 I'm going to, inside the body the page, use an h1 element 00:11:34.950 --> 00:11:40.150 and say this is a heading, for example. 00:11:40.150 --> 00:11:44.700 So h1 is a tag that I can use to create a large heading at the top of my page, 00:11:44.700 --> 00:11:47.590 like for the title of the page, for example. 00:11:47.590 --> 00:11:51.210 So if I open up headings.html. 00:11:51.210 --> 00:11:53.720 I might see something that looks like this, 00:11:53.720 --> 00:11:57.330 a big heading at the top of my page that says, this is a heading. 00:11:57.330 --> 00:12:01.560 h1, where the h stands for heading and the 1 stands for the largest 00:12:01.560 --> 00:12:02.520 possible heading. 00:12:02.520 --> 00:12:05.190 And in fact, HTML gives us a number of different tags 00:12:05.190 --> 00:12:08.970 that we can use in order to create headings of various sizes. 00:12:08.970 --> 00:12:13.890 So, for example, I could also say h2 inside of which I say, 00:12:13.890 --> 00:12:16.630 this is a smaller heading. 00:12:16.630 --> 00:12:20.940 If h1 is the largest heading, h2 is the second largest heading. 00:12:20.940 --> 00:12:24.720 So if I load this page, for example, I now see the h1 at the very top. 00:12:24.720 --> 00:12:26.190 This is the big heading. 00:12:26.190 --> 00:12:30.150 And then beneath that, I see this is a smaller heading, the h2. 00:12:30.150 --> 00:12:33.480 And it turns out there's also h3, h4, h5, all the way 00:12:33.480 --> 00:12:38.020 down to h6, which is the smallest heading, 00:12:38.020 --> 00:12:41.760 such that if I load this page now, I have a big heading, a smaller one, 00:12:41.760 --> 00:12:43.260 and then here's the smallest. 00:12:43.260 --> 00:12:46.620 So we can often use these h1, h2, h3 tags 00:12:46.620 --> 00:12:49.230 just for visually organizing text inside of a page. 00:12:49.230 --> 00:12:52.350 If I want the title of the page, but also I 00:12:52.350 --> 00:12:56.130 want titles for each of the various different sections and subsections 00:12:56.130 --> 00:13:00.340 that might be contained within that page as well. 00:13:00.340 --> 00:13:01.380 So those are headings. 00:13:01.380 --> 00:13:03.360 And now, let's also take a look at some other elements 00:13:03.360 --> 00:13:04.440 that we might want to add. 00:13:04.440 --> 00:13:07.230 On web pages, we see not just titles and not just text, 00:13:07.230 --> 00:13:09.540 but we might also see lists, for example. 00:13:09.540 --> 00:13:12.340 Like if you've ever used a to do list program on a web page, 00:13:12.340 --> 00:13:14.970 for example, you might see a list of things that you need to do 00:13:14.970 --> 00:13:18.270 or other web pages might display lists of information. 00:13:18.270 --> 00:13:21.990 And it turns out that HTML has two basic types of lists. 00:13:21.990 --> 00:13:25.020 We have ordered lists for things that are in a particular order, 00:13:25.020 --> 00:13:28.210 like item number 1, item number 2, item number 3. 00:13:28.210 --> 00:13:31.600 And we have unordered lists for lists that don't have any particular order. 00:13:31.600 --> 00:13:34.530 So just bullet point, bullet point, bullet point, for example. 00:13:34.530 --> 00:13:36.900 And both are quite easy to use. 00:13:36.900 --> 00:13:39.330 I'll go ahead and create a new file. 00:13:39.330 --> 00:13:42.270 And we'll call this lists.html. 00:13:42.270 --> 00:13:46.780 And again, in list.html, I'll copy the same structure from hello.html. 00:13:46.780 --> 00:13:51.240 We're again going to have DOCTYPE html just to indicate the version of HTML. 00:13:51.240 --> 00:13:52.590 Most of the heading is the same. 00:13:52.590 --> 00:13:55.890 I'm just going to change the title from Hello to Lists. 00:13:55.890 --> 00:13:58.170 And then we're going to replace the body of this page 00:13:58.170 --> 00:14:01.200 to show some different information here. 00:14:01.200 --> 00:14:05.010 So let me first show what an ordered list might look like, 00:14:05.010 --> 00:14:07.410 something that has numbers, 1, 2, 3. 00:14:07.410 --> 00:14:13.200 An ordered as an HTML tag is just ol, ol for ordered list. 00:14:13.200 --> 00:14:16.260 So I can add a tag that says ol. 00:14:16.260 --> 00:14:19.980 And now inside of my ol element, my ordered list element, 00:14:19.980 --> 00:14:23.250 I need a new element for every list item. 00:14:23.250 --> 00:14:26.160 List item we're going to abbreviate to just li. 00:14:26.160 --> 00:14:28.650 So the li tag in HTML is what we're going 00:14:28.650 --> 00:14:32.550 to use to designate an item inside of an HTML list. 00:14:32.550 --> 00:14:37.080 So here, for example, I could say li and then first item. 00:14:37.080 --> 00:14:40.630 Then I could do the same thing, li second item 00:14:40.630 --> 00:14:43.950 and then again li third item. 00:14:43.950 --> 00:14:46.310 So what I have here are some elements and then elements 00:14:46.310 --> 00:14:48.350 nested within other elements. 00:14:48.350 --> 00:14:50.720 I have an ordered list element inside of which 00:14:50.720 --> 00:14:54.170 are three other HTML elements, three list items that 00:14:54.170 --> 00:14:58.250 are each indicating each of the individual items that are inside 00:14:58.250 --> 00:15:00.700 of my HTML list. 00:15:00.700 --> 00:15:05.350 I can now open this up by opening lists.html. 00:15:05.350 --> 00:15:06.790 And this is what I see. 00:15:06.790 --> 00:15:09.280 I see an ordered list, where I have item number 1, 00:15:09.280 --> 00:15:11.980 first item, second item, third item. 00:15:11.980 --> 00:15:15.040 Note that I didn't actually need to in the HTML anywhere 00:15:15.040 --> 00:15:18.010 specify the number 1, the number 2, and the number 3. 00:15:18.010 --> 00:15:20.710 When my web browser reads this should be an order list, 00:15:20.710 --> 00:15:24.220 my web browser, Chrome in this case, just adds those numbers in for me 00:15:24.220 --> 00:15:26.380 because it knows what an ordered list means 00:15:26.380 --> 00:15:30.340 and it knows how to take the HTML that I've written and display it in the way 00:15:30.340 --> 00:15:33.580 that I intend to the user. 00:15:33.580 --> 00:15:37.390 Now, in addition to ordered list that all have numbers, 1, 2, 3, 00:15:37.390 --> 00:15:39.670 we also have unordered lists that are just bullet 00:15:39.670 --> 00:15:41.680 points, bullet points of information. 00:15:41.680 --> 00:15:46.000 So I could, up above, add some more content to this HTML page. 00:15:46.000 --> 00:15:49.820 I can say here is an unordered list. 00:15:49.820 --> 00:15:52.180 And just as an ordered list we represented 00:15:52.180 --> 00:15:56.980 using the ol tag in HTML, ol standing for ordered list, 00:15:56.980 --> 00:16:01.090 likewise we can use the ul tag in HTML to create 00:16:01.090 --> 00:16:04.330 an unordered list, u for unordered. 00:16:04.330 --> 00:16:06.120 So here, we're going to add a ul tag. 00:16:06.120 --> 00:16:08.080 And again, my text editor here is automatically 00:16:08.080 --> 00:16:10.600 adding the closing tag here, this slash ul, 00:16:10.600 --> 00:16:12.490 meaning the end of the unordered list. 00:16:12.490 --> 00:16:15.460 And many text editors will do this now just so you, the programmer, 00:16:15.460 --> 00:16:17.740 don't forget to add that. 00:16:17.740 --> 00:16:19.720 And now inside of this unordered list, we're 00:16:19.720 --> 00:16:21.700 again going to have some list items. 00:16:21.700 --> 00:16:25.250 Also, using the li tag, here is one item. 00:16:25.250 --> 00:16:27.590 And here is another item. 00:16:27.590 --> 00:16:31.750 And here is yet another item. 00:16:31.750 --> 00:16:35.140 If I go ahead and refresh the page now, I'm still on list.html, 00:16:35.140 --> 00:16:37.390 I now see that on top of my ordered list, 00:16:37.390 --> 00:16:40.450 I have an unordered list, where each item instead of being numbered 00:16:40.450 --> 00:16:44.440 1, 2, 3, is instead labeled with just bullet point, bullet point, bullet 00:16:44.440 --> 00:16:47.800 point, where each of these bullet points and each of these numbered items 00:16:47.800 --> 00:16:51.450 is a list item element, or an li. 00:16:51.450 --> 00:16:53.290 So hopefully now we can see that as we start 00:16:53.290 --> 00:16:58.150 to explore these various different HTML tags and nesting HTML tags inside 00:16:58.150 --> 00:17:01.570 of one another, we're able to create more and more interesting 00:17:01.570 --> 00:17:03.950 web pages as a result. 00:17:03.950 --> 00:17:06.590 So let's explore now what other types of web pages 00:17:06.590 --> 00:17:10.060 we can create using other types of HTML elements. 00:17:10.060 --> 00:17:12.430 In addition to lists, one thing you might imagine 00:17:12.430 --> 00:17:14.350 is that one of the important things on the web 00:17:14.350 --> 00:17:17.780 is not just displaying text, but also displaying other types of media, 00:17:17.780 --> 00:17:19.250 like images, for example. 00:17:19.250 --> 00:17:21.780 So how might we go about doing that? 00:17:21.780 --> 00:17:23.300 Well, I can, for example-- 00:17:23.300 --> 00:17:26.240 let's go back into my text editor. 00:17:26.240 --> 00:17:28.360 Let me create a new file that I'm going to call 00:17:28.360 --> 00:17:33.710 image.html, which is going to contain some code for displaying some images. 00:17:33.710 --> 00:17:37.950 I'll go ahead and go into hello.html and copy this text into the page, 00:17:37.950 --> 00:17:40.050 again, change the title to Image. 00:17:40.050 --> 00:17:45.340 And now, inside of the body, I'm going to add a new tag called image. 00:17:45.340 --> 00:17:48.310 And the image tag has a couple of required attributes. 00:17:48.310 --> 00:17:51.110 Remember that attributes are what we saw before things, like adding 00:17:51.110 --> 00:17:56.000 a lang equals en to the top of my page to indicate that this web page is 00:17:56.000 --> 00:17:58.340 written in English, for example. 00:17:58.340 --> 00:18:02.930 And the image tag has a couple of required attributes that I need to add. 00:18:02.930 --> 00:18:05.720 In particular, when I display an image on the page, 00:18:05.720 --> 00:18:09.910 I need to specify what image I actually want displayed, for example. 00:18:09.910 --> 00:18:14.710 So I might specify image src, short for source, 00:18:14.710 --> 00:18:19.910 is going to be equal to what image do I actually want to display on this page. 00:18:19.910 --> 00:18:23.780 And it just so happens that inside of my folder where I have image.html, 00:18:23.780 --> 00:18:26.740 I have an image called cat.jpeg. 00:18:26.740 --> 00:18:30.980 So I'm just going to specify cat.jpeg as the file name of the image 00:18:30.980 --> 00:18:33.040 that I want to display. 00:18:33.040 --> 00:18:36.980 And it turns out that images also have a second required attribute. 00:18:36.980 --> 00:18:41.390 In addition to the file name or the link to whatever image I want to display, 00:18:41.390 --> 00:18:46.290 I also need to provide some alternative text, a text-based representation 00:18:46.290 --> 00:18:48.920 of what you're going to see on the image because in some cases, 00:18:48.920 --> 00:18:52.130 some web browser might not be able to render the image correctly. 00:18:52.130 --> 00:18:54.680 You might imagine if there's some error rendering the image, 00:18:54.680 --> 00:18:56.590 or if someone's on a slow internet connection, 00:18:56.590 --> 00:18:59.340 or if someone's using a screen reader and therefore can't actually 00:18:59.340 --> 00:19:00.050 see the image. 00:19:00.050 --> 00:19:03.990 We want some text-based representation of that image as well. 00:19:03.990 --> 00:19:07.220 And so I'll provide some Alt text, some alternative text, that 00:19:07.220 --> 00:19:10.010 can be used to substitute the image in case for some reason 00:19:10.010 --> 00:19:11.570 we can't display the image. 00:19:11.570 --> 00:19:13.970 And the Alt text that I'll use in this case 00:19:13.970 --> 00:19:17.420 is just going to be the word cat, for example. 00:19:17.420 --> 00:19:18.470 And that's all I need. 00:19:18.470 --> 00:19:20.810 Now, notice in particular there's something a little bit 00:19:20.810 --> 00:19:23.750 different about this image tag compared to other tags 00:19:23.750 --> 00:19:27.110 that we've seen before in the sense that it doesn't have a closing 00:19:27.110 --> 00:19:30.690 tag in the sense that the body had a beginning of the body and an end 00:19:30.690 --> 00:19:33.590 to the body, our ordered list had a beginning of the ordered list 00:19:33.590 --> 00:19:36.410 and the end of the unordered list with list items in between. 00:19:36.410 --> 00:19:39.380 It doesn't really make sense for an image, 00:19:39.380 --> 00:19:41.450 for example, to have the beginning of the image 00:19:41.450 --> 00:19:43.250 and the end of the image and some content 00:19:43.250 --> 00:19:47.930 in between, because the image is just a single HTML element that can't really 00:19:47.930 --> 00:19:49.790 have anything inside of it. 00:19:49.790 --> 00:19:53.000 So in that sense, we don't actually need a closing image tag. 00:19:53.000 --> 00:19:54.930 The image tag is self-closing. 00:19:54.930 --> 00:19:56.810 It is its own beginning and end. 00:19:56.810 --> 00:19:59.600 So we can just say we want an image to be here 00:19:59.600 --> 00:20:05.700 that is cat.jpeg with an alternative text of just the word cat, for example. 00:20:05.700 --> 00:20:09.110 So now, if I open up image.html, we'll see 00:20:09.110 --> 00:20:12.800 that what gets loaded is quite large, a picture of a cat. 00:20:12.800 --> 00:20:15.770 And I can scroll around and see this entire image. 00:20:15.770 --> 00:20:18.960 Of course, this picture of a cat is probably larger than I wanted it to be. 00:20:18.960 --> 00:20:21.010 I probably, when I my user visits this web page, 00:20:21.010 --> 00:20:23.510 I don't want them to have to scroll all the way to the right 00:20:23.510 --> 00:20:25.280 in order to see the entire cat. 00:20:25.280 --> 00:20:28.430 So I can actually add additional HTML attributes 00:20:28.430 --> 00:20:31.460 in order to modify the size of the image that I'm displaying. 00:20:31.460 --> 00:20:34.980 And later we'll see we can use CSS to do a similar thing as well. 00:20:34.980 --> 00:20:38.210 But for now, what I can add is an additional attribute 00:20:38.210 --> 00:20:41.510 and say that let me give cat.jpeg, this image tag, 00:20:41.510 --> 00:20:44.720 another attribute that, in this case, I'll just call width. 00:20:44.720 --> 00:20:47.870 And I'll say that width is going to be equal to 300, 00:20:47.870 --> 00:20:52.830 because I would like for this image to be 300 pixels wide, for example. 00:20:52.830 --> 00:20:55.130 So now, if I refresh this page, I now see 00:20:55.130 --> 00:20:57.530 that the same cat image appears, except now it 00:20:57.530 --> 00:21:00.260 appears at 300 pixels wide exactly. 00:21:00.260 --> 00:21:03.950 So I'm able to add additional attributes, additional information 00:21:03.950 --> 00:21:07.120 to control how an HTML element is going to appear. 00:21:07.120 --> 00:21:08.870 In this case, I want to control its width, 00:21:08.870 --> 00:21:10.790 and it automatically scales down the height 00:21:10.790 --> 00:21:14.470 to make sure that the image is proportional as well. 00:21:14.470 --> 00:21:17.350 Now, on the internet, in addition to just displaying information 00:21:17.350 --> 00:21:21.560 on a single page, it's also common for a page to link to other pages. 00:21:21.560 --> 00:21:23.560 In fact, that's one of the main important values 00:21:23.560 --> 00:21:25.900 of the internet is the ability to go from one page 00:21:25.900 --> 00:21:28.090 to another via these links. 00:21:28.090 --> 00:21:30.370 And so one thing we might reasonably want to do 00:21:30.370 --> 00:21:33.190 is add some links to our page, where if you click on something, 00:21:33.190 --> 00:21:35.920 you're taken to another page altogether. 00:21:35.920 --> 00:21:38.630 So let's take a look at an example of that. 00:21:38.630 --> 00:21:41.590 I'll create a new file based on hello.html. 00:21:41.590 --> 00:21:44.010 And I'll add lang equals English for good measure. 00:21:44.010 --> 00:21:48.250 And I'll call this new file link.html, where here, we're 00:21:48.250 --> 00:21:52.350 going to practice with building some links into our HTML page. 00:21:52.350 --> 00:21:57.930 I'll copy the content of hello.html again, call this link. 00:21:57.930 --> 00:22:00.410 In order to create a link, I'm going to use a tag 00:22:00.410 --> 00:22:03.980 called the a tag, short for the anchor tag. 00:22:03.980 --> 00:22:06.770 And the a tag takes one important attribute, 00:22:06.770 --> 00:22:10.460 which is called href, for hyperlink reference, which 00:22:10.460 --> 00:22:14.280 is going to specify what page I would like to link to. 00:22:14.280 --> 00:22:17.090 So if, for example, I wanted when a user clicks on this link 00:22:17.090 --> 00:22:20.780 to go to google.com, then I'd set the href attribute 00:22:20.780 --> 00:22:27.820 of this tag equal to HTTPS://google.com, for example. 00:22:27.820 --> 00:22:32.650 Then inside of the a tag, I would specify what text I want to display. 00:22:32.650 --> 00:22:36.460 What text should the user see such that when the user clicks on that text 00:22:36.460 --> 00:22:38.060 they're taken to the web page? 00:22:38.060 --> 00:22:41.680 In this case, I'm just going to say something like, Click here, 00:22:41.680 --> 00:22:43.710 for instance. 00:22:43.710 --> 00:22:49.170 Now, if I open up a link.html, this is what the user sees. 00:22:49.170 --> 00:22:51.450 They see a blue link that says Click here. 00:22:51.450 --> 00:22:54.000 And when the user does click on that link, 00:22:54.000 --> 00:22:58.750 they're taken to HTTPS://google.com. 00:22:58.750 --> 00:23:01.840 And it turns out that we can use this href attribute not only 00:23:01.840 --> 00:23:04.150 to link to different websites altogether, 00:23:04.150 --> 00:23:07.690 but we can link to different pages on the same website. 00:23:07.690 --> 00:23:10.420 So, for example, if I wanted to link to that cat page 00:23:10.420 --> 00:23:14.320 that I designed a moment ago, instead of linking to google.com, 00:23:14.320 --> 00:23:18.850 I could instead just link to image.html. 00:23:18.850 --> 00:23:24.790 And now, if I save that and refresh, or if I open up link.html again, 00:23:24.790 --> 00:23:28.000 now I see a click here link, where when I click on Click here, 00:23:28.000 --> 00:23:31.630 now I'm taken to that page, image.html, that 00:23:31.630 --> 00:23:34.630 happened to have that picture of a cat from before. 00:23:34.630 --> 00:23:37.660 So using these anchor tags and href attributes, 00:23:37.660 --> 00:23:39.490 we're able to link together multiple pages. 00:23:39.490 --> 00:23:42.280 So that if we have a website that has many different web pages, 00:23:42.280 --> 00:23:45.310 we can connect them all together by using a combination 00:23:45.310 --> 00:23:47.890 of these various different links. 00:23:47.890 --> 00:23:52.330 So now that we've seen images and links and lists, what other HTML elements 00:23:52.330 --> 00:23:53.980 might we add to our web page? 00:23:53.980 --> 00:23:55.930 Well, one thing we might want to add are things 00:23:55.930 --> 00:23:58.580 like tables, just other ways of displaying information. 00:23:58.580 --> 00:24:02.050 So let's go ahead and create a table and look at what HTML elements 00:24:02.050 --> 00:24:04.760 we can use in order to do so. 00:24:04.760 --> 00:24:09.220 So I'll go back here to my text editor, create a new file called table.html. 00:24:09.220 --> 00:24:14.180 Using the same starting HTML, we'll call this page Table. 00:24:14.180 --> 00:24:16.510 And inside the body of this page now, there 00:24:16.510 --> 00:24:19.000 are a number of different HTML elements that we'll 00:24:19.000 --> 00:24:22.070 need in order to create a table, because as you might imagine, 00:24:22.070 --> 00:24:24.490 a table is really composed of multiple parts. 00:24:24.490 --> 00:24:25.720 We have our big table. 00:24:25.720 --> 00:24:30.040 But each table is really just a sequence of individual table rows. 00:24:30.040 --> 00:24:32.380 And each of those rows is really just a sequence 00:24:32.380 --> 00:24:35.710 of individual cells of data within that table. 00:24:35.710 --> 00:24:38.710 And so that structure that we're imagining, a table that consists 00:24:38.710 --> 00:24:42.520 of individual rows, where each row consists of individual cells, 00:24:42.520 --> 00:24:46.480 is exactly how we're going to represent this table in HTML. 00:24:46.480 --> 00:24:49.720 We're going to start with just a table tag. 00:24:49.720 --> 00:24:53.050 That's going to represent the entirety of this table. 00:24:53.050 --> 00:24:55.870 But inside of the table, we might have different parts. 00:24:55.870 --> 00:24:58.090 We might have the heading of the table. 00:24:58.090 --> 00:24:59.780 We might have the body of the table. 00:24:59.780 --> 00:25:02.920 So in order to represent that, I'll add thead. 00:25:02.920 --> 00:25:05.050 That's going to stand for the heading of the table, 00:25:05.050 --> 00:25:06.880 the stuff at the top of the table that might 00:25:06.880 --> 00:25:10.090 indicate what each column of the table means, for example. 00:25:10.090 --> 00:25:12.270 And let's see, what columns do I want? 00:25:12.270 --> 00:25:14.320 Well, let's go ahead and add some table headings, 00:25:14.320 --> 00:25:18.790 which I can represent using the th tag, h for heading. 00:25:18.790 --> 00:25:21.700 And maybe I want in this web page to display information 00:25:21.700 --> 00:25:23.980 about various different oceans, for example. 00:25:23.980 --> 00:25:27.850 So maybe I have one column for the ocean and another column, 00:25:27.850 --> 00:25:32.200 another table heading, for the average depth of that ocean, 00:25:32.200 --> 00:25:37.870 and another table heading for the maximum depth of that ocean. 00:25:37.870 --> 00:25:41.110 And that'll be the very first row of that table, the heading of the table. 00:25:41.110 --> 00:25:42.950 But in addition to the heading of the table, 00:25:42.950 --> 00:25:44.890 we also have the body of the table. 00:25:44.890 --> 00:25:47.700 So underneath the thead, I'll go ahead and include 00:25:47.700 --> 00:25:52.450 tbody, body for the main part of the table where all my data is going to be. 00:25:52.450 --> 00:25:56.360 And that body is going to consist of individual rows of a table. 00:25:56.360 --> 00:26:02.170 So I might have a tr, which here stands for table row. 00:26:02.170 --> 00:26:06.250 And inside of this table row, we'll go ahead and add some individual data 00:26:06.250 --> 00:26:08.140 points inside of the table. 00:26:08.140 --> 00:26:12.370 So inside of my table row, I'm going to have one table data point, or td, 00:26:12.370 --> 00:26:17.380 for table data, that says Pacific Ocean, for example, then another table 00:26:17.380 --> 00:26:21.610 data that says 4,280 meters, and then another one 00:26:21.610 --> 00:26:26.320 for the maximum depth of the Pacific Ocean, which is 10,911 meters. 00:26:26.320 --> 00:26:29.710 And, in fact, these three table heads as well 00:26:29.710 --> 00:26:32.930 at the top of the page, the ocean, the average depth, and the maximum depth, 00:26:32.930 --> 00:26:35.230 those should actually probably be in a row of their own 00:26:35.230 --> 00:26:39.440 as well, because the very first part of the table, that is also a row. 00:26:39.440 --> 00:26:44.710 So I'll go ahead and add a tr, short for table row and inside of that tr 00:26:44.710 --> 00:26:46.120 put these headings. 00:26:46.120 --> 00:26:49.250 I'll go ahead and add one more row just so we can see what this looks like. 00:26:49.250 --> 00:26:52.160 And then, we'll take a look at the page and then go back to this code. 00:26:52.160 --> 00:26:58.330 I'll add the Atlantic Ocean, too, which has an average depth of 3,646 meters, 00:26:58.330 --> 00:27:04.670 as well as a maximum depth of 8,486 meters as well. 00:27:04.670 --> 00:27:08.830 So when I open up table.html now, here's what I'm going to see. 00:27:08.830 --> 00:27:12.290 I'm going to see a table-like representation of the data. 00:27:12.290 --> 00:27:14.980 It's not just one thing after another after another anymore. 00:27:14.980 --> 00:27:16.100 It's structured in a table. 00:27:16.100 --> 00:27:17.730 Now, granted, there aren't any borders. 00:27:17.730 --> 00:27:19.900 And I could probably add some colors and spacing 00:27:19.900 --> 00:27:21.650 to make this look a little bit nicer. 00:27:21.650 --> 00:27:22.990 But I see three columns-- 00:27:22.990 --> 00:27:27.640 ocean, average depth, and maximum depth, where this very first row 00:27:27.640 --> 00:27:29.950 is what we might call the table header, the very top 00:27:29.950 --> 00:27:33.070 of the table that's defining what all of the columns mean. 00:27:33.070 --> 00:27:36.340 Inside of that table header is a single table row 00:27:36.340 --> 00:27:38.680 that has three table data cells-- 00:27:38.680 --> 00:27:41.650 ocean, average depth, and maximum depth. 00:27:41.650 --> 00:27:44.710 Then beneath this table header, represented in bold, 00:27:44.710 --> 00:27:47.950 is the table's body, or the tbody element, inside 00:27:47.950 --> 00:27:51.280 of which we had two rows, one for representing the Pacific Ocean, 00:27:51.280 --> 00:27:53.530 one for representing the Atlantic Ocean. 00:27:53.530 --> 00:27:56.260 And then we had data cells in each one of those rows 00:27:56.260 --> 00:28:01.560 for representing each of the individual cells that's located within this table. 00:28:01.560 --> 00:28:04.090 So this is what that page ultimately looks like. 00:28:04.090 --> 00:28:06.010 And let's take one more look at the HTML just 00:28:06.010 --> 00:28:10.830 to get an understanding for how all of these tags interact with one another. 00:28:10.830 --> 00:28:13.670 And no need to memorize all these tags right now, slowly 00:28:13.670 --> 00:28:15.770 as you begin to design HTML pages, you'll 00:28:15.770 --> 00:28:19.370 start to get more familiar with what HTML tags are available to you. 00:28:19.370 --> 00:28:21.370 And certainly, all of these HTML tags are 00:28:21.370 --> 00:28:23.960 things that are easy to reference if you need to look them up. 00:28:23.960 --> 00:28:26.000 It's very helpful to be able to look up something 00:28:26.000 --> 00:28:28.130 like, how do I create a table in HTML? 00:28:28.130 --> 00:28:31.010 And then you'll be able to see what the various different tags you'll 00:28:31.010 --> 00:28:35.000 need to add are in order to generate the table that you're looking for. 00:28:35.000 --> 00:28:38.840 But, again, just to recap, here, we have a table element, inside of which 00:28:38.840 --> 00:28:42.200 are two child elements, thead and tbody. 00:28:42.200 --> 00:28:47.150 Inside of each of those are one or more table rows, representing using tr. 00:28:47.150 --> 00:28:53.270 Inside of each of those are three table data cells, representing using td. 00:28:53.270 --> 00:28:55.580 And so using these nested tags, elements inside 00:28:55.580 --> 00:28:57.620 of elements inside of other elements, we've 00:28:57.620 --> 00:29:01.130 been able to build something far more complex than just a bulleted list. 00:29:01.130 --> 00:29:06.370 We've been able to build an entire table that has information as well. 00:29:06.370 --> 00:29:09.240 But ultimately, our web pages should be web pages that don't just 00:29:09.240 --> 00:29:12.090 display information, but that also let users 00:29:12.090 --> 00:29:14.770 interact with that information in some way. 00:29:14.770 --> 00:29:17.880 For example, you might imagine that on Google's home page, for example, 00:29:17.880 --> 00:29:19.330 it's not just unchanging. 00:29:19.330 --> 00:29:21.720 There's a field where I can type something in. 00:29:21.720 --> 00:29:25.200 And anytime users can provide input to a web page, 00:29:25.200 --> 00:29:27.750 we generally call that a form, or some place 00:29:27.750 --> 00:29:29.760 where a user can fill out a form in order 00:29:29.760 --> 00:29:32.670 to provide information to the web page. 00:29:32.670 --> 00:29:35.700 And so now, let's take a look at how we can use HTML 00:29:35.700 --> 00:29:40.120 in order to create a form that's going to display some information. 00:29:40.120 --> 00:29:44.310 So I'll go ahead and create a new page called form.html, 00:29:44.310 --> 00:29:46.600 again using that same HTML as before. 00:29:46.600 --> 00:29:49.250 We'll call the page Form. 00:29:49.250 --> 00:29:51.980 And inside of the body of this page now, let's say 00:29:51.980 --> 00:29:55.790 that I want to create a form that gives the user an opportunity to provide 00:29:55.790 --> 00:29:57.890 their full name, for example. 00:29:57.890 --> 00:29:59.010 How do I do that? 00:29:59.010 --> 00:30:02.040 Well, the first thing, I need is a form element, some way of saying, 00:30:02.040 --> 00:30:04.430 here is going to be a form. 00:30:04.430 --> 00:30:07.580 And now, inside of that form, what are the various different parts 00:30:07.580 --> 00:30:08.600 of the form? 00:30:08.600 --> 00:30:11.780 Well, there's really two parts that you might imagine to this form. 00:30:11.780 --> 00:30:14.960 One is a place for the user to actually type in their name. 00:30:14.960 --> 00:30:18.230 And they probably also need some way to submit the form, some button that 00:30:18.230 --> 00:30:20.990 just says submit, such that they can click on that button 00:30:20.990 --> 00:30:22.850 in order to submit the form. 00:30:22.850 --> 00:30:24.330 So how would we do that? 00:30:24.330 --> 00:30:26.570 Well, in order to create an input field, we're 00:30:26.570 --> 00:30:33.430 going to use an input tag, who's type in this case is going to be text. 00:30:33.430 --> 00:30:35.390 There are a number of different ways that users 00:30:35.390 --> 00:30:36.830 might provide input to a form. 00:30:36.830 --> 00:30:38.000 They might type in text. 00:30:38.000 --> 00:30:40.040 They might choose from a dropdown menu. 00:30:40.040 --> 00:30:42.680 They might choose from a radio button option. 00:30:42.680 --> 00:30:45.740 Or they might provide input as by clicking on a button, for example. 00:30:45.740 --> 00:30:48.620 In this case, we're specifically using the type attribute 00:30:48.620 --> 00:30:51.320 to say that when the user is providing input in this way, 00:30:51.320 --> 00:30:55.850 the type of input that they're providing is going to be some kind of text. 00:30:55.850 --> 00:31:00.080 Then, we might provide a placeholder, some default text that's 00:31:00.080 --> 00:31:02.630 going to be inside of that input field the first time 00:31:02.630 --> 00:31:04.200 the user looks at the page. 00:31:04.200 --> 00:31:06.950 So, for example, the placeholder might be Full Name. 00:31:06.950 --> 00:31:11.720 That way the user knows that what they should type into this placeholder 00:31:11.720 --> 00:31:13.910 is their own full name. 00:31:13.910 --> 00:31:17.600 And then finally, we're going to go ahead and give a name to this input 00:31:17.600 --> 00:31:18.100 field. 00:31:18.100 --> 00:31:20.430 Now, this isn't going to be something that the user sees 00:31:20.430 --> 00:31:21.500 when they visit the page. 00:31:21.500 --> 00:31:25.490 But anytime you submit a form, when we receive that forum in our web 00:31:25.490 --> 00:31:27.800 application-- something we'll explore later on-- 00:31:27.800 --> 00:31:32.720 we need some way of knowing which input field corresponded to which value. 00:31:32.720 --> 00:31:35.180 And so we're going to name each of the input fields 00:31:35.180 --> 00:31:38.170 just so that later on we'll be able to reference them. 00:31:38.170 --> 00:31:41.120 And, for now, since the user is typing their full name here, 00:31:41.120 --> 00:31:42.860 we could just name this full name. 00:31:42.860 --> 00:31:48.250 Or we could more succinctly just say name as the Name of this input field. 00:31:48.250 --> 00:31:51.700 After that, we have an input field where the user can type in their name. 00:31:51.700 --> 00:31:55.300 And now, we need some way for the user to be able to submit this form. 00:31:55.300 --> 00:31:58.960 So we might say something like input type equals 00:31:58.960 --> 00:32:03.430 submit to say, here's a way for the user to submit the form, 00:32:03.430 --> 00:32:04.810 type equals submit means. 00:32:04.810 --> 00:32:09.320 This is how they're going to submit the form when they're done completing it. 00:32:09.320 --> 00:32:13.100 Now, if I open up form.html, this is the page 00:32:13.100 --> 00:32:16.160 that we're ultimately going to see when we load this HTML. 00:32:16.160 --> 00:32:19.330 This entire page just contains a single HTML form. 00:32:19.330 --> 00:32:22.380 But that HTML form contains two parts. 00:32:22.380 --> 00:32:24.830 The first part was this input element here 00:32:24.830 --> 00:32:27.890 that allowed an opportunity for the user to type in their full name. 00:32:27.890 --> 00:32:30.150 They type in their full name into this input field. 00:32:30.150 --> 00:32:32.630 And when they're done, they can click this Submit button 00:32:32.630 --> 00:32:36.320 to indicate that they would like to now submit this form. 00:32:36.320 --> 00:32:39.320 Of course, right now, this form isn't going to do anything when we type 00:32:39.320 --> 00:32:42.470 in our name and click Submit, because we have an added and a logic in order 00:32:42.470 --> 00:32:44.000 to handle this form. 00:32:44.000 --> 00:32:47.120 But later on, as we transition into the world of building web applications 00:32:47.120 --> 00:32:50.280 using Python, we'll see how we can design a form, 00:32:50.280 --> 00:32:53.810 such that after the user submits it, we save information to a database 00:32:53.810 --> 00:32:56.480 or display some sort of results back to the user, 00:32:56.480 --> 00:32:59.360 all by using the power of building these web applications 00:32:59.360 --> 00:33:02.780 and connecting them to these sorts of HTML forms. 00:33:02.780 --> 00:33:05.910 And HTML forms can actually get quite a bit more complex. 00:33:05.910 --> 00:33:07.460 We'll take a look at another example. 00:33:07.460 --> 00:33:12.290 For instance, let me open up form1.html, which 00:33:12.290 --> 00:33:16.190 is a form that I built in advance, which shows a number of other ways 00:33:16.190 --> 00:33:20.210 that users can provide information as input to an HTML form. 00:33:20.210 --> 00:33:23.210 Here, we see an input whose type is text, 00:33:23.210 --> 00:33:26.290 meaning we want the user to type in their name as text. 00:33:26.290 --> 00:33:29.420 But you might also imagine that if a user is logging into a website, 00:33:29.420 --> 00:33:33.260 for example, they might in addition to typing in a text-based name or username 00:33:33.260 --> 00:33:35.600 or email, also provide a password. 00:33:35.600 --> 00:33:38.690 And generally, if you've been on a website and you've typed in a password, 00:33:38.690 --> 00:33:42.410 the password characters don't all show up as the actual characters. 00:33:42.410 --> 00:33:45.530 For security reasons, they generally show up as just little dots 00:33:45.530 --> 00:33:49.140 on the screen hiding the actual characters that they're representing. 00:33:49.140 --> 00:33:52.100 And in HTML, we can do that very easily by just 00:33:52.100 --> 00:33:55.520 saying that the type of this input is password. 00:33:55.520 --> 00:33:57.530 If they're typing in a password, our web browser 00:33:57.530 --> 00:34:02.160 will know not to actually display those individual characters. 00:34:02.160 --> 00:34:05.640 In addition to just text-based input, we also have radio button input, 00:34:05.640 --> 00:34:07.480 as I alluded to a moment ago. 00:34:07.480 --> 00:34:10.650 So here, we have a number of different radio inputs, 00:34:10.650 --> 00:34:13.390 where the user might be able to select from a number of options, 00:34:13.390 --> 00:34:15.580 choosing their favorite color, for example, 00:34:15.580 --> 00:34:17.250 from a number of these options. 00:34:17.250 --> 00:34:21.720 And finally, just to take a look at one other additional feature of HTML5, 00:34:21.720 --> 00:34:24.390 in fact, a new feature of HTML5, is something 00:34:24.390 --> 00:34:26.820 we might call a data list, where we might 00:34:26.820 --> 00:34:30.570 have the user choose in a dropdown from a number of different options. 00:34:30.570 --> 00:34:34.870 But we want to very quickly filter down or autocomplete based on those options. 00:34:34.870 --> 00:34:38.170 So if the user needs to select what country they're from, for example, 00:34:38.170 --> 00:34:41.550 we might have an input field and specify that it's 00:34:41.550 --> 00:34:45.870 going to be associated with a list called countries. 00:34:45.870 --> 00:34:49.400 Then immediately below that I have a data list element whose 00:34:49.400 --> 00:34:52.650 ID is countries, where here, I'm going to specify these 00:34:52.650 --> 00:34:55.800 are all of the options for what country we could have. 00:34:55.800 --> 00:34:58.670 Each one is inside of an option element whose value 00:34:58.670 --> 00:35:01.020 is whatever country they could select. 00:35:01.020 --> 00:35:06.130 And we have all of the countries of the world listed in these option elements. 00:35:06.130 --> 00:35:10.920 So this input here is going to allow me to select one option from a list of all 00:35:10.920 --> 00:35:12.880 of these possible options. 00:35:12.880 --> 00:35:17.090 So now, if I open up form1.html. 00:35:17.090 --> 00:35:19.780 Here's what that form ultimately looks like. 00:35:19.780 --> 00:35:21.730 I can, here, inside of the name field-- 00:35:21.730 --> 00:35:24.760 again, that word name shows up, because it's the placeholder-- 00:35:24.760 --> 00:35:26.590 I can type in my name here. 00:35:26.590 --> 00:35:29.260 And inside of the password field anything I type 00:35:29.260 --> 00:35:31.660 is going to show up as just little dots instead 00:35:31.660 --> 00:35:35.890 of the actual characters, because the type of that input field was password, 00:35:35.890 --> 00:35:38.440 instead of the type being text. 00:35:38.440 --> 00:35:40.420 In favorite color, I now have the ability 00:35:40.420 --> 00:35:43.390 to choose between various different favorite color options. 00:35:43.390 --> 00:35:46.720 In a radio button format, I choose from one of a number of options. 00:35:46.720 --> 00:35:49.540 And finally, inside this country dropdown, 00:35:49.540 --> 00:35:53.150 I have the ability now when I click on it to see all of the countries, 00:35:53.150 --> 00:35:56.470 but as I start to type letters, like u-n-i-t, 00:35:56.470 --> 00:36:00.230 it filters down to only the options that I actually care about. 00:36:00.230 --> 00:36:04.090 So here if I type in enough letters, eventually I see United States. 00:36:04.090 --> 00:36:06.740 And I can click on that option as well. 00:36:06.740 --> 00:36:09.880 So HTML5 builds in these additional features 00:36:09.880 --> 00:36:13.300 to make it easy to implement something like a text field, where it will auto 00:36:13.300 --> 00:36:15.520 complete based on the text that you provide. 00:36:15.520 --> 00:36:19.720 You can just specify that it is inside of this data list 00:36:19.720 --> 00:36:22.150 and then provide a list of all the possible values. 00:36:22.150 --> 00:36:24.730 And then HTML and your web browser in turn 00:36:24.730 --> 00:36:27.880 will take care of the process of rendering that information in the way 00:36:27.880 --> 00:36:31.660 that you expect it to be displayed. 00:36:31.660 --> 00:36:34.260 So those are just some of the possible HTML elements 00:36:34.260 --> 00:36:37.950 that we can ultimately create by using these various different elements 00:36:37.950 --> 00:36:39.470 that we nest within each other. 00:36:39.470 --> 00:36:41.490 And there are definitely other HTML elements 00:36:41.490 --> 00:36:44.100 that exist as well that you can begin to explore. 00:36:44.100 --> 00:36:46.270 But all of them follow a very similar pattern 00:36:46.270 --> 00:36:48.480 that we're going to have some tag, that might require 00:36:48.480 --> 00:36:51.780 some attributes, additional information about the HTML, 00:36:51.780 --> 00:36:55.710 to give context to the web browser for how that element should be displayed. 00:36:55.710 --> 00:36:58.830 Maybe that element needs to have a particular source for an image. 00:36:58.830 --> 00:37:01.980 Maybe it needs a link in order to link to somewhere, or other information 00:37:01.980 --> 00:37:02.760 as well. 00:37:02.760 --> 00:37:05.460 And then inside of that element, you might nest other elements. 00:37:05.460 --> 00:37:07.320 So that your table has rows. 00:37:07.320 --> 00:37:09.480 And inside of those rows, we have other cells. 00:37:09.480 --> 00:37:12.030 And you might imagine nesting elements inside 00:37:12.030 --> 00:37:14.860 of other elements inside of other elements. 00:37:14.860 --> 00:37:18.560 But right now so far, all of our web pages have been rather simple. 00:37:18.560 --> 00:37:21.150 They've just been-- we've described the structure of the page, 00:37:21.150 --> 00:37:24.170 and we've described we want a list here, we want to form there. 00:37:24.170 --> 00:37:27.060 What we might really like is some way of specifying that we 00:37:27.060 --> 00:37:29.340 want to style our web page in some way. 00:37:29.340 --> 00:37:30.270 We want to add color. 00:37:30.270 --> 00:37:31.530 We want add spacing. 00:37:31.530 --> 00:37:35.010 We want to add some sort of other layout to our page as well. 00:37:35.010 --> 00:37:37.980 And in order to do that, we're going to use a second language 00:37:37.980 --> 00:37:41.460 that we're going to call CSS, short for Cascading Style Sheets. 00:37:41.460 --> 00:37:43.260 In particular, we'll use the latest version 00:37:43.260 --> 00:37:48.360 of CSS, CSS3, which gives us the ability to take an HTML page 00:37:48.360 --> 00:37:51.420 and tell the web browser how we would like it to be styled. 00:37:51.420 --> 00:37:54.900 Instead of just black text in the same font on a white background, 00:37:54.900 --> 00:37:59.100 we can begin to specify particular CSS properties of how 00:37:59.100 --> 00:38:02.250 we would like this page to look to make sure that the page looks 00:38:02.250 --> 00:38:03.960 the way we want it to. 00:38:03.960 --> 00:38:07.530 So let's take a look at a simple example now of CSS 00:38:07.530 --> 00:38:12.800 to take a look at how we can add some CSS code to our page. 00:38:12.800 --> 00:38:18.380 So I'll go ahead and create a new file that I'll call style.html, 00:38:18.380 --> 00:38:22.370 just to demonstrate some basic ideas of adding some style to our page. 00:38:22.370 --> 00:38:26.330 And we'll go ahead and copy the same hello.html from before. 00:38:26.330 --> 00:38:30.350 And maybe in addition to hello world, I display in h1 some big heading 00:38:30.350 --> 00:38:35.790 at the top that says like, Welcome to my web page, for example. 00:38:35.790 --> 00:38:40.170 So now, if I open up, style.html, this is what I see. 00:38:40.170 --> 00:38:43.020 I see a big heading at the top that says welcome to my web page, 00:38:43.020 --> 00:38:46.340 beneath which is just the text, hello world. 00:38:46.340 --> 00:38:48.710 And now imagine that I want to add some style 00:38:48.710 --> 00:38:50.870 to this heading at the top of the page. 00:38:50.870 --> 00:38:53.510 Maybe instead of being left aligned, I want it to be centered. 00:38:53.510 --> 00:38:56.780 Maybe instead of just being black text, I'd like to change the color. 00:38:56.780 --> 00:39:00.020 In order to do that, just as we've used attributes 00:39:00.020 --> 00:39:04.280 in the past to add additional information to this particular HTML 00:39:04.280 --> 00:39:07.700 page, we can do a very similar thing with CSS. 00:39:07.700 --> 00:39:12.940 We can specify that we're going to give this h1 element a style attribute. 00:39:12.940 --> 00:39:14.480 And that is going to be equal to. 00:39:14.480 --> 00:39:19.070 And then in quotation marks, we're going to provide all of the CSS properties 00:39:19.070 --> 00:39:22.040 that we would like to add to this particular element. 00:39:22.040 --> 00:39:25.820 So the way that CSS styling works is that we can give elements 00:39:25.820 --> 00:39:28.790 individual CSS properties, where a property is 00:39:28.790 --> 00:39:32.590 something like the color of the element or the alignment of the element. 00:39:32.590 --> 00:39:35.120 And each of those properties has a default value. 00:39:35.120 --> 00:39:37.850 But we can change its value to something else. 00:39:37.850 --> 00:39:41.630 So if, for example, I wanted to change the color of this heading, 00:39:41.630 --> 00:39:45.050 so that instead of a black heading, it displayed as the blue heading, 00:39:45.050 --> 00:39:49.640 I could say for this h1, I would like to give it a color property. 00:39:49.640 --> 00:39:51.890 And then to give the color property of value, 00:39:51.890 --> 00:39:55.670 I say color colon and then the value that I would like to give to it. 00:39:55.670 --> 00:40:00.090 So color colon blue, for example, followed by a semicolon 00:40:00.090 --> 00:40:03.200 will change the color of this h1 element to blue. 00:40:03.200 --> 00:40:05.120 And my text editor is automatically showing me 00:40:05.120 --> 00:40:08.150 a little square that shows me what this color blue is actually 00:40:08.150 --> 00:40:09.020 going to look like. 00:40:09.020 --> 00:40:10.190 This isn't part of the text. 00:40:10.190 --> 00:40:12.260 It's just my text editor being helpful so 00:40:12.260 --> 00:40:16.010 that I can see in advance as I'm writing this code what the color is actually 00:40:16.010 --> 00:40:18.030 going to look like. 00:40:18.030 --> 00:40:22.670 So now if I open up style.html, here's what I see. 00:40:22.670 --> 00:40:26.510 Instead of a black heading at the top, we've changed the color to blue. 00:40:26.510 --> 00:40:28.670 And there are many other built-in colors that 00:40:28.670 --> 00:40:31.460 exist within HTML that we can use in order to change 00:40:31.460 --> 00:40:32.920 the color to whatever we want. 00:40:32.920 --> 00:40:35.340 If instead of blue, I said I want the color to be red, 00:40:35.340 --> 00:40:37.680 for instance, I can refresh the page. 00:40:37.680 --> 00:40:38.870 And now, the heading is red. 00:40:38.870 --> 00:40:40.200 And there are many other colors. 00:40:40.200 --> 00:40:42.890 I can change the color to like spring green, for instance. 00:40:42.890 --> 00:40:44.600 And that's going to be a particular shade 00:40:44.600 --> 00:40:47.630 of green that displays just like this. 00:40:47.630 --> 00:40:50.900 And so now, we have the ability to add various different style 00:40:50.900 --> 00:40:53.060 properties to individual elements. 00:40:53.060 --> 00:40:55.790 I can say take this heading and change its style 00:40:55.790 --> 00:41:00.720 so that the color instead of being black is going to show up as blue instead. 00:41:00.720 --> 00:41:04.730 And if I want to add multiple CSS properties to the same HTML element, 00:41:04.730 --> 00:41:06.260 I can do that as well. 00:41:06.260 --> 00:41:08.780 Here in the style attribute, I can say that in addition 00:41:08.780 --> 00:41:12.440 to saying that the color is blue, I'd like to give a second CSS 00:41:12.440 --> 00:41:13.970 property to this element. 00:41:13.970 --> 00:41:21.260 I'd like to say that the text align property should be center, for example. 00:41:21.260 --> 00:41:24.560 The text align property controls, as you might imagine, 00:41:24.560 --> 00:41:27.380 how a particular HTML element has its text aligned. 00:41:27.380 --> 00:41:30.400 Is it all the way on the left, all the way on the right, or centered? 00:41:30.400 --> 00:41:34.790 And if I change the text align property to have a value of center, 00:41:34.790 --> 00:41:39.490 well, then now, when I refresh this page, I see that Welcome to my web page 00:41:39.490 --> 00:41:41.870 is now both blue, and it's centered. 00:41:41.870 --> 00:41:44.990 I've changed the color, and I've changed the alignment 00:41:44.990 --> 00:41:47.360 of this particular element. 00:41:47.360 --> 00:41:50.840 And HTML elements don't need to just be styled directly. 00:41:50.840 --> 00:41:55.500 They can also get their style information from parent elements. 00:41:55.500 --> 00:41:58.250 So if you recall again that DOM structure, where 00:41:58.250 --> 00:42:02.270 we have an HTML element inside of which is this body element 00:42:02.270 --> 00:42:06.650 and inside of the body element is this h1 element and this text, 00:42:06.650 --> 00:42:08.870 you can imagine if we wanted this styling 00:42:08.870 --> 00:42:13.340 to apply not just to this heading, but also to the Hello World text, 00:42:13.340 --> 00:42:17.000 I could move the styling information, move this style attribute, 00:42:17.000 --> 00:42:21.110 change it from the h1 and escalating it to this body. 00:42:21.110 --> 00:42:25.160 And if I move the style to the body, then everything inside of the body 00:42:25.160 --> 00:42:27.540 is going to be styled in that way. 00:42:27.540 --> 00:42:31.020 So let's now take a look at an example of that to see how that works. 00:42:31.020 --> 00:42:33.590 If I take this style information, and I move 00:42:33.590 --> 00:42:36.950 it so that instead of associating it with the h1, 00:42:36.950 --> 00:42:42.220 I instead associate it with the body, then now, when I refresh the page, 00:42:42.220 --> 00:42:44.850 I see that both parts of the body, both the big heading 00:42:44.850 --> 00:42:47.010 at the top that says, Welcome to my web page, 00:42:47.010 --> 00:42:51.180 as well as the text, Hello World, both have those CSS properties applied. 00:42:51.180 --> 00:42:53.130 I've changed their color to blue. 00:42:53.130 --> 00:42:55.260 And I've also changed their text alignment 00:42:55.260 --> 00:42:58.860 to be centered instead of just left aligned. 00:42:58.860 --> 00:43:01.050 But if I do want it to just be that heading, 00:43:01.050 --> 00:43:03.990 then I can move it out and say that I just 00:43:03.990 --> 00:43:08.640 want to apply the style to that one individual heading. 00:43:08.640 --> 00:43:12.170 Now, one thing that we might imagine might become a problem over time 00:43:12.170 --> 00:43:15.320 is that imagine if I had multiple headings that I wanted 00:43:15.320 --> 00:43:17.600 to style in the same way, for example. 00:43:17.600 --> 00:43:20.090 Let's say I have a second heading that-- 00:43:20.090 --> 00:43:21.600 this is a second heading-- 00:43:21.600 --> 00:43:25.880 that I also want to be styled as blue and centered as well, 00:43:25.880 --> 00:43:28.890 I can refresh this page and see that right now that is not the case. 00:43:28.890 --> 00:43:31.530 And I don't want to make the entire page blue and centered. 00:43:31.530 --> 00:43:35.120 I only want these two headings to be blue and centered. 00:43:35.120 --> 00:43:39.530 So what I could do is I could just take this style code from the h1 00:43:39.530 --> 00:43:43.670 and apply it to this h1 as well, so that both of my h1 elements 00:43:43.670 --> 00:43:46.140 now have the exact same style code. 00:43:46.140 --> 00:43:47.600 And I'll go ahead and refresh this. 00:43:47.600 --> 00:43:50.150 And now, we see this is the intended behavior. 00:43:50.150 --> 00:43:54.380 I have two headings, both of which are centered and both of which are blue. 00:43:54.380 --> 00:43:57.890 But what we want to start to think about as we start to build web applications, 00:43:57.890 --> 00:44:00.890 and especially as our web applications start to get a little bit more 00:44:00.890 --> 00:44:03.590 sophisticated, is to think about the design 00:44:03.590 --> 00:44:05.630 of how we're building our web pages and how 00:44:05.630 --> 00:44:07.350 we're building our web applications. 00:44:07.350 --> 00:44:09.590 And in particular, anytime we find ourselves 00:44:09.590 --> 00:44:12.590 copying a lot of the same information from one place 00:44:12.590 --> 00:44:15.160 to another, that's probably not the best design. 00:44:15.160 --> 00:44:17.210 And you should start to think about how might you 00:44:17.210 --> 00:44:19.110 design this a little bit better. 00:44:19.110 --> 00:44:21.110 It's not great design, one, just because there's 00:44:21.110 --> 00:44:23.780 some redundancy that probably doesn't need to be there, 00:44:23.780 --> 00:44:26.210 but also because it makes the page a little bit more 00:44:26.210 --> 00:44:28.940 difficult to change and add a little more difficult to update. 00:44:28.940 --> 00:44:31.250 If I instead want to change both of these headings 00:44:31.250 --> 00:44:33.980 to be red instead of blue, then all of a sudden, 00:44:33.980 --> 00:44:36.870 I need to change my code in two places. 00:44:36.870 --> 00:44:40.700 I need to change the style attribute on this first heading up here. 00:44:40.700 --> 00:44:43.100 And I also need to change the style attribute 00:44:43.100 --> 00:44:45.770 on the second heading down there. 00:44:45.770 --> 00:44:47.810 What I'd like to do is to somehow just be 00:44:47.810 --> 00:44:50.630 able to write the style code once and then have 00:44:50.630 --> 00:44:53.070 it apply to both of these headings. 00:44:53.070 --> 00:44:54.740 And, in fact, there is a way to do that. 00:44:54.740 --> 00:44:58.940 What we can do is instead of doing what we might call inline styling, 00:44:58.940 --> 00:45:02.570 where we take the CSS code and place it directly 00:45:02.570 --> 00:45:07.160 as an attribute of an HTML element, we can move our style code 00:45:07.160 --> 00:45:10.720 to an entirely different part of the web page. 00:45:10.720 --> 00:45:13.390 Recall again that at the top of our HTML page, 00:45:13.390 --> 00:45:16.060 we have this head section that just includes 00:45:16.060 --> 00:45:18.880 information that's useful to know about the web page, 00:45:18.880 --> 00:45:22.060 but isn't actually part of the body of the web page, the content 00:45:22.060 --> 00:45:23.170 that the user sees. 00:45:23.170 --> 00:45:24.970 This head section is a great place where we 00:45:24.970 --> 00:45:28.930 can begin to put some style information, information about how we would 00:45:28.930 --> 00:45:31.900 like for this web page to be styled. 00:45:31.900 --> 00:45:35.440 So what I can do here is instead of putting these style 00:45:35.440 --> 00:45:40.150 attributes inside inline with these HTML elements, 00:45:40.150 --> 00:45:43.190 I can inside of the head section of my web page 00:45:43.190 --> 00:45:49.360 add a style element, where in between the opening style tag and the closing 00:45:49.360 --> 00:45:54.400 style tag, I can add any of the style information that I want. 00:45:54.400 --> 00:45:56.620 And here's the way that syntax is going to look. 00:45:56.620 --> 00:46:01.060 I first need to specify, what types of elements am I going to style? 00:46:01.060 --> 00:46:04.090 And in this case, I want to style all of the h1s. 00:46:04.090 --> 00:46:07.150 So I can just say h1. 00:46:07.150 --> 00:46:11.110 And then all of the style code is going to go inside 00:46:11.110 --> 00:46:15.670 of a pair of curly braces, where I can say I would like the color to be blue 00:46:15.670 --> 00:46:20.040 and I would like the text align property to be centered. 00:46:20.040 --> 00:46:21.900 So now, here's what I've done. 00:46:21.900 --> 00:46:26.600 I've taken the CSS code that used to be down here inside the body of the page 00:46:26.600 --> 00:46:29.510 actually as an attribute of these h1 elements. 00:46:29.510 --> 00:46:34.670 And I've moved the style-related code to a different part of my page altogether. 00:46:34.670 --> 00:46:37.730 Now, the style information is inside the header of my page, 00:46:37.730 --> 00:46:42.240 inside of the style element, where I've said for every h1 element, 00:46:42.240 --> 00:46:43.640 here's how you should style it. 00:46:43.640 --> 00:46:47.090 The styling is in between the opening and curly closing braces here. 00:46:47.090 --> 00:46:50.830 And I've said that every h1 should have a color of blue. 00:46:50.830 --> 00:46:55.280 And every h1 should have a text a line property of center. 00:46:55.280 --> 00:46:58.610 And that is then going to apply to all of the h1 elements 00:46:58.610 --> 00:47:02.690 that my web page happens to find inside the body of my web page. 00:47:02.690 --> 00:47:04.320 So there's a couple of advantages here. 00:47:04.320 --> 00:47:06.770 Advantage number one is what we talked about a moment ago. 00:47:06.770 --> 00:47:10.940 I don't need to duplicate the same code in both of these h1 elements. 00:47:10.940 --> 00:47:13.490 I can write at once and say, apply this styling 00:47:13.490 --> 00:47:16.300 to all of the h1s that show up in the page. 00:47:16.300 --> 00:47:20.300 An advantage number two is we've been able to factor out the style 00:47:20.300 --> 00:47:23.310 code to somewhere else, just to make it a little bit cleaner. 00:47:23.310 --> 00:47:26.090 So that instead of having a really long line, you might imagine, 00:47:26.090 --> 00:47:29.370 if we had not just two, but maybe five or six or seven different CSS 00:47:29.370 --> 00:47:32.820 properties, that would have taken up a lot of space on one line. 00:47:32.820 --> 00:47:36.080 I can instead in a more readable, more organized way, 00:47:36.080 --> 00:47:38.990 move that style-related code to the style element 00:47:38.990 --> 00:47:42.090 at the beginning of the page just to make it easier to read, 00:47:42.090 --> 00:47:45.860 easier to visually understand, and just to clean up the body of the web page 00:47:45.860 --> 00:47:46.760 as well. 00:47:46.760 --> 00:47:48.470 And that's going to be another of the key themes that's 00:47:48.470 --> 00:47:51.770 going to come up again and again in this class, this idea of separating things 00:47:51.770 --> 00:47:55.270 out so that every piece can sort of be independent of one another. 00:47:55.270 --> 00:47:59.180 Our structure of the web page inside the body is separate from the style. 00:47:59.180 --> 00:48:02.510 And we'll see the same sort of idea appear again and again, as we begin 00:48:02.510 --> 00:48:06.290 to try to design web applications well. 00:48:06.290 --> 00:48:12.650 So now if I take this exact same page and go ahead and refresh style.html, 00:48:12.650 --> 00:48:15.740 we'll see that we see the exact same thing. 00:48:15.740 --> 00:48:17.870 Both of the headings still show up as centered. 00:48:17.870 --> 00:48:19.820 Both of them still show up as blue. 00:48:19.820 --> 00:48:21.680 But now we have the advantage of having only 00:48:21.680 --> 00:48:25.850 written the style code once instead of needing to write the exact same style 00:48:25.850 --> 00:48:29.460 code multiple times in the same way. 00:48:29.460 --> 00:48:32.100 But it turns out that we can even do a little bit better 00:48:32.100 --> 00:48:34.800 than this, because one thing you might imagine 00:48:34.800 --> 00:48:38.700 is that if I have a web application or a website that has multiple different web 00:48:38.700 --> 00:48:42.900 pages, it's probably going to be likely that each of those web pages 00:48:42.900 --> 00:48:45.330 might need to be styled in similar ways. 00:48:45.330 --> 00:48:47.880 If I have a big banner at the top of one web page, 00:48:47.880 --> 00:48:50.400 then in other pages related to that page, 00:48:50.400 --> 00:48:53.190 I might want the same banner, styled in the same way, 00:48:53.190 --> 00:48:55.470 using similar style information. 00:48:55.470 --> 00:49:00.900 And right now, our CSS code is specific to one particular page. 00:49:00.900 --> 00:49:03.840 And it's not going to be easy to then take that same styling 00:49:03.840 --> 00:49:05.370 and apply it to another page. 00:49:05.370 --> 00:49:08.880 If I wanted to, I'd need to copy the exact same CSS code, 00:49:08.880 --> 00:49:10.420 put it inside of another page. 00:49:10.420 --> 00:49:12.990 But then we run into the same problem of duplication, 00:49:12.990 --> 00:49:15.990 where I've now had to repeat myself across multiple different pages, 00:49:15.990 --> 00:49:20.140 putting the exact same CSS code across all those different pages. 00:49:20.140 --> 00:49:22.050 So there is an improvement we can make. 00:49:22.050 --> 00:49:25.980 And the improvement we can make is to take that CSS code 00:49:25.980 --> 00:49:29.230 and just move it to an entirely different file. 00:49:29.230 --> 00:49:32.880 So instead of putting this style code inside of a style element 00:49:32.880 --> 00:49:36.750 inside of this HTML page, I'll just create a new file 00:49:36.750 --> 00:49:42.270 that I'll call styles.css, inside of which is going to be all of the CSS 00:49:42.270 --> 00:49:43.350 that I care about. 00:49:43.350 --> 00:49:46.840 I want to take every h1, I want to change its color to blue. 00:49:46.840 --> 00:49:51.350 And now, I want to change its text align property to center. 00:49:51.350 --> 00:49:57.260 And now, inside of my HTML page, I no longer need to include any CSS at all. 00:49:57.260 --> 00:49:59.530 Instead of this style element altogether, 00:49:59.530 --> 00:50:05.080 I can just link my CSS code in that CSS file, called styles.css, 00:50:05.080 --> 00:50:08.140 to this particular HTML page. 00:50:08.140 --> 00:50:10.510 And how do I link the styles.css file? 00:50:10.510 --> 00:50:13.690 Well, I can do so again in the head section of my web page 00:50:13.690 --> 00:50:17.890 using a link tag, where I can say I'd like this link 00:50:17.890 --> 00:50:21.740 to be the relationship is it's going to be a style sheet, 00:50:21.740 --> 00:50:25.280 meaning what I'm about to link is going to be a style sheet for this page. 00:50:25.280 --> 00:50:29.680 It's going to describe how I want for the elements on this page to be styled. 00:50:29.680 --> 00:50:32.530 And then, just as in the case of a link to another page, 00:50:32.530 --> 00:50:37.540 I use href to specify a hyperlink reference, what I want to link to, 00:50:37.540 --> 00:50:40.930 I'm now going to specify using an href attribute what 00:50:40.930 --> 00:50:43.120 CSS file I would like to know link. 00:50:43.120 --> 00:50:48.160 And in this case the CSS file that I'm going to link is styles.css. 00:50:48.160 --> 00:50:51.790 That is the file that just so happens to contain all of the CSS 00:50:51.790 --> 00:50:55.390 that I would like to apply to this particular file. 00:50:55.390 --> 00:50:59.380 Now, if I refresh the page, I see again nothing has changed. 00:50:59.380 --> 00:51:02.200 In the last two revisions, the page has stayed exactly the same 00:51:02.200 --> 00:51:03.670 as far as the user is concerned. 00:51:03.670 --> 00:51:04.870 They still see two headings. 00:51:04.870 --> 00:51:05.960 Both of them are centered. 00:51:05.960 --> 00:51:07.180 Both of them are blue. 00:51:07.180 --> 00:51:10.480 But now, the advantage is that here is my HTML. 00:51:10.480 --> 00:51:12.350 It's shorter than it was before. 00:51:12.350 --> 00:51:17.110 And in particular, there's no CSS that's baked in to this HTML file at all. 00:51:17.110 --> 00:51:21.490 I factored it all out into the separate styles.css file. 00:51:21.490 --> 00:51:26.170 And now if I have multiple HTML files that are all using the same styling, 00:51:26.170 --> 00:51:29.530 I can just link them all to the same styles.css 00:51:29.530 --> 00:51:33.250 file, such that they're all using the same style information. 00:51:33.250 --> 00:51:34.810 I don't need to repeat myself. 00:51:34.810 --> 00:51:38.230 And if ever I need to make a change across all of those pages, 00:51:38.230 --> 00:51:40.180 I just change the styling once. 00:51:40.180 --> 00:51:42.550 I change the styles.css file. 00:51:42.550 --> 00:51:46.210 And then all of the web pages that are linked to that style sheet 00:51:46.210 --> 00:51:49.410 will update as well in order to reflect those changes. 00:51:49.410 --> 00:51:53.080 So again, we've been able to factor out some of this style information 00:51:53.080 --> 00:51:57.330 to a separate file just to make our lives a little bit easier. 00:51:57.330 --> 00:51:59.080 All right, so so far we've now seen how we 00:51:59.080 --> 00:52:03.370 can CSS in a number of different ways to add some basic styles to our page. 00:52:03.370 --> 00:52:06.230 We've seen that we can take an element and change its color. 00:52:06.230 --> 00:52:08.860 We've seen how we can take an element and change its alignment, 00:52:08.860 --> 00:52:11.980 move it from left aligned to right aligned to centered, for example. 00:52:11.980 --> 00:52:14.860 As it turns out, there are a lot of different CSS properties 00:52:14.860 --> 00:52:17.800 that we can add to our HTML elements in order 00:52:17.800 --> 00:52:21.340 to style them in various different ways, more than we'll have time 00:52:21.340 --> 00:52:22.940 to talk about in this lecture. 00:52:22.940 --> 00:52:24.760 But now, let's just take a look at a couple 00:52:24.760 --> 00:52:27.570 of the most popular, most common CSS properties 00:52:27.570 --> 00:52:32.410 that we can add in order to make our web pages look the way we wanted to. 00:52:32.410 --> 00:52:34.720 And one of the most powerful tools for CSS 00:52:34.720 --> 00:52:37.570 is controlling the size of various different elements. 00:52:37.570 --> 00:52:41.710 By default, HTML just used a default size for everything on the page. 00:52:41.710 --> 00:52:46.330 But if I want to more precisely control how big any particular element is I 00:52:46.330 --> 00:52:49.430 can use CSS in order to do so. 00:52:49.430 --> 00:52:53.740 So let me now create a new file that I will call a size.html. 00:52:53.740 --> 00:52:59.220 We'll start with the same HTML code and call the page Size. 00:52:59.220 --> 00:53:02.160 And now, inside the body of my page, let me just 00:53:02.160 --> 00:53:05.400 have a vertical section of my page, just some section of my page 00:53:05.400 --> 00:53:07.120 that's going to have some content. 00:53:07.120 --> 00:53:10.500 And I'm going to put this inside of a div tag. 00:53:10.500 --> 00:53:13.200 Now, this is the first time that we've seen a div in HTML. 00:53:13.200 --> 00:53:15.720 You can think of a div as just a division 00:53:15.720 --> 00:53:18.270 of the page, some section of the page that's going 00:53:18.270 --> 00:53:20.010 to have some content inside of it. 00:53:20.010 --> 00:53:24.750 And we use divs because it makes it easy to reference a particular div or nest 00:53:24.750 --> 00:53:28.290 information inside of other pieces of information, or just to divide 00:53:28.290 --> 00:53:31.110 and break up our page into multiple different sections. 00:53:31.110 --> 00:53:33.110 Here, inside of the body, I'm just going to have 00:53:33.110 --> 00:53:37.080 a single div that is going to say something like hello world. 00:53:37.080 --> 00:53:40.020 And now, I'm going to add some style to this page 00:53:40.020 --> 00:53:42.240 in order to control the size of this div, 00:53:42.240 --> 00:53:45.480 to control the size of this section of my web page. 00:53:45.480 --> 00:53:46.830 I could use inline styling. 00:53:46.830 --> 00:53:48.780 I could factor things out into another file. 00:53:48.780 --> 00:53:51.270 But since I'm only dealing with one file for now, 00:53:51.270 --> 00:53:54.150 I'm just going to add a style section to the top of my web page 00:53:54.150 --> 00:53:57.030 just so you can more clearly see how the style of this page 00:53:57.030 --> 00:54:02.280 is going to map on to the way that we're modifying these HTML elements. 00:54:02.280 --> 00:54:05.980 And I would like to style this div in a couple of ways. 00:54:05.980 --> 00:54:08.230 One thing I can do is give the div a background color. 00:54:08.230 --> 00:54:12.000 Let me change its background color to blue, for example. 00:54:12.000 --> 00:54:14.940 And then I can say, all right, I'd like to give this div a width 00:54:14.940 --> 00:54:17.310 and a height, some size information. 00:54:17.310 --> 00:54:21.090 I can say, go ahead and give this div a width of 100 pixels 00:54:21.090 --> 00:54:25.590 and maybe a height of 400 pixels. 00:54:25.590 --> 00:54:31.580 So now, when I go ahead and open up size.html, this is what I see. 00:54:31.580 --> 00:54:36.110 I see in a 100 by 400 pixel wide vertical, or rectangular, 00:54:36.110 --> 00:54:39.560 section of my page, I see the words Hello World. 00:54:39.560 --> 00:54:42.230 And so you might imagine if you have multiple different elements 00:54:42.230 --> 00:54:45.290 on your page, as your web pages start to get a little bit more complex, 00:54:45.290 --> 00:54:48.590 you probably want to have some more precise control over how wide 00:54:48.590 --> 00:54:50.990 or how tall any particular element is. 00:54:50.990 --> 00:54:53.600 And these width and height attributes can be very helpful 00:54:53.600 --> 00:54:56.810 because I can very easily change the width to say like 500 pixels, 00:54:56.810 --> 00:54:57.830 for example. 00:54:57.830 --> 00:55:01.120 And now when I refresh the page, now I see that the width of this page, 00:55:01.120 --> 00:55:06.070 or this div, the section of the page, has actually now gotten a lot wider. 00:55:06.070 --> 00:55:10.520 And so we have the ability to control size using CSS. 00:55:10.520 --> 00:55:13.560 Go ahead and can close some of these pages that I no longer need. 00:55:13.560 --> 00:55:16.100 And now take a look at some other things that we can do. 00:55:16.100 --> 00:55:17.690 In addition to controlling the size-- and let 00:55:17.690 --> 00:55:19.980 me change this color to something a little bit lighter, 00:55:19.980 --> 00:55:25.140 something like orange, such that now if I open up size, it looks like this. 00:55:25.140 --> 00:55:26.760 I'll make this a little bit smaller. 00:55:26.760 --> 00:55:29.710 Let's try 200 by 200 pixels. 00:55:29.710 --> 00:55:31.120 It looks now like this. 00:55:31.120 --> 00:55:34.210 You might imagine there are some other changes that I might like to make. 00:55:34.210 --> 00:55:38.500 Like this Hello World, for example, is very close to the edge 00:55:38.500 --> 00:55:39.730 of this particular div. 00:55:39.730 --> 00:55:42.510 It's right up against the upper left corner of that div. 00:55:42.510 --> 00:55:44.260 I might want to change that by adding what 00:55:44.260 --> 00:55:48.430 we might call some padding to this particular HTML element, some space, 00:55:48.430 --> 00:55:50.710 just so that the content of the element isn't 00:55:50.710 --> 00:55:54.410 so close to the border of the element itself. 00:55:54.410 --> 00:55:58.600 So, for example, one thing I can do is inside this div add some padding. 00:55:58.600 --> 00:56:03.500 Say maybe I want 20 pixels worth of padding on the inside of the element, 00:56:03.500 --> 00:56:06.220 such that now when I refresh the page, we 00:56:06.220 --> 00:56:09.440 see that we have some padding along the outside of the element. 00:56:09.440 --> 00:56:11.770 So that Hello World now shows up not right up 00:56:11.770 --> 00:56:16.190 against the edge of the element, but inside a little bit as well. 00:56:16.190 --> 00:56:18.130 And if we have a particular HTML element that 00:56:18.130 --> 00:56:20.260 maybe is too close to the edge of the screen, 00:56:20.260 --> 00:56:22.490 maybe it's too close to the top of the screen, 00:56:22.490 --> 00:56:25.660 we can also add space around outside of the element 00:56:25.660 --> 00:56:28.580 by adding what we call margin to the element as well. 00:56:28.580 --> 00:56:32.890 So I can say let's give it 20 pixels of margin inside of this div. 00:56:32.890 --> 00:56:34.000 And then refresh. 00:56:34.000 --> 00:56:37.840 And now we see that whereas before this div was very close 00:56:37.840 --> 00:56:39.940 to the upper left edge of the screen, now 00:56:39.940 --> 00:56:42.380 we've moved it 20 pixels away from everything. 00:56:42.380 --> 00:56:46.090 So it's got some space on all four sides of it. 00:56:46.090 --> 00:56:49.040 So that's how we can now use margin and padding just 00:56:49.040 --> 00:56:51.250 to make the page look a little bit nicer to the user. 00:56:51.250 --> 00:56:54.490 So objects are not too close together or too far apart. 00:56:54.490 --> 00:56:58.060 Padding, again, is on the inside of the border of the element. 00:56:58.060 --> 00:57:00.710 I can add 20 pixels of padding, for example, 00:57:00.710 --> 00:57:03.110 to make sure that the content inside of the element, 00:57:03.110 --> 00:57:06.460 in this case, the words Hello World, just have a little bit of space 00:57:06.460 --> 00:57:07.390 from the border. 00:57:07.390 --> 00:57:09.610 And that's padding on the inside of the element. 00:57:09.610 --> 00:57:12.370 Margin, meanwhile, is on the outside of the element. 00:57:12.370 --> 00:57:15.430 We add some margin along the outside of the border to space 00:57:15.430 --> 00:57:17.620 the element out from other elements that might 00:57:17.620 --> 00:57:20.680 be nearby it to make sure that there's enough space between the border 00:57:20.680 --> 00:57:23.420 of the element from the top of the screen and also from the left 00:57:23.420 --> 00:57:26.170 and also the bottom and the right, though there's no objects there 00:57:26.170 --> 00:57:28.840 that we're currently creating space from. 00:57:28.840 --> 00:57:32.500 So by combining width and height and margin and padding, 00:57:32.500 --> 00:57:35.560 we now have the ability, using CSS, to make sure 00:57:35.560 --> 00:57:38.610 that we're able to layout our page the way we want to lay out the page, 00:57:38.610 --> 00:57:41.320 so that elements have the right amount of spacing from each other 00:57:41.320 --> 00:57:43.480 and are the correct size. 00:57:43.480 --> 00:57:47.410 So now, let's take a look at some other features that CSS is going to give us. 00:57:47.410 --> 00:57:50.350 In addition to just changing where particular elements are, 00:57:50.350 --> 00:57:53.590 like centering text or adding size and margin and padding, 00:57:53.590 --> 00:57:57.250 we can also use CSS to change how elements actually look. 00:57:57.250 --> 00:58:00.250 We've seen it to change the color of text, changing it from one color, 00:58:00.250 --> 00:58:02.740 like black, to another color, like blue. 00:58:02.740 --> 00:58:07.030 But we can also use CSS to be able to change something like the font 00:58:07.030 --> 00:58:09.220 that we use in order to display text. 00:58:09.220 --> 00:58:12.190 Modern web pages don't show everything in the exact same font. 00:58:12.190 --> 00:58:14.590 Usually, some designer is choosing what font 00:58:14.590 --> 00:58:17.770 they want for any particular web page. 00:58:17.770 --> 00:58:19.820 So let's experiment with those possibilities. 00:58:19.820 --> 00:58:24.220 I'll now create a new file that I'll call font.html, 00:58:24.220 --> 00:58:29.450 inside of which will be an HTML page called font. 00:58:29.450 --> 00:58:31.470 And inside the body, I'll again just have a div 00:58:31.470 --> 00:58:34.740 that says Hello World, same as before. 00:58:34.740 --> 00:58:39.720 But now, inside of the style tag here, up in the head section of my web page, 00:58:39.720 --> 00:58:43.740 I would like to add some font information to this div. 00:58:43.740 --> 00:58:47.400 And in particular, there are a number of different font-related CSS properties 00:58:47.400 --> 00:58:51.930 that I can add to control the font of any particular HTML element. 00:58:51.930 --> 00:58:55.110 One thing I can specify is the font family, 00:58:55.110 --> 00:59:00.000 specifying what font would I like to use in order to display this text. 00:59:00.000 --> 00:59:02.630 And maybe I want to display it in Arial, for example, 00:59:02.630 --> 00:59:05.550 which is a common font used on the internet, such 00:59:05.550 --> 00:59:12.390 that now if I open up font.html, I now see in Arial the words Hello World, 00:59:12.390 --> 00:59:15.480 different from the text that I was using before. 00:59:15.480 --> 00:59:18.240 You can also specify multiple different fonts. 00:59:18.240 --> 00:59:20.160 Not all computers support all fonts. 00:59:20.160 --> 00:59:23.790 So I could specify that just in case Arial isn't supported, 00:59:23.790 --> 00:59:27.360 fall back to any sans serif font, any of the fonts that 00:59:27.360 --> 00:59:30.700 don't have the little glyphs at the edge of each of the characters. 00:59:30.700 --> 00:59:33.900 So now, if I refresh the page, because my web browser supports Arial, 00:59:33.900 --> 00:59:35.340 I don't notice anything different. 00:59:35.340 --> 00:59:38.380 But you might imagine if you're using more complex fonts that not all web 00:59:38.380 --> 00:59:41.160 browsers have or support, you might add some backups just 00:59:41.160 --> 00:59:44.970 in case the font you want isn't actually available. 00:59:44.970 --> 00:59:46.980 In addition to a font family, I might also 00:59:46.980 --> 00:59:51.310 specify a font size, how big I want the font to be inside of this div. 00:59:51.310 --> 00:59:54.910 So I can specify that I'd like the font size of this give to be, you know, 00:59:54.910 --> 00:59:58.140 28 pixels, for example, such that now I refresh it. 00:59:58.140 --> 01:00:01.620 And now, this div appears using larger text. 01:00:01.620 --> 01:00:03.840 And I can also, just as like text editors 01:00:03.840 --> 01:00:07.650 let you specify whether you want it to be normal text or bolded text, 01:00:07.650 --> 01:00:11.160 I can specify a font weight for this div and say 01:00:11.160 --> 01:00:14.130 that in addition to being in font Arial in size 28, 01:00:14.130 --> 01:00:18.090 I would also like for the font to be bold, such that now I refresh it, 01:00:18.090 --> 01:00:20.820 and now, the font shows up as bold. 01:00:20.820 --> 01:00:24.390 And using these CSS style sheets, we're able to selectively apply 01:00:24.390 --> 01:00:27.870 the styling to only particular parts of the web page. 01:00:27.870 --> 01:00:33.030 If I have another underneath this div some more text down here, for example, 01:00:33.030 --> 01:00:35.760 that additional text that's outside of the div 01:00:35.760 --> 01:00:38.880 isn't going to be affected by the CSS styling, such 01:00:38.880 --> 01:00:41.520 that now if I refresh this page or some more text 01:00:41.520 --> 01:00:46.440 shows up in that same standard default font provided by my web browser and not 01:00:46.440 --> 01:00:49.500 the custom font that I have specified to apply to only 01:00:49.500 --> 01:00:53.220 this particular part of the HTML page. 01:00:53.220 --> 01:00:57.990 So that now is the ability to add fonts to our page too. 01:00:57.990 --> 01:00:59.790 Another thing that we might want to do is 01:00:59.790 --> 01:01:03.660 to be able to add some sort of border around our HTML elements. 01:01:03.660 --> 01:01:07.770 So maybe I want a line to be able to separate this entire part of the page 01:01:07.770 --> 01:01:09.300 from another part of the page. 01:01:09.300 --> 01:01:12.250 So I could add a border by going to this div and saying, 01:01:12.250 --> 01:01:13.740 let me give this div a border. 01:01:13.740 --> 01:01:19.680 And maybe I want the border to be like a 3 pixel solid black border, 01:01:19.680 --> 01:01:20.610 for instance. 01:01:20.610 --> 01:01:23.370 I can specify how big I want the border to be. 01:01:23.370 --> 01:01:25.950 I can specify whether I want the border to be a solid line 01:01:25.950 --> 01:01:27.630 or a dashed or dotted line. 01:01:27.630 --> 01:01:32.110 And I can specify what color I would like that border to be as well. 01:01:32.110 --> 01:01:34.290 So now, when I refresh this, I now see I have 01:01:34.290 --> 01:01:36.450 a border around this entire section, around 01:01:36.450 --> 01:01:40.170 this entire div, inside of my web page. 01:01:40.170 --> 01:01:43.140 And you can imagine these borders being helpful for styling 01:01:43.140 --> 01:01:45.190 various different parts of my page. 01:01:45.190 --> 01:01:47.230 So, for example, if we go back to that table 01:01:47.230 --> 01:01:50.400 that we were looking at a moment ago when we were dealing with oceans, where 01:01:50.400 --> 01:01:53.400 I had Ocean and Pacific Ocean and Atlantic Ocean, 01:01:53.400 --> 01:01:55.620 this is structured in the format of a table. 01:01:55.620 --> 01:01:57.330 We have rows and columns. 01:01:57.330 --> 01:01:59.220 But it doesn't look great right now. 01:01:59.220 --> 01:02:01.620 I might like to add some styling in order 01:02:01.620 --> 01:02:05.170 to improve the way that this table looks, for example. 01:02:05.170 --> 01:02:07.020 So let's give that a try. 01:02:07.020 --> 01:02:09.750 I'll go ahead and go back into table.html, 01:02:09.750 --> 01:02:12.960 that HTML file I was using before where I had this table. 01:02:12.960 --> 01:02:17.130 And let me now add some style information to this table. 01:02:17.130 --> 01:02:19.230 I might say that for this table I would like 01:02:19.230 --> 01:02:25.340 to give it a border that is maybe a 1 pixel solid black border, 01:02:25.340 --> 01:02:29.720 such that now when I refresh the page, I have a 1 pixel solid black border 01:02:29.720 --> 01:02:31.930 around the entirety of the table. 01:02:31.930 --> 01:02:32.930 All right, that's great. 01:02:32.930 --> 01:02:36.410 But I also really wanted a border in between the rows and the columns 01:02:36.410 --> 01:02:37.100 as well. 01:02:37.100 --> 01:02:39.860 In particular, every table data item, I might 01:02:39.860 --> 01:02:44.420 like to have some additional CSS supplied to those too. 01:02:44.420 --> 01:02:46.880 So I might say for every table data cell-- 01:02:46.880 --> 01:02:49.580 again td stood for table data, and those were 01:02:49.580 --> 01:02:52.130 the individual cells within my table-- 01:02:52.130 --> 01:02:54.290 I might specify that I would like those to also 01:02:54.290 --> 01:02:59.970 have a border that is 1 pixel solid black, such that now I 01:02:59.970 --> 01:03:01.240 refresh the page. 01:03:01.240 --> 01:03:05.280 And now, each of my table data cells also has a border around it. 01:03:05.280 --> 01:03:08.700 Now, this applied to the table data cells in the body of my page, 01:03:08.700 --> 01:03:11.790 but it didn't yet apply to these cells up in the heading. 01:03:11.790 --> 01:03:17.370 And that's because those were th elements, table headers. 01:03:17.370 --> 01:03:19.540 And so here, we have a couple of options. 01:03:19.540 --> 01:03:22.320 I could specify, once more, table headers 01:03:22.320 --> 01:03:26.760 I would like to give a border of 1 pixel solid black. 01:03:26.760 --> 01:03:30.270 But when I do so, you'll see that it does create a border around those table 01:03:30.270 --> 01:03:31.200 headers. 01:03:31.200 --> 01:03:33.630 But again, one thing that should be crossing your mind now 01:03:33.630 --> 01:03:36.780 is that there's a fair amount of redundancy here, some repeated style 01:03:36.780 --> 01:03:39.060 code that shows up in multiple different places. 01:03:39.060 --> 01:03:42.510 Table data cells in the body of my page, I really 01:03:42.510 --> 01:03:46.100 want to be styled in a very similar way to table header cells. 01:03:46.100 --> 01:03:51.150 And so it'd be nice if I could somehow consolidate these two different CSS 01:03:51.150 --> 01:03:55.620 selectors, these ways of me saying, style table data, style table headers. 01:03:55.620 --> 01:03:58.200 I'd like to combine them into one. 01:03:58.200 --> 01:04:00.090 And you can, in fact, do this in CSS. 01:04:00.090 --> 01:04:04.560 There are a number of different CSS selectors, ways of choosing elements. 01:04:04.560 --> 01:04:08.220 And one of them is just called the multiple element selector, 01:04:08.220 --> 01:04:12.450 that if I want to select both table data cells and table headers, 01:04:12.450 --> 01:04:19.230 then I can do so by saying td comma th and delete these three lines 01:04:19.230 --> 01:04:20.700 down there. 01:04:20.700 --> 01:04:22.770 What these three lines are now saying are 01:04:22.770 --> 01:04:26.370 that I would like to style all table data cells and table 01:04:26.370 --> 01:04:27.820 headers in the same way. 01:04:27.820 --> 01:04:30.460 And I could even combine table if I wanted to for good measure. 01:04:30.460 --> 01:04:35.020 But I'd like to give all of them a border of 1 pixel solid black, such 01:04:35.020 --> 01:04:39.460 that now I refresh it and now I see that they all have this border around them. 01:04:39.460 --> 01:04:43.080 Now, most tables you see on the internet don't have both a table or a border 01:04:43.080 --> 01:04:45.780 around everything on the table and also a border 01:04:45.780 --> 01:04:47.820 around each of the individual cells. 01:04:47.820 --> 01:04:50.740 Usually, those are collapsed just into a single line. 01:04:50.740 --> 01:04:54.280 And it turns out that CSS has an easy way for you to do this as well. 01:04:54.280 --> 01:04:59.730 I can add a CSS property to the table called border collapse and just say, 01:04:59.730 --> 01:05:03.180 I would like to collapse all of the borders in the table. 01:05:03.180 --> 01:05:06.480 Just going to show you there are many, many different CSS properties, far more 01:05:06.480 --> 01:05:07.920 than we'll be looking at today. 01:05:07.920 --> 01:05:10.290 But they're easy things to reference, that you can easily 01:05:10.290 --> 01:05:12.580 look up how to collapse borders in a table 01:05:12.580 --> 01:05:16.200 and then find a CSS property like this that you can then use and apply 01:05:16.200 --> 01:05:17.980 to your web page. 01:05:17.980 --> 01:05:19.330 So now I refresh that. 01:05:19.330 --> 01:05:23.040 And now I see that I have a border, just a single border, around all 01:05:23.040 --> 01:05:26.880 of the cells in this particular page. 01:05:26.880 --> 01:05:30.040 Next, what I might like to do, though, is like add some space around here. 01:05:30.040 --> 01:05:34.780 Like it seems like this text is very tight against the border of this table. 01:05:34.780 --> 01:05:37.560 So in order to do so, I want to add some spacing. 01:05:37.560 --> 01:05:40.080 And recall again, do I want margin or padding? 01:05:40.080 --> 01:05:45.360 Margin is spacing around side of the border of a particular HTML element, 01:05:45.360 --> 01:05:47.920 whereas padding is inside of the border. 01:05:47.920 --> 01:05:50.220 So if I want some space inside of the border, 01:05:50.220 --> 01:05:53.370 just to space out the text from the border itself, then what I want 01:05:53.370 --> 01:05:56.730 is padding inside of all of my table cells. 01:05:56.730 --> 01:06:00.210 So I can say let me add 5 pixels worth of padding 01:06:00.210 --> 01:06:04.260 inside of all of my table data cells and table header cells. 01:06:04.260 --> 01:06:05.530 Refresh the page. 01:06:05.530 --> 01:06:08.640 And now, here's what the resulting table looks like. 01:06:08.640 --> 01:06:11.430 Just by adding a little bit of CSS specifying what 01:06:11.430 --> 01:06:13.650 border I want around the edge of the page, 01:06:13.650 --> 01:06:16.950 specifying a little bit of padding inside of each of the cells, 01:06:16.950 --> 01:06:20.590 my table now looks a whole lot nicer than it did just a few lines of code 01:06:20.590 --> 01:06:24.930 ago when I just had the HTML structure of the page and not the CSS 01:06:24.930 --> 01:06:29.910 to describe how I actually wanted that page to be styled. 01:06:29.910 --> 01:06:31.980 And notice again that in doing so, we were 01:06:31.980 --> 01:06:35.190 able to use one of these CSS selectors. 01:06:35.190 --> 01:06:39.330 I was able to say that I wanted to use the multiple element selector, which 01:06:39.330 --> 01:06:43.590 is just this comma here, to specify that I would like to apply this styling, 01:06:43.590 --> 01:06:48.480 not just to td's but also to th's as well. 01:06:48.480 --> 01:06:52.080 We'll take a look at some additional examples of CSS selectors 01:06:52.080 --> 01:06:54.090 in just a moment. 01:06:54.090 --> 01:06:57.810 But next, let's turn our attention to some more tricky instances 01:06:57.810 --> 01:07:02.530 where we might want to apply styling to multiple elements at the same time. 01:07:02.530 --> 01:07:07.380 Let's imagine-- and let's go back to style.html, where we had some style 01:07:07.380 --> 01:07:10.390 code, where I had one heading. 01:07:10.390 --> 01:07:13.210 I'll call this Heading 1. 01:07:13.210 --> 01:07:17.800 And let's get myself to other headings, Heading 2 and Heading 3. 01:07:17.800 --> 01:07:22.510 All of these now are h1 elements that are going to show up the same way, 01:07:22.510 --> 01:07:27.460 such that now if I style and say, I would like all h1s to show up with 01:07:27.460 --> 01:07:32.890 a color of blue, then when I open this page where I have three h1 tags, 01:07:32.890 --> 01:07:38.260 each of which has a color of blue, when I open up style.html, 01:07:38.260 --> 01:07:40.560 what I'm going to see is something like this-- 01:07:40.560 --> 01:07:44.200 three headings, each of which happens to have a color of blue. 01:07:44.200 --> 01:07:48.430 But what would happen now if I wanted to style only the first heading. 01:07:48.430 --> 01:07:50.270 I want Heading 1 to be blue. 01:07:50.270 --> 01:07:54.520 But I don't want to style Heading 2 and Heading 3. 01:07:54.520 --> 01:07:56.180 How do I do that? 01:07:56.180 --> 01:07:59.770 Well, one thing we could do is go back to the inline styling 01:07:59.770 --> 01:08:05.440 we did a moment ago, where inside of h1, I said style color is blue. 01:08:05.440 --> 01:08:08.200 And that would say for just this very first heading, 01:08:08.200 --> 01:08:12.280 I would like that to be blue, but not the other elements at all. 01:08:12.280 --> 01:08:14.980 But this again we decided was not the best design. 01:08:14.980 --> 01:08:20.140 This inline styling, commingling of HTML and CSS just gets a little bit messy. 01:08:20.140 --> 01:08:23.080 And it would be nice to be able to factor all of our style code 01:08:23.080 --> 01:08:26.110 to a separate part of the page altogether. 01:08:26.110 --> 01:08:27.380 So how do we do this? 01:08:27.380 --> 01:08:32.790 Well, we need some way to uniquely reference this particular HTML element. 01:08:32.790 --> 01:08:37.350 And in order to do so, we can given HTML element an ID. 01:08:37.350 --> 01:08:42.100 An ID is just some unique name we give to an HTML element, 01:08:42.100 --> 01:08:45.060 so that we can reference it more easily later on. 01:08:45.060 --> 01:08:47.600 Let me just go ahead and give this an ID of Foo. 01:08:47.600 --> 01:08:48.850 It could be any idea you want. 01:08:48.850 --> 01:08:51.040 But Foo is just a generic name here. 01:08:51.040 --> 01:08:55.210 And now, we've given this heading a name such that in other parts of our page 01:08:55.210 --> 01:09:00.380 or in other code, we can reference and find this particular HTML element. 01:09:00.380 --> 01:09:03.640 And in particular now, in the style section of my web page, 01:09:03.640 --> 01:09:07.960 instead of styling all h1 elements, I only want to style 01:09:07.960 --> 01:09:10.630 the element that has an ID of Foo. 01:09:10.630 --> 01:09:12.250 IDs are by definition unique. 01:09:12.250 --> 01:09:15.810 There can only be one element in this page that has an ID of Foo, 01:09:15.810 --> 01:09:18.160 otherwise it's not valid HTML. 01:09:18.160 --> 01:09:20.810 And so in order to do so, we're going to use #Foo. 01:09:23.430 --> 01:09:27.490 The hash mark symbol is just CSS's way of selecting just something 01:09:27.490 --> 01:09:29.220 with a particular ID. 01:09:29.220 --> 01:09:33.460 So instead of just h1 for selecting all of the h1 tags, 01:09:33.460 --> 01:09:35.620 if I want to select something by its ID, I 01:09:35.620 --> 01:09:41.260 say #Foo to say only style the element that has an ID of Foo 01:09:41.260 --> 01:09:45.520 and give it a color of blue, for example. 01:09:45.520 --> 01:09:48.680 So this style code now will find something with a particular ID 01:09:48.680 --> 01:09:51.960 and give it a style to correspond with it, 01:09:51.960 --> 01:09:56.490 such that now if I reload this page, only Heading 1 is styled. 01:09:56.490 --> 01:09:58.430 Heading 2 and Heading 3 are not. 01:09:58.430 --> 01:10:02.460 I've been able to name Heading 1, give it a name of Foo, an ID of Foo, 01:10:02.460 --> 01:10:09.370 and then in my style code, just style that particular part of my HTML page. 01:10:09.370 --> 01:10:13.630 Of course, what if I wanted to style multiple, but not all of the headings? 01:10:13.630 --> 01:10:17.470 Like maybe I want to style both Heading 1 and Heading 2. 01:10:17.470 --> 01:10:19.010 Now, I could use a second ID. 01:10:19.010 --> 01:10:21.640 Maybe give us an ID of Bar, for example. 01:10:21.640 --> 01:10:26.170 And then style both the element with ID Foo and the element with ID Bar. 01:10:26.170 --> 01:10:29.290 But now we're starting to add IDs unnecessarily. 01:10:29.290 --> 01:10:30.910 I have too many different names. 01:10:30.910 --> 01:10:32.620 Things can start to get messy, especially 01:10:32.620 --> 01:10:34.990 as my web pages start to get bigger. 01:10:34.990 --> 01:10:40.420 So while IDs are a way of giving a name to an HTML element that is unique, 01:10:40.420 --> 01:10:44.590 sometimes I want to give a name to an HTML element that is not unique, 01:10:44.590 --> 01:10:48.430 some name that can apply to multiple different HTML elements. 01:10:48.430 --> 01:10:51.310 And when we do that, we call that a class. 01:10:51.310 --> 01:10:54.850 An ID is a way of giving a unique name to an HTML element, 01:10:54.850 --> 01:10:58.120 while a class is a way of giving a name to an HTML element that 01:10:58.120 --> 01:10:59.020 might not be unique. 01:10:59.020 --> 01:11:04.780 It might apply it to zero or one or two or more different HTML elements. 01:11:04.780 --> 01:11:06.520 So here's what that might look like. 01:11:06.520 --> 01:11:10.060 Instead of giving each of these h1s an ID that's different, 01:11:10.060 --> 01:11:11.800 I can give each one a class. 01:11:11.800 --> 01:11:14.740 We'll give this a class of Baz, again, just another arbitrary name 01:11:14.740 --> 01:11:16.280 that we've chosen. 01:11:16.280 --> 01:11:20.210 And I'll give this each one a class of Baz as well. 01:11:20.210 --> 01:11:24.970 They both belong to the same class called Baz, in this case. 01:11:24.970 --> 01:11:28.930 And now, inside of my style code, I would like to say just the style 01:11:28.930 --> 01:11:31.980 the elements that are of class Baz. 01:11:31.980 --> 01:11:34.070 And just as we have a special symbol, the hashtag, 01:11:34.070 --> 01:11:37.790 for styling definitely something with a particular ID, 01:11:37.790 --> 01:11:41.690 to style everything with a particular class, I can use a dot. 01:11:41.690 --> 01:11:46.330 So dot Baz, in this case, is going to style only the elements that 01:11:46.330 --> 01:11:49.040 have a class of Baz. 01:11:49.040 --> 01:11:52.870 So here, I can now say, take all of the elements with a class of Baz 01:11:52.870 --> 01:11:57.900 and go ahead and give those a color of blue. 01:11:57.900 --> 01:12:01.550 So now, I have two h1s that belong to class Baz. 01:12:01.550 --> 01:12:03.330 The other h1 does not. 01:12:03.330 --> 01:12:06.650 And I've styled only the things that are of class Baz, 01:12:06.650 --> 01:12:10.250 such that now when I go back to the page and refresh the page, my first two 01:12:10.250 --> 01:12:12.730 headings, those do get styled as blue. 01:12:12.730 --> 01:12:14.570 But the third heading does not, because I've 01:12:14.570 --> 01:12:17.270 applied a class to these two elements that does not get 01:12:17.270 --> 01:12:20.220 applied to this third element there. 01:12:20.220 --> 01:12:22.190 So oftentimes, it can be very helpful if you 01:12:22.190 --> 01:12:24.200 have to start to design larger web pages where 01:12:24.200 --> 01:12:26.510 you have multiple different elements, some of which 01:12:26.510 --> 01:12:30.080 might be styled in some ways and other elements that might be styled similarly 01:12:30.080 --> 01:12:34.790 to one another, you can add IDs and classes to your HTML elements 01:12:34.790 --> 01:12:37.130 just to clean up the way that you write your CSS, 01:12:37.130 --> 01:12:40.100 to be able to very specifically pinpoint one element that you 01:12:40.100 --> 01:12:45.260 want to apply a style to or to apply styling to the entire class of elements 01:12:45.260 --> 01:12:46.850 as well. 01:12:46.850 --> 01:12:49.310 Now, one tricky thing you might imagine now 01:12:49.310 --> 01:12:55.340 is that now we have multiple ways of referencing the exact same element. 01:12:55.340 --> 01:12:57.470 So, for example, if you imagine that I just 01:12:57.470 --> 01:13:02.420 had a single h1, which had an ID of Foo, for example, that I've 01:13:02.420 --> 01:13:07.690 named Foo, what would happen if, for instance, I said all of the h1s I 01:13:07.690 --> 01:13:12.410 will like those to be colored red, and all of the elements with an ID of Foo, 01:13:12.410 --> 01:13:17.210 or the only element with an ID of Foo, I would like that to be colored blue? 01:13:17.210 --> 01:13:18.170 What might happen then? 01:13:18.170 --> 01:13:21.020 These would seem to be conflicting, where now suddenly we 01:13:21.020 --> 01:13:27.110 have an h1 style tag that is saying I should style h1s in this way, 01:13:27.110 --> 01:13:29.850 but I should style element Foo in another way. 01:13:29.850 --> 01:13:35.270 So what happens if I have an h1 whose ID is Foo, how do I choose to style that? 01:13:35.270 --> 01:13:37.340 And in order to deal with that we have to start 01:13:37.340 --> 01:13:41.180 to deal with the CSS problem of specificity, of what happens when 01:13:41.180 --> 01:13:47.000 I have multiple different CSS selectors that could apply to the exact same HTML 01:13:47.000 --> 01:13:47.990 element? 01:13:47.990 --> 01:13:53.660 And this often happens when we start to add IDs and classes to our elements 01:13:53.660 --> 01:13:54.900 as well. 01:13:54.900 --> 01:13:58.870 So when we deal with specificity, specificity goes in a particular order. 01:13:58.870 --> 01:14:00.800 There's an order of precedence that we can 01:14:00.800 --> 01:14:03.920 follow for determining what style should ultimately 01:14:03.920 --> 01:14:06.750 be applied to any particular element. 01:14:06.750 --> 01:14:08.600 The first, most powerful-- 01:14:08.600 --> 01:14:12.800 most specific way of referencing an element is inline styling, literally 01:14:12.800 --> 01:14:16.400 adding a style equals attribute to our HTML elements 01:14:16.400 --> 01:14:18.200 in the way we did way at the beginning when 01:14:18.200 --> 01:14:20.510 we were first taking a look at CSS. 01:14:20.510 --> 01:14:24.200 If we associate inline styling with an HTML element, that's 01:14:24.200 --> 01:14:27.830 going to take precedence over any styling that's inside the style 01:14:27.830 --> 01:14:32.150 section of our head of the web page or inside of a separate dot CSS file, 01:14:32.150 --> 01:14:36.530 because the reasoning goes, if you are literally putting the style 01:14:36.530 --> 01:14:39.800 code attached to the element itself, then we probably 01:14:39.800 --> 01:14:42.350 want to apply it to that element. 01:14:42.350 --> 01:14:47.720 After that, specificity goes in order of how precisely we 01:14:47.720 --> 01:14:49.190 are identifying an element. 01:14:49.190 --> 01:14:51.680 An ID is a unique way to identify an element. 01:14:51.680 --> 01:14:54.480 There is only one element with that particular ID. 01:14:54.480 --> 01:14:57.560 So if I've added style to a particular ID, 01:14:57.560 --> 01:15:01.700 that is going to be pretty highly valued in terms of how specific it is. 01:15:01.700 --> 01:15:03.120 Next, we look at classes. 01:15:03.120 --> 01:15:05.750 So if there's no ID selector, we look for, 01:15:05.750 --> 01:15:08.150 did we reference the element by its class? 01:15:08.150 --> 01:15:11.310 And if so, then that takes next precedence. 01:15:11.310 --> 01:15:15.470 And otherwise, then we fall back to what type of HTML element it is. 01:15:15.470 --> 01:15:16.550 Is it an h1? 01:15:16.550 --> 01:15:17.900 Is it an ordered list? 01:15:17.900 --> 01:15:18.980 Is it a table? 01:15:18.980 --> 01:15:21.270 So in short, the type is the least specific. 01:15:21.270 --> 01:15:23.090 Class is slightly more specific. 01:15:23.090 --> 01:15:24.510 ID is more than that. 01:15:24.510 --> 01:15:29.330 And the most specificity we can provide is by literally putting the CSS inline 01:15:29.330 --> 01:15:31.890 with the HTML element itself. 01:15:31.890 --> 01:15:33.930 So let's take a look at an example of this. 01:15:33.930 --> 01:15:37.550 Let's look at this code, for example, where, for instance, I 01:15:37.550 --> 01:15:42.380 have a div, whose ID is Foo, inside of which I'm just saying the word hello. 01:15:42.380 --> 01:15:46.010 And the CSS code that I've included here is I've said for all div, 01:15:46.010 --> 01:15:48.320 I would like to give those a color of blue. 01:15:48.320 --> 01:15:50.720 Obviously, in that case, there's nothing conflicting. 01:15:50.720 --> 01:15:53.270 What we're going to see is we're going to see the word Hello. 01:15:53.270 --> 01:15:56.570 And we're going to see the word Hello in blue. 01:15:56.570 --> 01:16:01.670 But what happens now if we add anything with ID Foo should be colored red? 01:16:01.670 --> 01:16:06.410 Well, because ID has higher specificity than just an individual tag, 01:16:06.410 --> 01:16:09.710 well, then next, what we're going to say is that this Hello is going to show up 01:16:09.710 --> 01:16:10.580 is red. 01:16:10.580 --> 01:16:12.380 The ID is more specific. 01:16:12.380 --> 01:16:15.920 And so this element is going to show up red instead. 01:16:15.920 --> 01:16:17.840 And it doesn't matter what order these are in. 01:16:17.840 --> 01:16:19.740 It's not that the later one takes precedence. 01:16:19.740 --> 01:16:24.410 If I were to flip these around, where ID of Foo, color red, div color blue 01:16:24.410 --> 01:16:28.340 is in that order, it's still going to show up as red, because this ID 01:16:28.340 --> 01:16:35.000 selector is more specific than just the name div, which is the name of the HTML 01:16:35.000 --> 01:16:37.380 element that happens to be there. 01:16:37.380 --> 01:16:40.220 And so as you start to develop more sophisticated style sheets, 01:16:40.220 --> 01:16:42.110 you might find that some of your CSS code 01:16:42.110 --> 01:16:43.670 is going to conflict with each other. 01:16:43.670 --> 01:16:46.540 And that's where it's important to bear in mind how these specificity 01:16:46.540 --> 01:16:49.940 rules work to know as you add style to your elements 01:16:49.940 --> 01:16:54.000 how are they actually going to end up showing up. 01:16:54.000 --> 01:16:55.830 Now, we've seen a couple of CSS selectors 01:16:55.830 --> 01:16:59.370 now in terms of selecting a single element, selecting an ID, 01:16:59.370 --> 01:17:02.670 selecting a class, selecting multiple elements as well. 01:17:02.670 --> 01:17:05.220 It turns out, there are a number of other CSS selectors 01:17:05.220 --> 01:17:06.510 that we can use too. 01:17:06.510 --> 01:17:09.660 So we saw, for example, the multiple element selector, 01:17:09.660 --> 01:17:14.920 like td comma th for selecting table data but also table headers. 01:17:14.920 --> 01:17:16.590 But there's a number of other selectors. 01:17:16.590 --> 01:17:18.480 Here is just a sampling of ones. 01:17:18.480 --> 01:17:21.210 You can specify like descendants or children. 01:17:21.210 --> 01:17:24.990 So if I only want to style divs that are inside of tables, 01:17:24.990 --> 01:17:29.160 or I only want the style lists that are inside of certain classes, 01:17:29.160 --> 01:17:31.410 I can use these defendant and child selectors 01:17:31.410 --> 01:17:34.200 to add styling and those particular ways. 01:17:34.200 --> 01:17:38.090 And there are a number of other CSS selectors we can add as well. 01:17:38.090 --> 01:17:40.140 And we'll go ahead and explore a couple of these, 01:17:40.140 --> 01:17:45.280 just to give you a sample of how some of the CSS selectors can actually work. 01:17:45.280 --> 01:17:49.260 And we'll start by taking a look at the descendent selector, which 01:17:49.260 --> 01:17:52.440 is used to select all of the elements that are descendants 01:17:52.440 --> 01:17:55.360 of some other element, for example. 01:17:55.360 --> 01:18:02.430 So let's go ahead and create a new file, that I'll call descendant.html, 01:18:02.430 --> 01:18:05.580 that again, we'll start with the same code. 01:18:05.580 --> 01:18:08.940 And inside the body of this page, I want an ordered list 01:18:08.940 --> 01:18:14.370 that maybe has a list item 1 and maybe a list item 2. 01:18:14.370 --> 01:18:19.920 And it turns out with lists in HTML, you can nest lists inside of other lists. 01:18:19.920 --> 01:18:23.010 Maybe you've seen bullet points where there's like nested bullets inside 01:18:23.010 --> 01:18:24.180 of other bullet points. 01:18:24.180 --> 01:18:25.290 I can do that here. 01:18:25.290 --> 01:18:31.350 I can add an unordered list and create a sublist, like sublist item 1 01:18:31.350 --> 01:18:34.470 and sublist item 2. 01:18:34.470 --> 01:18:38.600 And maybe down here, here's another list item, 01:18:38.600 --> 01:18:40.650 such as that now I have a couple of items, 01:18:40.650 --> 01:18:44.400 but some that are inside of an unordered sub list. 01:18:44.400 --> 01:18:47.580 Let's go ahead and open up descendent.html 01:18:47.580 --> 01:18:49.600 and see what that looks like. 01:18:49.600 --> 01:18:50.610 So here's what we have. 01:18:50.610 --> 01:18:53.700 We have a list item 1, list item 2, another list item 01:18:53.700 --> 01:18:58.700 that is probably actually list item 3. 01:18:58.700 --> 01:18:59.720 So we have three items. 01:18:59.720 --> 01:19:03.530 But inside of list item 2, I have an unordered list. 01:19:03.530 --> 01:19:08.120 Let's imagine, for example, that I wanted to only style 01:19:08.120 --> 01:19:11.050 these sublist items as a particular color. 01:19:11.050 --> 01:19:14.100 That maybe I want those to be blue, for example. 01:19:14.100 --> 01:19:16.910 If in the style section of my web page, I 01:19:16.910 --> 01:19:22.640 say that I would like for all list items to be styled blue, well then-- 01:19:22.640 --> 01:19:25.160 not styled, colored blue rather-- 01:19:25.160 --> 01:19:27.110 then what I'm going to see when I refresh 01:19:27.110 --> 01:19:30.860 the page is that all of the items are going to be blue 01:19:30.860 --> 01:19:33.860 instead of just the two sublist items. 01:19:33.860 --> 01:19:38.510 But I could instead say that, you know what, I only want list items that 01:19:38.510 --> 01:19:41.000 are children of unordered lists. 01:19:41.000 --> 01:19:43.460 And I can do direct children using this greater than symbol 01:19:43.460 --> 01:19:48.690 to say that only if there is a ul that immediately contains an li within it, 01:19:48.690 --> 01:19:51.810 then I would like for that to be colored blue. 01:19:51.810 --> 01:19:56.000 And now, if I refresh that, now you'll see that the ordered items, list item 01:19:56.000 --> 01:20:00.140 1, 2, 3, those do not get colored, but only the list items 01:20:00.140 --> 01:20:02.090 that are inside of the unordered list that 01:20:02.090 --> 01:20:04.970 are directly children of that unordered list 01:20:04.970 --> 01:20:07.910 actually get the CSS styling applied. 01:20:07.910 --> 01:20:12.280 This greater than symbol here is specifying immediate children. 01:20:12.280 --> 01:20:16.010 I could get rid of it, ul li, like this, and this would also work. 01:20:16.010 --> 01:20:18.250 You still see sublist item 1 and 2. 01:20:18.250 --> 01:20:21.800 But this is a more general selector called the descendent selector 01:20:21.800 --> 01:20:23.690 that selects all descendant elements. 01:20:23.690 --> 01:20:25.490 So they might not be the children elements. 01:20:25.490 --> 01:20:27.830 They might be grandchildren element, so to speak, 01:20:27.830 --> 01:20:30.590 if those children elements have other children that 01:20:30.590 --> 01:20:31.890 are attached to them as well. 01:20:31.890 --> 01:20:33.770 Again, for all of this, it's helpful to begin 01:20:33.770 --> 01:20:37.670 to think about things in terms of that Document Object Model, that DOM 01:20:37.670 --> 01:20:42.440 structure, that tree that represented how all of our various different HTML 01:20:42.440 --> 01:20:46.210 elements are related to one another. 01:20:46.210 --> 01:20:49.130 So next up, we can begin to take a look at some of the other selectors 01:20:49.130 --> 01:20:50.610 that we have access to. 01:20:50.610 --> 01:20:52.850 So one of the selectors might be something 01:20:52.850 --> 01:20:58.760 like modifying only on a specific attribute of a particular HTML element. 01:20:58.760 --> 01:21:01.680 So we can use the attribute selector for that. 01:21:01.680 --> 01:21:06.720 I'll create a new file called attribute.html, where here, 01:21:06.720 --> 01:21:11.820 let's go ahead and create a unordered list. 01:21:11.820 --> 01:21:13.820 That's going to have a number of different links 01:21:13.820 --> 01:21:15.440 to various different websites. 01:21:15.440 --> 01:21:19.370 So here's a list item that is going to be a link to Google. 01:21:19.370 --> 01:21:23.360 So I'll link to google.com and say, Google. 01:21:23.360 --> 01:21:27.200 And I'll go ahead and add a link to facebook.com. 01:21:27.200 --> 01:21:29.240 Call that Facebook. 01:21:29.240 --> 01:21:35.300 And I'll go ahead and add a link to amazon.com and call that Amazon. 01:21:35.300 --> 01:21:39.390 And let's imagine for a moment that I only wanted to style the Facebook link, 01:21:39.390 --> 01:21:41.480 like I want to really highlight the Facebook link, 01:21:41.480 --> 01:21:44.070 tell people to click on that one as by coloring it 01:21:44.070 --> 01:21:46.370 in entirely different color. 01:21:46.370 --> 01:21:49.520 Well, to style things normally, I would say something 01:21:49.520 --> 01:21:53.770 like links should be colored, you know, blue, for example. 01:21:53.770 --> 01:21:56.480 They're colored blue by default, but I could be explicit about it 01:21:56.480 --> 01:21:58.180 and say, links should be color blue like, 01:21:58.180 --> 01:22:02.130 such that now when I open up attribute.html 01:22:02.130 --> 01:22:05.090 all the links are colored blue. 01:22:05.090 --> 01:22:07.820 But I could also say, I would like links that 01:22:07.820 --> 01:22:13.370 have an href attribute of facebook.com, I would like 01:22:13.370 --> 01:22:18.230 those links to be colored red instead. 01:22:18.230 --> 01:22:20.300 So this square bracket notation I can use 01:22:20.300 --> 01:22:23.870 to specify a particular attribute of an HTML element. 01:22:23.870 --> 01:22:27.760 Only anchor tags, a tags, who's href is equal to facebook.com, 01:22:27.760 --> 01:22:31.170 those should be the only ones colored red. 01:22:31.170 --> 01:22:33.890 So now, when I refresh this, I now see that Facebook 01:22:33.890 --> 01:22:37.610 is a link that is now colored red, instead of colored blue, because I've 01:22:37.610 --> 01:22:39.980 been very specific about picking an attribute 01:22:39.980 --> 01:22:45.690 that I would like to use in order to reference that particular HTML element. 01:22:45.690 --> 01:22:49.730 And we can use CSS selectors in more powerful ways too, maybe not just 01:22:49.730 --> 01:22:52.610 to style a particular element always, but to style 01:22:52.610 --> 01:22:55.820 an element only under certain conditions or only when 01:22:55.820 --> 01:22:58.250 an element is in a particular state. 01:22:58.250 --> 01:22:59.960 And this is very often done for something 01:22:59.960 --> 01:23:04.100 like when you hover over something, when you hover over a button and something 01:23:04.100 --> 01:23:07.590 pops out, or you hover over something and it changes color slightly. 01:23:07.590 --> 01:23:12.290 We can begin to do this by adding what we call a pseudo class to a CSS 01:23:12.290 --> 01:23:13.160 selector. 01:23:13.160 --> 01:23:15.170 So let's take a look at an example of that 01:23:15.170 --> 01:23:19.610 to see how we can modify an element when a user hovers their cursor 01:23:19.610 --> 01:23:21.890 over that element, for example. 01:23:21.890 --> 01:23:27.380 So I'll go ahead and open up a new file, hover.html, where here, I'll go ahead 01:23:27.380 --> 01:23:31.370 and inside the body of the page just give myself a button. 01:23:31.370 --> 01:23:34.910 This button is going to say, Click Me. 01:23:34.910 --> 01:23:36.900 And let's add some style to the button. 01:23:36.900 --> 01:23:39.330 By default, buttons show up as fairly simple buttons 01:23:39.330 --> 01:23:40.910 that just look something like this. 01:23:40.910 --> 01:23:44.210 I might like to add a little bit more to this button and say, you know what, 01:23:44.210 --> 01:23:49.010 let's add some style to the button, and give it a width of 200 pixels, 01:23:49.010 --> 01:23:53.960 a height of 50 pixels, a font size of 24 pixels, 01:23:53.960 --> 01:23:58.070 and maybe a background color of green, for example. 01:23:58.070 --> 01:24:01.940 So I've specified some size information, how big I'd like the font to be, 01:24:01.940 --> 01:24:05.270 and also a background color for the button, such that now here's 01:24:05.270 --> 01:24:06.440 what that button looks like. 01:24:06.440 --> 01:24:07.600 Shrink it down a little bit. 01:24:07.600 --> 01:24:09.290 It says, Click Me. 01:24:09.290 --> 01:24:13.250 But many buttons, especially nowadays, they give you a little bit of feedback. 01:24:13.250 --> 01:24:16.340 You hover over them, and they change their color slightly. 01:24:16.340 --> 01:24:17.520 How do they do that? 01:24:17.520 --> 01:24:20.720 Well, often it's using a CSS pseudo class, 01:24:20.720 --> 01:24:24.710 where I can say button colon hover, meaning 01:24:24.710 --> 01:24:28.280 when I am hovering over a button, then I'd 01:24:28.280 --> 01:24:32.190 like you to change the background color to orange, 01:24:32.190 --> 01:24:34.620 for example, some other color. 01:24:34.620 --> 01:24:38.070 So now, I specified that by default normally for a button, 01:24:38.070 --> 01:24:40.440 your background color should be green, but when 01:24:40.440 --> 01:24:42.720 the button is being hovered over instead, 01:24:42.720 --> 01:24:45.480 now change the background color to orange, 01:24:45.480 --> 01:24:48.480 such that now when I open up this page and go to Click Me, 01:24:48.480 --> 01:24:52.170 if I hover over the button, the color of the button changes. 01:24:52.170 --> 01:24:54.510 Normally green changes to orange. 01:24:54.510 --> 01:24:59.230 And so that is a very powerful feature that we have access to as well. 01:24:59.230 --> 01:25:02.310 All right, so now we've seen how we can use various different CSS 01:25:02.310 --> 01:25:07.020 selectors to very precisely define how we want our web pages to be styled. 01:25:07.020 --> 01:25:09.840 But one other thing we can use CSS for that's quite powerful 01:25:09.840 --> 01:25:11.700 is responsive design. 01:25:11.700 --> 01:25:14.130 And responsive design is all about making sure 01:25:14.130 --> 01:25:17.700 that our web pages look good, no matter how you're looking at the web page. 01:25:17.700 --> 01:25:20.810 Nowadays, people aren't always looking at web pages on their computers. 01:25:20.810 --> 01:25:23.940 But they're looking at web pages on their mobile phones or on their tablets 01:25:23.940 --> 01:25:24.790 as well. 01:25:24.790 --> 01:25:27.990 And it's important as we begin to design web pages that we design our web 01:25:27.990 --> 01:25:29.970 pages in a responsive way. 01:25:29.970 --> 01:25:31.770 So we'll look at a number of different ways 01:25:31.770 --> 01:25:35.010 we can implement responsive design in our web pages, 01:25:35.010 --> 01:25:38.220 starting with the discussion of the viewport. 01:25:38.220 --> 01:25:42.630 And what the viewport is is the viewport is the visual part of the screen 01:25:42.630 --> 01:25:44.540 that the user can actually see. 01:25:44.540 --> 01:25:47.760 So the viewport is this entire area of the web page 01:25:47.760 --> 01:25:50.160 that displays content to the user. 01:25:50.160 --> 01:25:53.640 So one question you might ask is, what's going to happen when you take this page 01:25:53.640 --> 01:25:56.910 and translate it onto a mobile screen? 01:25:56.910 --> 01:25:59.760 Well, one thing that many mobile devices do by default 01:25:59.760 --> 01:26:04.410 is treat their viewport as though it is the same width as a computer screen. 01:26:04.410 --> 01:26:08.070 Because not all web pages are optimized from all device mobile devices, 01:26:08.070 --> 01:26:10.950 you want to make sure that on a mobile device you can see everything. 01:26:10.950 --> 01:26:14.070 And so many phones will take a web page like this 01:26:14.070 --> 01:26:17.940 and just shrink it down to fit onto a mobile screen that 01:26:17.940 --> 01:26:19.800 looks a little something like that. 01:26:19.800 --> 01:26:22.800 Now, of course, that's probably not really what we want it to look like. 01:26:22.800 --> 01:26:26.490 Ideally, we want our page to adapt to different sized screens. 01:26:26.490 --> 01:26:28.890 Maybe we want the heading and the image and the text, 01:26:28.890 --> 01:26:33.060 if that's what these are, to grow a little bit to fill that entire screen. 01:26:33.060 --> 01:26:37.380 And so one simple thing we can do is just to add a little line of code 01:26:37.380 --> 01:26:42.540 to our HTML inside the head section of our page that controls the viewport. 01:26:42.540 --> 01:26:47.460 This line of code here is providing some metadata to our HTML page and saying, 01:26:47.460 --> 01:26:49.980 I would like you to change the viewport to be 01:26:49.980 --> 01:26:53.070 specifically the width of the device. 01:26:53.070 --> 01:26:55.620 By default, many phones will use a viewport that's actually 01:26:55.620 --> 01:26:57.610 wider than the width of the device, treat 01:26:57.610 --> 01:26:59.700 it as if they're loading a page in a computer, 01:26:59.700 --> 01:27:02.820 and then shrinking it down to the size of a mobile device. 01:27:02.820 --> 01:27:04.890 If you and your web page specify, though, 01:27:04.890 --> 01:27:07.800 that you want the viewport to be just the device width, 01:27:07.800 --> 01:27:12.850 oftentimes a page is going to look a whole lot better on a mobile device. 01:27:12.850 --> 01:27:14.850 But in addition to just adding a line like this, 01:27:14.850 --> 01:27:16.680 there are other actual changes we can make 01:27:16.680 --> 01:27:20.190 to our page to make it look a little better on different screens. 01:27:20.190 --> 01:27:22.860 And one of those has to do with media queries. 01:27:22.860 --> 01:27:25.230 And media queries are all about controlling 01:27:25.230 --> 01:27:30.060 how our page is going to look depending on how we render that particular page, 01:27:30.060 --> 01:27:32.820 or what size screen we're rendering that page on. 01:27:32.820 --> 01:27:34.950 So let's take a look at an example of how 01:27:34.950 --> 01:27:38.010 we might go about using media queries in order 01:27:38.010 --> 01:27:43.530 to control what a page actually looks like depending on what type of page 01:27:43.530 --> 01:27:46.580 or what type of browser we're using to view it. 01:27:46.580 --> 01:27:50.340 So I'll go ahead and open a new file that I'll call responsive.html, 01:27:50.340 --> 01:27:53.580 because we're going to try and build a responsive web page now. 01:27:53.580 --> 01:27:56.790 And now, I'll go ahead and inside the body of my page 01:27:56.790 --> 01:28:02.650 just include a big heading that says Welcome to My Web Page, for example. 01:28:02.650 --> 01:28:06.330 And just to demonstrate what you can do now with responsive design 01:28:06.330 --> 01:28:10.530 is I could say something like, let me add a style tag here, 01:28:10.530 --> 01:28:15.270 where I want to say that if the size of the screen is a certain width, 01:28:15.270 --> 01:28:17.430 then I want to style the page in one way. 01:28:17.430 --> 01:28:19.930 And if the size of the page is a different width, 01:28:19.930 --> 01:28:22.230 then I might want to style the page in a different way. 01:28:22.230 --> 01:28:23.880 You might imagine that as you shrink the screen 01:28:23.880 --> 01:28:25.580 you want to move elements around in order 01:28:25.580 --> 01:28:28.500 to rearrange them to make the page just look a little bit nicer 01:28:28.500 --> 01:28:29.760 on a mobile screen. 01:28:29.760 --> 01:28:33.780 So we'll do a very simple example of just changing the color depending 01:28:33.780 --> 01:28:35.590 on the size of the screen. 01:28:35.590 --> 01:28:38.310 So let me specify now in a media query. 01:28:38.310 --> 01:28:40.660 And the syntax for media query looks like this. 01:28:40.660 --> 01:28:43.830 I'm going to use the @ symbol and say media and then 01:28:43.830 --> 01:28:48.340 specify for what type of media I would like to apply this query. 01:28:48.340 --> 01:28:52.020 I can say something like, if the minimum width of the page 01:28:52.020 --> 01:28:54.930 is 600 pixels, in other words, if the width of the page 01:28:54.930 --> 01:28:59.310 is 600 pixels or anything larger than 600 pixels, well, 01:28:59.310 --> 01:29:06.850 then go ahead and take the body and give it a background color of red. 01:29:06.850 --> 01:29:09.460 But then I could also add another media query and say, 01:29:09.460 --> 01:29:14.920 you know what, for this media query let me give it a max width of 599 pixels, 01:29:14.920 --> 01:29:19.570 meaning if the size of the screen is 599 pixels or fewer, 01:29:19.570 --> 01:29:24.700 then maybe I'd like to take the body and give it a background color of blue, 01:29:24.700 --> 01:29:26.460 for example. 01:29:26.460 --> 01:29:29.050 So now let's take a look at what happens when I take this page 01:29:29.050 --> 01:29:31.700 and actually open it and see what's going on. 01:29:31.700 --> 01:29:34.360 I'll open up responsive.html. 01:29:34.360 --> 01:29:35.800 And here's what I see normally. 01:29:35.800 --> 01:29:40.220 I see a red web page, because my screen is longer than 600 pixels wide. 01:29:40.220 --> 01:29:42.490 But notice what happens as a shrink this web page. 01:29:42.490 --> 01:29:46.090 If I go ahead and shrink it, looking at it on a smaller screen, 01:29:46.090 --> 01:29:48.700 eventually it turns to blue. 01:29:48.700 --> 01:29:51.670 If it's above 600 pixels wide, it's going to be red. 01:29:51.670 --> 01:29:56.120 If it's below 600 pixels wide, the color changes to blue. 01:29:56.120 --> 01:29:59.680 So we're able to now use these media queries to really fine tune control 01:29:59.680 --> 01:30:03.910 how our page is going to look on various different types of devices. 01:30:03.910 --> 01:30:07.070 If it's on a big screen, maybe you want the elements to look a certain way. 01:30:07.070 --> 01:30:09.450 If it's a smaller screen, maybe they'll look differently. 01:30:09.450 --> 01:30:11.700 And you don't just need to control a background color. 01:30:11.700 --> 01:30:16.180 You can control any CSS property you want just by using these media queries. 01:30:16.180 --> 01:30:19.850 You can say on a big screen, you want certain amounts of spacing or padding. 01:30:19.850 --> 01:30:21.820 You can even hide elements on smaller screens 01:30:21.820 --> 01:30:26.260 if you want to by using a particular CSS property called the display property. 01:30:26.260 --> 01:30:29.500 That controls whether or not an element is even visible. 01:30:29.500 --> 01:30:32.980 And ultimately put together, this can help to make your pages a little bit 01:30:32.980 --> 01:30:34.030 more responsive. 01:30:34.030 --> 01:30:35.740 And there are a number of different media 01:30:35.740 --> 01:30:37.840 queries that we can apply to our page as well. 01:30:37.840 --> 01:30:41.650 We can check to see whether a mobile device is vertical or landscape. 01:30:41.650 --> 01:30:44.770 We can check to see whether the user is viewing the page on their computer 01:30:44.770 --> 01:30:48.350 screen or if they've tried to print out the contents of the page as well. 01:30:48.350 --> 01:30:50.100 So there are a number of different options 01:30:50.100 --> 01:30:54.100 that we have to really control how a page is going to look. 01:30:54.100 --> 01:30:56.980 There are some other tools we have in our toolbox as well, though, 01:30:56.980 --> 01:30:59.020 for dealing with mobile responsiveness. 01:30:59.020 --> 01:31:02.080 And one of the tools built into the latest version of CSS 01:31:02.080 --> 01:31:04.050 is something called flexbox. 01:31:04.050 --> 01:31:07.930 And flexbox is quite helpful if we have multiple elements that we're all 01:31:07.930 --> 01:31:11.860 trying to display on the same page at the same time that 01:31:11.860 --> 01:31:15.300 might overflow if we're not careful about how we do responsive design. 01:31:15.300 --> 01:31:17.100 If we're really not careful-- let's imagine 01:31:17.100 --> 01:31:19.960 I have six elements that show up on my computer's monitor. 01:31:19.960 --> 01:31:21.880 When you translate that to a mobile screen, 01:31:21.880 --> 01:31:24.290 you can imagine they might all shrink down so that they're 01:31:24.290 --> 01:31:26.290 barely visible, something like this. 01:31:26.290 --> 01:31:28.060 This is probably not what we want if we're 01:31:28.060 --> 01:31:31.500 trying to design a mobile responsive page, for example. 01:31:31.500 --> 01:31:34.480 So you might imagine, how can we do a little bit better? 01:31:34.480 --> 01:31:37.240 Well, another thing we could do is take these elements 01:31:37.240 --> 01:31:39.400 and go ahead and keep them the same size, 01:31:39.400 --> 01:31:41.500 but make you have to scroll through them. 01:31:41.500 --> 01:31:42.730 This is now slightly better. 01:31:42.730 --> 01:31:44.350 The elements that are at least still visible. 01:31:44.350 --> 01:31:46.120 And they're large enough on the screen, but it 01:31:46.120 --> 01:31:48.160 would be nice not to have to scroll through them. 01:31:48.160 --> 01:31:51.340 What would be really nice is given that we have all this extra space, 01:31:51.340 --> 01:31:54.010 I would like to be able to wrap around elements 01:31:54.010 --> 01:31:56.020 if I don't have enough space for them, such 01:31:56.020 --> 01:31:58.990 that if I'm translating these six elements to a mobile screen, 01:31:58.990 --> 01:32:01.540 they translate, but I get them in like two rows, 01:32:01.540 --> 01:32:04.210 for example, three on the top and three below. 01:32:04.210 --> 01:32:07.480 And flexbox is an easy way to be able to implement something 01:32:07.480 --> 01:32:10.190 like this inside of our web pages. 01:32:10.190 --> 01:32:12.190 So let's take a look at what that might actually 01:32:12.190 --> 01:32:15.500 look like to add flexbox to our page. 01:32:15.500 --> 01:32:19.480 So I'll go ahead and create a new file called flexbox.html. 01:32:19.480 --> 01:32:21.610 We'll start with the same HTML code. 01:32:21.610 --> 01:32:28.390 And now, inside of the body, I'm going to create first a div that 01:32:28.390 --> 01:32:31.040 is going to be called the container. 01:32:31.040 --> 01:32:32.920 And we're creating a container, because we're 01:32:32.920 --> 01:32:36.440 going to specifically say that everything inside the container, 01:32:36.440 --> 01:32:38.830 I would like to add flexbox to, to be able to wrap it 01:32:38.830 --> 01:32:42.880 around so that things can go onto multiple lines if I ever need to. 01:32:42.880 --> 01:32:44.650 And now, let me just add some sample text. 01:32:44.650 --> 01:32:50.860 So this is some sample text inside of a div to demo flexbox. 01:32:50.860 --> 01:32:53.420 And I'll go ahead and repeat this may maybe like 12 times. 01:32:53.420 --> 01:32:54.470 And I'll number each one. 01:32:54.470 --> 01:32:59.620 Here's 1, 2, 3, 4, and I'll number all the rest. 01:32:59.620 --> 01:33:03.490 This is just to give a demonstration of what these elements could actually 01:33:03.490 --> 01:33:05.320 look like. 01:33:05.320 --> 01:33:09.200 Ideally, these would be different pieces of content, though. 01:33:09.200 --> 01:33:12.680 So now, inside of my style tag, here's what 01:33:12.680 --> 01:33:14.780 I'm going to say, just to demonstrate. 01:33:14.780 --> 01:33:18.560 I'll say, take the ID container-- again the hashtag specifies get me 01:33:18.560 --> 01:33:20.690 something with a particular ID. 01:33:20.690 --> 01:33:24.500 And I want to display it using flexbox. 01:33:24.500 --> 01:33:26.840 And in particular, I would like to use the flex wrap 01:33:26.840 --> 01:33:30.650 property to say if there's not enough room at the end of a line for all 01:33:30.650 --> 01:33:33.630 of the elements, go ahead and wrap around those elements 01:33:33.630 --> 01:33:37.040 onto the next line instead. 01:33:37.040 --> 01:33:40.520 And now, I can specify some additional CSS properties 01:33:40.520 --> 01:33:43.580 for the divs inside of the container. 01:33:43.580 --> 01:33:48.140 So I can say, for the container all of the div inside of that container, 01:33:48.140 --> 01:33:50.450 again using this child selector to get all 01:33:50.450 --> 01:33:53.360 of the divs that are inside of the container, 01:33:53.360 --> 01:33:55.440 I can add some CSS to that too. 01:33:55.440 --> 01:33:59.360 I can say, let's give these a background color of like a shade of green. 01:33:59.360 --> 01:34:03.020 I can give them a particular font, maybe 20 pixel font. 01:34:03.020 --> 01:34:06.470 Give them some margin and padding, just to add some space. 01:34:06.470 --> 01:34:09.920 And maybe each one is going to be 200 pixels wide. 01:34:09.920 --> 01:34:12.800 So just adding some spacing to those individual divs, 01:34:12.800 --> 01:34:15.290 the important part is this right here, where 01:34:15.290 --> 01:34:19.200 I've said that this whole container is going to be a flexbox container. 01:34:19.200 --> 01:34:23.310 And I'd like to wrap around elements if you ever reach the end. 01:34:23.310 --> 01:34:26.680 So now, I'll open up flexbox.html. 01:34:26.680 --> 01:34:31.200 And so here, I now see 12 elements that are on multiple lines. 01:34:31.200 --> 01:34:33.710 But notice what happens as I shrink the page. 01:34:33.710 --> 01:34:37.670 If there isn't room for all of them, elements move onto other lines. 01:34:37.670 --> 01:34:40.230 Now, there's only three elements in any particular row. 01:34:40.230 --> 01:34:42.580 Now, there's only two elements on any particular row. 01:34:42.580 --> 01:34:46.210 And so I can use flexbox to very well adapt myself 01:34:46.210 --> 01:34:47.330 to different sized screens. 01:34:47.330 --> 01:34:50.840 And no matter whether you're looking at this on a big screen or a small screen, 01:34:50.840 --> 01:34:55.340 the content is still going to look good, because I'm able to adapt responsively 01:34:55.340 --> 01:34:57.360 to whatever might be happening. 01:34:57.360 --> 01:35:01.970 So this is one layout paradigm that exists within CSS, this flexbox layout. 01:35:01.970 --> 01:35:04.010 There are other layouts that exist as well. 01:35:04.010 --> 01:35:06.440 One common one is the grid layout for anytime 01:35:06.440 --> 01:35:09.260 you want to arrange things in a particular grid, where 01:35:09.260 --> 01:35:11.330 maybe certain columns need to be certain widths, 01:35:11.330 --> 01:35:14.330 but others can maybe be a little bit more flexible. 01:35:14.330 --> 01:35:17.570 I'll show one example of that too, just to give you a demonstration of what 01:35:17.570 --> 01:35:20.070 that grid layout might look like. 01:35:20.070 --> 01:35:25.760 So here's grid.html, where I'll go ahead and inside the body of this page, 01:35:25.760 --> 01:35:27.860 give myself a div. 01:35:27.860 --> 01:35:31.370 I'll give it an ID of grid. 01:35:31.370 --> 01:35:36.170 And then let me just add div class equals grid item. 01:35:36.170 --> 01:35:39.320 Again, a class, because there might be multiple items, 01:35:39.320 --> 01:35:42.130 but I'll go ahead and just create a whole bunch of grid items 01:35:42.130 --> 01:35:49.370 and number each one, so 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12. 01:35:49.370 --> 01:35:54.560 So I have a whole bunch of grid items inside of a div whose ID is grid. 01:35:54.560 --> 01:35:58.400 And now, I'd like to add some style here. 01:35:58.400 --> 01:36:02.010 I'll say for the grid, let's give it a background color. 01:36:02.010 --> 01:36:04.890 Maybe the background color should be green. 01:36:04.890 --> 01:36:06.750 Display is going to be grid. 01:36:06.750 --> 01:36:08.490 I want this to show up as a grid. 01:36:08.490 --> 01:36:11.580 And now, there are a couple of attributes or properties 01:36:11.580 --> 01:36:13.060 that I'm going to specify here. 01:36:13.060 --> 01:36:15.060 Maybe I want some padding around the grid first. 01:36:15.060 --> 01:36:19.650 But the important grid properties are grid column gap. 01:36:19.650 --> 01:36:22.950 How much space goes between each of the columns? 01:36:22.950 --> 01:36:25.110 Maybe I'll say like 20 pixels. 01:36:25.110 --> 01:36:27.180 Likewise there is also a grid row gap. 01:36:27.180 --> 01:36:30.120 How much space goes between each of the rows of the grid? 01:36:30.120 --> 01:36:32.230 Maybe I'll say 10 pixels here. 01:36:32.230 --> 01:36:36.420 And then finally, grid template columns is a way for me 01:36:36.420 --> 01:36:39.510 to specify how many columns there are going to be 01:36:39.510 --> 01:36:42.060 and how wide should each of those columns be. 01:36:42.060 --> 01:36:46.290 So if I want maybe three columns, I can specify that the first column 01:36:46.290 --> 01:36:48.220 should be 200 pixels. 01:36:48.220 --> 01:36:51.030 The second column should also be 200 pixels. 01:36:51.030 --> 01:36:53.910 And the third column can be automatically sized, 01:36:53.910 --> 01:36:56.360 just grow or shrink to fill the screen. 01:36:56.360 --> 01:36:57.880 So we'll say auto. 01:36:57.880 --> 01:37:01.500 So first column 200 pixels, second column 200 pixels, 01:37:01.500 --> 01:37:04.680 third column just do it automatically. 01:37:04.680 --> 01:37:08.340 And now, for all of the grid items, well, those I 01:37:08.340 --> 01:37:10.260 can add some styling to as well. 01:37:10.260 --> 01:37:12.060 I'll give them a background color of white, 01:37:12.060 --> 01:37:17.720 just to distinguish them, and also give them some font size and some padding 01:37:17.720 --> 01:37:19.380 and maybe center them as well. 01:37:19.380 --> 01:37:22.350 So just adding some additional CSS properties in order 01:37:22.350 --> 01:37:23.970 to make it display the way I want to. 01:37:23.970 --> 01:37:27.900 But the important ones to care about here are display is grid. 01:37:27.900 --> 01:37:30.480 And then I'm specifying, here is how the grid 01:37:30.480 --> 01:37:32.760 should be laid out, how much space between columns, 01:37:32.760 --> 01:37:36.810 how much space between rows, and how wide are each of those rows going 01:37:36.810 --> 01:37:38.010 to be. 01:37:38.010 --> 01:37:42.930 Now, if I open up, grid.html, here's what that grid looks like. 01:37:42.930 --> 01:37:45.770 I now have a first column 200 pixels wide, 01:37:45.770 --> 01:37:49.380 a second column also 200 pixels wide, and a third column 01:37:49.380 --> 01:37:52.230 that's going to resize dynamically based on how wide 01:37:52.230 --> 01:37:54.330 or how narrow my screen happens to be. 01:37:54.330 --> 01:37:57.480 So as I shrink the screen, the third column shrinks with it. 01:37:57.480 --> 01:38:02.100 As I grow the screen, it also grows alongside with how big 01:38:02.100 --> 01:38:05.230 this window happens to be. 01:38:05.230 --> 01:38:08.020 And so flexbox and grid are some very powerful tools 01:38:08.020 --> 01:38:10.090 that we can use and just to make it easier 01:38:10.090 --> 01:38:13.300 for us to be able to use mobile responsive design, 01:38:13.300 --> 01:38:15.760 to be able to make sure that our pages look good 01:38:15.760 --> 01:38:19.030 no matter what kind of browser or what kind of device 01:38:19.030 --> 01:38:21.760 the user is using in order to look at our page. 01:38:21.760 --> 01:38:24.190 But it turns out that exists a lot of libraries 01:38:24.190 --> 01:38:27.610 out there that do a lot of this for us, some people that have already written 01:38:27.610 --> 01:38:31.090 CSS code to make our text look good, to make our buttons look good, 01:38:31.090 --> 01:38:33.430 in order to make sure that things are mobile responsive. 01:38:33.430 --> 01:38:35.890 And one of those is called Bootstrap. 01:38:35.890 --> 01:38:38.230 Bootstrap was a very popular CSS library that we 01:38:38.230 --> 01:38:41.350 can use in order to use some styling that they 01:38:41.350 --> 01:38:45.310 have written, such that we don't need to write all the styling from scratch. 01:38:45.310 --> 01:38:47.270 So this is what Bootstrap's website looks like. 01:38:47.270 --> 01:38:48.970 I'll go ahead and show it to you now just 01:38:48.970 --> 01:38:51.100 to give you a sampling for what's available inside 01:38:51.100 --> 01:38:53.530 of a library like Bootstrap. 01:38:53.530 --> 01:38:59.070 If I go to getbootstrap.com, here's Bootstrap's website. 01:38:59.070 --> 01:39:02.470 And if I go to their documentation on this first link here, 01:39:02.470 --> 01:39:06.090 I can look at all of the Bootstrap components that I'm given access to. 01:39:06.090 --> 01:39:08.520 These are things like alerts, for example. 01:39:08.520 --> 01:39:11.160 That here's an alert that's styled in a very particular way. 01:39:11.160 --> 01:39:12.330 It's in a specific font. 01:39:12.330 --> 01:39:14.940 It's got a certain amount of padding and certain colors. 01:39:14.940 --> 01:39:18.990 And if I want to just copy this alert, once I've used Bootstrap's code, 01:39:18.990 --> 01:39:22.530 I can just apply certain classes to a div 01:39:22.530 --> 01:39:25.890 and Bootstrap will handle the process of applying the right styles for me. 01:39:25.890 --> 01:39:29.060 I don't need to write all of these styles by myself from scratch. 01:39:29.060 --> 01:39:32.730 Bootstrap's written a lot of the styling already. 01:39:32.730 --> 01:39:35.150 So how do you actually go about using Bootstrap? 01:39:35.150 --> 01:39:36.990 Well, to get started with Bootstrap, all you 01:39:36.990 --> 01:39:40.710 need to do is copy the CSS link that Bootstrap gives you 01:39:40.710 --> 01:39:42.340 to the top of your file. 01:39:42.340 --> 01:39:47.070 So if I take the CSS link and then go back to something like hello.html, 01:39:47.070 --> 01:39:52.230 which you'll recall originally looked something like this, just Hello World, 01:39:52.230 --> 01:39:54.810 I can add some Bootstrap to it to say, all 01:39:54.810 --> 01:39:59.220 right, I would like to take this HTML file 01:39:59.220 --> 01:40:03.280 and apply Bootstrap styling to it to make it look a little bit nicer. 01:40:03.280 --> 01:40:04.440 So I refreshed the page. 01:40:04.440 --> 01:40:07.260 And now, you'll notice Bootstrap's chosen a custom font for me 01:40:07.260 --> 01:40:10.900 just to make things look a little nicer in Bootstrap's own eyes. 01:40:10.900 --> 01:40:13.290 And now, if I want to add Bootstrap elements, 01:40:13.290 --> 01:40:16.570 I can say, all right, let me go to their components. 01:40:16.570 --> 01:40:17.880 And I want to add an alert. 01:40:17.880 --> 01:40:20.210 I can just copy their alert code. 01:40:20.210 --> 01:40:24.660 Here's their alert code for a primary alert, an alert that looks blue. 01:40:24.660 --> 01:40:29.510 And I can just inside the body of my page go ahead and add an alert, 01:40:29.510 --> 01:40:35.160 and maybe change the text to here is my alert, for example. 01:40:35.160 --> 01:40:39.660 Now, when I reload hello.html, I now see an alert that shows up, 01:40:39.660 --> 01:40:42.480 styled according to Bootstrap styling. 01:40:42.480 --> 01:40:47.020 And again, I can change that styling just by changing these classes. 01:40:47.020 --> 01:40:49.020 So a primary alert shows up as blue. 01:40:49.020 --> 01:40:50.640 A success alert shows up as green. 01:40:50.640 --> 01:40:52.060 A danger alert is red. 01:40:52.060 --> 01:40:55.020 So if I want to give a danger alert-- the user is doing something wrong 01:40:55.020 --> 01:40:56.580 on the web page, for example-- 01:40:56.580 --> 01:41:01.800 I can change alert primary here inside my HTML to something like alert danger 01:41:01.800 --> 01:41:02.880 instead. 01:41:02.880 --> 01:41:05.610 And now when I refresh this page, I now see the alert 01:41:05.610 --> 01:41:08.520 shows up as red instead of blue. 01:41:08.520 --> 01:41:12.000 So Bootstrap gives us access to a lot of these various different types 01:41:12.000 --> 01:41:16.290 of components, different ways of adding breadcrumbs and alerts and carousels 01:41:16.290 --> 01:41:20.070 and other elements to our page just to make it easy to make our page look good 01:41:20.070 --> 01:41:22.950 very, very quickly without having to worry too much about writing 01:41:22.950 --> 01:41:26.750 our own CSS, because Bootstrap's written a lot of that for us. 01:41:26.750 --> 01:41:29.190 Bootstrap even includes a way to make sure 01:41:29.190 --> 01:41:31.800 that web pages are mobile responsive using something 01:41:31.800 --> 01:41:34.740 called Bootstrap's column model. 01:41:34.740 --> 01:41:36.580 So I'll show you an example of that now. 01:41:36.580 --> 01:41:41.650 Bootstrap divides its page into 12 distinct columns. 01:41:41.650 --> 01:41:43.740 So one thing I can do is I've pulled this up 01:41:43.740 --> 01:41:47.610 in an example I have in advanced called column zero.html. 01:41:47.610 --> 01:41:50.340 Notice that inside of the body of my page now, 01:41:50.340 --> 01:41:55.470 I have a div whose class is container and then a div whose class is row. 01:41:55.470 --> 01:42:00.310 And Bootstrap divides every row into a 12-unit column. 01:42:00.310 --> 01:42:02.100 So here, for example, I have a whole bunch 01:42:02.100 --> 01:42:05.160 of divs that are each 3-unit columns. 01:42:05.160 --> 01:42:08.250 So if I have four 3-unit columns, that will take up 01:42:08.250 --> 01:42:11.130 a total amount of space equal to 12, meaning 01:42:11.130 --> 01:42:13.960 filling up the entirety of the screen. 01:42:13.960 --> 01:42:20.100 So if I now open up source column zero.html, here's what that looks like. 01:42:20.100 --> 01:42:23.700 I have four columns, each of which is of width 3. 01:42:23.700 --> 01:42:26.460 And as a result, as I shrink it, those columns 01:42:26.460 --> 01:42:29.250 will automatically resize to make sure that they're always 01:42:29.250 --> 01:42:30.750 the appropriate size. 01:42:30.750 --> 01:42:34.840 Now, as long as they add up to 12, they don't only to be the same size. 01:42:34.840 --> 01:42:38.640 So, for example, if I only wanted three columns, instead of four, 01:42:38.640 --> 01:42:42.370 I could get rid of the fourth column by deleting those rows. 01:42:42.370 --> 01:42:46.710 And maybe change the second column instead of being a column of size 3, 01:42:46.710 --> 01:42:48.540 let's make it a column of size 6. 01:42:48.540 --> 01:42:51.570 So that's a length 6 column instead. 01:42:51.570 --> 01:42:54.180 And now if I refresh the page, now suddenly I 01:42:54.180 --> 01:42:57.210 see three columns where the middle one is twice 01:42:57.210 --> 01:42:59.340 as large as the ones on either end. 01:42:59.340 --> 01:43:04.250 And as I shrink this down, I can see that it shrinks down as well. 01:43:04.250 --> 01:43:06.820 And one of the advantages of using Bootstrap columns 01:43:06.820 --> 01:43:09.220 is that they too can be mobile responsive. 01:43:09.220 --> 01:43:13.030 They too can wrap around other lines if they ever need to. 01:43:13.030 --> 01:43:15.860 So, for example, let me pull up columns one.html. 01:43:18.530 --> 01:43:20.800 Here, for example, I have a row. 01:43:20.800 --> 01:43:22.850 And let's take a look at what's going on in here. 01:43:22.850 --> 01:43:27.890 Recall that every row in Bootstrap is divided up into 12-column units. 01:43:27.890 --> 01:43:31.400 But Bootstrap, in addition to letting me specify how many units a column 01:43:31.400 --> 01:43:34.850 should take up, also lets me specify how many units that column 01:43:34.850 --> 01:43:38.100 should take up depending on the size of the screen. 01:43:38.100 --> 01:43:42.050 So if I'm on a large screen, as indicated by LG, 01:43:42.050 --> 01:43:45.020 this is saying that on a large screen, this div 01:43:45.020 --> 01:43:47.360 should take up 3 units of space. 01:43:47.360 --> 01:43:49.780 And this div should also take up 3 units of space. 01:43:49.780 --> 01:43:52.760 And for each of these four divs, on a large screen, 01:43:52.760 --> 01:43:56.420 each will take up 3 of the total 12 units of space. 01:43:56.420 --> 01:43:59.330 So they'll all show up on one row. 01:43:59.330 --> 01:44:01.730 What happens on a small screen, though? 01:44:01.730 --> 01:44:05.450 Well, here col sm, for column on a small screen, 01:44:05.450 --> 01:44:07.940 I've said on a small screen each column should only 01:44:07.940 --> 01:44:13.640 take up 6 units of space, 6, or half, of the total 12 that I have in the row. 01:44:13.640 --> 01:44:15.800 And so I use up 6 here, 6 here for a total 01:44:15.800 --> 01:44:20.090 of 12 in one row, which means the next two, also a size 6, 01:44:20.090 --> 01:44:22.220 need to go on to a second row. 01:44:22.220 --> 01:44:24.770 And Bootstrap is smart enough to do this math for me 01:44:24.770 --> 01:44:29.210 and figure out how exactly these elements should ultimately be laid out. 01:44:29.210 --> 01:44:37.420 So now if I open up columns 1.html and see what's there, on a large screen, 01:44:37.420 --> 01:44:40.330 I see four columns, all in the same row. 01:44:40.330 --> 01:44:42.250 But as I shrink down to a smaller screen, 01:44:42.250 --> 01:44:45.400 eventually we'll see that things change. 01:44:45.400 --> 01:44:49.540 I now see the third and fourth sections move down onto the second row, 01:44:49.540 --> 01:44:53.440 because on a smaller screen now, when the window is smaller, 01:44:53.440 --> 01:44:57.350 now I only have the ability to show two elements in any particular row. 01:44:57.350 --> 01:45:02.490 So I get to on the first row and then two on the row underneath that. 01:45:02.490 --> 01:45:04.810 So all in all, there are a lot of different ways 01:45:04.810 --> 01:45:08.880 now that we can use CSS in order to make sure our pages are mobile responsive. 01:45:08.880 --> 01:45:11.130 We can use Bootstrap column model to make 01:45:11.130 --> 01:45:15.480 sure the columns move around whenever a size of the window shrinks or grows. 01:45:15.480 --> 01:45:17.970 We can also use things like flexbox and the grid model, 01:45:17.970 --> 01:45:22.260 writing our own CSS to make sure that our page is responsive depending 01:45:22.260 --> 01:45:25.560 on the size of the screen that the user happens to be using in order 01:45:25.560 --> 01:45:27.250 to visit our website page. 01:45:27.250 --> 01:45:32.310 So these are some of the very powerful features that we get using just CSS. 01:45:32.310 --> 01:45:36.150 But one thing you might imagine is that as we begin to write more and more CSS, 01:45:36.150 --> 01:45:39.960 there's going to be more and more repetition, things that appear again 01:45:39.960 --> 01:45:41.510 and again and again. 01:45:41.510 --> 01:45:44.940 And we've already seen some ways that we can minimize redundancy in CSS. 01:45:44.940 --> 01:45:49.320 We've seen how we can move CSS into the style section of our web page. 01:45:49.320 --> 01:45:53.470 We've even seen how we can move CSS to an entirely different file. 01:45:53.470 --> 01:45:58.590 However, what we haven't yet seen is how to deal with other types of redundancy. 01:45:58.590 --> 01:46:01.590 And so let's take a look at an example of that now. 01:46:01.590 --> 01:46:03.900 Let's imagine, for example, that I want to style 01:46:03.900 --> 01:46:10.180 multiple different elements in different ways, but using some common properties. 01:46:10.180 --> 01:46:12.930 So, for example, let me create a new file that I'll, in this case, 01:46:12.930 --> 01:46:15.420 call variables.html. 01:46:15.420 --> 01:46:17.280 And you'll see why in a moment. 01:46:17.280 --> 01:46:19.860 I'll go ahead and copy hello.html, but I'll get rid 01:46:19.860 --> 01:46:22.670 of all this Bootstrap inside of it. 01:46:22.670 --> 01:46:27.340 Let's imagine that here I have in maybe two list, an ordered list 01:46:27.340 --> 01:46:32.410 and an unordered list, where my unordered list has 01:46:32.410 --> 01:46:36.520 an ordered item, maybe three unordered items, 01:46:36.520 --> 01:46:41.770 and my ordered list also has three ordered items. 01:46:41.770 --> 01:46:43.630 Again, just for sake of demonstration, I'm 01:46:43.630 --> 01:46:45.760 showing that we have these two lists now. 01:46:45.760 --> 01:46:49.180 And I'll open up variables.html just to give you 01:46:49.180 --> 01:46:52.270 a sense for what that could look like. 01:46:52.270 --> 01:46:55.090 We have three unordered items in an unordered list, 01:46:55.090 --> 01:46:58.180 three ordered items in our ordered list. 01:46:58.180 --> 01:47:01.460 Let's imagine I wanted to style these a little bit differently. 01:47:01.460 --> 01:47:03.790 Maybe inside the style section of my page 01:47:03.790 --> 01:47:08.920 I want to style the unordered list to have a font size of 14 pixels 01:47:08.920 --> 01:47:11.260 and maybe a color of red. 01:47:11.260 --> 01:47:15.730 And my ordered list, I would like that to have a font size of maybe larger, 18 01:47:15.730 --> 01:47:17.930 pixels, but also a color of red. 01:47:17.930 --> 01:47:20.230 I want to keep the same color for all the text, 01:47:20.230 --> 01:47:23.200 but I want the font sizes to be different. 01:47:23.200 --> 01:47:25.390 Now, if I refresh this page, here's what I see. 01:47:25.390 --> 01:47:26.990 They are indeed of different sizes. 01:47:26.990 --> 01:47:30.700 The ordered list items are larger than the unordered list items. 01:47:30.700 --> 01:47:32.360 And they're all red. 01:47:32.360 --> 01:47:34.510 But there was some redundancy, some repetition 01:47:34.510 --> 01:47:37.510 that was introduced when I was writing my CSS code. 01:47:37.510 --> 01:47:41.020 In particular when I was writing my CSS code, 01:47:41.020 --> 01:47:43.720 I've repeated this usage of the color red. 01:47:43.720 --> 01:47:46.600 If I ever want to change the color from red to blue, for example, 01:47:46.600 --> 01:47:50.260 I'm going to have to change my code in two different places. 01:47:50.260 --> 01:47:54.540 Ultimately, I'd just like for my CSS to be a little bit more powerful. 01:47:54.540 --> 01:47:59.080 And so that brings us to our last topic today, which is a language called Sass. 01:47:59.080 --> 01:48:02.860 And Sass is a language that is essentially an extension to CSS. 01:48:02.860 --> 01:48:05.320 It adds additional features to what CSS has 01:48:05.320 --> 01:48:07.300 to offer, just to make it a little bit more 01:48:07.300 --> 01:48:11.020 powerful for us to be able to use and manipulate CSS in a way that's 01:48:11.020 --> 01:48:14.350 going to be faster and remove some of the repetition 01:48:14.350 --> 01:48:16.930 that we might have had in CSS previously. 01:48:16.930 --> 01:48:22.190 And one of the key features of Sass is the ability to have variables. 01:48:22.190 --> 01:48:24.790 So let's take a look at an example of this now. 01:48:24.790 --> 01:48:28.390 I'm going to create a new file, normally when we created our CSS files, 01:48:28.390 --> 01:48:31.390 we called them like variables.css, something 01:48:31.390 --> 01:48:34.510 dot CSS to stand for a CSS file. 01:48:34.510 --> 01:48:36.550 Sass is a different language, though. 01:48:36.550 --> 01:48:38.770 So it's going to require a different extension. 01:48:38.770 --> 01:48:45.320 We're going to conventionally use dot scss to stand for this is a Sass file. 01:48:45.320 --> 01:48:48.580 So here is now variables.scss. 01:48:48.580 --> 01:48:51.680 And now what I can do in Sass is I can actually create variables 01:48:51.680 --> 01:48:54.730 in the same way that we could create variables in a programming language, 01:48:54.730 --> 01:48:56.740 like Python, which we'll soon see. 01:48:56.740 --> 01:48:59.290 CSS normally doesn't support variables, but Sass 01:48:59.290 --> 01:49:01.150 is going to give us that power. 01:49:01.150 --> 01:49:04.250 In Sass, all variables begin with a dollar sign. 01:49:04.250 --> 01:49:09.270 So I can create a variable $color to create a variable called color. 01:49:09.270 --> 01:49:13.600 And I can say the variable called color is going to be equal to red. 01:49:13.600 --> 01:49:16.120 So this line here, line 1, is my way of telling 01:49:16.120 --> 01:49:18.580 Sass I'd like to create a variable called color 01:49:18.580 --> 01:49:22.030 and I'd like for its value to be red. 01:49:22.030 --> 01:49:24.220 And now, I can add the same styling I had before. 01:49:24.220 --> 01:49:27.370 I can just use normal CSS and say for an unordered list 01:49:27.370 --> 01:49:29.980 I'd like the font size to be 14 pixels. 01:49:29.980 --> 01:49:35.230 But the color, instead of saying red here, I can use the name of a variable. 01:49:35.230 --> 01:49:41.380 I can say $color to mean go ahead and use the value of the variable color 01:49:41.380 --> 01:49:44.350 as the color for this unordered list. 01:49:44.350 --> 01:49:48.910 Then for an ordered list, I'll also say font size 18 pixels 01:49:48.910 --> 01:49:53.680 and say color should also be this variable called color. 01:49:53.680 --> 01:49:56.530 By using a variable, I've removed the repetition. 01:49:56.530 --> 01:49:59.840 Rather than having the word red show up in multiple places in my code 01:49:59.840 --> 01:50:02.680 where I would need to change it twice if I ever needed to change it, 01:50:02.680 --> 01:50:04.930 now I have defined the variable once. 01:50:04.930 --> 01:50:07.240 And I only ever need to change it in one place 01:50:07.240 --> 01:50:11.330 if I ever need to make modifications to this particular file. 01:50:11.330 --> 01:50:14.740 So now, let's try and link this file. 01:50:14.740 --> 01:50:17.320 We'll go back to variables.html. 01:50:17.320 --> 01:50:24.530 Instead of putting the style code here, I'll go ahead and link a style sheet 01:50:24.530 --> 01:50:28.190 and say, the href should be variables.scss, 01:50:28.190 --> 01:50:31.500 because that's the file where my styling exists. 01:50:31.500 --> 01:50:35.600 So now let me try and open up variables.html after I've linked 01:50:35.600 --> 01:50:37.350 the CSS. 01:50:37.350 --> 01:50:39.690 And, all right, something seems not quite right. 01:50:39.690 --> 01:50:41.130 I specified font sizes. 01:50:41.130 --> 01:50:43.080 I specified that everything should be red. 01:50:43.080 --> 01:50:44.130 But it's not showing up. 01:50:44.130 --> 01:50:45.820 Everything is showing up black. 01:50:45.820 --> 01:50:49.230 And I don't see any of the differences in sizing. 01:50:49.230 --> 01:50:53.640 And the reason for this is while the web browser, things like Chrome and Safari 01:50:53.640 --> 01:50:58.350 and Firefox can understand CSS, they can't by default understand 01:50:58.350 --> 01:50:59.910 SCSS, or Sass. 01:50:59.910 --> 01:51:03.870 Sass is an extension to CSS that web browsers don't understand out 01:51:03.870 --> 01:51:05.350 of the box. 01:51:05.350 --> 01:51:08.970 So in order to solve this problem, once we've written our Sass file, 01:51:08.970 --> 01:51:12.420 we need to compile it, convert it, translate it, so to speak, 01:51:12.420 --> 01:51:18.250 from Sass into plain old CSS so that our browser is able to understand it. 01:51:18.250 --> 01:51:20.550 And in order to do this, you'll need to install 01:51:20.550 --> 01:51:22.520 a program called Sass on your computer. 01:51:22.520 --> 01:51:25.050 And you can install it on Mac or PC or Linux. 01:51:25.050 --> 01:51:27.960 And now, in the terminal, in order to do this compilation, 01:51:27.960 --> 01:51:35.400 I'm going to say Sass variables.scss, the file I'd like to compile, 01:51:35.400 --> 01:51:38.390 colon variables.css. 01:51:38.390 --> 01:51:42.580 So variables.scss is the file that I would like to compile. 01:51:42.580 --> 01:51:46.020 And the file I'd like to generate is variables.css. 01:51:46.020 --> 01:51:50.790 I'd like to turn my Sass file into a plain old CSS file. 01:51:50.790 --> 01:51:52.500 I'll go ahead and press Return. 01:51:52.500 --> 01:51:55.520 And all right, that compilation process is now done. 01:51:55.520 --> 01:52:02.460 And so now, inside of variables.html, instead of referencing the SCSS file, 01:52:02.460 --> 01:52:05.820 I'm going to reference the CSS file as the style sheet, 01:52:05.820 --> 01:52:11.510 because my web browser only understands CSS, it doesn't understand Sass. 01:52:11.510 --> 01:52:14.900 Now, when I load the page, now I see the result I expect. 01:52:14.900 --> 01:52:18.170 Everything shows up as red and the font sizes are different. 01:52:18.170 --> 01:52:20.570 So ultimately, this was a 2-step process. 01:52:20.570 --> 01:52:24.860 I first needed to take my Sass code, compile it into CSS. 01:52:24.860 --> 01:52:28.610 And then I could link the CSS to this particular page. 01:52:28.610 --> 01:52:31.910 But the advantage now is that if ever I want to make some sort of change, 01:52:31.910 --> 01:52:35.040 I want to change the color, rather than change it in two places, 01:52:35.040 --> 01:52:39.170 or you might imagine in a more complex page, like tens or dozens of places, 01:52:39.170 --> 01:52:45.620 I just go to the SCSS file, and I change the color from red to blue. 01:52:45.620 --> 01:52:48.970 Now, if I refresh the page, all right everything is still red. 01:52:48.970 --> 01:52:50.670 And that's because I forgot a step. 01:52:50.670 --> 01:52:52.510 I changed the Sass file. 01:52:52.510 --> 01:52:55.420 But that doesn't automatically change the CSS file. 01:52:55.420 --> 01:53:01.180 I need to now recompile the CSS file by saying Sass variables.scss 01:53:01.180 --> 01:53:06.760 variables.css, to compile the file again using the updated Sass file. 01:53:06.760 --> 01:53:09.850 And now, I see the updated changes. 01:53:09.850 --> 01:53:12.400 And if you're curious as to what the updated file looks like, 01:53:12.400 --> 01:53:16.870 I'm actually look at variables.css to see what code happens to be there, 01:53:16.870 --> 01:53:18.910 and, though, it's styled a little bit strangely. 01:53:18.910 --> 01:53:23.080 You can see that I have a UL with a font size a 14 and a color of blue. 01:53:23.080 --> 01:53:26.050 So they've substituted the word blue for this variable. 01:53:26.050 --> 01:53:30.120 And they've done the same thing for ordered lists as well. 01:53:30.120 --> 01:53:32.430 Now, in practice, it's going to be pretty annoying 01:53:32.430 --> 01:53:35.130 if I'm building a web page, building using Sass, 01:53:35.130 --> 01:53:39.000 if I constantly need to go back and recompile my Sass into CSS 01:53:39.000 --> 01:53:40.140 every single time. 01:53:40.140 --> 01:53:42.570 What I'd like to do is just automate that process. 01:53:42.570 --> 01:53:44.580 And Sass makes it easy to do this. 01:53:44.580 --> 01:53:51.770 I can just say, Sass dash dash watch variables.scss variables.css. 01:53:51.770 --> 01:53:55.650 And what that's going to do is now you see Sass is watching for changes. 01:53:55.650 --> 01:53:59.550 Sass is going to monitor the variables.scss file. 01:53:59.550 --> 01:54:03.300 And if ever I change my Sass file, Sass is going to know about it. 01:54:03.300 --> 01:54:07.460 And it's automatically going to recompile the corresponding CSS file. 01:54:07.460 --> 01:54:10.380 And you can do this not just with single files, but entire directories 01:54:10.380 --> 01:54:13.110 as well if you have multiple different Sass files. 01:54:13.110 --> 01:54:18.930 So now, what I can do is if in the variables.scss file I change 01:54:18.930 --> 01:54:19.740 the color-- 01:54:19.740 --> 01:54:22.700 instead of blue, I now want it to be green, for example-- 01:54:22.700 --> 01:54:25.740 I now save the variables.scss file. 01:54:25.740 --> 01:54:29.040 And now, without doing anything-- take a look at my terminal-- 01:54:29.040 --> 01:54:32.650 Sass detected a change to variables.scss, 01:54:32.650 --> 01:54:37.030 so it gave me a new version of my original CSS file. 01:54:37.030 --> 01:54:41.540 If I go back to my web browser now, refresh the page, now, all of the text 01:54:41.540 --> 01:54:45.130 is green, as I would expect it to be. 01:54:45.130 --> 01:54:48.630 So that's one of the very powerful features that Sass gives us. 01:54:48.630 --> 01:54:52.170 It gives us the ability to add variables to our CSS code just 01:54:52.170 --> 01:54:53.760 to factor out commonalities. 01:54:53.760 --> 01:54:57.720 If there are common fonts, common colors, common borders, common styling, 01:54:57.720 --> 01:55:00.000 that I want to apply to a lot of different things, 01:55:00.000 --> 01:55:04.310 it becomes much easier just to use Sass in order to do so. 01:55:04.310 --> 01:55:07.230 And finally, we'll take a look at a couple of other features 01:55:07.230 --> 01:55:10.410 that Sass gives us the ability to do, one of them 01:55:10.410 --> 01:55:15.910 is the ability to nest CSS selectors inside of other CSS selectors. 01:55:15.910 --> 01:55:18.100 So one thing you've seen so far, for example, 01:55:18.100 --> 01:55:24.030 is that in CSS, if I wanted to style all of the unordered lists that are inside 01:55:24.030 --> 01:55:29.700 of divs, for example, I could say like, div arrow unordered list, 01:55:29.700 --> 01:55:34.440 in order to style unordered lists that are inside of divs. 01:55:34.440 --> 01:55:38.640 What Sass will do is that will give us a bit of a nicer syntax for doing 01:55:38.640 --> 01:55:43.620 this type of thing, in particular, by allowing us to nest CSS inside 01:55:43.620 --> 01:55:46.070 of other pieces of CSS. 01:55:46.070 --> 01:55:48.180 So just as an example of this, I'll go ahead 01:55:48.180 --> 01:55:52.920 and open up a file I already brought, called nesting.html. 01:55:52.920 --> 01:55:55.550 And so here is what we might see inside of nesting.html. 01:55:55.550 --> 01:55:57.990 Here is the body of the page. 01:55:57.990 --> 01:56:01.890 Inside the body of the page, I have a div, inside of which 01:56:01.890 --> 01:56:05.610 is a paragraph inside the div and also a list, an unordered list, 01:56:05.610 --> 01:56:09.280 or ul, that's inside of this div as well. 01:56:09.280 --> 01:56:12.210 And then we also have a paragraph that's outside of the div. 01:56:12.210 --> 01:56:15.410 And a list that's outside of the div in addition to that. 01:56:15.410 --> 01:56:18.210 So a number of different elements, some of which are located inside 01:56:18.210 --> 01:56:19.260 of other elements. 01:56:19.260 --> 01:56:24.650 And what I'd like to do is be very precise about how I style these pages. 01:56:24.650 --> 01:56:27.060 What Sass is going to allow us to do is it 01:56:27.060 --> 01:56:31.450 lets us write a Sass file that looks a little something like this. 01:56:31.450 --> 01:56:33.000 Let's take a look at what it's doing. 01:56:33.000 --> 01:56:35.970 It's saying, for the entire div, I would like 01:56:35.970 --> 01:56:39.150 to give that div a font size of 18 pixels. 01:56:39.150 --> 01:56:42.210 And then, what CSS normally doesn't allow us to do, 01:56:42.210 --> 01:56:44.610 but we can do now using the power of Sass, 01:56:44.610 --> 01:56:48.510 is say, for any paragraphs that are inside of that div, 01:56:48.510 --> 01:56:51.240 go ahead and give those paragraphs the color of blue. 01:56:51.240 --> 01:56:54.330 And for any unordered lists that are inside of the div, 01:56:54.330 --> 01:56:57.270 give those unordered lists a color of green. 01:56:57.270 --> 01:57:00.450 By nesting these CSS selectors inside of others, 01:57:00.450 --> 01:57:03.360 we've been able to get across the idea that I only 01:57:03.360 --> 01:57:06.780 want to style the paragraph if it is inside of a div. 01:57:06.780 --> 01:57:09.900 And this is just a little bit of a nicer, cleaner syntax 01:57:09.900 --> 01:57:14.470 for doing some of these more complex styling tasks that might come up. 01:57:14.470 --> 01:57:16.020 So what does this actually look like? 01:57:16.020 --> 01:57:20.190 If I like take this SCSS file and turn it into normal CSS, 01:57:20.190 --> 01:57:22.020 what is the result going to be? 01:57:22.020 --> 01:57:23.380 Well, let's take a look. 01:57:23.380 --> 01:57:27.150 We can try it out by let me go into my nesting folder 01:57:27.150 --> 01:57:29.040 where all these files are located. 01:57:29.040 --> 01:57:36.970 And if I run Sass nesting.scss, turn it into nesting.css, 01:57:36.970 --> 01:57:40.710 now let's open up nesting.css and see what it looks like. 01:57:40.710 --> 01:57:43.440 Here, it's turned into a take all of the divs, 01:57:43.440 --> 01:57:45.680 give them a font size of 18 pixels. 01:57:45.680 --> 01:57:49.650 And then, we're using the same descendant selector notation 01:57:49.650 --> 01:57:52.920 that we saw before, where all the paragraphs inside of divs 01:57:52.920 --> 01:57:56.130 should be colored blue, all the unordered lists inside of a div 01:57:56.130 --> 01:57:57.420 should be colored green. 01:57:57.420 --> 01:57:58.630 And this certainly works. 01:57:58.630 --> 01:58:01.380 And we could have just written this CSS from the beginning, 01:58:01.380 --> 01:58:05.730 but it can be a little bit cleaner, a little bit easier to read to use Sass 01:58:05.730 --> 01:58:08.930 in order to really say, paragraphs inside of divs 01:58:08.930 --> 01:58:12.760 should be structured this way, unordered lists are styled in some other way. 01:58:12.760 --> 01:58:15.600 And using this nothing approach just makes it often easier 01:58:15.600 --> 01:58:19.560 to take a look at this SCSS page and really understand 01:58:19.560 --> 01:58:23.390 how all of the different style code interacts with each other. 01:58:23.390 --> 01:58:28.590 So after all of this now, if I open up nesting.html, 01:58:28.590 --> 01:58:31.590 we might see something that looks a little something like this. 01:58:31.590 --> 01:58:35.310 The paragraph inside the div and the list inside of the div, those 01:58:35.310 --> 01:58:38.490 both get changes to the way that they've been styled. 01:58:38.490 --> 01:58:41.730 But unlike them, these paragraphs outside of the div 01:58:41.730 --> 01:58:43.860 and the list that is also outside of the div, 01:58:43.860 --> 01:58:47.290 those get styled a little bit differently. 01:58:47.290 --> 01:58:49.740 So two features now we've seen inside of Sass. 01:58:49.740 --> 01:58:52.310 We've first seen the ability to have variables 01:58:52.310 --> 01:58:54.060 to make sure we're not repeating ourselves 01:58:54.060 --> 01:58:55.740 in many places throughout the code. 01:58:55.740 --> 01:59:00.360 And now, we've seen the ability to nest CSS selectors inside of each other 01:59:00.360 --> 01:59:02.880 by taking advantage of Sass. 01:59:02.880 --> 01:59:05.340 And finally, we'll take a look at one last feature 01:59:05.340 --> 01:59:06.780 that Sass is going to give us. 01:59:06.780 --> 01:59:09.060 And that is something called inheritance. 01:59:09.060 --> 01:59:13.710 If we have certain CSS selectors that are related to other CSS selectors, 01:59:13.710 --> 01:59:16.890 but they're may be adding some additional information. 01:59:16.890 --> 01:59:20.350 And in this case, I'm actually going to show you the finished product first. 01:59:20.350 --> 01:59:26.100 So let's go into inheritance and let me open up inheritance.html. 01:59:26.100 --> 01:59:28.890 And here, you see I've tried to almost implement 01:59:28.890 --> 01:59:32.370 Bootstrap-style alert messages in HTML. 01:59:32.370 --> 01:59:35.280 I have a success message up at the top, a warning message, and then 01:59:35.280 --> 01:59:36.480 an error message. 01:59:36.480 --> 01:59:39.360 And each of these messages you'll notice are styled differently. 01:59:39.360 --> 01:59:41.490 In particular they're each a different color. 01:59:41.490 --> 01:59:44.010 But despite that, they share a lot in common. 01:59:44.010 --> 01:59:45.270 They share a common border. 01:59:45.270 --> 01:59:46.590 They share a common font. 01:59:46.590 --> 01:59:49.290 They share a common size and many other properties 01:59:49.290 --> 01:59:51.090 are all shared between these elements. 01:59:51.090 --> 01:59:54.840 There are just some things that are a little bit different about them. 01:59:54.840 --> 01:59:57.300 I could have written three different CSS selectors 01:59:57.300 --> 02:00:01.030 to deal with all of these cases, but there might be some repetition there. 02:00:01.030 --> 02:00:03.960 So here's what I can do by taking advantage of the features 02:00:03.960 --> 02:00:05.610 that Sass gives me. 02:00:05.610 --> 02:00:10.560 Let me go ahead and look at inheritance.scss to look at the code 02:00:10.560 --> 02:00:12.530 for doing this. 02:00:12.530 --> 02:00:15.650 And it looks a little bit cryptic at first. 02:00:15.650 --> 02:00:17.360 But here's what I've defined. 02:00:17.360 --> 02:00:21.800 I've here defined using a percent sign that this is what a generic message is 02:00:21.800 --> 02:00:26.210 going to be, something that I can extend later to add additional information to. 02:00:26.210 --> 02:00:29.390 All of the messages, whether they be success messages or danger messages 02:00:29.390 --> 02:00:32.200 or warning messages, they're all going to have the same font. 02:00:32.200 --> 02:00:33.950 They're all going to have the same border. 02:00:33.950 --> 02:00:36.530 They're all going to have the same padding and margin, spacing 02:00:36.530 --> 02:00:38.090 around and outside of it. 02:00:38.090 --> 02:00:42.950 But each of the specific messages are going to be slightly different. 02:00:42.950 --> 02:00:44.040 How are they different? 02:00:44.040 --> 02:00:45.950 Well, let's take a look down here. 02:00:45.950 --> 02:00:52.070 Anything with a class of success, I'm going to say extends this message. 02:00:52.070 --> 02:00:55.490 And by extends this message what I mean is that anything with a class 02:00:55.490 --> 02:01:00.260 of success is going to inherit all of these CSS properties-- the font, 02:01:00.260 --> 02:01:02.660 the border, the padding in the margin-- 02:01:02.660 --> 02:01:04.790 but it's going to add additional information to it. 02:01:04.790 --> 02:01:07.130 In particular, we're going to add a color. 02:01:07.130 --> 02:01:09.020 We're going to say that for success messages, 02:01:09.020 --> 02:01:11.730 the background color is going to be green. 02:01:11.730 --> 02:01:14.510 I've extended the basics of what a message is, but said 02:01:14.510 --> 02:01:18.110 that this message in particular has some additional style that we're 02:01:18.110 --> 02:01:20.330 going to assign to it as well. 02:01:20.330 --> 02:01:23.000 And the other two messages behave in very similar ways. 02:01:23.000 --> 02:01:26.180 My warning message extends the message, but instead 02:01:26.180 --> 02:01:28.400 says the background color should be orange. 02:01:28.400 --> 02:01:31.220 And finally, the error message also extends the message. 02:01:31.220 --> 02:01:35.730 But this time, it gives us the background color of red instead. 02:01:35.730 --> 02:01:38.030 So now, when you compile this all together 02:01:38.030 --> 02:01:42.330 into inheritance.css, which I compiled it in advance, 02:01:42.330 --> 02:01:44.510 this is what this is ultimately going to look like. 02:01:44.510 --> 02:01:46.850 It translates what I've written into saying, 02:01:46.850 --> 02:01:49.670 all right, success and warning and errors 02:01:49.670 --> 02:01:51.860 should have all of these properties. 02:01:51.860 --> 02:01:54.220 But success should also have this background color, 02:01:54.220 --> 02:01:55.970 warning should have this background color, 02:01:55.970 --> 02:01:57.930 error should have this background color. 02:01:57.930 --> 02:02:00.110 So again, we could have written this CSS. 02:02:00.110 --> 02:02:02.870 There is nothing that Sass does that we couldn't 02:02:02.870 --> 02:02:05.450 have written ourselves using CSS. 02:02:05.450 --> 02:02:09.120 Sass we'll just make it a little bit easier to do many of the same thing. 02:02:09.120 --> 02:02:11.690 So we can write things in a little bit of a nicer syntax 02:02:11.690 --> 02:02:14.840 by saying the success message inherits from the message 02:02:14.840 --> 02:02:16.440 but adds a background color. 02:02:16.440 --> 02:02:19.800 And likewise, the warning and error messages do the same thing, 02:02:19.800 --> 02:02:23.600 but in a simpler syntax and a bit of a nicer syntax, such that later 02:02:23.600 --> 02:02:29.600 we can let the computer take the Sass code and compile it into CSS instead. 02:02:29.600 --> 02:02:32.060 And so those now are some of the fundamentals 02:02:32.060 --> 02:02:36.050 of what we've seen in building web programs using HTML and CSS. 02:02:36.050 --> 02:02:39.950 We've seen how we can use HTML to describe the structure of our web page, 02:02:39.950 --> 02:02:43.520 deciding what's going to show up where on the page, and then we looked at CSS 02:02:43.520 --> 02:02:47.570 and how CSS can then be used to style our web page in various different ways, 02:02:47.570 --> 02:02:50.060 adding custom styling like colors and layouts, 02:02:50.060 --> 02:02:53.090 but also thinking about things like responsive design, 02:02:53.090 --> 02:02:55.610 like what happens on a mobile screen or on a tablet, 02:02:55.610 --> 02:02:59.280 and making sure that our web pages look good on those screens too. 02:02:59.280 --> 02:03:02.710 And then finally, we took a look at Sass, an extension to CSS, 02:03:02.710 --> 02:03:04.460 that adds a number of additional features, 02:03:04.460 --> 02:03:07.600 features like variables and nesting and inheritance, 02:03:07.600 --> 02:03:10.370 that make it even easier for us to be able to write style 02:03:10.370 --> 02:03:12.460 that we can apply to our web pages. 02:03:12.460 --> 02:03:14.420 From there, we're going to be transitioning now 02:03:14.420 --> 02:03:18.560 to looking at how we can use HTML and CSS in larger web applications 02:03:18.560 --> 02:03:22.670 as we begin to incorporate other tools, tools like Python and JavaScript 02:03:22.670 --> 02:03:24.920 and other languages and frameworks altogether. 02:03:24.920 --> 02:03:28.010 So this is Web Programming with Python and JavaScript. 02:03:28.010 --> 02:03:30.100 We'll see you next time.