1 00:00:00,000 --> 00:00:17,000 [MUSIC] 2 00:00:17,310 --> 00:00:19,730 BRIAN YU: All right, welcome, everyone, to Web Programming 3 00:00:19,730 --> 00:00:21,110 with Python and JavaScript. 4 00:00:21,110 --> 00:00:22,280 My name is Brian Yu. 5 00:00:22,280 --> 00:00:25,030 And in this course, we'll dive into the design and implementation 6 00:00:25,030 --> 00:00:26,510 of web applications. 7 00:00:26,510 --> 00:00:29,450 In lectures, we'll have an opportunity to discuss and explore 8 00:00:29,450 --> 00:00:31,700 many of the ideas and tools and languages 9 00:00:31,700 --> 00:00:33,860 that are central to modern web programming. 10 00:00:33,860 --> 00:00:37,700 And through hands-on projects, you'll have an opportunity to take those ideas 11 00:00:37,700 --> 00:00:41,270 and put them into practice, designing multiple web applications of your own, 12 00:00:41,270 --> 00:00:44,300 culminating in a final project of your own choosing. 13 00:00:44,300 --> 00:00:46,430 Throughout the term, we'll cover a number of topics 14 00:00:46,430 --> 00:00:48,740 in this world of web programming, beginning 15 00:00:48,740 --> 00:00:52,280 with HTML5 and CSS3, two of the languages 16 00:00:52,280 --> 00:00:55,070 that are central to the understanding of web pages. 17 00:00:55,070 --> 00:00:58,850 HTML is a language we'll use to describe the structure of a web page. 18 00:00:58,850 --> 00:01:01,160 And CSS is the language we'll use to describe 19 00:01:01,160 --> 00:01:03,770 the style of a web page, the colors and the fonts 20 00:01:03,770 --> 00:01:06,470 and the layouts and the spacing that make the web page look 21 00:01:06,470 --> 00:01:08,870 exactly the way we want it to look. 22 00:01:08,870 --> 00:01:11,210 After that, we'll turn our attention to Git, 23 00:01:11,210 --> 00:01:13,850 a tool not specific to web programming per se, 24 00:01:13,850 --> 00:01:17,120 but that we can use in order to version control our programs, 25 00:01:17,120 --> 00:01:20,030 to keep track of the different changes we make to our web programs, 26 00:01:20,030 --> 00:01:23,030 and to allow us to be able to work on various different parts of the web 27 00:01:23,030 --> 00:01:27,080 application at the same time before merging those pieces back together. 28 00:01:27,080 --> 00:01:30,080 After that, we'll take a look at Python, one of the first main languages 29 00:01:30,080 --> 00:01:32,280 that we're going to be exploring in the course, which 30 00:01:32,280 --> 00:01:35,780 is the language that we are going to use in order to build our web applications. 31 00:01:35,780 --> 00:01:39,440 Specifically, we'll use Python using a framework called Django. 32 00:01:39,440 --> 00:01:42,590 Django is a web programming framework written in the Python programming 33 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 34 00:01:46,790 --> 00:01:51,020 applications Django in particular makes it easy to design web applications 35 00:01:51,020 --> 00:01:52,560 that interact with data. 36 00:01:52,560 --> 00:01:55,400 So after that, we'll turn our attention to SQL, a language 37 00:01:55,400 --> 00:01:58,790 that we can use to interact with databases, in particular looking 38 00:01:58,790 --> 00:02:02,900 at how Django allows us to use models and migrations to interact with data 39 00:02:02,900 --> 00:02:06,840 and allow users to interact with data all the more easily. 40 00:02:06,840 --> 00:02:09,680 Next, we'll turn our attention to the second of the main programming 41 00:02:09,680 --> 00:02:12,830 languages that we'll be exploring in this class, JavaScript, 42 00:02:12,830 --> 00:02:16,310 and looking at how we can use JavaScript to run in users' web browsers 43 00:02:16,310 --> 00:02:19,250 to make web pages just a little bit more interactive. 44 00:02:19,250 --> 00:02:22,910 In particular, we'll use JavaScript in the context of user interfaces, 45 00:02:22,910 --> 00:02:25,220 looking at modern user interfaces and exploring 46 00:02:25,220 --> 00:02:27,680 how it is that those interfaces work and how 47 00:02:27,680 --> 00:02:31,280 we can develop those user interfaces with a combination of Python 48 00:02:31,280 --> 00:02:32,930 and JavaScript. 49 00:02:32,930 --> 00:02:35,030 Next, we'll turn our attention to testing 50 00:02:35,030 --> 00:02:39,680 and CI/CD, or Continuous Integration and Continuous Delivery, 51 00:02:39,680 --> 00:02:43,070 which are tools that we can use and software best practices to make sure 52 00:02:43,070 --> 00:02:46,190 that we're able to design and develop code more efficiently. 53 00:02:46,190 --> 00:02:49,950 And testing in particular makes sure that as we make changes to our code, 54 00:02:49,950 --> 00:02:52,590 we're not breaking existing parts of our web application 55 00:02:52,590 --> 00:02:54,680 by making sure that we have a whole suite of tests 56 00:02:54,680 --> 00:02:57,680 that we can use to ensure that our web application is always 57 00:02:57,680 --> 00:02:59,630 behaving as it should. 58 00:02:59,630 --> 00:03:03,100 And finally, we'll turn our attention to scalability and security 59 00:03:03,100 --> 00:03:04,940 on the internet, thinking about what happens 60 00:03:04,940 --> 00:03:06,740 as our web application grows larger. 61 00:03:06,740 --> 00:03:10,230 As more and more different users start to use our web application, 62 00:03:10,230 --> 00:03:12,080 how do we load balance between those people? 63 00:03:12,080 --> 00:03:15,500 And what do we need to change about our database to make sure lots of users 64 00:03:15,500 --> 00:03:18,520 are able to connect to our web application at the same time? 65 00:03:18,520 --> 00:03:20,570 Moreover, we'll look at the security implications 66 00:03:20,570 --> 00:03:22,460 behind designing our web applications. 67 00:03:22,460 --> 00:03:25,140 What might an adversary do if we're not careful? 68 00:03:25,140 --> 00:03:28,160 And how should we proactively be designing our web application 69 00:03:28,160 --> 00:03:30,560 to make sure that it's secure? 70 00:03:30,560 --> 00:03:34,250 But today, we begin our conversation with HTML and CSS, 71 00:03:34,250 --> 00:03:37,580 two of the languages that are foundational to understanding web pages 72 00:03:37,580 --> 00:03:41,000 and how web browsers are able to display those web pages. 73 00:03:41,000 --> 00:03:44,840 And we'll start with each HTML, or HyperText Markup Language, 74 00:03:44,840 --> 00:03:48,320 which is a language that we can use to describe the structure of the web page, 75 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 76 00:03:52,220 --> 00:03:55,730 that the user ultimately sees and interacts with. 77 00:03:55,730 --> 00:03:59,240 Our very first HTML page is going to look a little something like this. 78 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 79 00:04:03,110 --> 00:04:07,220 or Chrome or Firefox, is then able to look at, parse, understand, 80 00:04:07,220 --> 00:04:09,330 and display to the user. 81 00:04:09,330 --> 00:04:11,570 So let's take a look at this page one line at a time 82 00:04:11,570 --> 00:04:13,670 and get an understanding for how it works. 83 00:04:13,670 --> 00:04:16,610 Even if you don't quite understand all the nuances of the syntax, 84 00:04:16,610 --> 00:04:19,190 there are probably a couple of things that stand out to you. 85 00:04:19,190 --> 00:04:21,350 You might notice the word title, which probably 86 00:04:21,350 --> 00:04:24,650 reflects the title of the web page, for example, which in this case 87 00:04:24,650 --> 00:04:26,540 appears to be the word hello. 88 00:04:26,540 --> 00:04:30,110 And then down further below, we see that we have the body of the web page 89 00:04:30,110 --> 00:04:33,060 that seems to contain the words hello world. 90 00:04:33,060 --> 00:04:35,450 So what is this web page actually going to look like? 91 00:04:35,450 --> 00:04:37,560 Well, let's take a look at it. 92 00:04:37,560 --> 00:04:39,410 We'll go ahead and open up a text editor. 93 00:04:39,410 --> 00:04:41,140 You can use any text editor you want. 94 00:04:41,140 --> 00:04:44,600 But for this course, I'm going to use Microsoft's Visual Studio Code. 95 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. 96 00:04:50,690 --> 00:04:54,710 Inside of hello.html I'm going to write the same HTML that we just 97 00:04:54,710 --> 00:04:55,610 saw a moment ago. 98 00:04:55,610 --> 00:04:58,340 And we'll explain each of these lines in due time. 99 00:04:58,340 --> 00:05:04,040 But recall that we had a title of the page that said something like hello 100 00:05:04,040 --> 00:05:08,060 and then a body of the page where we said something like hello world, 101 00:05:08,060 --> 00:05:09,570 for example. 102 00:05:09,570 --> 00:05:12,160 So this is our very first HTML page. 103 00:05:12,160 --> 00:05:16,370 And if I go ahead and open that HTML page as my opening hello.html HTML, 104 00:05:16,370 --> 00:05:20,990 for example, inside of a web browser, what I'll see is something like this. 105 00:05:20,990 --> 00:05:24,330 In the body of the page, I see the words hello world. 106 00:05:24,330 --> 00:05:27,020 And if you notice up here at the top of my web browser, 107 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 108 00:05:31,190 --> 00:05:33,110 is just the word hello. 109 00:05:33,110 --> 00:05:36,020 So this is our very first web program that we've 110 00:05:36,020 --> 00:05:38,270 been able to develop just using HTML. 111 00:05:38,270 --> 00:05:42,860 And now let's explore in more detail how exactly this program works. 112 00:05:42,860 --> 00:05:46,010 So here again was the web page that we were just looking at. 113 00:05:46,010 --> 00:05:49,430 And this very first line here, DOCTYPE html 114 00:05:49,430 --> 00:05:52,340 is what we might call a DOCTYPE declaration. 115 00:05:52,340 --> 00:05:55,910 It's a way of telling the web browser what version of HTML 116 00:05:55,910 --> 00:05:59,000 we're using in this particular web page, because depending 117 00:05:59,000 --> 00:06:01,200 on the version of HTML, the web browser might 118 00:06:01,200 --> 00:06:03,830 want to display different information or it might need to parse 119 00:06:03,830 --> 00:06:05,660 the page a little bit differently. 120 00:06:05,660 --> 00:06:08,420 Each version of HTML has had a slightly different way 121 00:06:08,420 --> 00:06:09,890 of indicating that version. 122 00:06:09,890 --> 00:06:13,040 But this line here, DOCTYPE html is our way 123 00:06:13,040 --> 00:06:15,890 of saying that this HTML page is written using 124 00:06:15,890 --> 00:06:19,760 HTML5, the latest version of HTML. 125 00:06:19,760 --> 00:06:25,910 After that our HTML page is structured as a series of nested HTML elements, 126 00:06:25,910 --> 00:06:29,370 where an HTML element describes something on the page. 127 00:06:29,370 --> 00:06:33,080 And we might have elements that are inside of other elements. 128 00:06:33,080 --> 00:06:35,300 Each of those elements is indicated by what 129 00:06:35,300 --> 00:06:39,530 we're going to call an HTML tag, enclosed using those angled brackets. 130 00:06:39,530 --> 00:06:43,340 And right here, we'll see the beginning of the HTML tag, which 131 00:06:43,340 --> 00:06:47,660 means that this is the beginning of the HTML content of our page. 132 00:06:47,660 --> 00:06:51,170 Down below this slash HTML means that this 133 00:06:51,170 --> 00:06:54,050 is the end of the HTML content of the page. 134 00:06:54,050 --> 00:06:57,570 And in between is the actual HTML content of the page, 135 00:06:57,570 --> 00:07:00,930 which might include other HTML elements. 136 00:07:00,930 --> 00:07:03,600 You might also notice that in this HTML tag 137 00:07:03,600 --> 00:07:06,990 we've specified what we're going to call an HTML attribute, 138 00:07:06,990 --> 00:07:10,440 some additional information that we're giving about this tag. 139 00:07:10,440 --> 00:07:14,250 In particular, we're giving it a lang, or language, attribute, 140 00:07:14,250 --> 00:07:17,550 which is equal to en, or English. 141 00:07:17,550 --> 00:07:21,420 This just tells the web browser or anyone looking at the HTML of this page 142 00:07:21,420 --> 00:07:24,520 that this page is written in a language, and the language it's written in 143 00:07:24,520 --> 00:07:25,590 is English. 144 00:07:25,590 --> 00:07:27,810 And this is helpful for search engines, for example. 145 00:07:27,810 --> 00:07:30,000 When they're looking through many different web pages trying 146 00:07:30,000 --> 00:07:32,220 to figure out what language each web page is in we 147 00:07:32,220 --> 00:07:35,370 can just tell the search engine or anyone else who's looking at the page 148 00:07:35,370 --> 00:07:38,560 that this page is written in English. 149 00:07:38,560 --> 00:07:41,120 Now, inside of the HTML body of the page, 150 00:07:41,120 --> 00:07:43,030 we have a number of different elements that 151 00:07:43,030 --> 00:07:45,850 are going to describe what we want on this page, 152 00:07:45,850 --> 00:07:49,840 starting with the head section of the web page, which describes stuff 153 00:07:49,840 --> 00:07:52,450 not in the main body of the web page, the part of the web page 154 00:07:52,450 --> 00:07:55,330 the user sees, but other information about the web 155 00:07:55,330 --> 00:07:59,120 page that's going to be helpful or useful for web browsers to know about. 156 00:07:59,120 --> 00:08:02,020 For example, one important thing that a web browser needs to know 157 00:08:02,020 --> 00:08:05,050 is, what is the title of the web page? 158 00:08:05,050 --> 00:08:08,860 And here, we see a title tag, again, indicated by the word title 159 00:08:08,860 --> 00:08:12,460 in those angled brackets, followed by the end of the title tag, 160 00:08:12,460 --> 00:08:15,130 indicated by a slash before the title. 161 00:08:15,130 --> 00:08:18,280 And in between the two title tags is the word hello, 162 00:08:18,280 --> 00:08:22,020 which means the title of this page should be the word hello. 163 00:08:22,020 --> 00:08:24,930 And that's all the information we'll have in the head of the page. 164 00:08:24,930 --> 00:08:27,050 We'll add more information there later, but for now 165 00:08:27,050 --> 00:08:29,910 all the web page needs to know is that it has a title 166 00:08:29,910 --> 00:08:32,440 and the title is the word hello. 167 00:08:32,440 --> 00:08:36,430 Next up comes the body of the page, again, indicated by a body tag 168 00:08:36,430 --> 00:08:39,040 and that ends with a tag with slash body, 169 00:08:39,040 --> 00:08:41,470 meaning this is the end of the body of the page. 170 00:08:41,470 --> 00:08:44,380 And the body of the page, again, is just the visible part of the page 171 00:08:44,380 --> 00:08:45,940 that the user can see. 172 00:08:45,940 --> 00:08:48,370 And what do we want inside the body of the page? 173 00:08:48,370 --> 00:08:50,840 For now, we just want the text, hello world. 174 00:08:50,840 --> 00:08:53,140 And that's the information that's going to be displayed 175 00:08:53,140 --> 00:08:55,520 when someone visits this web page. 176 00:08:55,520 --> 00:08:58,170 And so that's all there really is to this HTML page. 177 00:08:58,170 --> 00:09:01,780 We specified in the header that there's a title of the page called hello. 178 00:09:01,780 --> 00:09:06,320 And inside the body, we're saying the page should say the words hello world. 179 00:09:06,320 --> 00:09:08,620 And if you want to visually think about the way 180 00:09:08,620 --> 00:09:11,080 that all these HTML elements are structured, 181 00:09:11,080 --> 00:09:13,960 it can sometimes be helpful to think about an HTML page 182 00:09:13,960 --> 00:09:16,240 in terms of a tree-like structure that we 183 00:09:16,240 --> 00:09:19,360 call the document object model, or DOM. 184 00:09:19,360 --> 00:09:23,050 And so, here, for example, is what the DOM for this web page 185 00:09:23,050 --> 00:09:24,340 might actually look like. 186 00:09:24,340 --> 00:09:27,730 Here on the left is the HTML content that we just saw a moment ago. 187 00:09:27,730 --> 00:09:31,570 And over here on the right is the DOM, the document object model, 188 00:09:31,570 --> 00:09:35,890 the tree-like structure that describes how all of these HTML elements 189 00:09:35,890 --> 00:09:37,490 are related to each other. 190 00:09:37,490 --> 00:09:39,970 So we start up here with the HTML element. 191 00:09:39,970 --> 00:09:44,020 And this parent element, so to speak, has two child elements 192 00:09:44,020 --> 00:09:47,080 within it, a head element and a body element. 193 00:09:47,080 --> 00:09:49,720 As we can see here, we're inside of HTML. 194 00:09:49,720 --> 00:09:52,150 We have a head section and a body section. 195 00:09:52,150 --> 00:09:55,690 And the indentation here that we're including in the HTML text, 196 00:09:55,690 --> 00:09:57,220 it's not strictly necessary. 197 00:09:57,220 --> 00:09:59,860 The web browser doesn't care what the indentation is. 198 00:09:59,860 --> 00:10:02,680 But it can be helpful for someone who's reading the page just 199 00:10:02,680 --> 00:10:06,580 to see the indentation to understand visually that the head is inside 200 00:10:06,580 --> 00:10:11,440 of the HTML element and the body is inside of the HTML element too. 201 00:10:11,440 --> 00:10:14,020 So inside of the head element, we have a title element. 202 00:10:14,020 --> 00:10:17,800 And inside of the title element is just the text, the word hello. 203 00:10:17,800 --> 00:10:19,940 And likewise, inside of the body element, 204 00:10:19,940 --> 00:10:23,050 we also have some text, the text hello world. 205 00:10:23,050 --> 00:10:27,310 So thinking about HTML and HTML documents in terms of this structure 206 00:10:27,310 --> 00:10:31,360 can be helpful for understanding which HTML elements are inside of which 207 00:10:31,360 --> 00:10:32,890 other HTML elements. 208 00:10:32,890 --> 00:10:35,890 And that's going to make it easier for us to reason about these pages 209 00:10:35,890 --> 00:10:36,700 later on. 210 00:10:36,700 --> 00:10:39,970 And especially as we later transition into the world of JavaScript, 211 00:10:39,970 --> 00:10:42,340 JavaScript is going to make it all the more powerful 212 00:10:42,340 --> 00:10:46,120 and give us the ability to actually modify parts of this DOM as well. 213 00:10:46,120 --> 00:10:49,040 But we'll certainly get to that in due time. 214 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 215 00:10:53,320 --> 00:10:56,650 elements that we might be interacting with in our web page. 216 00:10:56,650 --> 00:11:00,460 And we'll start by thinking about HTML headings, so big banners 217 00:11:00,460 --> 00:11:02,800 at the top of the page, for example, some headline that 218 00:11:02,800 --> 00:11:05,300 describes what a page is about. 219 00:11:05,300 --> 00:11:08,350 So I'll go ahead into my text editor and create a new file 220 00:11:08,350 --> 00:11:11,540 that I'll call headings.html. 221 00:11:11,540 --> 00:11:14,590 And the structure of this page is going to be pretty similar to the pages 222 00:11:14,590 --> 00:11:16,220 that we've seen before already. 223 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. 224 00:11:21,390 --> 00:11:22,810 I'll change the title of the page. 225 00:11:22,810 --> 00:11:26,600 Instead of hello, we'll go ahead and call it headings. 226 00:11:26,600 --> 00:11:31,150 But inside the body of this page now, I want something a little bit different. 227 00:11:31,150 --> 00:11:34,950 I'm going to, inside the body the page, use an h1 element 228 00:11:34,950 --> 00:11:40,150 and say this is a heading, for example. 229 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, 230 00:11:44,700 --> 00:11:47,590 like for the title of the page, for example. 231 00:11:47,590 --> 00:11:51,210 So if I open up headings.html. 232 00:11:51,210 --> 00:11:53,720 I might see something that looks like this, 233 00:11:53,720 --> 00:11:57,330 a big heading at the top of my page that says, this is a heading. 234 00:11:57,330 --> 00:12:01,560 h1, where the h stands for heading and the 1 stands for the largest 235 00:12:01,560 --> 00:12:02,520 possible heading. 236 00:12:02,520 --> 00:12:05,190 And in fact, HTML gives us a number of different tags 237 00:12:05,190 --> 00:12:08,970 that we can use in order to create headings of various sizes. 238 00:12:08,970 --> 00:12:13,890 So, for example, I could also say h2 inside of which I say, 239 00:12:13,890 --> 00:12:16,630 this is a smaller heading. 240 00:12:16,630 --> 00:12:20,940 If h1 is the largest heading, h2 is the second largest heading. 241 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. 242 00:12:24,720 --> 00:12:26,190 This is the big heading. 243 00:12:26,190 --> 00:12:30,150 And then beneath that, I see this is a smaller heading, the h2. 244 00:12:30,150 --> 00:12:33,480 And it turns out there's also h3, h4, h5, all the way 245 00:12:33,480 --> 00:12:38,020 down to h6, which is the smallest heading, 246 00:12:38,020 --> 00:12:41,760 such that if I load this page now, I have a big heading, a smaller one, 247 00:12:41,760 --> 00:12:43,260 and then here's the smallest. 248 00:12:43,260 --> 00:12:46,620 So we can often use these h1, h2, h3 tags 249 00:12:46,620 --> 00:12:49,230 just for visually organizing text inside of a page. 250 00:12:49,230 --> 00:12:52,350 If I want the title of the page, but also I 251 00:12:52,350 --> 00:12:56,130 want titles for each of the various different sections and subsections 252 00:12:56,130 --> 00:13:00,340 that might be contained within that page as well. 253 00:13:00,340 --> 00:13:01,380 So those are headings. 254 00:13:01,380 --> 00:13:03,360 And now, let's also take a look at some other elements 255 00:13:03,360 --> 00:13:04,440 that we might want to add. 256 00:13:04,440 --> 00:13:07,230 On web pages, we see not just titles and not just text, 257 00:13:07,230 --> 00:13:09,540 but we might also see lists, for example. 258 00:13:09,540 --> 00:13:12,340 Like if you've ever used a to do list program on a web page, 259 00:13:12,340 --> 00:13:14,970 for example, you might see a list of things that you need to do 260 00:13:14,970 --> 00:13:18,270 or other web pages might display lists of information. 261 00:13:18,270 --> 00:13:21,990 And it turns out that HTML has two basic types of lists. 262 00:13:21,990 --> 00:13:25,020 We have ordered lists for things that are in a particular order, 263 00:13:25,020 --> 00:13:28,210 like item number 1, item number 2, item number 3. 264 00:13:28,210 --> 00:13:31,600 And we have unordered lists for lists that don't have any particular order. 265 00:13:31,600 --> 00:13:34,530 So just bullet point, bullet point, bullet point, for example. 266 00:13:34,530 --> 00:13:36,900 And both are quite easy to use. 267 00:13:36,900 --> 00:13:39,330 I'll go ahead and create a new file. 268 00:13:39,330 --> 00:13:42,270 And we'll call this lists.html. 269 00:13:42,270 --> 00:13:46,780 And again, in list.html, I'll copy the same structure from hello.html. 270 00:13:46,780 --> 00:13:51,240 We're again going to have DOCTYPE html just to indicate the version of HTML. 271 00:13:51,240 --> 00:13:52,590 Most of the heading is the same. 272 00:13:52,590 --> 00:13:55,890 I'm just going to change the title from Hello to Lists. 273 00:13:55,890 --> 00:13:58,170 And then we're going to replace the body of this page 274 00:13:58,170 --> 00:14:01,200 to show some different information here. 275 00:14:01,200 --> 00:14:05,010 So let me first show what an ordered list might look like, 276 00:14:05,010 --> 00:14:07,410 something that has numbers, 1, 2, 3. 277 00:14:07,410 --> 00:14:13,200 An ordered as an HTML tag is just ol, ol for ordered list. 278 00:14:13,200 --> 00:14:16,260 So I can add a tag that says ol. 279 00:14:16,260 --> 00:14:19,980 And now inside of my ol element, my ordered list element, 280 00:14:19,980 --> 00:14:23,250 I need a new element for every list item. 281 00:14:23,250 --> 00:14:26,160 List item we're going to abbreviate to just li. 282 00:14:26,160 --> 00:14:28,650 So the li tag in HTML is what we're going 283 00:14:28,650 --> 00:14:32,550 to use to designate an item inside of an HTML list. 284 00:14:32,550 --> 00:14:37,080 So here, for example, I could say li and then first item. 285 00:14:37,080 --> 00:14:40,630 Then I could do the same thing, li second item 286 00:14:40,630 --> 00:14:43,950 and then again li third item. 287 00:14:43,950 --> 00:14:46,310 So what I have here are some elements and then elements 288 00:14:46,310 --> 00:14:48,350 nested within other elements. 289 00:14:48,350 --> 00:14:50,720 I have an ordered list element inside of which 290 00:14:50,720 --> 00:14:54,170 are three other HTML elements, three list items that 291 00:14:54,170 --> 00:14:58,250 are each indicating each of the individual items that are inside 292 00:14:58,250 --> 00:15:00,700 of my HTML list. 293 00:15:00,700 --> 00:15:05,350 I can now open this up by opening lists.html. 294 00:15:05,350 --> 00:15:06,790 And this is what I see. 295 00:15:06,790 --> 00:15:09,280 I see an ordered list, where I have item number 1, 296 00:15:09,280 --> 00:15:11,980 first item, second item, third item. 297 00:15:11,980 --> 00:15:15,040 Note that I didn't actually need to in the HTML anywhere 298 00:15:15,040 --> 00:15:18,010 specify the number 1, the number 2, and the number 3. 299 00:15:18,010 --> 00:15:20,710 When my web browser reads this should be an order list, 300 00:15:20,710 --> 00:15:24,220 my web browser, Chrome in this case, just adds those numbers in for me 301 00:15:24,220 --> 00:15:26,380 because it knows what an ordered list means 302 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 303 00:15:30,340 --> 00:15:33,580 that I intend to the user. 304 00:15:33,580 --> 00:15:37,390 Now, in addition to ordered list that all have numbers, 1, 2, 3, 305 00:15:37,390 --> 00:15:39,670 we also have unordered lists that are just bullet 306 00:15:39,670 --> 00:15:41,680 points, bullet points of information. 307 00:15:41,680 --> 00:15:46,000 So I could, up above, add some more content to this HTML page. 308 00:15:46,000 --> 00:15:49,820 I can say here is an unordered list. 309 00:15:49,820 --> 00:15:52,180 And just as an ordered list we represented 310 00:15:52,180 --> 00:15:56,980 using the ol tag in HTML, ol standing for ordered list, 311 00:15:56,980 --> 00:16:01,090 likewise we can use the ul tag in HTML to create 312 00:16:01,090 --> 00:16:04,330 an unordered list, u for unordered. 313 00:16:04,330 --> 00:16:06,120 So here, we're going to add a ul tag. 314 00:16:06,120 --> 00:16:08,080 And again, my text editor here is automatically 315 00:16:08,080 --> 00:16:10,600 adding the closing tag here, this slash ul, 316 00:16:10,600 --> 00:16:12,490 meaning the end of the unordered list. 317 00:16:12,490 --> 00:16:15,460 And many text editors will do this now just so you, the programmer, 318 00:16:15,460 --> 00:16:17,740 don't forget to add that. 319 00:16:17,740 --> 00:16:19,720 And now inside of this unordered list, we're 320 00:16:19,720 --> 00:16:21,700 again going to have some list items. 321 00:16:21,700 --> 00:16:25,250 Also, using the li tag, here is one item. 322 00:16:25,250 --> 00:16:27,590 And here is another item. 323 00:16:27,590 --> 00:16:31,750 And here is yet another item. 324 00:16:31,750 --> 00:16:35,140 If I go ahead and refresh the page now, I'm still on list.html, 325 00:16:35,140 --> 00:16:37,390 I now see that on top of my ordered list, 326 00:16:37,390 --> 00:16:40,450 I have an unordered list, where each item instead of being numbered 327 00:16:40,450 --> 00:16:44,440 1, 2, 3, is instead labeled with just bullet point, bullet point, bullet 328 00:16:44,440 --> 00:16:47,800 point, where each of these bullet points and each of these numbered items 329 00:16:47,800 --> 00:16:51,450 is a list item element, or an li. 330 00:16:51,450 --> 00:16:53,290 So hopefully now we can see that as we start 331 00:16:53,290 --> 00:16:58,150 to explore these various different HTML tags and nesting HTML tags inside 332 00:16:58,150 --> 00:17:01,570 of one another, we're able to create more and more interesting 333 00:17:01,570 --> 00:17:03,950 web pages as a result. 334 00:17:03,950 --> 00:17:06,590 So let's explore now what other types of web pages 335 00:17:06,590 --> 00:17:10,060 we can create using other types of HTML elements. 336 00:17:10,060 --> 00:17:12,430 In addition to lists, one thing you might imagine 337 00:17:12,430 --> 00:17:14,350 is that one of the important things on the web 338 00:17:14,350 --> 00:17:17,780 is not just displaying text, but also displaying other types of media, 339 00:17:17,780 --> 00:17:19,250 like images, for example. 340 00:17:19,250 --> 00:17:21,780 So how might we go about doing that? 341 00:17:21,780 --> 00:17:23,300 Well, I can, for example-- 342 00:17:23,300 --> 00:17:26,240 let's go back into my text editor. 343 00:17:26,240 --> 00:17:28,360 Let me create a new file that I'm going to call 344 00:17:28,360 --> 00:17:33,710 image.html, which is going to contain some code for displaying some images. 345 00:17:33,710 --> 00:17:37,950 I'll go ahead and go into hello.html and copy this text into the page, 346 00:17:37,950 --> 00:17:40,050 again, change the title to Image. 347 00:17:40,050 --> 00:17:45,340 And now, inside of the body, I'm going to add a new tag called image. 348 00:17:45,340 --> 00:17:48,310 And the image tag has a couple of required attributes. 349 00:17:48,310 --> 00:17:51,110 Remember that attributes are what we saw before things, like adding 350 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 351 00:17:56,000 --> 00:17:58,340 written in English, for example. 352 00:17:58,340 --> 00:18:02,930 And the image tag has a couple of required attributes that I need to add. 353 00:18:02,930 --> 00:18:05,720 In particular, when I display an image on the page, 354 00:18:05,720 --> 00:18:09,910 I need to specify what image I actually want displayed, for example. 355 00:18:09,910 --> 00:18:14,710 So I might specify image src, short for source, 356 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. 357 00:18:19,910 --> 00:18:23,780 And it just so happens that inside of my folder where I have image.html, 358 00:18:23,780 --> 00:18:26,740 I have an image called cat.jpeg. 359 00:18:26,740 --> 00:18:30,980 So I'm just going to specify cat.jpeg as the file name of the image 360 00:18:30,980 --> 00:18:33,040 that I want to display. 361 00:18:33,040 --> 00:18:36,980 And it turns out that images also have a second required attribute. 362 00:18:36,980 --> 00:18:41,390 In addition to the file name or the link to whatever image I want to display, 363 00:18:41,390 --> 00:18:46,290 I also need to provide some alternative text, a text-based representation 364 00:18:46,290 --> 00:18:48,920 of what you're going to see on the image because in some cases, 365 00:18:48,920 --> 00:18:52,130 some web browser might not be able to render the image correctly. 366 00:18:52,130 --> 00:18:54,680 You might imagine if there's some error rendering the image, 367 00:18:54,680 --> 00:18:56,590 or if someone's on a slow internet connection, 368 00:18:56,590 --> 00:18:59,340 or if someone's using a screen reader and therefore can't actually 369 00:18:59,340 --> 00:19:00,050 see the image. 370 00:19:00,050 --> 00:19:03,990 We want some text-based representation of that image as well. 371 00:19:03,990 --> 00:19:07,220 And so I'll provide some Alt text, some alternative text, that 372 00:19:07,220 --> 00:19:10,010 can be used to substitute the image in case for some reason 373 00:19:10,010 --> 00:19:11,570 we can't display the image. 374 00:19:11,570 --> 00:19:13,970 And the Alt text that I'll use in this case 375 00:19:13,970 --> 00:19:17,420 is just going to be the word cat, for example. 376 00:19:17,420 --> 00:19:18,470 And that's all I need. 377 00:19:18,470 --> 00:19:20,810 Now, notice in particular there's something a little bit 378 00:19:20,810 --> 00:19:23,750 different about this image tag compared to other tags 379 00:19:23,750 --> 00:19:27,110 that we've seen before in the sense that it doesn't have a closing 380 00:19:27,110 --> 00:19:30,690 tag in the sense that the body had a beginning of the body and an end 381 00:19:30,690 --> 00:19:33,590 to the body, our ordered list had a beginning of the ordered list 382 00:19:33,590 --> 00:19:36,410 and the end of the unordered list with list items in between. 383 00:19:36,410 --> 00:19:39,380 It doesn't really make sense for an image, 384 00:19:39,380 --> 00:19:41,450 for example, to have the beginning of the image 385 00:19:41,450 --> 00:19:43,250 and the end of the image and some content 386 00:19:43,250 --> 00:19:47,930 in between, because the image is just a single HTML element that can't really 387 00:19:47,930 --> 00:19:49,790 have anything inside of it. 388 00:19:49,790 --> 00:19:53,000 So in that sense, we don't actually need a closing image tag. 389 00:19:53,000 --> 00:19:54,930 The image tag is self-closing. 390 00:19:54,930 --> 00:19:56,810 It is its own beginning and end. 391 00:19:56,810 --> 00:19:59,600 So we can just say we want an image to be here 392 00:19:59,600 --> 00:20:05,700 that is cat.jpeg with an alternative text of just the word cat, for example. 393 00:20:05,700 --> 00:20:09,110 So now, if I open up image.html, we'll see 394 00:20:09,110 --> 00:20:12,800 that what gets loaded is quite large, a picture of a cat. 395 00:20:12,800 --> 00:20:15,770 And I can scroll around and see this entire image. 396 00:20:15,770 --> 00:20:18,960 Of course, this picture of a cat is probably larger than I wanted it to be. 397 00:20:18,960 --> 00:20:21,010 I probably, when I my user visits this web page, 398 00:20:21,010 --> 00:20:23,510 I don't want them to have to scroll all the way to the right 399 00:20:23,510 --> 00:20:25,280 in order to see the entire cat. 400 00:20:25,280 --> 00:20:28,430 So I can actually add additional HTML attributes 401 00:20:28,430 --> 00:20:31,460 in order to modify the size of the image that I'm displaying. 402 00:20:31,460 --> 00:20:34,980 And later we'll see we can use CSS to do a similar thing as well. 403 00:20:34,980 --> 00:20:38,210 But for now, what I can add is an additional attribute 404 00:20:38,210 --> 00:20:41,510 and say that let me give cat.jpeg, this image tag, 405 00:20:41,510 --> 00:20:44,720 another attribute that, in this case, I'll just call width. 406 00:20:44,720 --> 00:20:47,870 And I'll say that width is going to be equal to 300, 407 00:20:47,870 --> 00:20:52,830 because I would like for this image to be 300 pixels wide, for example. 408 00:20:52,830 --> 00:20:55,130 So now, if I refresh this page, I now see 409 00:20:55,130 --> 00:20:57,530 that the same cat image appears, except now it 410 00:20:57,530 --> 00:21:00,260 appears at 300 pixels wide exactly. 411 00:21:00,260 --> 00:21:03,950 So I'm able to add additional attributes, additional information 412 00:21:03,950 --> 00:21:07,120 to control how an HTML element is going to appear. 413 00:21:07,120 --> 00:21:08,870 In this case, I want to control its width, 414 00:21:08,870 --> 00:21:10,790 and it automatically scales down the height 415 00:21:10,790 --> 00:21:14,470 to make sure that the image is proportional as well. 416 00:21:14,470 --> 00:21:17,350 Now, on the internet, in addition to just displaying information 417 00:21:17,350 --> 00:21:21,560 on a single page, it's also common for a page to link to other pages. 418 00:21:21,560 --> 00:21:23,560 In fact, that's one of the main important values 419 00:21:23,560 --> 00:21:25,900 of the internet is the ability to go from one page 420 00:21:25,900 --> 00:21:28,090 to another via these links. 421 00:21:28,090 --> 00:21:30,370 And so one thing we might reasonably want to do 422 00:21:30,370 --> 00:21:33,190 is add some links to our page, where if you click on something, 423 00:21:33,190 --> 00:21:35,920 you're taken to another page altogether. 424 00:21:35,920 --> 00:21:38,630 So let's take a look at an example of that. 425 00:21:38,630 --> 00:21:41,590 I'll create a new file based on hello.html. 426 00:21:41,590 --> 00:21:44,010 And I'll add lang equals English for good measure. 427 00:21:44,010 --> 00:21:48,250 And I'll call this new file link.html, where here, we're 428 00:21:48,250 --> 00:21:52,350 going to practice with building some links into our HTML page. 429 00:21:52,350 --> 00:21:57,930 I'll copy the content of hello.html again, call this link. 430 00:21:57,930 --> 00:22:00,410 In order to create a link, I'm going to use a tag 431 00:22:00,410 --> 00:22:03,980 called the a tag, short for the anchor tag. 432 00:22:03,980 --> 00:22:06,770 And the a tag takes one important attribute, 433 00:22:06,770 --> 00:22:10,460 which is called href, for hyperlink reference, which 434 00:22:10,460 --> 00:22:14,280 is going to specify what page I would like to link to. 435 00:22:14,280 --> 00:22:17,090 So if, for example, I wanted when a user clicks on this link 436 00:22:17,090 --> 00:22:20,780 to go to google.com, then I'd set the href attribute 437 00:22:20,780 --> 00:22:27,820 of this tag equal to HTTPS://google.com, for example. 438 00:22:27,820 --> 00:22:32,650 Then inside of the a tag, I would specify what text I want to display. 439 00:22:32,650 --> 00:22:36,460 What text should the user see such that when the user clicks on that text 440 00:22:36,460 --> 00:22:38,060 they're taken to the web page? 441 00:22:38,060 --> 00:22:41,680 In this case, I'm just going to say something like, Click here, 442 00:22:41,680 --> 00:22:43,710 for instance. 443 00:22:43,710 --> 00:22:49,170 Now, if I open up a link.html, this is what the user sees. 444 00:22:49,170 --> 00:22:51,450 They see a blue link that says Click here. 445 00:22:51,450 --> 00:22:54,000 And when the user does click on that link, 446 00:22:54,000 --> 00:22:58,750 they're taken to HTTPS://google.com. 447 00:22:58,750 --> 00:23:01,840 And it turns out that we can use this href attribute not only 448 00:23:01,840 --> 00:23:04,150 to link to different websites altogether, 449 00:23:04,150 --> 00:23:07,690 but we can link to different pages on the same website. 450 00:23:07,690 --> 00:23:10,420 So, for example, if I wanted to link to that cat page 451 00:23:10,420 --> 00:23:14,320 that I designed a moment ago, instead of linking to google.com, 452 00:23:14,320 --> 00:23:18,850 I could instead just link to image.html. 453 00:23:18,850 --> 00:23:24,790 And now, if I save that and refresh, or if I open up link.html again, 454 00:23:24,790 --> 00:23:28,000 now I see a click here link, where when I click on Click here, 455 00:23:28,000 --> 00:23:31,630 now I'm taken to that page, image.html, that 456 00:23:31,630 --> 00:23:34,630 happened to have that picture of a cat from before. 457 00:23:34,630 --> 00:23:37,660 So using these anchor tags and href attributes, 458 00:23:37,660 --> 00:23:39,490 we're able to link together multiple pages. 459 00:23:39,490 --> 00:23:42,280 So that if we have a website that has many different web pages, 460 00:23:42,280 --> 00:23:45,310 we can connect them all together by using a combination 461 00:23:45,310 --> 00:23:47,890 of these various different links. 462 00:23:47,890 --> 00:23:52,330 So now that we've seen images and links and lists, what other HTML elements 463 00:23:52,330 --> 00:23:53,980 might we add to our web page? 464 00:23:53,980 --> 00:23:55,930 Well, one thing we might want to add are things 465 00:23:55,930 --> 00:23:58,580 like tables, just other ways of displaying information. 466 00:23:58,580 --> 00:24:02,050 So let's go ahead and create a table and look at what HTML elements 467 00:24:02,050 --> 00:24:04,760 we can use in order to do so. 468 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. 469 00:24:09,220 --> 00:24:14,180 Using the same starting HTML, we'll call this page Table. 470 00:24:14,180 --> 00:24:16,510 And inside the body of this page now, there 471 00:24:16,510 --> 00:24:19,000 are a number of different HTML elements that we'll 472 00:24:19,000 --> 00:24:22,070 need in order to create a table, because as you might imagine, 473 00:24:22,070 --> 00:24:24,490 a table is really composed of multiple parts. 474 00:24:24,490 --> 00:24:25,720 We have our big table. 475 00:24:25,720 --> 00:24:30,040 But each table is really just a sequence of individual table rows. 476 00:24:30,040 --> 00:24:32,380 And each of those rows is really just a sequence 477 00:24:32,380 --> 00:24:35,710 of individual cells of data within that table. 478 00:24:35,710 --> 00:24:38,710 And so that structure that we're imagining, a table that consists 479 00:24:38,710 --> 00:24:42,520 of individual rows, where each row consists of individual cells, 480 00:24:42,520 --> 00:24:46,480 is exactly how we're going to represent this table in HTML. 481 00:24:46,480 --> 00:24:49,720 We're going to start with just a table tag. 482 00:24:49,720 --> 00:24:53,050 That's going to represent the entirety of this table. 483 00:24:53,050 --> 00:24:55,870 But inside of the table, we might have different parts. 484 00:24:55,870 --> 00:24:58,090 We might have the heading of the table. 485 00:24:58,090 --> 00:24:59,780 We might have the body of the table. 486 00:24:59,780 --> 00:25:02,920 So in order to represent that, I'll add thead. 487 00:25:02,920 --> 00:25:05,050 That's going to stand for the heading of the table, 488 00:25:05,050 --> 00:25:06,880 the stuff at the top of the table that might 489 00:25:06,880 --> 00:25:10,090 indicate what each column of the table means, for example. 490 00:25:10,090 --> 00:25:12,270 And let's see, what columns do I want? 491 00:25:12,270 --> 00:25:14,320 Well, let's go ahead and add some table headings, 492 00:25:14,320 --> 00:25:18,790 which I can represent using the th tag, h for heading. 493 00:25:18,790 --> 00:25:21,700 And maybe I want in this web page to display information 494 00:25:21,700 --> 00:25:23,980 about various different oceans, for example. 495 00:25:23,980 --> 00:25:27,850 So maybe I have one column for the ocean and another column, 496 00:25:27,850 --> 00:25:32,200 another table heading, for the average depth of that ocean, 497 00:25:32,200 --> 00:25:37,870 and another table heading for the maximum depth of that ocean. 498 00:25:37,870 --> 00:25:41,110 And that'll be the very first row of that table, the heading of the table. 499 00:25:41,110 --> 00:25:42,950 But in addition to the heading of the table, 500 00:25:42,950 --> 00:25:44,890 we also have the body of the table. 501 00:25:44,890 --> 00:25:47,700 So underneath the thead, I'll go ahead and include 502 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. 503 00:25:52,450 --> 00:25:56,360 And that body is going to consist of individual rows of a table. 504 00:25:56,360 --> 00:26:02,170 So I might have a tr, which here stands for table row. 505 00:26:02,170 --> 00:26:06,250 And inside of this table row, we'll go ahead and add some individual data 506 00:26:06,250 --> 00:26:08,140 points inside of the table. 507 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, 508 00:26:12,370 --> 00:26:17,380 for table data, that says Pacific Ocean, for example, then another table 509 00:26:17,380 --> 00:26:21,610 data that says 4,280 meters, and then another one 510 00:26:21,610 --> 00:26:26,320 for the maximum depth of the Pacific Ocean, which is 10,911 meters. 511 00:26:26,320 --> 00:26:29,710 And, in fact, these three table heads as well 512 00:26:29,710 --> 00:26:32,930 at the top of the page, the ocean, the average depth, and the maximum depth, 513 00:26:32,930 --> 00:26:35,230 those should actually probably be in a row of their own 514 00:26:35,230 --> 00:26:39,440 as well, because the very first part of the table, that is also a row. 515 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 516 00:26:44,710 --> 00:26:46,120 put these headings. 517 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. 518 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. 519 00:26:52,160 --> 00:26:58,330 I'll add the Atlantic Ocean, too, which has an average depth of 3,646 meters, 520 00:26:58,330 --> 00:27:04,670 as well as a maximum depth of 8,486 meters as well. 521 00:27:04,670 --> 00:27:08,830 So when I open up table.html now, here's what I'm going to see. 522 00:27:08,830 --> 00:27:12,290 I'm going to see a table-like representation of the data. 523 00:27:12,290 --> 00:27:14,980 It's not just one thing after another after another anymore. 524 00:27:14,980 --> 00:27:16,100 It's structured in a table. 525 00:27:16,100 --> 00:27:17,730 Now, granted, there aren't any borders. 526 00:27:17,730 --> 00:27:19,900 And I could probably add some colors and spacing 527 00:27:19,900 --> 00:27:21,650 to make this look a little bit nicer. 528 00:27:21,650 --> 00:27:22,990 But I see three columns-- 529 00:27:22,990 --> 00:27:27,640 ocean, average depth, and maximum depth, where this very first row 530 00:27:27,640 --> 00:27:29,950 is what we might call the table header, the very top 531 00:27:29,950 --> 00:27:33,070 of the table that's defining what all of the columns mean. 532 00:27:33,070 --> 00:27:36,340 Inside of that table header is a single table row 533 00:27:36,340 --> 00:27:38,680 that has three table data cells-- 534 00:27:38,680 --> 00:27:41,650 ocean, average depth, and maximum depth. 535 00:27:41,650 --> 00:27:44,710 Then beneath this table header, represented in bold, 536 00:27:44,710 --> 00:27:47,950 is the table's body, or the tbody element, inside 537 00:27:47,950 --> 00:27:51,280 of which we had two rows, one for representing the Pacific Ocean, 538 00:27:51,280 --> 00:27:53,530 one for representing the Atlantic Ocean. 539 00:27:53,530 --> 00:27:56,260 And then we had data cells in each one of those rows 540 00:27:56,260 --> 00:28:01,560 for representing each of the individual cells that's located within this table. 541 00:28:01,560 --> 00:28:04,090 So this is what that page ultimately looks like. 542 00:28:04,090 --> 00:28:06,010 And let's take one more look at the HTML just 543 00:28:06,010 --> 00:28:10,830 to get an understanding for how all of these tags interact with one another. 544 00:28:10,830 --> 00:28:13,670 And no need to memorize all these tags right now, slowly 545 00:28:13,670 --> 00:28:15,770 as you begin to design HTML pages, you'll 546 00:28:15,770 --> 00:28:19,370 start to get more familiar with what HTML tags are available to you. 547 00:28:19,370 --> 00:28:21,370 And certainly, all of these HTML tags are 548 00:28:21,370 --> 00:28:23,960 things that are easy to reference if you need to look them up. 549 00:28:23,960 --> 00:28:26,000 It's very helpful to be able to look up something 550 00:28:26,000 --> 00:28:28,130 like, how do I create a table in HTML? 551 00:28:28,130 --> 00:28:31,010 And then you'll be able to see what the various different tags you'll 552 00:28:31,010 --> 00:28:35,000 need to add are in order to generate the table that you're looking for. 553 00:28:35,000 --> 00:28:38,840 But, again, just to recap, here, we have a table element, inside of which 554 00:28:38,840 --> 00:28:42,200 are two child elements, thead and tbody. 555 00:28:42,200 --> 00:28:47,150 Inside of each of those are one or more table rows, representing using tr. 556 00:28:47,150 --> 00:28:53,270 Inside of each of those are three table data cells, representing using td. 557 00:28:53,270 --> 00:28:55,580 And so using these nested tags, elements inside 558 00:28:55,580 --> 00:28:57,620 of elements inside of other elements, we've 559 00:28:57,620 --> 00:29:01,130 been able to build something far more complex than just a bulleted list. 560 00:29:01,130 --> 00:29:06,370 We've been able to build an entire table that has information as well. 561 00:29:06,370 --> 00:29:09,240 But ultimately, our web pages should be web pages that don't just 562 00:29:09,240 --> 00:29:12,090 display information, but that also let users 563 00:29:12,090 --> 00:29:14,770 interact with that information in some way. 564 00:29:14,770 --> 00:29:17,880 For example, you might imagine that on Google's home page, for example, 565 00:29:17,880 --> 00:29:19,330 it's not just unchanging. 566 00:29:19,330 --> 00:29:21,720 There's a field where I can type something in. 567 00:29:21,720 --> 00:29:25,200 And anytime users can provide input to a web page, 568 00:29:25,200 --> 00:29:27,750 we generally call that a form, or some place 569 00:29:27,750 --> 00:29:29,760 where a user can fill out a form in order 570 00:29:29,760 --> 00:29:32,670 to provide information to the web page. 571 00:29:32,670 --> 00:29:35,700 And so now, let's take a look at how we can use HTML 572 00:29:35,700 --> 00:29:40,120 in order to create a form that's going to display some information. 573 00:29:40,120 --> 00:29:44,310 So I'll go ahead and create a new page called form.html, 574 00:29:44,310 --> 00:29:46,600 again using that same HTML as before. 575 00:29:46,600 --> 00:29:49,250 We'll call the page Form. 576 00:29:49,250 --> 00:29:51,980 And inside of the body of this page now, let's say 577 00:29:51,980 --> 00:29:55,790 that I want to create a form that gives the user an opportunity to provide 578 00:29:55,790 --> 00:29:57,890 their full name, for example. 579 00:29:57,890 --> 00:29:59,010 How do I do that? 580 00:29:59,010 --> 00:30:02,040 Well, the first thing, I need is a form element, some way of saying, 581 00:30:02,040 --> 00:30:04,430 here is going to be a form. 582 00:30:04,430 --> 00:30:07,580 And now, inside of that form, what are the various different parts 583 00:30:07,580 --> 00:30:08,600 of the form? 584 00:30:08,600 --> 00:30:11,780 Well, there's really two parts that you might imagine to this form. 585 00:30:11,780 --> 00:30:14,960 One is a place for the user to actually type in their name. 586 00:30:14,960 --> 00:30:18,230 And they probably also need some way to submit the form, some button that 587 00:30:18,230 --> 00:30:20,990 just says submit, such that they can click on that button 588 00:30:20,990 --> 00:30:22,850 in order to submit the form. 589 00:30:22,850 --> 00:30:24,330 So how would we do that? 590 00:30:24,330 --> 00:30:26,570 Well, in order to create an input field, we're 591 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. 592 00:30:33,430 --> 00:30:35,390 There are a number of different ways that users 593 00:30:35,390 --> 00:30:36,830 might provide input to a form. 594 00:30:36,830 --> 00:30:38,000 They might type in text. 595 00:30:38,000 --> 00:30:40,040 They might choose from a dropdown menu. 596 00:30:40,040 --> 00:30:42,680 They might choose from a radio button option. 597 00:30:42,680 --> 00:30:45,740 Or they might provide input as by clicking on a button, for example. 598 00:30:45,740 --> 00:30:48,620 In this case, we're specifically using the type attribute 599 00:30:48,620 --> 00:30:51,320 to say that when the user is providing input in this way, 600 00:30:51,320 --> 00:30:55,850 the type of input that they're providing is going to be some kind of text. 601 00:30:55,850 --> 00:31:00,080 Then, we might provide a placeholder, some default text that's 602 00:31:00,080 --> 00:31:02,630 going to be inside of that input field the first time 603 00:31:02,630 --> 00:31:04,200 the user looks at the page. 604 00:31:04,200 --> 00:31:06,950 So, for example, the placeholder might be Full Name. 605 00:31:06,950 --> 00:31:11,720 That way the user knows that what they should type into this placeholder 606 00:31:11,720 --> 00:31:13,910 is their own full name. 607 00:31:13,910 --> 00:31:17,600 And then finally, we're going to go ahead and give a name to this input 608 00:31:17,600 --> 00:31:18,100 field. 609 00:31:18,100 --> 00:31:20,430 Now, this isn't going to be something that the user sees 610 00:31:20,430 --> 00:31:21,500 when they visit the page. 611 00:31:21,500 --> 00:31:25,490 But anytime you submit a form, when we receive that forum in our web 612 00:31:25,490 --> 00:31:27,800 application-- something we'll explore later on-- 613 00:31:27,800 --> 00:31:32,720 we need some way of knowing which input field corresponded to which value. 614 00:31:32,720 --> 00:31:35,180 And so we're going to name each of the input fields 615 00:31:35,180 --> 00:31:38,170 just so that later on we'll be able to reference them. 616 00:31:38,170 --> 00:31:41,120 And, for now, since the user is typing their full name here, 617 00:31:41,120 --> 00:31:42,860 we could just name this full name. 618 00:31:42,860 --> 00:31:48,250 Or we could more succinctly just say name as the Name of this input field. 619 00:31:48,250 --> 00:31:51,700 After that, we have an input field where the user can type in their name. 620 00:31:51,700 --> 00:31:55,300 And now, we need some way for the user to be able to submit this form. 621 00:31:55,300 --> 00:31:58,960 So we might say something like input type equals 622 00:31:58,960 --> 00:32:03,430 submit to say, here's a way for the user to submit the form, 623 00:32:03,430 --> 00:32:04,810 type equals submit means. 624 00:32:04,810 --> 00:32:09,320 This is how they're going to submit the form when they're done completing it. 625 00:32:09,320 --> 00:32:13,100 Now, if I open up form.html, this is the page 626 00:32:13,100 --> 00:32:16,160 that we're ultimately going to see when we load this HTML. 627 00:32:16,160 --> 00:32:19,330 This entire page just contains a single HTML form. 628 00:32:19,330 --> 00:32:22,380 But that HTML form contains two parts. 629 00:32:22,380 --> 00:32:24,830 The first part was this input element here 630 00:32:24,830 --> 00:32:27,890 that allowed an opportunity for the user to type in their full name. 631 00:32:27,890 --> 00:32:30,150 They type in their full name into this input field. 632 00:32:30,150 --> 00:32:32,630 And when they're done, they can click this Submit button 633 00:32:32,630 --> 00:32:36,320 to indicate that they would like to now submit this form. 634 00:32:36,320 --> 00:32:39,320 Of course, right now, this form isn't going to do anything when we type 635 00:32:39,320 --> 00:32:42,470 in our name and click Submit, because we have an added and a logic in order 636 00:32:42,470 --> 00:32:44,000 to handle this form. 637 00:32:44,000 --> 00:32:47,120 But later on, as we transition into the world of building web applications 638 00:32:47,120 --> 00:32:50,280 using Python, we'll see how we can design a form, 639 00:32:50,280 --> 00:32:53,810 such that after the user submits it, we save information to a database 640 00:32:53,810 --> 00:32:56,480 or display some sort of results back to the user, 641 00:32:56,480 --> 00:32:59,360 all by using the power of building these web applications 642 00:32:59,360 --> 00:33:02,780 and connecting them to these sorts of HTML forms. 643 00:33:02,780 --> 00:33:05,910 And HTML forms can actually get quite a bit more complex. 644 00:33:05,910 --> 00:33:07,460 We'll take a look at another example. 645 00:33:07,460 --> 00:33:12,290 For instance, let me open up form1.html, which 646 00:33:12,290 --> 00:33:16,190 is a form that I built in advance, which shows a number of other ways 647 00:33:16,190 --> 00:33:20,210 that users can provide information as input to an HTML form. 648 00:33:20,210 --> 00:33:23,210 Here, we see an input whose type is text, 649 00:33:23,210 --> 00:33:26,290 meaning we want the user to type in their name as text. 650 00:33:26,290 --> 00:33:29,420 But you might also imagine that if a user is logging into a website, 651 00:33:29,420 --> 00:33:33,260 for example, they might in addition to typing in a text-based name or username 652 00:33:33,260 --> 00:33:35,600 or email, also provide a password. 653 00:33:35,600 --> 00:33:38,690 And generally, if you've been on a website and you've typed in a password, 654 00:33:38,690 --> 00:33:42,410 the password characters don't all show up as the actual characters. 655 00:33:42,410 --> 00:33:45,530 For security reasons, they generally show up as just little dots 656 00:33:45,530 --> 00:33:49,140 on the screen hiding the actual characters that they're representing. 657 00:33:49,140 --> 00:33:52,100 And in HTML, we can do that very easily by just 658 00:33:52,100 --> 00:33:55,520 saying that the type of this input is password. 659 00:33:55,520 --> 00:33:57,530 If they're typing in a password, our web browser 660 00:33:57,530 --> 00:34:02,160 will know not to actually display those individual characters. 661 00:34:02,160 --> 00:34:05,640 In addition to just text-based input, we also have radio button input, 662 00:34:05,640 --> 00:34:07,480 as I alluded to a moment ago. 663 00:34:07,480 --> 00:34:10,650 So here, we have a number of different radio inputs, 664 00:34:10,650 --> 00:34:13,390 where the user might be able to select from a number of options, 665 00:34:13,390 --> 00:34:15,580 choosing their favorite color, for example, 666 00:34:15,580 --> 00:34:17,250 from a number of these options. 667 00:34:17,250 --> 00:34:21,720 And finally, just to take a look at one other additional feature of HTML5, 668 00:34:21,720 --> 00:34:24,390 in fact, a new feature of HTML5, is something 669 00:34:24,390 --> 00:34:26,820 we might call a data list, where we might 670 00:34:26,820 --> 00:34:30,570 have the user choose in a dropdown from a number of different options. 671 00:34:30,570 --> 00:34:34,870 But we want to very quickly filter down or autocomplete based on those options. 672 00:34:34,870 --> 00:34:38,170 So if the user needs to select what country they're from, for example, 673 00:34:38,170 --> 00:34:41,550 we might have an input field and specify that it's 674 00:34:41,550 --> 00:34:45,870 going to be associated with a list called countries. 675 00:34:45,870 --> 00:34:49,400 Then immediately below that I have a data list element whose 676 00:34:49,400 --> 00:34:52,650 ID is countries, where here, I'm going to specify these 677 00:34:52,650 --> 00:34:55,800 are all of the options for what country we could have. 678 00:34:55,800 --> 00:34:58,670 Each one is inside of an option element whose value 679 00:34:58,670 --> 00:35:01,020 is whatever country they could select. 680 00:35:01,020 --> 00:35:06,130 And we have all of the countries of the world listed in these option elements. 681 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 682 00:35:10,920 --> 00:35:12,880 of these possible options. 683 00:35:12,880 --> 00:35:17,090 So now, if I open up form1.html. 684 00:35:17,090 --> 00:35:19,780 Here's what that form ultimately looks like. 685 00:35:19,780 --> 00:35:21,730 I can, here, inside of the name field-- 686 00:35:21,730 --> 00:35:24,760 again, that word name shows up, because it's the placeholder-- 687 00:35:24,760 --> 00:35:26,590 I can type in my name here. 688 00:35:26,590 --> 00:35:29,260 And inside of the password field anything I type 689 00:35:29,260 --> 00:35:31,660 is going to show up as just little dots instead 690 00:35:31,660 --> 00:35:35,890 of the actual characters, because the type of that input field was password, 691 00:35:35,890 --> 00:35:38,440 instead of the type being text. 692 00:35:38,440 --> 00:35:40,420 In favorite color, I now have the ability 693 00:35:40,420 --> 00:35:43,390 to choose between various different favorite color options. 694 00:35:43,390 --> 00:35:46,720 In a radio button format, I choose from one of a number of options. 695 00:35:46,720 --> 00:35:49,540 And finally, inside this country dropdown, 696 00:35:49,540 --> 00:35:53,150 I have the ability now when I click on it to see all of the countries, 697 00:35:53,150 --> 00:35:56,470 but as I start to type letters, like u-n-i-t, 698 00:35:56,470 --> 00:36:00,230 it filters down to only the options that I actually care about. 699 00:36:00,230 --> 00:36:04,090 So here if I type in enough letters, eventually I see United States. 700 00:36:04,090 --> 00:36:06,740 And I can click on that option as well. 701 00:36:06,740 --> 00:36:09,880 So HTML5 builds in these additional features 702 00:36:09,880 --> 00:36:13,300 to make it easy to implement something like a text field, where it will auto 703 00:36:13,300 --> 00:36:15,520 complete based on the text that you provide. 704 00:36:15,520 --> 00:36:19,720 You can just specify that it is inside of this data list 705 00:36:19,720 --> 00:36:22,150 and then provide a list of all the possible values. 706 00:36:22,150 --> 00:36:24,730 And then HTML and your web browser in turn 707 00:36:24,730 --> 00:36:27,880 will take care of the process of rendering that information in the way 708 00:36:27,880 --> 00:36:31,660 that you expect it to be displayed. 709 00:36:31,660 --> 00:36:34,260 So those are just some of the possible HTML elements 710 00:36:34,260 --> 00:36:37,950 that we can ultimately create by using these various different elements 711 00:36:37,950 --> 00:36:39,470 that we nest within each other. 712 00:36:39,470 --> 00:36:41,490 And there are definitely other HTML elements 713 00:36:41,490 --> 00:36:44,100 that exist as well that you can begin to explore. 714 00:36:44,100 --> 00:36:46,270 But all of them follow a very similar pattern 715 00:36:46,270 --> 00:36:48,480 that we're going to have some tag, that might require 716 00:36:48,480 --> 00:36:51,780 some attributes, additional information about the HTML, 717 00:36:51,780 --> 00:36:55,710 to give context to the web browser for how that element should be displayed. 718 00:36:55,710 --> 00:36:58,830 Maybe that element needs to have a particular source for an image. 719 00:36:58,830 --> 00:37:01,980 Maybe it needs a link in order to link to somewhere, or other information 720 00:37:01,980 --> 00:37:02,760 as well. 721 00:37:02,760 --> 00:37:05,460 And then inside of that element, you might nest other elements. 722 00:37:05,460 --> 00:37:07,320 So that your table has rows. 723 00:37:07,320 --> 00:37:09,480 And inside of those rows, we have other cells. 724 00:37:09,480 --> 00:37:12,030 And you might imagine nesting elements inside 725 00:37:12,030 --> 00:37:14,860 of other elements inside of other elements. 726 00:37:14,860 --> 00:37:18,560 But right now so far, all of our web pages have been rather simple. 727 00:37:18,560 --> 00:37:21,150 They've just been-- we've described the structure of the page, 728 00:37:21,150 --> 00:37:24,170 and we've described we want a list here, we want to form there. 729 00:37:24,170 --> 00:37:27,060 What we might really like is some way of specifying that we 730 00:37:27,060 --> 00:37:29,340 want to style our web page in some way. 731 00:37:29,340 --> 00:37:30,270 We want to add color. 732 00:37:30,270 --> 00:37:31,530 We want add spacing. 733 00:37:31,530 --> 00:37:35,010 We want to add some sort of other layout to our page as well. 734 00:37:35,010 --> 00:37:37,980 And in order to do that, we're going to use a second language 735 00:37:37,980 --> 00:37:41,460 that we're going to call CSS, short for Cascading Style Sheets. 736 00:37:41,460 --> 00:37:43,260 In particular, we'll use the latest version 737 00:37:43,260 --> 00:37:48,360 of CSS, CSS3, which gives us the ability to take an HTML page 738 00:37:48,360 --> 00:37:51,420 and tell the web browser how we would like it to be styled. 739 00:37:51,420 --> 00:37:54,900 Instead of just black text in the same font on a white background, 740 00:37:54,900 --> 00:37:59,100 we can begin to specify particular CSS properties of how 741 00:37:59,100 --> 00:38:02,250 we would like this page to look to make sure that the page looks 742 00:38:02,250 --> 00:38:03,960 the way we want it to. 743 00:38:03,960 --> 00:38:07,530 So let's take a look at a simple example now of CSS 744 00:38:07,530 --> 00:38:12,800 to take a look at how we can add some CSS code to our page. 745 00:38:12,800 --> 00:38:18,380 So I'll go ahead and create a new file that I'll call style.html, 746 00:38:18,380 --> 00:38:22,370 just to demonstrate some basic ideas of adding some style to our page. 747 00:38:22,370 --> 00:38:26,330 And we'll go ahead and copy the same hello.html from before. 748 00:38:26,330 --> 00:38:30,350 And maybe in addition to hello world, I display in h1 some big heading 749 00:38:30,350 --> 00:38:35,790 at the top that says like, Welcome to my web page, for example. 750 00:38:35,790 --> 00:38:40,170 So now, if I open up, style.html, this is what I see. 751 00:38:40,170 --> 00:38:43,020 I see a big heading at the top that says welcome to my web page, 752 00:38:43,020 --> 00:38:46,340 beneath which is just the text, hello world. 753 00:38:46,340 --> 00:38:48,710 And now imagine that I want to add some style 754 00:38:48,710 --> 00:38:50,870 to this heading at the top of the page. 755 00:38:50,870 --> 00:38:53,510 Maybe instead of being left aligned, I want it to be centered. 756 00:38:53,510 --> 00:38:56,780 Maybe instead of just being black text, I'd like to change the color. 757 00:38:56,780 --> 00:39:00,020 In order to do that, just as we've used attributes 758 00:39:00,020 --> 00:39:04,280 in the past to add additional information to this particular HTML 759 00:39:04,280 --> 00:39:07,700 page, we can do a very similar thing with CSS. 760 00:39:07,700 --> 00:39:12,940 We can specify that we're going to give this h1 element a style attribute. 761 00:39:12,940 --> 00:39:14,480 And that is going to be equal to. 762 00:39:14,480 --> 00:39:19,070 And then in quotation marks, we're going to provide all of the CSS properties 763 00:39:19,070 --> 00:39:22,040 that we would like to add to this particular element. 764 00:39:22,040 --> 00:39:25,820 So the way that CSS styling works is that we can give elements 765 00:39:25,820 --> 00:39:28,790 individual CSS properties, where a property is 766 00:39:28,790 --> 00:39:32,590 something like the color of the element or the alignment of the element. 767 00:39:32,590 --> 00:39:35,120 And each of those properties has a default value. 768 00:39:35,120 --> 00:39:37,850 But we can change its value to something else. 769 00:39:37,850 --> 00:39:41,630 So if, for example, I wanted to change the color of this heading, 770 00:39:41,630 --> 00:39:45,050 so that instead of a black heading, it displayed as the blue heading, 771 00:39:45,050 --> 00:39:49,640 I could say for this h1, I would like to give it a color property. 772 00:39:49,640 --> 00:39:51,890 And then to give the color property of value, 773 00:39:51,890 --> 00:39:55,670 I say color colon and then the value that I would like to give to it. 774 00:39:55,670 --> 00:40:00,090 So color colon blue, for example, followed by a semicolon 775 00:40:00,090 --> 00:40:03,200 will change the color of this h1 element to blue. 776 00:40:03,200 --> 00:40:05,120 And my text editor is automatically showing me 777 00:40:05,120 --> 00:40:08,150 a little square that shows me what this color blue is actually 778 00:40:08,150 --> 00:40:09,020 going to look like. 779 00:40:09,020 --> 00:40:10,190 This isn't part of the text. 780 00:40:10,190 --> 00:40:12,260 It's just my text editor being helpful so 781 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 782 00:40:16,010 --> 00:40:18,030 going to look like. 783 00:40:18,030 --> 00:40:22,670 So now if I open up style.html, here's what I see. 784 00:40:22,670 --> 00:40:26,510 Instead of a black heading at the top, we've changed the color to blue. 785 00:40:26,510 --> 00:40:28,670 And there are many other built-in colors that 786 00:40:28,670 --> 00:40:31,460 exist within HTML that we can use in order to change 787 00:40:31,460 --> 00:40:32,920 the color to whatever we want. 788 00:40:32,920 --> 00:40:35,340 If instead of blue, I said I want the color to be red, 789 00:40:35,340 --> 00:40:37,680 for instance, I can refresh the page. 790 00:40:37,680 --> 00:40:38,870 And now, the heading is red. 791 00:40:38,870 --> 00:40:40,200 And there are many other colors. 792 00:40:40,200 --> 00:40:42,890 I can change the color to like spring green, for instance. 793 00:40:42,890 --> 00:40:44,600 And that's going to be a particular shade 794 00:40:44,600 --> 00:40:47,630 of green that displays just like this. 795 00:40:47,630 --> 00:40:50,900 And so now, we have the ability to add various different style 796 00:40:50,900 --> 00:40:53,060 properties to individual elements. 797 00:40:53,060 --> 00:40:55,790 I can say take this heading and change its style 798 00:40:55,790 --> 00:41:00,720 so that the color instead of being black is going to show up as blue instead. 799 00:41:00,720 --> 00:41:04,730 And if I want to add multiple CSS properties to the same HTML element, 800 00:41:04,730 --> 00:41:06,260 I can do that as well. 801 00:41:06,260 --> 00:41:08,780 Here in the style attribute, I can say that in addition 802 00:41:08,780 --> 00:41:12,440 to saying that the color is blue, I'd like to give a second CSS 803 00:41:12,440 --> 00:41:13,970 property to this element. 804 00:41:13,970 --> 00:41:21,260 I'd like to say that the text align property should be center, for example. 805 00:41:21,260 --> 00:41:24,560 The text align property controls, as you might imagine, 806 00:41:24,560 --> 00:41:27,380 how a particular HTML element has its text aligned. 807 00:41:27,380 --> 00:41:30,400 Is it all the way on the left, all the way on the right, or centered? 808 00:41:30,400 --> 00:41:34,790 And if I change the text align property to have a value of center, 809 00:41:34,790 --> 00:41:39,490 well, then now, when I refresh this page, I see that Welcome to my web page 810 00:41:39,490 --> 00:41:41,870 is now both blue, and it's centered. 811 00:41:41,870 --> 00:41:44,990 I've changed the color, and I've changed the alignment 812 00:41:44,990 --> 00:41:47,360 of this particular element. 813 00:41:47,360 --> 00:41:50,840 And HTML elements don't need to just be styled directly. 814 00:41:50,840 --> 00:41:55,500 They can also get their style information from parent elements. 815 00:41:55,500 --> 00:41:58,250 So if you recall again that DOM structure, where 816 00:41:58,250 --> 00:42:02,270 we have an HTML element inside of which is this body element 817 00:42:02,270 --> 00:42:06,650 and inside of the body element is this h1 element and this text, 818 00:42:06,650 --> 00:42:08,870 you can imagine if we wanted this styling 819 00:42:08,870 --> 00:42:13,340 to apply not just to this heading, but also to the Hello World text, 820 00:42:13,340 --> 00:42:17,000 I could move the styling information, move this style attribute, 821 00:42:17,000 --> 00:42:21,110 change it from the h1 and escalating it to this body. 822 00:42:21,110 --> 00:42:25,160 And if I move the style to the body, then everything inside of the body 823 00:42:25,160 --> 00:42:27,540 is going to be styled in that way. 824 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. 825 00:42:31,020 --> 00:42:33,590 If I take this style information, and I move 826 00:42:33,590 --> 00:42:36,950 it so that instead of associating it with the h1, 827 00:42:36,950 --> 00:42:42,220 I instead associate it with the body, then now, when I refresh the page, 828 00:42:42,220 --> 00:42:44,850 I see that both parts of the body, both the big heading 829 00:42:44,850 --> 00:42:47,010 at the top that says, Welcome to my web page, 830 00:42:47,010 --> 00:42:51,180 as well as the text, Hello World, both have those CSS properties applied. 831 00:42:51,180 --> 00:42:53,130 I've changed their color to blue. 832 00:42:53,130 --> 00:42:55,260 And I've also changed their text alignment 833 00:42:55,260 --> 00:42:58,860 to be centered instead of just left aligned. 834 00:42:58,860 --> 00:43:01,050 But if I do want it to just be that heading, 835 00:43:01,050 --> 00:43:03,990 then I can move it out and say that I just 836 00:43:03,990 --> 00:43:08,640 want to apply the style to that one individual heading. 837 00:43:08,640 --> 00:43:12,170 Now, one thing that we might imagine might become a problem over time 838 00:43:12,170 --> 00:43:15,320 is that imagine if I had multiple headings that I wanted 839 00:43:15,320 --> 00:43:17,600 to style in the same way, for example. 840 00:43:17,600 --> 00:43:20,090 Let's say I have a second heading that-- 841 00:43:20,090 --> 00:43:21,600 this is a second heading-- 842 00:43:21,600 --> 00:43:25,880 that I also want to be styled as blue and centered as well, 843 00:43:25,880 --> 00:43:28,890 I can refresh this page and see that right now that is not the case. 844 00:43:28,890 --> 00:43:31,530 And I don't want to make the entire page blue and centered. 845 00:43:31,530 --> 00:43:35,120 I only want these two headings to be blue and centered. 846 00:43:35,120 --> 00:43:39,530 So what I could do is I could just take this style code from the h1 847 00:43:39,530 --> 00:43:43,670 and apply it to this h1 as well, so that both of my h1 elements 848 00:43:43,670 --> 00:43:46,140 now have the exact same style code. 849 00:43:46,140 --> 00:43:47,600 And I'll go ahead and refresh this. 850 00:43:47,600 --> 00:43:50,150 And now, we see this is the intended behavior. 851 00:43:50,150 --> 00:43:54,380 I have two headings, both of which are centered and both of which are blue. 852 00:43:54,380 --> 00:43:57,890 But what we want to start to think about as we start to build web applications, 853 00:43:57,890 --> 00:44:00,890 and especially as our web applications start to get a little bit more 854 00:44:00,890 --> 00:44:03,590 sophisticated, is to think about the design 855 00:44:03,590 --> 00:44:05,630 of how we're building our web pages and how 856 00:44:05,630 --> 00:44:07,350 we're building our web applications. 857 00:44:07,350 --> 00:44:09,590 And in particular, anytime we find ourselves 858 00:44:09,590 --> 00:44:12,590 copying a lot of the same information from one place 859 00:44:12,590 --> 00:44:15,160 to another, that's probably not the best design. 860 00:44:15,160 --> 00:44:17,210 And you should start to think about how might you 861 00:44:17,210 --> 00:44:19,110 design this a little bit better. 862 00:44:19,110 --> 00:44:21,110 It's not great design, one, just because there's 863 00:44:21,110 --> 00:44:23,780 some redundancy that probably doesn't need to be there, 864 00:44:23,780 --> 00:44:26,210 but also because it makes the page a little bit more 865 00:44:26,210 --> 00:44:28,940 difficult to change and add a little more difficult to update. 866 00:44:28,940 --> 00:44:31,250 If I instead want to change both of these headings 867 00:44:31,250 --> 00:44:33,980 to be red instead of blue, then all of a sudden, 868 00:44:33,980 --> 00:44:36,870 I need to change my code in two places. 869 00:44:36,870 --> 00:44:40,700 I need to change the style attribute on this first heading up here. 870 00:44:40,700 --> 00:44:43,100 And I also need to change the style attribute 871 00:44:43,100 --> 00:44:45,770 on the second heading down there. 872 00:44:45,770 --> 00:44:47,810 What I'd like to do is to somehow just be 873 00:44:47,810 --> 00:44:50,630 able to write the style code once and then have 874 00:44:50,630 --> 00:44:53,070 it apply to both of these headings. 875 00:44:53,070 --> 00:44:54,740 And, in fact, there is a way to do that. 876 00:44:54,740 --> 00:44:58,940 What we can do is instead of doing what we might call inline styling, 877 00:44:58,940 --> 00:45:02,570 where we take the CSS code and place it directly 878 00:45:02,570 --> 00:45:07,160 as an attribute of an HTML element, we can move our style code 879 00:45:07,160 --> 00:45:10,720 to an entirely different part of the web page. 880 00:45:10,720 --> 00:45:13,390 Recall again that at the top of our HTML page, 881 00:45:13,390 --> 00:45:16,060 we have this head section that just includes 882 00:45:16,060 --> 00:45:18,880 information that's useful to know about the web page, 883 00:45:18,880 --> 00:45:22,060 but isn't actually part of the body of the web page, the content 884 00:45:22,060 --> 00:45:23,170 that the user sees. 885 00:45:23,170 --> 00:45:24,970 This head section is a great place where we 886 00:45:24,970 --> 00:45:28,930 can begin to put some style information, information about how we would 887 00:45:28,930 --> 00:45:31,900 like for this web page to be styled. 888 00:45:31,900 --> 00:45:35,440 So what I can do here is instead of putting these style 889 00:45:35,440 --> 00:45:40,150 attributes inside inline with these HTML elements, 890 00:45:40,150 --> 00:45:43,190 I can inside of the head section of my web page 891 00:45:43,190 --> 00:45:49,360 add a style element, where in between the opening style tag and the closing 892 00:45:49,360 --> 00:45:54,400 style tag, I can add any of the style information that I want. 893 00:45:54,400 --> 00:45:56,620 And here's the way that syntax is going to look. 894 00:45:56,620 --> 00:46:01,060 I first need to specify, what types of elements am I going to style? 895 00:46:01,060 --> 00:46:04,090 And in this case, I want to style all of the h1s. 896 00:46:04,090 --> 00:46:07,150 So I can just say h1. 897 00:46:07,150 --> 00:46:11,110 And then all of the style code is going to go inside 898 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 899 00:46:15,670 --> 00:46:20,040 and I would like the text align property to be centered. 900 00:46:20,040 --> 00:46:21,900 So now, here's what I've done. 901 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 902 00:46:26,600 --> 00:46:29,510 actually as an attribute of these h1 elements. 903 00:46:29,510 --> 00:46:34,670 And I've moved the style-related code to a different part of my page altogether. 904 00:46:34,670 --> 00:46:37,730 Now, the style information is inside the header of my page, 905 00:46:37,730 --> 00:46:42,240 inside of the style element, where I've said for every h1 element, 906 00:46:42,240 --> 00:46:43,640 here's how you should style it. 907 00:46:43,640 --> 00:46:47,090 The styling is in between the opening and curly closing braces here. 908 00:46:47,090 --> 00:46:50,830 And I've said that every h1 should have a color of blue. 909 00:46:50,830 --> 00:46:55,280 And every h1 should have a text a line property of center. 910 00:46:55,280 --> 00:46:58,610 And that is then going to apply to all of the h1 elements 911 00:46:58,610 --> 00:47:02,690 that my web page happens to find inside the body of my web page. 912 00:47:02,690 --> 00:47:04,320 So there's a couple of advantages here. 913 00:47:04,320 --> 00:47:06,770 Advantage number one is what we talked about a moment ago. 914 00:47:06,770 --> 00:47:10,940 I don't need to duplicate the same code in both of these h1 elements. 915 00:47:10,940 --> 00:47:13,490 I can write at once and say, apply this styling 916 00:47:13,490 --> 00:47:16,300 to all of the h1s that show up in the page. 917 00:47:16,300 --> 00:47:20,300 An advantage number two is we've been able to factor out the style 918 00:47:20,300 --> 00:47:23,310 code to somewhere else, just to make it a little bit cleaner. 919 00:47:23,310 --> 00:47:26,090 So that instead of having a really long line, you might imagine, 920 00:47:26,090 --> 00:47:29,370 if we had not just two, but maybe five or six or seven different CSS 921 00:47:29,370 --> 00:47:32,820 properties, that would have taken up a lot of space on one line. 922 00:47:32,820 --> 00:47:36,080 I can instead in a more readable, more organized way, 923 00:47:36,080 --> 00:47:38,990 move that style-related code to the style element 924 00:47:38,990 --> 00:47:42,090 at the beginning of the page just to make it easier to read, 925 00:47:42,090 --> 00:47:45,860 easier to visually understand, and just to clean up the body of the web page 926 00:47:45,860 --> 00:47:46,760 as well. 927 00:47:46,760 --> 00:47:48,470 And that's going to be another of the key themes that's 928 00:47:48,470 --> 00:47:51,770 going to come up again and again in this class, this idea of separating things 929 00:47:51,770 --> 00:47:55,270 out so that every piece can sort of be independent of one another. 930 00:47:55,270 --> 00:47:59,180 Our structure of the web page inside the body is separate from the style. 931 00:47:59,180 --> 00:48:02,510 And we'll see the same sort of idea appear again and again, as we begin 932 00:48:02,510 --> 00:48:06,290 to try to design web applications well. 933 00:48:06,290 --> 00:48:12,650 So now if I take this exact same page and go ahead and refresh style.html, 934 00:48:12,650 --> 00:48:15,740 we'll see that we see the exact same thing. 935 00:48:15,740 --> 00:48:17,870 Both of the headings still show up as centered. 936 00:48:17,870 --> 00:48:19,820 Both of them still show up as blue. 937 00:48:19,820 --> 00:48:21,680 But now we have the advantage of having only 938 00:48:21,680 --> 00:48:25,850 written the style code once instead of needing to write the exact same style 939 00:48:25,850 --> 00:48:29,460 code multiple times in the same way. 940 00:48:29,460 --> 00:48:32,100 But it turns out that we can even do a little bit better 941 00:48:32,100 --> 00:48:34,800 than this, because one thing you might imagine 942 00:48:34,800 --> 00:48:38,700 is that if I have a web application or a website that has multiple different web 943 00:48:38,700 --> 00:48:42,900 pages, it's probably going to be likely that each of those web pages 944 00:48:42,900 --> 00:48:45,330 might need to be styled in similar ways. 945 00:48:45,330 --> 00:48:47,880 If I have a big banner at the top of one web page, 946 00:48:47,880 --> 00:48:50,400 then in other pages related to that page, 947 00:48:50,400 --> 00:48:53,190 I might want the same banner, styled in the same way, 948 00:48:53,190 --> 00:48:55,470 using similar style information. 949 00:48:55,470 --> 00:49:00,900 And right now, our CSS code is specific to one particular page. 950 00:49:00,900 --> 00:49:03,840 And it's not going to be easy to then take that same styling 951 00:49:03,840 --> 00:49:05,370 and apply it to another page. 952 00:49:05,370 --> 00:49:08,880 If I wanted to, I'd need to copy the exact same CSS code, 953 00:49:08,880 --> 00:49:10,420 put it inside of another page. 954 00:49:10,420 --> 00:49:12,990 But then we run into the same problem of duplication, 955 00:49:12,990 --> 00:49:15,990 where I've now had to repeat myself across multiple different pages, 956 00:49:15,990 --> 00:49:20,140 putting the exact same CSS code across all those different pages. 957 00:49:20,140 --> 00:49:22,050 So there is an improvement we can make. 958 00:49:22,050 --> 00:49:25,980 And the improvement we can make is to take that CSS code 959 00:49:25,980 --> 00:49:29,230 and just move it to an entirely different file. 960 00:49:29,230 --> 00:49:32,880 So instead of putting this style code inside of a style element 961 00:49:32,880 --> 00:49:36,750 inside of this HTML page, I'll just create a new file 962 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 963 00:49:42,270 --> 00:49:43,350 that I care about. 964 00:49:43,350 --> 00:49:46,840 I want to take every h1, I want to change its color to blue. 965 00:49:46,840 --> 00:49:51,350 And now, I want to change its text align property to center. 966 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. 967 00:49:57,260 --> 00:49:59,530 Instead of this style element altogether, 968 00:49:59,530 --> 00:50:05,080 I can just link my CSS code in that CSS file, called styles.css, 969 00:50:05,080 --> 00:50:08,140 to this particular HTML page. 970 00:50:08,140 --> 00:50:10,510 And how do I link the styles.css file? 971 00:50:10,510 --> 00:50:13,690 Well, I can do so again in the head section of my web page 972 00:50:13,690 --> 00:50:17,890 using a link tag, where I can say I'd like this link 973 00:50:17,890 --> 00:50:21,740 to be the relationship is it's going to be a style sheet, 974 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. 975 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. 976 00:50:29,680 --> 00:50:32,530 And then, just as in the case of a link to another page, 977 00:50:32,530 --> 00:50:37,540 I use href to specify a hyperlink reference, what I want to link to, 978 00:50:37,540 --> 00:50:40,930 I'm now going to specify using an href attribute what 979 00:50:40,930 --> 00:50:43,120 CSS file I would like to know link. 980 00:50:43,120 --> 00:50:48,160 And in this case the CSS file that I'm going to link is styles.css. 981 00:50:48,160 --> 00:50:51,790 That is the file that just so happens to contain all of the CSS 982 00:50:51,790 --> 00:50:55,390 that I would like to apply to this particular file. 983 00:50:55,390 --> 00:50:59,380 Now, if I refresh the page, I see again nothing has changed. 984 00:50:59,380 --> 00:51:02,200 In the last two revisions, the page has stayed exactly the same 985 00:51:02,200 --> 00:51:03,670 as far as the user is concerned. 986 00:51:03,670 --> 00:51:04,870 They still see two headings. 987 00:51:04,870 --> 00:51:05,960 Both of them are centered. 988 00:51:05,960 --> 00:51:07,180 Both of them are blue. 989 00:51:07,180 --> 00:51:10,480 But now, the advantage is that here is my HTML. 990 00:51:10,480 --> 00:51:12,350 It's shorter than it was before. 991 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. 992 00:51:17,110 --> 00:51:21,490 I factored it all out into the separate styles.css file. 993 00:51:21,490 --> 00:51:26,170 And now if I have multiple HTML files that are all using the same styling, 994 00:51:26,170 --> 00:51:29,530 I can just link them all to the same styles.css 995 00:51:29,530 --> 00:51:33,250 file, such that they're all using the same style information. 996 00:51:33,250 --> 00:51:34,810 I don't need to repeat myself. 997 00:51:34,810 --> 00:51:38,230 And if ever I need to make a change across all of those pages, 998 00:51:38,230 --> 00:51:40,180 I just change the styling once. 999 00:51:40,180 --> 00:51:42,550 I change the styles.css file. 1000 00:51:42,550 --> 00:51:46,210 And then all of the web pages that are linked to that style sheet 1001 00:51:46,210 --> 00:51:49,410 will update as well in order to reflect those changes. 1002 00:51:49,410 --> 00:51:53,080 So again, we've been able to factor out some of this style information 1003 00:51:53,080 --> 00:51:57,330 to a separate file just to make our lives a little bit easier. 1004 00:51:57,330 --> 00:51:59,080 All right, so so far we've now seen how we 1005 00:51:59,080 --> 00:52:03,370 can CSS in a number of different ways to add some basic styles to our page. 1006 00:52:03,370 --> 00:52:06,230 We've seen that we can take an element and change its color. 1007 00:52:06,230 --> 00:52:08,860 We've seen how we can take an element and change its alignment, 1008 00:52:08,860 --> 00:52:11,980 move it from left aligned to right aligned to centered, for example. 1009 00:52:11,980 --> 00:52:14,860 As it turns out, there are a lot of different CSS properties 1010 00:52:14,860 --> 00:52:17,800 that we can add to our HTML elements in order 1011 00:52:17,800 --> 00:52:21,340 to style them in various different ways, more than we'll have time 1012 00:52:21,340 --> 00:52:22,940 to talk about in this lecture. 1013 00:52:22,940 --> 00:52:24,760 But now, let's just take a look at a couple 1014 00:52:24,760 --> 00:52:27,570 of the most popular, most common CSS properties 1015 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. 1016 00:52:32,410 --> 00:52:34,720 And one of the most powerful tools for CSS 1017 00:52:34,720 --> 00:52:37,570 is controlling the size of various different elements. 1018 00:52:37,570 --> 00:52:41,710 By default, HTML just used a default size for everything on the page. 1019 00:52:41,710 --> 00:52:46,330 But if I want to more precisely control how big any particular element is I 1020 00:52:46,330 --> 00:52:49,430 can use CSS in order to do so. 1021 00:52:49,430 --> 00:52:53,740 So let me now create a new file that I will call a size.html. 1022 00:52:53,740 --> 00:52:59,220 We'll start with the same HTML code and call the page Size. 1023 00:52:59,220 --> 00:53:02,160 And now, inside the body of my page, let me just 1024 00:53:02,160 --> 00:53:05,400 have a vertical section of my page, just some section of my page 1025 00:53:05,400 --> 00:53:07,120 that's going to have some content. 1026 00:53:07,120 --> 00:53:10,500 And I'm going to put this inside of a div tag. 1027 00:53:10,500 --> 00:53:13,200 Now, this is the first time that we've seen a div in HTML. 1028 00:53:13,200 --> 00:53:15,720 You can think of a div as just a division 1029 00:53:15,720 --> 00:53:18,270 of the page, some section of the page that's going 1030 00:53:18,270 --> 00:53:20,010 to have some content inside of it. 1031 00:53:20,010 --> 00:53:24,750 And we use divs because it makes it easy to reference a particular div or nest 1032 00:53:24,750 --> 00:53:28,290 information inside of other pieces of information, or just to divide 1033 00:53:28,290 --> 00:53:31,110 and break up our page into multiple different sections. 1034 00:53:31,110 --> 00:53:33,110 Here, inside of the body, I'm just going to have 1035 00:53:33,110 --> 00:53:37,080 a single div that is going to say something like hello world. 1036 00:53:37,080 --> 00:53:40,020 And now, I'm going to add some style to this page 1037 00:53:40,020 --> 00:53:42,240 in order to control the size of this div, 1038 00:53:42,240 --> 00:53:45,480 to control the size of this section of my web page. 1039 00:53:45,480 --> 00:53:46,830 I could use inline styling. 1040 00:53:46,830 --> 00:53:48,780 I could factor things out into another file. 1041 00:53:48,780 --> 00:53:51,270 But since I'm only dealing with one file for now, 1042 00:53:51,270 --> 00:53:54,150 I'm just going to add a style section to the top of my web page 1043 00:53:54,150 --> 00:53:57,030 just so you can more clearly see how the style of this page 1044 00:53:57,030 --> 00:54:02,280 is going to map on to the way that we're modifying these HTML elements. 1045 00:54:02,280 --> 00:54:05,980 And I would like to style this div in a couple of ways. 1046 00:54:05,980 --> 00:54:08,230 One thing I can do is give the div a background color. 1047 00:54:08,230 --> 00:54:12,000 Let me change its background color to blue, for example. 1048 00:54:12,000 --> 00:54:14,940 And then I can say, all right, I'd like to give this div a width 1049 00:54:14,940 --> 00:54:17,310 and a height, some size information. 1050 00:54:17,310 --> 00:54:21,090 I can say, go ahead and give this div a width of 100 pixels 1051 00:54:21,090 --> 00:54:25,590 and maybe a height of 400 pixels. 1052 00:54:25,590 --> 00:54:31,580 So now, when I go ahead and open up size.html, this is what I see. 1053 00:54:31,580 --> 00:54:36,110 I see in a 100 by 400 pixel wide vertical, or rectangular, 1054 00:54:36,110 --> 00:54:39,560 section of my page, I see the words Hello World. 1055 00:54:39,560 --> 00:54:42,230 And so you might imagine if you have multiple different elements 1056 00:54:42,230 --> 00:54:45,290 on your page, as your web pages start to get a little bit more complex, 1057 00:54:45,290 --> 00:54:48,590 you probably want to have some more precise control over how wide 1058 00:54:48,590 --> 00:54:50,990 or how tall any particular element is. 1059 00:54:50,990 --> 00:54:53,600 And these width and height attributes can be very helpful 1060 00:54:53,600 --> 00:54:56,810 because I can very easily change the width to say like 500 pixels, 1061 00:54:56,810 --> 00:54:57,830 for example. 1062 00:54:57,830 --> 00:55:01,120 And now when I refresh the page, now I see that the width of this page, 1063 00:55:01,120 --> 00:55:06,070 or this div, the section of the page, has actually now gotten a lot wider. 1064 00:55:06,070 --> 00:55:10,520 And so we have the ability to control size using CSS. 1065 00:55:10,520 --> 00:55:13,560 Go ahead and can close some of these pages that I no longer need. 1066 00:55:13,560 --> 00:55:16,100 And now take a look at some other things that we can do. 1067 00:55:16,100 --> 00:55:17,690 In addition to controlling the size-- and let 1068 00:55:17,690 --> 00:55:19,980 me change this color to something a little bit lighter, 1069 00:55:19,980 --> 00:55:25,140 something like orange, such that now if I open up size, it looks like this. 1070 00:55:25,140 --> 00:55:26,760 I'll make this a little bit smaller. 1071 00:55:26,760 --> 00:55:29,710 Let's try 200 by 200 pixels. 1072 00:55:29,710 --> 00:55:31,120 It looks now like this. 1073 00:55:31,120 --> 00:55:34,210 You might imagine there are some other changes that I might like to make. 1074 00:55:34,210 --> 00:55:38,500 Like this Hello World, for example, is very close to the edge 1075 00:55:38,500 --> 00:55:39,730 of this particular div. 1076 00:55:39,730 --> 00:55:42,510 It's right up against the upper left corner of that div. 1077 00:55:42,510 --> 00:55:44,260 I might want to change that by adding what 1078 00:55:44,260 --> 00:55:48,430 we might call some padding to this particular HTML element, some space, 1079 00:55:48,430 --> 00:55:50,710 just so that the content of the element isn't 1080 00:55:50,710 --> 00:55:54,410 so close to the border of the element itself. 1081 00:55:54,410 --> 00:55:58,600 So, for example, one thing I can do is inside this div add some padding. 1082 00:55:58,600 --> 00:56:03,500 Say maybe I want 20 pixels worth of padding on the inside of the element, 1083 00:56:03,500 --> 00:56:06,220 such that now when I refresh the page, we 1084 00:56:06,220 --> 00:56:09,440 see that we have some padding along the outside of the element. 1085 00:56:09,440 --> 00:56:11,770 So that Hello World now shows up not right up 1086 00:56:11,770 --> 00:56:16,190 against the edge of the element, but inside a little bit as well. 1087 00:56:16,190 --> 00:56:18,130 And if we have a particular HTML element that 1088 00:56:18,130 --> 00:56:20,260 maybe is too close to the edge of the screen, 1089 00:56:20,260 --> 00:56:22,490 maybe it's too close to the top of the screen, 1090 00:56:22,490 --> 00:56:25,660 we can also add space around outside of the element 1091 00:56:25,660 --> 00:56:28,580 by adding what we call margin to the element as well. 1092 00:56:28,580 --> 00:56:32,890 So I can say let's give it 20 pixels of margin inside of this div. 1093 00:56:32,890 --> 00:56:34,000 And then refresh. 1094 00:56:34,000 --> 00:56:37,840 And now we see that whereas before this div was very close 1095 00:56:37,840 --> 00:56:39,940 to the upper left edge of the screen, now 1096 00:56:39,940 --> 00:56:42,380 we've moved it 20 pixels away from everything. 1097 00:56:42,380 --> 00:56:46,090 So it's got some space on all four sides of it. 1098 00:56:46,090 --> 00:56:49,040 So that's how we can now use margin and padding just 1099 00:56:49,040 --> 00:56:51,250 to make the page look a little bit nicer to the user. 1100 00:56:51,250 --> 00:56:54,490 So objects are not too close together or too far apart. 1101 00:56:54,490 --> 00:56:58,060 Padding, again, is on the inside of the border of the element. 1102 00:56:58,060 --> 00:57:00,710 I can add 20 pixels of padding, for example, 1103 00:57:00,710 --> 00:57:03,110 to make sure that the content inside of the element, 1104 00:57:03,110 --> 00:57:06,460 in this case, the words Hello World, just have a little bit of space 1105 00:57:06,460 --> 00:57:07,390 from the border. 1106 00:57:07,390 --> 00:57:09,610 And that's padding on the inside of the element. 1107 00:57:09,610 --> 00:57:12,370 Margin, meanwhile, is on the outside of the element. 1108 00:57:12,370 --> 00:57:15,430 We add some margin along the outside of the border to space 1109 00:57:15,430 --> 00:57:17,620 the element out from other elements that might 1110 00:57:17,620 --> 00:57:20,680 be nearby it to make sure that there's enough space between the border 1111 00:57:20,680 --> 00:57:23,420 of the element from the top of the screen and also from the left 1112 00:57:23,420 --> 00:57:26,170 and also the bottom and the right, though there's no objects there 1113 00:57:26,170 --> 00:57:28,840 that we're currently creating space from. 1114 00:57:28,840 --> 00:57:32,500 So by combining width and height and margin and padding, 1115 00:57:32,500 --> 00:57:35,560 we now have the ability, using CSS, to make sure 1116 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, 1117 00:57:38,610 --> 00:57:41,320 so that elements have the right amount of spacing from each other 1118 00:57:41,320 --> 00:57:43,480 and are the correct size. 1119 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. 1120 00:57:47,410 --> 00:57:50,350 In addition to just changing where particular elements are, 1121 00:57:50,350 --> 00:57:53,590 like centering text or adding size and margin and padding, 1122 00:57:53,590 --> 00:57:57,250 we can also use CSS to change how elements actually look. 1123 00:57:57,250 --> 00:58:00,250 We've seen it to change the color of text, changing it from one color, 1124 00:58:00,250 --> 00:58:02,740 like black, to another color, like blue. 1125 00:58:02,740 --> 00:58:07,030 But we can also use CSS to be able to change something like the font 1126 00:58:07,030 --> 00:58:09,220 that we use in order to display text. 1127 00:58:09,220 --> 00:58:12,190 Modern web pages don't show everything in the exact same font. 1128 00:58:12,190 --> 00:58:14,590 Usually, some designer is choosing what font 1129 00:58:14,590 --> 00:58:17,770 they want for any particular web page. 1130 00:58:17,770 --> 00:58:19,820 So let's experiment with those possibilities. 1131 00:58:19,820 --> 00:58:24,220 I'll now create a new file that I'll call font.html, 1132 00:58:24,220 --> 00:58:29,450 inside of which will be an HTML page called font. 1133 00:58:29,450 --> 00:58:31,470 And inside the body, I'll again just have a div 1134 00:58:31,470 --> 00:58:34,740 that says Hello World, same as before. 1135 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, 1136 00:58:39,720 --> 00:58:43,740 I would like to add some font information to this div. 1137 00:58:43,740 --> 00:58:47,400 And in particular, there are a number of different font-related CSS properties 1138 00:58:47,400 --> 00:58:51,930 that I can add to control the font of any particular HTML element. 1139 00:58:51,930 --> 00:58:55,110 One thing I can specify is the font family, 1140 00:58:55,110 --> 00:59:00,000 specifying what font would I like to use in order to display this text. 1141 00:59:00,000 --> 00:59:02,630 And maybe I want to display it in Arial, for example, 1142 00:59:02,630 --> 00:59:05,550 which is a common font used on the internet, such 1143 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, 1144 00:59:12,390 --> 00:59:15,480 different from the text that I was using before. 1145 00:59:15,480 --> 00:59:18,240 You can also specify multiple different fonts. 1146 00:59:18,240 --> 00:59:20,160 Not all computers support all fonts. 1147 00:59:20,160 --> 00:59:23,790 So I could specify that just in case Arial isn't supported, 1148 00:59:23,790 --> 00:59:27,360 fall back to any sans serif font, any of the fonts that 1149 00:59:27,360 --> 00:59:30,700 don't have the little glyphs at the edge of each of the characters. 1150 00:59:30,700 --> 00:59:33,900 So now, if I refresh the page, because my web browser supports Arial, 1151 00:59:33,900 --> 00:59:35,340 I don't notice anything different. 1152 00:59:35,340 --> 00:59:38,380 But you might imagine if you're using more complex fonts that not all web 1153 00:59:38,380 --> 00:59:41,160 browsers have or support, you might add some backups just 1154 00:59:41,160 --> 00:59:44,970 in case the font you want isn't actually available. 1155 00:59:44,970 --> 00:59:46,980 In addition to a font family, I might also 1156 00:59:46,980 --> 00:59:51,310 specify a font size, how big I want the font to be inside of this div. 1157 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, 1158 00:59:54,910 --> 00:59:58,140 28 pixels, for example, such that now I refresh it. 1159 00:59:58,140 --> 01:00:01,620 And now, this div appears using larger text. 1160 01:00:01,620 --> 01:00:03,840 And I can also, just as like text editors 1161 01:00:03,840 --> 01:00:07,650 let you specify whether you want it to be normal text or bolded text, 1162 01:00:07,650 --> 01:00:11,160 I can specify a font weight for this div and say 1163 01:00:11,160 --> 01:00:14,130 that in addition to being in font Arial in size 28, 1164 01:00:14,130 --> 01:00:18,090 I would also like for the font to be bold, such that now I refresh it, 1165 01:00:18,090 --> 01:00:20,820 and now, the font shows up as bold. 1166 01:00:20,820 --> 01:00:24,390 And using these CSS style sheets, we're able to selectively apply 1167 01:00:24,390 --> 01:00:27,870 the styling to only particular parts of the web page. 1168 01:00:27,870 --> 01:00:33,030 If I have another underneath this div some more text down here, for example, 1169 01:00:33,030 --> 01:00:35,760 that additional text that's outside of the div 1170 01:00:35,760 --> 01:00:38,880 isn't going to be affected by the CSS styling, such 1171 01:00:38,880 --> 01:00:41,520 that now if I refresh this page or some more text 1172 01:00:41,520 --> 01:00:46,440 shows up in that same standard default font provided by my web browser and not 1173 01:00:46,440 --> 01:00:49,500 the custom font that I have specified to apply to only 1174 01:00:49,500 --> 01:00:53,220 this particular part of the HTML page. 1175 01:00:53,220 --> 01:00:57,990 So that now is the ability to add fonts to our page too. 1176 01:00:57,990 --> 01:00:59,790 Another thing that we might want to do is 1177 01:00:59,790 --> 01:01:03,660 to be able to add some sort of border around our HTML elements. 1178 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 1179 01:01:07,770 --> 01:01:09,300 from another part of the page. 1180 01:01:09,300 --> 01:01:12,250 So I could add a border by going to this div and saying, 1181 01:01:12,250 --> 01:01:13,740 let me give this div a border. 1182 01:01:13,740 --> 01:01:19,680 And maybe I want the border to be like a 3 pixel solid black border, 1183 01:01:19,680 --> 01:01:20,610 for instance. 1184 01:01:20,610 --> 01:01:23,370 I can specify how big I want the border to be. 1185 01:01:23,370 --> 01:01:25,950 I can specify whether I want the border to be a solid line 1186 01:01:25,950 --> 01:01:27,630 or a dashed or dotted line. 1187 01:01:27,630 --> 01:01:32,110 And I can specify what color I would like that border to be as well. 1188 01:01:32,110 --> 01:01:34,290 So now, when I refresh this, I now see I have 1189 01:01:34,290 --> 01:01:36,450 a border around this entire section, around 1190 01:01:36,450 --> 01:01:40,170 this entire div, inside of my web page. 1191 01:01:40,170 --> 01:01:43,140 And you can imagine these borders being helpful for styling 1192 01:01:43,140 --> 01:01:45,190 various different parts of my page. 1193 01:01:45,190 --> 01:01:47,230 So, for example, if we go back to that table 1194 01:01:47,230 --> 01:01:50,400 that we were looking at a moment ago when we were dealing with oceans, where 1195 01:01:50,400 --> 01:01:53,400 I had Ocean and Pacific Ocean and Atlantic Ocean, 1196 01:01:53,400 --> 01:01:55,620 this is structured in the format of a table. 1197 01:01:55,620 --> 01:01:57,330 We have rows and columns. 1198 01:01:57,330 --> 01:01:59,220 But it doesn't look great right now. 1199 01:01:59,220 --> 01:02:01,620 I might like to add some styling in order 1200 01:02:01,620 --> 01:02:05,170 to improve the way that this table looks, for example. 1201 01:02:05,170 --> 01:02:07,020 So let's give that a try. 1202 01:02:07,020 --> 01:02:09,750 I'll go ahead and go back into table.html, 1203 01:02:09,750 --> 01:02:12,960 that HTML file I was using before where I had this table. 1204 01:02:12,960 --> 01:02:17,130 And let me now add some style information to this table. 1205 01:02:17,130 --> 01:02:19,230 I might say that for this table I would like 1206 01:02:19,230 --> 01:02:25,340 to give it a border that is maybe a 1 pixel solid black border, 1207 01:02:25,340 --> 01:02:29,720 such that now when I refresh the page, I have a 1 pixel solid black border 1208 01:02:29,720 --> 01:02:31,930 around the entirety of the table. 1209 01:02:31,930 --> 01:02:32,930 All right, that's great. 1210 01:02:32,930 --> 01:02:36,410 But I also really wanted a border in between the rows and the columns 1211 01:02:36,410 --> 01:02:37,100 as well. 1212 01:02:37,100 --> 01:02:39,860 In particular, every table data item, I might 1213 01:02:39,860 --> 01:02:44,420 like to have some additional CSS supplied to those too. 1214 01:02:44,420 --> 01:02:46,880 So I might say for every table data cell-- 1215 01:02:46,880 --> 01:02:49,580 again td stood for table data, and those were 1216 01:02:49,580 --> 01:02:52,130 the individual cells within my table-- 1217 01:02:52,130 --> 01:02:54,290 I might specify that I would like those to also 1218 01:02:54,290 --> 01:02:59,970 have a border that is 1 pixel solid black, such that now I 1219 01:02:59,970 --> 01:03:01,240 refresh the page. 1220 01:03:01,240 --> 01:03:05,280 And now, each of my table data cells also has a border around it. 1221 01:03:05,280 --> 01:03:08,700 Now, this applied to the table data cells in the body of my page, 1222 01:03:08,700 --> 01:03:11,790 but it didn't yet apply to these cells up in the heading. 1223 01:03:11,790 --> 01:03:17,370 And that's because those were th elements, table headers. 1224 01:03:17,370 --> 01:03:19,540 And so here, we have a couple of options. 1225 01:03:19,540 --> 01:03:22,320 I could specify, once more, table headers 1226 01:03:22,320 --> 01:03:26,760 I would like to give a border of 1 pixel solid black. 1227 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 1228 01:03:30,270 --> 01:03:31,200 headers. 1229 01:03:31,200 --> 01:03:33,630 But again, one thing that should be crossing your mind now 1230 01:03:33,630 --> 01:03:36,780 is that there's a fair amount of redundancy here, some repeated style 1231 01:03:36,780 --> 01:03:39,060 code that shows up in multiple different places. 1232 01:03:39,060 --> 01:03:42,510 Table data cells in the body of my page, I really 1233 01:03:42,510 --> 01:03:46,100 want to be styled in a very similar way to table header cells. 1234 01:03:46,100 --> 01:03:51,150 And so it'd be nice if I could somehow consolidate these two different CSS 1235 01:03:51,150 --> 01:03:55,620 selectors, these ways of me saying, style table data, style table headers. 1236 01:03:55,620 --> 01:03:58,200 I'd like to combine them into one. 1237 01:03:58,200 --> 01:04:00,090 And you can, in fact, do this in CSS. 1238 01:04:00,090 --> 01:04:04,560 There are a number of different CSS selectors, ways of choosing elements. 1239 01:04:04,560 --> 01:04:08,220 And one of them is just called the multiple element selector, 1240 01:04:08,220 --> 01:04:12,450 that if I want to select both table data cells and table headers, 1241 01:04:12,450 --> 01:04:19,230 then I can do so by saying td comma th and delete these three lines 1242 01:04:19,230 --> 01:04:20,700 down there. 1243 01:04:20,700 --> 01:04:22,770 What these three lines are now saying are 1244 01:04:22,770 --> 01:04:26,370 that I would like to style all table data cells and table 1245 01:04:26,370 --> 01:04:27,820 headers in the same way. 1246 01:04:27,820 --> 01:04:30,460 And I could even combine table if I wanted to for good measure. 1247 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 1248 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. 1249 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 1250 01:04:43,080 --> 01:04:45,780 around everything on the table and also a border 1251 01:04:45,780 --> 01:04:47,820 around each of the individual cells. 1252 01:04:47,820 --> 01:04:50,740 Usually, those are collapsed just into a single line. 1253 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. 1254 01:04:54,280 --> 01:04:59,730 I can add a CSS property to the table called border collapse and just say, 1255 01:04:59,730 --> 01:05:03,180 I would like to collapse all of the borders in the table. 1256 01:05:03,180 --> 01:05:06,480 Just going to show you there are many, many different CSS properties, far more 1257 01:05:06,480 --> 01:05:07,920 than we'll be looking at today. 1258 01:05:07,920 --> 01:05:10,290 But they're easy things to reference, that you can easily 1259 01:05:10,290 --> 01:05:12,580 look up how to collapse borders in a table 1260 01:05:12,580 --> 01:05:16,200 and then find a CSS property like this that you can then use and apply 1261 01:05:16,200 --> 01:05:17,980 to your web page. 1262 01:05:17,980 --> 01:05:19,330 So now I refresh that. 1263 01:05:19,330 --> 01:05:23,040 And now I see that I have a border, just a single border, around all 1264 01:05:23,040 --> 01:05:26,880 of the cells in this particular page. 1265 01:05:26,880 --> 01:05:30,040 Next, what I might like to do, though, is like add some space around here. 1266 01:05:30,040 --> 01:05:34,780 Like it seems like this text is very tight against the border of this table. 1267 01:05:34,780 --> 01:05:37,560 So in order to do so, I want to add some spacing. 1268 01:05:37,560 --> 01:05:40,080 And recall again, do I want margin or padding? 1269 01:05:40,080 --> 01:05:45,360 Margin is spacing around side of the border of a particular HTML element, 1270 01:05:45,360 --> 01:05:47,920 whereas padding is inside of the border. 1271 01:05:47,920 --> 01:05:50,220 So if I want some space inside of the border, 1272 01:05:50,220 --> 01:05:53,370 just to space out the text from the border itself, then what I want 1273 01:05:53,370 --> 01:05:56,730 is padding inside of all of my table cells. 1274 01:05:56,730 --> 01:06:00,210 So I can say let me add 5 pixels worth of padding 1275 01:06:00,210 --> 01:06:04,260 inside of all of my table data cells and table header cells. 1276 01:06:04,260 --> 01:06:05,530 Refresh the page. 1277 01:06:05,530 --> 01:06:08,640 And now, here's what the resulting table looks like. 1278 01:06:08,640 --> 01:06:11,430 Just by adding a little bit of CSS specifying what 1279 01:06:11,430 --> 01:06:13,650 border I want around the edge of the page, 1280 01:06:13,650 --> 01:06:16,950 specifying a little bit of padding inside of each of the cells, 1281 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 1282 01:06:20,590 --> 01:06:24,930 ago when I just had the HTML structure of the page and not the CSS 1283 01:06:24,930 --> 01:06:29,910 to describe how I actually wanted that page to be styled. 1284 01:06:29,910 --> 01:06:31,980 And notice again that in doing so, we were 1285 01:06:31,980 --> 01:06:35,190 able to use one of these CSS selectors. 1286 01:06:35,190 --> 01:06:39,330 I was able to say that I wanted to use the multiple element selector, which 1287 01:06:39,330 --> 01:06:43,590 is just this comma here, to specify that I would like to apply this styling, 1288 01:06:43,590 --> 01:06:48,480 not just to td's but also to th's as well. 1289 01:06:48,480 --> 01:06:52,080 We'll take a look at some additional examples of CSS selectors 1290 01:06:52,080 --> 01:06:54,090 in just a moment. 1291 01:06:54,090 --> 01:06:57,810 But next, let's turn our attention to some more tricky instances 1292 01:06:57,810 --> 01:07:02,530 where we might want to apply styling to multiple elements at the same time. 1293 01:07:02,530 --> 01:07:07,380 Let's imagine-- and let's go back to style.html, where we had some style 1294 01:07:07,380 --> 01:07:10,390 code, where I had one heading. 1295 01:07:10,390 --> 01:07:13,210 I'll call this Heading 1. 1296 01:07:13,210 --> 01:07:17,800 And let's get myself to other headings, Heading 2 and Heading 3. 1297 01:07:17,800 --> 01:07:22,510 All of these now are h1 elements that are going to show up the same way, 1298 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 1299 01:07:27,460 --> 01:07:32,890 a color of blue, then when I open this page where I have three h1 tags, 1300 01:07:32,890 --> 01:07:38,260 each of which has a color of blue, when I open up style.html, 1301 01:07:38,260 --> 01:07:40,560 what I'm going to see is something like this-- 1302 01:07:40,560 --> 01:07:44,200 three headings, each of which happens to have a color of blue. 1303 01:07:44,200 --> 01:07:48,430 But what would happen now if I wanted to style only the first heading. 1304 01:07:48,430 --> 01:07:50,270 I want Heading 1 to be blue. 1305 01:07:50,270 --> 01:07:54,520 But I don't want to style Heading 2 and Heading 3. 1306 01:07:54,520 --> 01:07:56,180 How do I do that? 1307 01:07:56,180 --> 01:07:59,770 Well, one thing we could do is go back to the inline styling 1308 01:07:59,770 --> 01:08:05,440 we did a moment ago, where inside of h1, I said style color is blue. 1309 01:08:05,440 --> 01:08:08,200 And that would say for just this very first heading, 1310 01:08:08,200 --> 01:08:12,280 I would like that to be blue, but not the other elements at all. 1311 01:08:12,280 --> 01:08:14,980 But this again we decided was not the best design. 1312 01:08:14,980 --> 01:08:20,140 This inline styling, commingling of HTML and CSS just gets a little bit messy. 1313 01:08:20,140 --> 01:08:23,080 And it would be nice to be able to factor all of our style code 1314 01:08:23,080 --> 01:08:26,110 to a separate part of the page altogether. 1315 01:08:26,110 --> 01:08:27,380 So how do we do this? 1316 01:08:27,380 --> 01:08:32,790 Well, we need some way to uniquely reference this particular HTML element. 1317 01:08:32,790 --> 01:08:37,350 And in order to do so, we can given HTML element an ID. 1318 01:08:37,350 --> 01:08:42,100 An ID is just some unique name we give to an HTML element, 1319 01:08:42,100 --> 01:08:45,060 so that we can reference it more easily later on. 1320 01:08:45,060 --> 01:08:47,600 Let me just go ahead and give this an ID of Foo. 1321 01:08:47,600 --> 01:08:48,850 It could be any idea you want. 1322 01:08:48,850 --> 01:08:51,040 But Foo is just a generic name here. 1323 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 1324 01:08:55,210 --> 01:09:00,380 or in other code, we can reference and find this particular HTML element. 1325 01:09:00,380 --> 01:09:03,640 And in particular now, in the style section of my web page, 1326 01:09:03,640 --> 01:09:07,960 instead of styling all h1 elements, I only want to style 1327 01:09:07,960 --> 01:09:10,630 the element that has an ID of Foo. 1328 01:09:10,630 --> 01:09:12,250 IDs are by definition unique. 1329 01:09:12,250 --> 01:09:15,810 There can only be one element in this page that has an ID of Foo, 1330 01:09:15,810 --> 01:09:18,160 otherwise it's not valid HTML. 1331 01:09:18,160 --> 01:09:20,810 And so in order to do so, we're going to use #Foo. 1332 01:09:23,430 --> 01:09:27,490 The hash mark symbol is just CSS's way of selecting just something 1333 01:09:27,490 --> 01:09:29,220 with a particular ID. 1334 01:09:29,220 --> 01:09:33,460 So instead of just h1 for selecting all of the h1 tags, 1335 01:09:33,460 --> 01:09:35,620 if I want to select something by its ID, I 1336 01:09:35,620 --> 01:09:41,260 say #Foo to say only style the element that has an ID of Foo 1337 01:09:41,260 --> 01:09:45,520 and give it a color of blue, for example. 1338 01:09:45,520 --> 01:09:48,680 So this style code now will find something with a particular ID 1339 01:09:48,680 --> 01:09:51,960 and give it a style to correspond with it, 1340 01:09:51,960 --> 01:09:56,490 such that now if I reload this page, only Heading 1 is styled. 1341 01:09:56,490 --> 01:09:58,430 Heading 2 and Heading 3 are not. 1342 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, 1343 01:10:02,460 --> 01:10:09,370 and then in my style code, just style that particular part of my HTML page. 1344 01:10:09,370 --> 01:10:13,630 Of course, what if I wanted to style multiple, but not all of the headings? 1345 01:10:13,630 --> 01:10:17,470 Like maybe I want to style both Heading 1 and Heading 2. 1346 01:10:17,470 --> 01:10:19,010 Now, I could use a second ID. 1347 01:10:19,010 --> 01:10:21,640 Maybe give us an ID of Bar, for example. 1348 01:10:21,640 --> 01:10:26,170 And then style both the element with ID Foo and the element with ID Bar. 1349 01:10:26,170 --> 01:10:29,290 But now we're starting to add IDs unnecessarily. 1350 01:10:29,290 --> 01:10:30,910 I have too many different names. 1351 01:10:30,910 --> 01:10:32,620 Things can start to get messy, especially 1352 01:10:32,620 --> 01:10:34,990 as my web pages start to get bigger. 1353 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, 1354 01:10:40,420 --> 01:10:44,590 sometimes I want to give a name to an HTML element that is not unique, 1355 01:10:44,590 --> 01:10:48,430 some name that can apply to multiple different HTML elements. 1356 01:10:48,430 --> 01:10:51,310 And when we do that, we call that a class. 1357 01:10:51,310 --> 01:10:54,850 An ID is a way of giving a unique name to an HTML element, 1358 01:10:54,850 --> 01:10:58,120 while a class is a way of giving a name to an HTML element that 1359 01:10:58,120 --> 01:10:59,020 might not be unique. 1360 01:10:59,020 --> 01:11:04,780 It might apply it to zero or one or two or more different HTML elements. 1361 01:11:04,780 --> 01:11:06,520 So here's what that might look like. 1362 01:11:06,520 --> 01:11:10,060 Instead of giving each of these h1s an ID that's different, 1363 01:11:10,060 --> 01:11:11,800 I can give each one a class. 1364 01:11:11,800 --> 01:11:14,740 We'll give this a class of Baz, again, just another arbitrary name 1365 01:11:14,740 --> 01:11:16,280 that we've chosen. 1366 01:11:16,280 --> 01:11:20,210 And I'll give this each one a class of Baz as well. 1367 01:11:20,210 --> 01:11:24,970 They both belong to the same class called Baz, in this case. 1368 01:11:24,970 --> 01:11:28,930 And now, inside of my style code, I would like to say just the style 1369 01:11:28,930 --> 01:11:31,980 the elements that are of class Baz. 1370 01:11:31,980 --> 01:11:34,070 And just as we have a special symbol, the hashtag, 1371 01:11:34,070 --> 01:11:37,790 for styling definitely something with a particular ID, 1372 01:11:37,790 --> 01:11:41,690 to style everything with a particular class, I can use a dot. 1373 01:11:41,690 --> 01:11:46,330 So dot Baz, in this case, is going to style only the elements that 1374 01:11:46,330 --> 01:11:49,040 have a class of Baz. 1375 01:11:49,040 --> 01:11:52,870 So here, I can now say, take all of the elements with a class of Baz 1376 01:11:52,870 --> 01:11:57,900 and go ahead and give those a color of blue. 1377 01:11:57,900 --> 01:12:01,550 So now, I have two h1s that belong to class Baz. 1378 01:12:01,550 --> 01:12:03,330 The other h1 does not. 1379 01:12:03,330 --> 01:12:06,650 And I've styled only the things that are of class Baz, 1380 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 1381 01:12:10,250 --> 01:12:12,730 headings, those do get styled as blue. 1382 01:12:12,730 --> 01:12:14,570 But the third heading does not, because I've 1383 01:12:14,570 --> 01:12:17,270 applied a class to these two elements that does not get 1384 01:12:17,270 --> 01:12:20,220 applied to this third element there. 1385 01:12:20,220 --> 01:12:22,190 So oftentimes, it can be very helpful if you 1386 01:12:22,190 --> 01:12:24,200 have to start to design larger web pages where 1387 01:12:24,200 --> 01:12:26,510 you have multiple different elements, some of which 1388 01:12:26,510 --> 01:12:30,080 might be styled in some ways and other elements that might be styled similarly 1389 01:12:30,080 --> 01:12:34,790 to one another, you can add IDs and classes to your HTML elements 1390 01:12:34,790 --> 01:12:37,130 just to clean up the way that you write your CSS, 1391 01:12:37,130 --> 01:12:40,100 to be able to very specifically pinpoint one element that you 1392 01:12:40,100 --> 01:12:45,260 want to apply a style to or to apply styling to the entire class of elements 1393 01:12:45,260 --> 01:12:46,850 as well. 1394 01:12:46,850 --> 01:12:49,310 Now, one tricky thing you might imagine now 1395 01:12:49,310 --> 01:12:55,340 is that now we have multiple ways of referencing the exact same element. 1396 01:12:55,340 --> 01:12:57,470 So, for example, if you imagine that I just 1397 01:12:57,470 --> 01:13:02,420 had a single h1, which had an ID of Foo, for example, that I've 1398 01:13:02,420 --> 01:13:07,690 named Foo, what would happen if, for instance, I said all of the h1s I 1399 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, 1400 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? 1401 01:13:17,210 --> 01:13:18,170 What might happen then? 1402 01:13:18,170 --> 01:13:21,020 These would seem to be conflicting, where now suddenly we 1403 01:13:21,020 --> 01:13:27,110 have an h1 style tag that is saying I should style h1s in this way, 1404 01:13:27,110 --> 01:13:29,850 but I should style element Foo in another way. 1405 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? 1406 01:13:35,270 --> 01:13:37,340 And in order to deal with that we have to start 1407 01:13:37,340 --> 01:13:41,180 to deal with the CSS problem of specificity, of what happens when 1408 01:13:41,180 --> 01:13:47,000 I have multiple different CSS selectors that could apply to the exact same HTML 1409 01:13:47,000 --> 01:13:47,990 element? 1410 01:13:47,990 --> 01:13:53,660 And this often happens when we start to add IDs and classes to our elements 1411 01:13:53,660 --> 01:13:54,900 as well. 1412 01:13:54,900 --> 01:13:58,870 So when we deal with specificity, specificity goes in a particular order. 1413 01:13:58,870 --> 01:14:00,800 There's an order of precedence that we can 1414 01:14:00,800 --> 01:14:03,920 follow for determining what style should ultimately 1415 01:14:03,920 --> 01:14:06,750 be applied to any particular element. 1416 01:14:06,750 --> 01:14:08,600 The first, most powerful-- 1417 01:14:08,600 --> 01:14:12,800 most specific way of referencing an element is inline styling, literally 1418 01:14:12,800 --> 01:14:16,400 adding a style equals attribute to our HTML elements 1419 01:14:16,400 --> 01:14:18,200 in the way we did way at the beginning when 1420 01:14:18,200 --> 01:14:20,510 we were first taking a look at CSS. 1421 01:14:20,510 --> 01:14:24,200 If we associate inline styling with an HTML element, that's 1422 01:14:24,200 --> 01:14:27,830 going to take precedence over any styling that's inside the style 1423 01:14:27,830 --> 01:14:32,150 section of our head of the web page or inside of a separate dot CSS file, 1424 01:14:32,150 --> 01:14:36,530 because the reasoning goes, if you are literally putting the style 1425 01:14:36,530 --> 01:14:39,800 code attached to the element itself, then we probably 1426 01:14:39,800 --> 01:14:42,350 want to apply it to that element. 1427 01:14:42,350 --> 01:14:47,720 After that, specificity goes in order of how precisely we 1428 01:14:47,720 --> 01:14:49,190 are identifying an element. 1429 01:14:49,190 --> 01:14:51,680 An ID is a unique way to identify an element. 1430 01:14:51,680 --> 01:14:54,480 There is only one element with that particular ID. 1431 01:14:54,480 --> 01:14:57,560 So if I've added style to a particular ID, 1432 01:14:57,560 --> 01:15:01,700 that is going to be pretty highly valued in terms of how specific it is. 1433 01:15:01,700 --> 01:15:03,120 Next, we look at classes. 1434 01:15:03,120 --> 01:15:05,750 So if there's no ID selector, we look for, 1435 01:15:05,750 --> 01:15:08,150 did we reference the element by its class? 1436 01:15:08,150 --> 01:15:11,310 And if so, then that takes next precedence. 1437 01:15:11,310 --> 01:15:15,470 And otherwise, then we fall back to what type of HTML element it is. 1438 01:15:15,470 --> 01:15:16,550 Is it an h1? 1439 01:15:16,550 --> 01:15:17,900 Is it an ordered list? 1440 01:15:17,900 --> 01:15:18,980 Is it a table? 1441 01:15:18,980 --> 01:15:21,270 So in short, the type is the least specific. 1442 01:15:21,270 --> 01:15:23,090 Class is slightly more specific. 1443 01:15:23,090 --> 01:15:24,510 ID is more than that. 1444 01:15:24,510 --> 01:15:29,330 And the most specificity we can provide is by literally putting the CSS inline 1445 01:15:29,330 --> 01:15:31,890 with the HTML element itself. 1446 01:15:31,890 --> 01:15:33,930 So let's take a look at an example of this. 1447 01:15:33,930 --> 01:15:37,550 Let's look at this code, for example, where, for instance, I 1448 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. 1449 01:15:42,380 --> 01:15:46,010 And the CSS code that I've included here is I've said for all div, 1450 01:15:46,010 --> 01:15:48,320 I would like to give those a color of blue. 1451 01:15:48,320 --> 01:15:50,720 Obviously, in that case, there's nothing conflicting. 1452 01:15:50,720 --> 01:15:53,270 What we're going to see is we're going to see the word Hello. 1453 01:15:53,270 --> 01:15:56,570 And we're going to see the word Hello in blue. 1454 01:15:56,570 --> 01:16:01,670 But what happens now if we add anything with ID Foo should be colored red? 1455 01:16:01,670 --> 01:16:06,410 Well, because ID has higher specificity than just an individual tag, 1456 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 1457 01:16:09,710 --> 01:16:10,580 is red. 1458 01:16:10,580 --> 01:16:12,380 The ID is more specific. 1459 01:16:12,380 --> 01:16:15,920 And so this element is going to show up red instead. 1460 01:16:15,920 --> 01:16:17,840 And it doesn't matter what order these are in. 1461 01:16:17,840 --> 01:16:19,740 It's not that the later one takes precedence. 1462 01:16:19,740 --> 01:16:24,410 If I were to flip these around, where ID of Foo, color red, div color blue 1463 01:16:24,410 --> 01:16:28,340 is in that order, it's still going to show up as red, because this ID 1464 01:16:28,340 --> 01:16:35,000 selector is more specific than just the name div, which is the name of the HTML 1465 01:16:35,000 --> 01:16:37,380 element that happens to be there. 1466 01:16:37,380 --> 01:16:40,220 And so as you start to develop more sophisticated style sheets, 1467 01:16:40,220 --> 01:16:42,110 you might find that some of your CSS code 1468 01:16:42,110 --> 01:16:43,670 is going to conflict with each other. 1469 01:16:43,670 --> 01:16:46,540 And that's where it's important to bear in mind how these specificity 1470 01:16:46,540 --> 01:16:49,940 rules work to know as you add style to your elements 1471 01:16:49,940 --> 01:16:54,000 how are they actually going to end up showing up. 1472 01:16:54,000 --> 01:16:55,830 Now, we've seen a couple of CSS selectors 1473 01:16:55,830 --> 01:16:59,370 now in terms of selecting a single element, selecting an ID, 1474 01:16:59,370 --> 01:17:02,670 selecting a class, selecting multiple elements as well. 1475 01:17:02,670 --> 01:17:05,220 It turns out, there are a number of other CSS selectors 1476 01:17:05,220 --> 01:17:06,510 that we can use too. 1477 01:17:06,510 --> 01:17:09,660 So we saw, for example, the multiple element selector, 1478 01:17:09,660 --> 01:17:14,920 like td comma th for selecting table data but also table headers. 1479 01:17:14,920 --> 01:17:16,590 But there's a number of other selectors. 1480 01:17:16,590 --> 01:17:18,480 Here is just a sampling of ones. 1481 01:17:18,480 --> 01:17:21,210 You can specify like descendants or children. 1482 01:17:21,210 --> 01:17:24,990 So if I only want to style divs that are inside of tables, 1483 01:17:24,990 --> 01:17:29,160 or I only want the style lists that are inside of certain classes, 1484 01:17:29,160 --> 01:17:31,410 I can use these defendant and child selectors 1485 01:17:31,410 --> 01:17:34,200 to add styling and those particular ways. 1486 01:17:34,200 --> 01:17:38,090 And there are a number of other CSS selectors we can add as well. 1487 01:17:38,090 --> 01:17:40,140 And we'll go ahead and explore a couple of these, 1488 01:17:40,140 --> 01:17:45,280 just to give you a sample of how some of the CSS selectors can actually work. 1489 01:17:45,280 --> 01:17:49,260 And we'll start by taking a look at the descendent selector, which 1490 01:17:49,260 --> 01:17:52,440 is used to select all of the elements that are descendants 1491 01:17:52,440 --> 01:17:55,360 of some other element, for example. 1492 01:17:55,360 --> 01:18:02,430 So let's go ahead and create a new file, that I'll call descendant.html, 1493 01:18:02,430 --> 01:18:05,580 that again, we'll start with the same code. 1494 01:18:05,580 --> 01:18:08,940 And inside the body of this page, I want an ordered list 1495 01:18:08,940 --> 01:18:14,370 that maybe has a list item 1 and maybe a list item 2. 1496 01:18:14,370 --> 01:18:19,920 And it turns out with lists in HTML, you can nest lists inside of other lists. 1497 01:18:19,920 --> 01:18:23,010 Maybe you've seen bullet points where there's like nested bullets inside 1498 01:18:23,010 --> 01:18:24,180 of other bullet points. 1499 01:18:24,180 --> 01:18:25,290 I can do that here. 1500 01:18:25,290 --> 01:18:31,350 I can add an unordered list and create a sublist, like sublist item 1 1501 01:18:31,350 --> 01:18:34,470 and sublist item 2. 1502 01:18:34,470 --> 01:18:38,600 And maybe down here, here's another list item, 1503 01:18:38,600 --> 01:18:40,650 such as that now I have a couple of items, 1504 01:18:40,650 --> 01:18:44,400 but some that are inside of an unordered sub list. 1505 01:18:44,400 --> 01:18:47,580 Let's go ahead and open up descendent.html 1506 01:18:47,580 --> 01:18:49,600 and see what that looks like. 1507 01:18:49,600 --> 01:18:50,610 So here's what we have. 1508 01:18:50,610 --> 01:18:53,700 We have a list item 1, list item 2, another list item 1509 01:18:53,700 --> 01:18:58,700 that is probably actually list item 3. 1510 01:18:58,700 --> 01:18:59,720 So we have three items. 1511 01:18:59,720 --> 01:19:03,530 But inside of list item 2, I have an unordered list. 1512 01:19:03,530 --> 01:19:08,120 Let's imagine, for example, that I wanted to only style 1513 01:19:08,120 --> 01:19:11,050 these sublist items as a particular color. 1514 01:19:11,050 --> 01:19:14,100 That maybe I want those to be blue, for example. 1515 01:19:14,100 --> 01:19:16,910 If in the style section of my web page, I 1516 01:19:16,910 --> 01:19:22,640 say that I would like for all list items to be styled blue, well then-- 1517 01:19:22,640 --> 01:19:25,160 not styled, colored blue rather-- 1518 01:19:25,160 --> 01:19:27,110 then what I'm going to see when I refresh 1519 01:19:27,110 --> 01:19:30,860 the page is that all of the items are going to be blue 1520 01:19:30,860 --> 01:19:33,860 instead of just the two sublist items. 1521 01:19:33,860 --> 01:19:38,510 But I could instead say that, you know what, I only want list items that 1522 01:19:38,510 --> 01:19:41,000 are children of unordered lists. 1523 01:19:41,000 --> 01:19:43,460 And I can do direct children using this greater than symbol 1524 01:19:43,460 --> 01:19:48,690 to say that only if there is a ul that immediately contains an li within it, 1525 01:19:48,690 --> 01:19:51,810 then I would like for that to be colored blue. 1526 01:19:51,810 --> 01:19:56,000 And now, if I refresh that, now you'll see that the ordered items, list item 1527 01:19:56,000 --> 01:20:00,140 1, 2, 3, those do not get colored, but only the list items 1528 01:20:00,140 --> 01:20:02,090 that are inside of the unordered list that 1529 01:20:02,090 --> 01:20:04,970 are directly children of that unordered list 1530 01:20:04,970 --> 01:20:07,910 actually get the CSS styling applied. 1531 01:20:07,910 --> 01:20:12,280 This greater than symbol here is specifying immediate children. 1532 01:20:12,280 --> 01:20:16,010 I could get rid of it, ul li, like this, and this would also work. 1533 01:20:16,010 --> 01:20:18,250 You still see sublist item 1 and 2. 1534 01:20:18,250 --> 01:20:21,800 But this is a more general selector called the descendent selector 1535 01:20:21,800 --> 01:20:23,690 that selects all descendant elements. 1536 01:20:23,690 --> 01:20:25,490 So they might not be the children elements. 1537 01:20:25,490 --> 01:20:27,830 They might be grandchildren element, so to speak, 1538 01:20:27,830 --> 01:20:30,590 if those children elements have other children that 1539 01:20:30,590 --> 01:20:31,890 are attached to them as well. 1540 01:20:31,890 --> 01:20:33,770 Again, for all of this, it's helpful to begin 1541 01:20:33,770 --> 01:20:37,670 to think about things in terms of that Document Object Model, that DOM 1542 01:20:37,670 --> 01:20:42,440 structure, that tree that represented how all of our various different HTML 1543 01:20:42,440 --> 01:20:46,210 elements are related to one another. 1544 01:20:46,210 --> 01:20:49,130 So next up, we can begin to take a look at some of the other selectors 1545 01:20:49,130 --> 01:20:50,610 that we have access to. 1546 01:20:50,610 --> 01:20:52,850 So one of the selectors might be something 1547 01:20:52,850 --> 01:20:58,760 like modifying only on a specific attribute of a particular HTML element. 1548 01:20:58,760 --> 01:21:01,680 So we can use the attribute selector for that. 1549 01:21:01,680 --> 01:21:06,720 I'll create a new file called attribute.html, where here, 1550 01:21:06,720 --> 01:21:11,820 let's go ahead and create a unordered list. 1551 01:21:11,820 --> 01:21:13,820 That's going to have a number of different links 1552 01:21:13,820 --> 01:21:15,440 to various different websites. 1553 01:21:15,440 --> 01:21:19,370 So here's a list item that is going to be a link to Google. 1554 01:21:19,370 --> 01:21:23,360 So I'll link to google.com and say, Google. 1555 01:21:23,360 --> 01:21:27,200 And I'll go ahead and add a link to facebook.com. 1556 01:21:27,200 --> 01:21:29,240 Call that Facebook. 1557 01:21:29,240 --> 01:21:35,300 And I'll go ahead and add a link to amazon.com and call that Amazon. 1558 01:21:35,300 --> 01:21:39,390 And let's imagine for a moment that I only wanted to style the Facebook link, 1559 01:21:39,390 --> 01:21:41,480 like I want to really highlight the Facebook link, 1560 01:21:41,480 --> 01:21:44,070 tell people to click on that one as by coloring it 1561 01:21:44,070 --> 01:21:46,370 in entirely different color. 1562 01:21:46,370 --> 01:21:49,520 Well, to style things normally, I would say something 1563 01:21:49,520 --> 01:21:53,770 like links should be colored, you know, blue, for example. 1564 01:21:53,770 --> 01:21:56,480 They're colored blue by default, but I could be explicit about it 1565 01:21:56,480 --> 01:21:58,180 and say, links should be color blue like, 1566 01:21:58,180 --> 01:22:02,130 such that now when I open up attribute.html 1567 01:22:02,130 --> 01:22:05,090 all the links are colored blue. 1568 01:22:05,090 --> 01:22:07,820 But I could also say, I would like links that 1569 01:22:07,820 --> 01:22:13,370 have an href attribute of facebook.com, I would like 1570 01:22:13,370 --> 01:22:18,230 those links to be colored red instead. 1571 01:22:18,230 --> 01:22:20,300 So this square bracket notation I can use 1572 01:22:20,300 --> 01:22:23,870 to specify a particular attribute of an HTML element. 1573 01:22:23,870 --> 01:22:27,760 Only anchor tags, a tags, who's href is equal to facebook.com, 1574 01:22:27,760 --> 01:22:31,170 those should be the only ones colored red. 1575 01:22:31,170 --> 01:22:33,890 So now, when I refresh this, I now see that Facebook 1576 01:22:33,890 --> 01:22:37,610 is a link that is now colored red, instead of colored blue, because I've 1577 01:22:37,610 --> 01:22:39,980 been very specific about picking an attribute 1578 01:22:39,980 --> 01:22:45,690 that I would like to use in order to reference that particular HTML element. 1579 01:22:45,690 --> 01:22:49,730 And we can use CSS selectors in more powerful ways too, maybe not just 1580 01:22:49,730 --> 01:22:52,610 to style a particular element always, but to style 1581 01:22:52,610 --> 01:22:55,820 an element only under certain conditions or only when 1582 01:22:55,820 --> 01:22:58,250 an element is in a particular state. 1583 01:22:58,250 --> 01:22:59,960 And this is very often done for something 1584 01:22:59,960 --> 01:23:04,100 like when you hover over something, when you hover over a button and something 1585 01:23:04,100 --> 01:23:07,590 pops out, or you hover over something and it changes color slightly. 1586 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 1587 01:23:12,290 --> 01:23:13,160 selector. 1588 01:23:13,160 --> 01:23:15,170 So let's take a look at an example of that 1589 01:23:15,170 --> 01:23:19,610 to see how we can modify an element when a user hovers their cursor 1590 01:23:19,610 --> 01:23:21,890 over that element, for example. 1591 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 1592 01:23:27,380 --> 01:23:31,370 and inside the body of the page just give myself a button. 1593 01:23:31,370 --> 01:23:34,910 This button is going to say, Click Me. 1594 01:23:34,910 --> 01:23:36,900 And let's add some style to the button. 1595 01:23:36,900 --> 01:23:39,330 By default, buttons show up as fairly simple buttons 1596 01:23:39,330 --> 01:23:40,910 that just look something like this. 1597 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, 1598 01:23:44,210 --> 01:23:49,010 let's add some style to the button, and give it a width of 200 pixels, 1599 01:23:49,010 --> 01:23:53,960 a height of 50 pixels, a font size of 24 pixels, 1600 01:23:53,960 --> 01:23:58,070 and maybe a background color of green, for example. 1601 01:23:58,070 --> 01:24:01,940 So I've specified some size information, how big I'd like the font to be, 1602 01:24:01,940 --> 01:24:05,270 and also a background color for the button, such that now here's 1603 01:24:05,270 --> 01:24:06,440 what that button looks like. 1604 01:24:06,440 --> 01:24:07,600 Shrink it down a little bit. 1605 01:24:07,600 --> 01:24:09,290 It says, Click Me. 1606 01:24:09,290 --> 01:24:13,250 But many buttons, especially nowadays, they give you a little bit of feedback. 1607 01:24:13,250 --> 01:24:16,340 You hover over them, and they change their color slightly. 1608 01:24:16,340 --> 01:24:17,520 How do they do that? 1609 01:24:17,520 --> 01:24:20,720 Well, often it's using a CSS pseudo class, 1610 01:24:20,720 --> 01:24:24,710 where I can say button colon hover, meaning 1611 01:24:24,710 --> 01:24:28,280 when I am hovering over a button, then I'd 1612 01:24:28,280 --> 01:24:32,190 like you to change the background color to orange, 1613 01:24:32,190 --> 01:24:34,620 for example, some other color. 1614 01:24:34,620 --> 01:24:38,070 So now, I specified that by default normally for a button, 1615 01:24:38,070 --> 01:24:40,440 your background color should be green, but when 1616 01:24:40,440 --> 01:24:42,720 the button is being hovered over instead, 1617 01:24:42,720 --> 01:24:45,480 now change the background color to orange, 1618 01:24:45,480 --> 01:24:48,480 such that now when I open up this page and go to Click Me, 1619 01:24:48,480 --> 01:24:52,170 if I hover over the button, the color of the button changes. 1620 01:24:52,170 --> 01:24:54,510 Normally green changes to orange. 1621 01:24:54,510 --> 01:24:59,230 And so that is a very powerful feature that we have access to as well. 1622 01:24:59,230 --> 01:25:02,310 All right, so now we've seen how we can use various different CSS 1623 01:25:02,310 --> 01:25:07,020 selectors to very precisely define how we want our web pages to be styled. 1624 01:25:07,020 --> 01:25:09,840 But one other thing we can use CSS for that's quite powerful 1625 01:25:09,840 --> 01:25:11,700 is responsive design. 1626 01:25:11,700 --> 01:25:14,130 And responsive design is all about making sure 1627 01:25:14,130 --> 01:25:17,700 that our web pages look good, no matter how you're looking at the web page. 1628 01:25:17,700 --> 01:25:20,810 Nowadays, people aren't always looking at web pages on their computers. 1629 01:25:20,810 --> 01:25:23,940 But they're looking at web pages on their mobile phones or on their tablets 1630 01:25:23,940 --> 01:25:24,790 as well. 1631 01:25:24,790 --> 01:25:27,990 And it's important as we begin to design web pages that we design our web 1632 01:25:27,990 --> 01:25:29,970 pages in a responsive way. 1633 01:25:29,970 --> 01:25:31,770 So we'll look at a number of different ways 1634 01:25:31,770 --> 01:25:35,010 we can implement responsive design in our web pages, 1635 01:25:35,010 --> 01:25:38,220 starting with the discussion of the viewport. 1636 01:25:38,220 --> 01:25:42,630 And what the viewport is is the viewport is the visual part of the screen 1637 01:25:42,630 --> 01:25:44,540 that the user can actually see. 1638 01:25:44,540 --> 01:25:47,760 So the viewport is this entire area of the web page 1639 01:25:47,760 --> 01:25:50,160 that displays content to the user. 1640 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 1641 01:25:53,640 --> 01:25:56,910 and translate it onto a mobile screen? 1642 01:25:56,910 --> 01:25:59,760 Well, one thing that many mobile devices do by default 1643 01:25:59,760 --> 01:26:04,410 is treat their viewport as though it is the same width as a computer screen. 1644 01:26:04,410 --> 01:26:08,070 Because not all web pages are optimized from all device mobile devices, 1645 01:26:08,070 --> 01:26:10,950 you want to make sure that on a mobile device you can see everything. 1646 01:26:10,950 --> 01:26:14,070 And so many phones will take a web page like this 1647 01:26:14,070 --> 01:26:17,940 and just shrink it down to fit onto a mobile screen that 1648 01:26:17,940 --> 01:26:19,800 looks a little something like that. 1649 01:26:19,800 --> 01:26:22,800 Now, of course, that's probably not really what we want it to look like. 1650 01:26:22,800 --> 01:26:26,490 Ideally, we want our page to adapt to different sized screens. 1651 01:26:26,490 --> 01:26:28,890 Maybe we want the heading and the image and the text, 1652 01:26:28,890 --> 01:26:33,060 if that's what these are, to grow a little bit to fill that entire screen. 1653 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 1654 01:26:37,380 --> 01:26:42,540 to our HTML inside the head section of our page that controls the viewport. 1655 01:26:42,540 --> 01:26:47,460 This line of code here is providing some metadata to our HTML page and saying, 1656 01:26:47,460 --> 01:26:49,980 I would like you to change the viewport to be 1657 01:26:49,980 --> 01:26:53,070 specifically the width of the device. 1658 01:26:53,070 --> 01:26:55,620 By default, many phones will use a viewport that's actually 1659 01:26:55,620 --> 01:26:57,610 wider than the width of the device, treat 1660 01:26:57,610 --> 01:26:59,700 it as if they're loading a page in a computer, 1661 01:26:59,700 --> 01:27:02,820 and then shrinking it down to the size of a mobile device. 1662 01:27:02,820 --> 01:27:04,890 If you and your web page specify, though, 1663 01:27:04,890 --> 01:27:07,800 that you want the viewport to be just the device width, 1664 01:27:07,800 --> 01:27:12,850 oftentimes a page is going to look a whole lot better on a mobile device. 1665 01:27:12,850 --> 01:27:14,850 But in addition to just adding a line like this, 1666 01:27:14,850 --> 01:27:16,680 there are other actual changes we can make 1667 01:27:16,680 --> 01:27:20,190 to our page to make it look a little better on different screens. 1668 01:27:20,190 --> 01:27:22,860 And one of those has to do with media queries. 1669 01:27:22,860 --> 01:27:25,230 And media queries are all about controlling 1670 01:27:25,230 --> 01:27:30,060 how our page is going to look depending on how we render that particular page, 1671 01:27:30,060 --> 01:27:32,820 or what size screen we're rendering that page on. 1672 01:27:32,820 --> 01:27:34,950 So let's take a look at an example of how 1673 01:27:34,950 --> 01:27:38,010 we might go about using media queries in order 1674 01:27:38,010 --> 01:27:43,530 to control what a page actually looks like depending on what type of page 1675 01:27:43,530 --> 01:27:46,580 or what type of browser we're using to view it. 1676 01:27:46,580 --> 01:27:50,340 So I'll go ahead and open a new file that I'll call responsive.html, 1677 01:27:50,340 --> 01:27:53,580 because we're going to try and build a responsive web page now. 1678 01:27:53,580 --> 01:27:56,790 And now, I'll go ahead and inside the body of my page 1679 01:27:56,790 --> 01:28:02,650 just include a big heading that says Welcome to My Web Page, for example. 1680 01:28:02,650 --> 01:28:06,330 And just to demonstrate what you can do now with responsive design 1681 01:28:06,330 --> 01:28:10,530 is I could say something like, let me add a style tag here, 1682 01:28:10,530 --> 01:28:15,270 where I want to say that if the size of the screen is a certain width, 1683 01:28:15,270 --> 01:28:17,430 then I want to style the page in one way. 1684 01:28:17,430 --> 01:28:19,930 And if the size of the page is a different width, 1685 01:28:19,930 --> 01:28:22,230 then I might want to style the page in a different way. 1686 01:28:22,230 --> 01:28:23,880 You might imagine that as you shrink the screen 1687 01:28:23,880 --> 01:28:25,580 you want to move elements around in order 1688 01:28:25,580 --> 01:28:28,500 to rearrange them to make the page just look a little bit nicer 1689 01:28:28,500 --> 01:28:29,760 on a mobile screen. 1690 01:28:29,760 --> 01:28:33,780 So we'll do a very simple example of just changing the color depending 1691 01:28:33,780 --> 01:28:35,590 on the size of the screen. 1692 01:28:35,590 --> 01:28:38,310 So let me specify now in a media query. 1693 01:28:38,310 --> 01:28:40,660 And the syntax for media query looks like this. 1694 01:28:40,660 --> 01:28:43,830 I'm going to use the @ symbol and say media and then 1695 01:28:43,830 --> 01:28:48,340 specify for what type of media I would like to apply this query. 1696 01:28:48,340 --> 01:28:52,020 I can say something like, if the minimum width of the page 1697 01:28:52,020 --> 01:28:54,930 is 600 pixels, in other words, if the width of the page 1698 01:28:54,930 --> 01:28:59,310 is 600 pixels or anything larger than 600 pixels, well, 1699 01:28:59,310 --> 01:29:06,850 then go ahead and take the body and give it a background color of red. 1700 01:29:06,850 --> 01:29:09,460 But then I could also add another media query and say, 1701 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, 1702 01:29:14,920 --> 01:29:19,570 meaning if the size of the screen is 599 pixels or fewer, 1703 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, 1704 01:29:24,700 --> 01:29:26,460 for example. 1705 01:29:26,460 --> 01:29:29,050 So now let's take a look at what happens when I take this page 1706 01:29:29,050 --> 01:29:31,700 and actually open it and see what's going on. 1707 01:29:31,700 --> 01:29:34,360 I'll open up responsive.html. 1708 01:29:34,360 --> 01:29:35,800 And here's what I see normally. 1709 01:29:35,800 --> 01:29:40,220 I see a red web page, because my screen is longer than 600 pixels wide. 1710 01:29:40,220 --> 01:29:42,490 But notice what happens as a shrink this web page. 1711 01:29:42,490 --> 01:29:46,090 If I go ahead and shrink it, looking at it on a smaller screen, 1712 01:29:46,090 --> 01:29:48,700 eventually it turns to blue. 1713 01:29:48,700 --> 01:29:51,670 If it's above 600 pixels wide, it's going to be red. 1714 01:29:51,670 --> 01:29:56,120 If it's below 600 pixels wide, the color changes to blue. 1715 01:29:56,120 --> 01:29:59,680 So we're able to now use these media queries to really fine tune control 1716 01:29:59,680 --> 01:30:03,910 how our page is going to look on various different types of devices. 1717 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. 1718 01:30:07,070 --> 01:30:09,450 If it's a smaller screen, maybe they'll look differently. 1719 01:30:09,450 --> 01:30:11,700 And you don't just need to control a background color. 1720 01:30:11,700 --> 01:30:16,180 You can control any CSS property you want just by using these media queries. 1721 01:30:16,180 --> 01:30:19,850 You can say on a big screen, you want certain amounts of spacing or padding. 1722 01:30:19,850 --> 01:30:21,820 You can even hide elements on smaller screens 1723 01:30:21,820 --> 01:30:26,260 if you want to by using a particular CSS property called the display property. 1724 01:30:26,260 --> 01:30:29,500 That controls whether or not an element is even visible. 1725 01:30:29,500 --> 01:30:32,980 And ultimately put together, this can help to make your pages a little bit 1726 01:30:32,980 --> 01:30:34,030 more responsive. 1727 01:30:34,030 --> 01:30:35,740 And there are a number of different media 1728 01:30:35,740 --> 01:30:37,840 queries that we can apply to our page as well. 1729 01:30:37,840 --> 01:30:41,650 We can check to see whether a mobile device is vertical or landscape. 1730 01:30:41,650 --> 01:30:44,770 We can check to see whether the user is viewing the page on their computer 1731 01:30:44,770 --> 01:30:48,350 screen or if they've tried to print out the contents of the page as well. 1732 01:30:48,350 --> 01:30:50,100 So there are a number of different options 1733 01:30:50,100 --> 01:30:54,100 that we have to really control how a page is going to look. 1734 01:30:54,100 --> 01:30:56,980 There are some other tools we have in our toolbox as well, though, 1735 01:30:56,980 --> 01:30:59,020 for dealing with mobile responsiveness. 1736 01:30:59,020 --> 01:31:02,080 And one of the tools built into the latest version of CSS 1737 01:31:02,080 --> 01:31:04,050 is something called flexbox. 1738 01:31:04,050 --> 01:31:07,930 And flexbox is quite helpful if we have multiple elements that we're all 1739 01:31:07,930 --> 01:31:11,860 trying to display on the same page at the same time that 1740 01:31:11,860 --> 01:31:15,300 might overflow if we're not careful about how we do responsive design. 1741 01:31:15,300 --> 01:31:17,100 If we're really not careful-- let's imagine 1742 01:31:17,100 --> 01:31:19,960 I have six elements that show up on my computer's monitor. 1743 01:31:19,960 --> 01:31:21,880 When you translate that to a mobile screen, 1744 01:31:21,880 --> 01:31:24,290 you can imagine they might all shrink down so that they're 1745 01:31:24,290 --> 01:31:26,290 barely visible, something like this. 1746 01:31:26,290 --> 01:31:28,060 This is probably not what we want if we're 1747 01:31:28,060 --> 01:31:31,500 trying to design a mobile responsive page, for example. 1748 01:31:31,500 --> 01:31:34,480 So you might imagine, how can we do a little bit better? 1749 01:31:34,480 --> 01:31:37,240 Well, another thing we could do is take these elements 1750 01:31:37,240 --> 01:31:39,400 and go ahead and keep them the same size, 1751 01:31:39,400 --> 01:31:41,500 but make you have to scroll through them. 1752 01:31:41,500 --> 01:31:42,730 This is now slightly better. 1753 01:31:42,730 --> 01:31:44,350 The elements that are at least still visible. 1754 01:31:44,350 --> 01:31:46,120 And they're large enough on the screen, but it 1755 01:31:46,120 --> 01:31:48,160 would be nice not to have to scroll through them. 1756 01:31:48,160 --> 01:31:51,340 What would be really nice is given that we have all this extra space, 1757 01:31:51,340 --> 01:31:54,010 I would like to be able to wrap around elements 1758 01:31:54,010 --> 01:31:56,020 if I don't have enough space for them, such 1759 01:31:56,020 --> 01:31:58,990 that if I'm translating these six elements to a mobile screen, 1760 01:31:58,990 --> 01:32:01,540 they translate, but I get them in like two rows, 1761 01:32:01,540 --> 01:32:04,210 for example, three on the top and three below. 1762 01:32:04,210 --> 01:32:07,480 And flexbox is an easy way to be able to implement something 1763 01:32:07,480 --> 01:32:10,190 like this inside of our web pages. 1764 01:32:10,190 --> 01:32:12,190 So let's take a look at what that might actually 1765 01:32:12,190 --> 01:32:15,500 look like to add flexbox to our page. 1766 01:32:15,500 --> 01:32:19,480 So I'll go ahead and create a new file called flexbox.html. 1767 01:32:19,480 --> 01:32:21,610 We'll start with the same HTML code. 1768 01:32:21,610 --> 01:32:28,390 And now, inside of the body, I'm going to create first a div that 1769 01:32:28,390 --> 01:32:31,040 is going to be called the container. 1770 01:32:31,040 --> 01:32:32,920 And we're creating a container, because we're 1771 01:32:32,920 --> 01:32:36,440 going to specifically say that everything inside the container, 1772 01:32:36,440 --> 01:32:38,830 I would like to add flexbox to, to be able to wrap it 1773 01:32:38,830 --> 01:32:42,880 around so that things can go onto multiple lines if I ever need to. 1774 01:32:42,880 --> 01:32:44,650 And now, let me just add some sample text. 1775 01:32:44,650 --> 01:32:50,860 So this is some sample text inside of a div to demo flexbox. 1776 01:32:50,860 --> 01:32:53,420 And I'll go ahead and repeat this may maybe like 12 times. 1777 01:32:53,420 --> 01:32:54,470 And I'll number each one. 1778 01:32:54,470 --> 01:32:59,620 Here's 1, 2, 3, 4, and I'll number all the rest. 1779 01:32:59,620 --> 01:33:03,490 This is just to give a demonstration of what these elements could actually 1780 01:33:03,490 --> 01:33:05,320 look like. 1781 01:33:05,320 --> 01:33:09,200 Ideally, these would be different pieces of content, though. 1782 01:33:09,200 --> 01:33:12,680 So now, inside of my style tag, here's what 1783 01:33:12,680 --> 01:33:14,780 I'm going to say, just to demonstrate. 1784 01:33:14,780 --> 01:33:18,560 I'll say, take the ID container-- again the hashtag specifies get me 1785 01:33:18,560 --> 01:33:20,690 something with a particular ID. 1786 01:33:20,690 --> 01:33:24,500 And I want to display it using flexbox. 1787 01:33:24,500 --> 01:33:26,840 And in particular, I would like to use the flex wrap 1788 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 1789 01:33:30,650 --> 01:33:33,630 of the elements, go ahead and wrap around those elements 1790 01:33:33,630 --> 01:33:37,040 onto the next line instead. 1791 01:33:37,040 --> 01:33:40,520 And now, I can specify some additional CSS properties 1792 01:33:40,520 --> 01:33:43,580 for the divs inside of the container. 1793 01:33:43,580 --> 01:33:48,140 So I can say, for the container all of the div inside of that container, 1794 01:33:48,140 --> 01:33:50,450 again using this child selector to get all 1795 01:33:50,450 --> 01:33:53,360 of the divs that are inside of the container, 1796 01:33:53,360 --> 01:33:55,440 I can add some CSS to that too. 1797 01:33:55,440 --> 01:33:59,360 I can say, let's give these a background color of like a shade of green. 1798 01:33:59,360 --> 01:34:03,020 I can give them a particular font, maybe 20 pixel font. 1799 01:34:03,020 --> 01:34:06,470 Give them some margin and padding, just to add some space. 1800 01:34:06,470 --> 01:34:09,920 And maybe each one is going to be 200 pixels wide. 1801 01:34:09,920 --> 01:34:12,800 So just adding some spacing to those individual divs, 1802 01:34:12,800 --> 01:34:15,290 the important part is this right here, where 1803 01:34:15,290 --> 01:34:19,200 I've said that this whole container is going to be a flexbox container. 1804 01:34:19,200 --> 01:34:23,310 And I'd like to wrap around elements if you ever reach the end. 1805 01:34:23,310 --> 01:34:26,680 So now, I'll open up flexbox.html. 1806 01:34:26,680 --> 01:34:31,200 And so here, I now see 12 elements that are on multiple lines. 1807 01:34:31,200 --> 01:34:33,710 But notice what happens as I shrink the page. 1808 01:34:33,710 --> 01:34:37,670 If there isn't room for all of them, elements move onto other lines. 1809 01:34:37,670 --> 01:34:40,230 Now, there's only three elements in any particular row. 1810 01:34:40,230 --> 01:34:42,580 Now, there's only two elements on any particular row. 1811 01:34:42,580 --> 01:34:46,210 And so I can use flexbox to very well adapt myself 1812 01:34:46,210 --> 01:34:47,330 to different sized screens. 1813 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, 1814 01:34:50,840 --> 01:34:55,340 the content is still going to look good, because I'm able to adapt responsively 1815 01:34:55,340 --> 01:34:57,360 to whatever might be happening. 1816 01:34:57,360 --> 01:35:01,970 So this is one layout paradigm that exists within CSS, this flexbox layout. 1817 01:35:01,970 --> 01:35:04,010 There are other layouts that exist as well. 1818 01:35:04,010 --> 01:35:06,440 One common one is the grid layout for anytime 1819 01:35:06,440 --> 01:35:09,260 you want to arrange things in a particular grid, where 1820 01:35:09,260 --> 01:35:11,330 maybe certain columns need to be certain widths, 1821 01:35:11,330 --> 01:35:14,330 but others can maybe be a little bit more flexible. 1822 01:35:14,330 --> 01:35:17,570 I'll show one example of that too, just to give you a demonstration of what 1823 01:35:17,570 --> 01:35:20,070 that grid layout might look like. 1824 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, 1825 01:35:25,760 --> 01:35:27,860 give myself a div. 1826 01:35:27,860 --> 01:35:31,370 I'll give it an ID of grid. 1827 01:35:31,370 --> 01:35:36,170 And then let me just add div class equals grid item. 1828 01:35:36,170 --> 01:35:39,320 Again, a class, because there might be multiple items, 1829 01:35:39,320 --> 01:35:42,130 but I'll go ahead and just create a whole bunch of grid items 1830 01:35:42,130 --> 01:35:49,370 and number each one, so 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12. 1831 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. 1832 01:35:54,560 --> 01:35:58,400 And now, I'd like to add some style here. 1833 01:35:58,400 --> 01:36:02,010 I'll say for the grid, let's give it a background color. 1834 01:36:02,010 --> 01:36:04,890 Maybe the background color should be green. 1835 01:36:04,890 --> 01:36:06,750 Display is going to be grid. 1836 01:36:06,750 --> 01:36:08,490 I want this to show up as a grid. 1837 01:36:08,490 --> 01:36:11,580 And now, there are a couple of attributes or properties 1838 01:36:11,580 --> 01:36:13,060 that I'm going to specify here. 1839 01:36:13,060 --> 01:36:15,060 Maybe I want some padding around the grid first. 1840 01:36:15,060 --> 01:36:19,650 But the important grid properties are grid column gap. 1841 01:36:19,650 --> 01:36:22,950 How much space goes between each of the columns? 1842 01:36:22,950 --> 01:36:25,110 Maybe I'll say like 20 pixels. 1843 01:36:25,110 --> 01:36:27,180 Likewise there is also a grid row gap. 1844 01:36:27,180 --> 01:36:30,120 How much space goes between each of the rows of the grid? 1845 01:36:30,120 --> 01:36:32,230 Maybe I'll say 10 pixels here. 1846 01:36:32,230 --> 01:36:36,420 And then finally, grid template columns is a way for me 1847 01:36:36,420 --> 01:36:39,510 to specify how many columns there are going to be 1848 01:36:39,510 --> 01:36:42,060 and how wide should each of those columns be. 1849 01:36:42,060 --> 01:36:46,290 So if I want maybe three columns, I can specify that the first column 1850 01:36:46,290 --> 01:36:48,220 should be 200 pixels. 1851 01:36:48,220 --> 01:36:51,030 The second column should also be 200 pixels. 1852 01:36:51,030 --> 01:36:53,910 And the third column can be automatically sized, 1853 01:36:53,910 --> 01:36:56,360 just grow or shrink to fill the screen. 1854 01:36:56,360 --> 01:36:57,880 So we'll say auto. 1855 01:36:57,880 --> 01:37:01,500 So first column 200 pixels, second column 200 pixels, 1856 01:37:01,500 --> 01:37:04,680 third column just do it automatically. 1857 01:37:04,680 --> 01:37:08,340 And now, for all of the grid items, well, those I 1858 01:37:08,340 --> 01:37:10,260 can add some styling to as well. 1859 01:37:10,260 --> 01:37:12,060 I'll give them a background color of white, 1860 01:37:12,060 --> 01:37:17,720 just to distinguish them, and also give them some font size and some padding 1861 01:37:17,720 --> 01:37:19,380 and maybe center them as well. 1862 01:37:19,380 --> 01:37:22,350 So just adding some additional CSS properties in order 1863 01:37:22,350 --> 01:37:23,970 to make it display the way I want to. 1864 01:37:23,970 --> 01:37:27,900 But the important ones to care about here are display is grid. 1865 01:37:27,900 --> 01:37:30,480 And then I'm specifying, here is how the grid 1866 01:37:30,480 --> 01:37:32,760 should be laid out, how much space between columns, 1867 01:37:32,760 --> 01:37:36,810 how much space between rows, and how wide are each of those rows going 1868 01:37:36,810 --> 01:37:38,010 to be. 1869 01:37:38,010 --> 01:37:42,930 Now, if I open up, grid.html, here's what that grid looks like. 1870 01:37:42,930 --> 01:37:45,770 I now have a first column 200 pixels wide, 1871 01:37:45,770 --> 01:37:49,380 a second column also 200 pixels wide, and a third column 1872 01:37:49,380 --> 01:37:52,230 that's going to resize dynamically based on how wide 1873 01:37:52,230 --> 01:37:54,330 or how narrow my screen happens to be. 1874 01:37:54,330 --> 01:37:57,480 So as I shrink the screen, the third column shrinks with it. 1875 01:37:57,480 --> 01:38:02,100 As I grow the screen, it also grows alongside with how big 1876 01:38:02,100 --> 01:38:05,230 this window happens to be. 1877 01:38:05,230 --> 01:38:08,020 And so flexbox and grid are some very powerful tools 1878 01:38:08,020 --> 01:38:10,090 that we can use and just to make it easier 1879 01:38:10,090 --> 01:38:13,300 for us to be able to use mobile responsive design, 1880 01:38:13,300 --> 01:38:15,760 to be able to make sure that our pages look good 1881 01:38:15,760 --> 01:38:19,030 no matter what kind of browser or what kind of device 1882 01:38:19,030 --> 01:38:21,760 the user is using in order to look at our page. 1883 01:38:21,760 --> 01:38:24,190 But it turns out that exists a lot of libraries 1884 01:38:24,190 --> 01:38:27,610 out there that do a lot of this for us, some people that have already written 1885 01:38:27,610 --> 01:38:31,090 CSS code to make our text look good, to make our buttons look good, 1886 01:38:31,090 --> 01:38:33,430 in order to make sure that things are mobile responsive. 1887 01:38:33,430 --> 01:38:35,890 And one of those is called Bootstrap. 1888 01:38:35,890 --> 01:38:38,230 Bootstrap was a very popular CSS library that we 1889 01:38:38,230 --> 01:38:41,350 can use in order to use some styling that they 1890 01:38:41,350 --> 01:38:45,310 have written, such that we don't need to write all the styling from scratch. 1891 01:38:45,310 --> 01:38:47,270 So this is what Bootstrap's website looks like. 1892 01:38:47,270 --> 01:38:48,970 I'll go ahead and show it to you now just 1893 01:38:48,970 --> 01:38:51,100 to give you a sampling for what's available inside 1894 01:38:51,100 --> 01:38:53,530 of a library like Bootstrap. 1895 01:38:53,530 --> 01:38:59,070 If I go to getbootstrap.com, here's Bootstrap's website. 1896 01:38:59,070 --> 01:39:02,470 And if I go to their documentation on this first link here, 1897 01:39:02,470 --> 01:39:06,090 I can look at all of the Bootstrap components that I'm given access to. 1898 01:39:06,090 --> 01:39:08,520 These are things like alerts, for example. 1899 01:39:08,520 --> 01:39:11,160 That here's an alert that's styled in a very particular way. 1900 01:39:11,160 --> 01:39:12,330 It's in a specific font. 1901 01:39:12,330 --> 01:39:14,940 It's got a certain amount of padding and certain colors. 1902 01:39:14,940 --> 01:39:18,990 And if I want to just copy this alert, once I've used Bootstrap's code, 1903 01:39:18,990 --> 01:39:22,530 I can just apply certain classes to a div 1904 01:39:22,530 --> 01:39:25,890 and Bootstrap will handle the process of applying the right styles for me. 1905 01:39:25,890 --> 01:39:29,060 I don't need to write all of these styles by myself from scratch. 1906 01:39:29,060 --> 01:39:32,730 Bootstrap's written a lot of the styling already. 1907 01:39:32,730 --> 01:39:35,150 So how do you actually go about using Bootstrap? 1908 01:39:35,150 --> 01:39:36,990 Well, to get started with Bootstrap, all you 1909 01:39:36,990 --> 01:39:40,710 need to do is copy the CSS link that Bootstrap gives you 1910 01:39:40,710 --> 01:39:42,340 to the top of your file. 1911 01:39:42,340 --> 01:39:47,070 So if I take the CSS link and then go back to something like hello.html, 1912 01:39:47,070 --> 01:39:52,230 which you'll recall originally looked something like this, just Hello World, 1913 01:39:52,230 --> 01:39:54,810 I can add some Bootstrap to it to say, all 1914 01:39:54,810 --> 01:39:59,220 right, I would like to take this HTML file 1915 01:39:59,220 --> 01:40:03,280 and apply Bootstrap styling to it to make it look a little bit nicer. 1916 01:40:03,280 --> 01:40:04,440 So I refreshed the page. 1917 01:40:04,440 --> 01:40:07,260 And now, you'll notice Bootstrap's chosen a custom font for me 1918 01:40:07,260 --> 01:40:10,900 just to make things look a little nicer in Bootstrap's own eyes. 1919 01:40:10,900 --> 01:40:13,290 And now, if I want to add Bootstrap elements, 1920 01:40:13,290 --> 01:40:16,570 I can say, all right, let me go to their components. 1921 01:40:16,570 --> 01:40:17,880 And I want to add an alert. 1922 01:40:17,880 --> 01:40:20,210 I can just copy their alert code. 1923 01:40:20,210 --> 01:40:24,660 Here's their alert code for a primary alert, an alert that looks blue. 1924 01:40:24,660 --> 01:40:29,510 And I can just inside the body of my page go ahead and add an alert, 1925 01:40:29,510 --> 01:40:35,160 and maybe change the text to here is my alert, for example. 1926 01:40:35,160 --> 01:40:39,660 Now, when I reload hello.html, I now see an alert that shows up, 1927 01:40:39,660 --> 01:40:42,480 styled according to Bootstrap styling. 1928 01:40:42,480 --> 01:40:47,020 And again, I can change that styling just by changing these classes. 1929 01:40:47,020 --> 01:40:49,020 So a primary alert shows up as blue. 1930 01:40:49,020 --> 01:40:50,640 A success alert shows up as green. 1931 01:40:50,640 --> 01:40:52,060 A danger alert is red. 1932 01:40:52,060 --> 01:40:55,020 So if I want to give a danger alert-- the user is doing something wrong 1933 01:40:55,020 --> 01:40:56,580 on the web page, for example-- 1934 01:40:56,580 --> 01:41:01,800 I can change alert primary here inside my HTML to something like alert danger 1935 01:41:01,800 --> 01:41:02,880 instead. 1936 01:41:02,880 --> 01:41:05,610 And now when I refresh this page, I now see the alert 1937 01:41:05,610 --> 01:41:08,520 shows up as red instead of blue. 1938 01:41:08,520 --> 01:41:12,000 So Bootstrap gives us access to a lot of these various different types 1939 01:41:12,000 --> 01:41:16,290 of components, different ways of adding breadcrumbs and alerts and carousels 1940 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 1941 01:41:20,070 --> 01:41:22,950 very, very quickly without having to worry too much about writing 1942 01:41:22,950 --> 01:41:26,750 our own CSS, because Bootstrap's written a lot of that for us. 1943 01:41:26,750 --> 01:41:29,190 Bootstrap even includes a way to make sure 1944 01:41:29,190 --> 01:41:31,800 that web pages are mobile responsive using something 1945 01:41:31,800 --> 01:41:34,740 called Bootstrap's column model. 1946 01:41:34,740 --> 01:41:36,580 So I'll show you an example of that now. 1947 01:41:36,580 --> 01:41:41,650 Bootstrap divides its page into 12 distinct columns. 1948 01:41:41,650 --> 01:41:43,740 So one thing I can do is I've pulled this up 1949 01:41:43,740 --> 01:41:47,610 in an example I have in advanced called column zero.html. 1950 01:41:47,610 --> 01:41:50,340 Notice that inside of the body of my page now, 1951 01:41:50,340 --> 01:41:55,470 I have a div whose class is container and then a div whose class is row. 1952 01:41:55,470 --> 01:42:00,310 And Bootstrap divides every row into a 12-unit column. 1953 01:42:00,310 --> 01:42:02,100 So here, for example, I have a whole bunch 1954 01:42:02,100 --> 01:42:05,160 of divs that are each 3-unit columns. 1955 01:42:05,160 --> 01:42:08,250 So if I have four 3-unit columns, that will take up 1956 01:42:08,250 --> 01:42:11,130 a total amount of space equal to 12, meaning 1957 01:42:11,130 --> 01:42:13,960 filling up the entirety of the screen. 1958 01:42:13,960 --> 01:42:20,100 So if I now open up source column zero.html, here's what that looks like. 1959 01:42:20,100 --> 01:42:23,700 I have four columns, each of which is of width 3. 1960 01:42:23,700 --> 01:42:26,460 And as a result, as I shrink it, those columns 1961 01:42:26,460 --> 01:42:29,250 will automatically resize to make sure that they're always 1962 01:42:29,250 --> 01:42:30,750 the appropriate size. 1963 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. 1964 01:42:34,840 --> 01:42:38,640 So, for example, if I only wanted three columns, instead of four, 1965 01:42:38,640 --> 01:42:42,370 I could get rid of the fourth column by deleting those rows. 1966 01:42:42,370 --> 01:42:46,710 And maybe change the second column instead of being a column of size 3, 1967 01:42:46,710 --> 01:42:48,540 let's make it a column of size 6. 1968 01:42:48,540 --> 01:42:51,570 So that's a length 6 column instead. 1969 01:42:51,570 --> 01:42:54,180 And now if I refresh the page, now suddenly I 1970 01:42:54,180 --> 01:42:57,210 see three columns where the middle one is twice 1971 01:42:57,210 --> 01:42:59,340 as large as the ones on either end. 1972 01:42:59,340 --> 01:43:04,250 And as I shrink this down, I can see that it shrinks down as well. 1973 01:43:04,250 --> 01:43:06,820 And one of the advantages of using Bootstrap columns 1974 01:43:06,820 --> 01:43:09,220 is that they too can be mobile responsive. 1975 01:43:09,220 --> 01:43:13,030 They too can wrap around other lines if they ever need to. 1976 01:43:13,030 --> 01:43:15,860 So, for example, let me pull up columns one.html. 1977 01:43:18,530 --> 01:43:20,800 Here, for example, I have a row. 1978 01:43:20,800 --> 01:43:22,850 And let's take a look at what's going on in here. 1979 01:43:22,850 --> 01:43:27,890 Recall that every row in Bootstrap is divided up into 12-column units. 1980 01:43:27,890 --> 01:43:31,400 But Bootstrap, in addition to letting me specify how many units a column 1981 01:43:31,400 --> 01:43:34,850 should take up, also lets me specify how many units that column 1982 01:43:34,850 --> 01:43:38,100 should take up depending on the size of the screen. 1983 01:43:38,100 --> 01:43:42,050 So if I'm on a large screen, as indicated by LG, 1984 01:43:42,050 --> 01:43:45,020 this is saying that on a large screen, this div 1985 01:43:45,020 --> 01:43:47,360 should take up 3 units of space. 1986 01:43:47,360 --> 01:43:49,780 And this div should also take up 3 units of space. 1987 01:43:49,780 --> 01:43:52,760 And for each of these four divs, on a large screen, 1988 01:43:52,760 --> 01:43:56,420 each will take up 3 of the total 12 units of space. 1989 01:43:56,420 --> 01:43:59,330 So they'll all show up on one row. 1990 01:43:59,330 --> 01:44:01,730 What happens on a small screen, though? 1991 01:44:01,730 --> 01:44:05,450 Well, here col sm, for column on a small screen, 1992 01:44:05,450 --> 01:44:07,940 I've said on a small screen each column should only 1993 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. 1994 01:44:13,640 --> 01:44:15,800 And so I use up 6 here, 6 here for a total 1995 01:44:15,800 --> 01:44:20,090 of 12 in one row, which means the next two, also a size 6, 1996 01:44:20,090 --> 01:44:22,220 need to go on to a second row. 1997 01:44:22,220 --> 01:44:24,770 And Bootstrap is smart enough to do this math for me 1998 01:44:24,770 --> 01:44:29,210 and figure out how exactly these elements should ultimately be laid out. 1999 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, 2000 01:44:37,420 --> 01:44:40,330 I see four columns, all in the same row. 2001 01:44:40,330 --> 01:44:42,250 But as I shrink down to a smaller screen, 2002 01:44:42,250 --> 01:44:45,400 eventually we'll see that things change. 2003 01:44:45,400 --> 01:44:49,540 I now see the third and fourth sections move down onto the second row, 2004 01:44:49,540 --> 01:44:53,440 because on a smaller screen now, when the window is smaller, 2005 01:44:53,440 --> 01:44:57,350 now I only have the ability to show two elements in any particular row. 2006 01:44:57,350 --> 01:45:02,490 So I get to on the first row and then two on the row underneath that. 2007 01:45:02,490 --> 01:45:04,810 So all in all, there are a lot of different ways 2008 01:45:04,810 --> 01:45:08,880 now that we can use CSS in order to make sure our pages are mobile responsive. 2009 01:45:08,880 --> 01:45:11,130 We can use Bootstrap column model to make 2010 01:45:11,130 --> 01:45:15,480 sure the columns move around whenever a size of the window shrinks or grows. 2011 01:45:15,480 --> 01:45:17,970 We can also use things like flexbox and the grid model, 2012 01:45:17,970 --> 01:45:22,260 writing our own CSS to make sure that our page is responsive depending 2013 01:45:22,260 --> 01:45:25,560 on the size of the screen that the user happens to be using in order 2014 01:45:25,560 --> 01:45:27,250 to visit our website page. 2015 01:45:27,250 --> 01:45:32,310 So these are some of the very powerful features that we get using just CSS. 2016 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, 2017 01:45:36,150 --> 01:45:39,960 there's going to be more and more repetition, things that appear again 2018 01:45:39,960 --> 01:45:41,510 and again and again. 2019 01:45:41,510 --> 01:45:44,940 And we've already seen some ways that we can minimize redundancy in CSS. 2020 01:45:44,940 --> 01:45:49,320 We've seen how we can move CSS into the style section of our web page. 2021 01:45:49,320 --> 01:45:53,470 We've even seen how we can move CSS to an entirely different file. 2022 01:45:53,470 --> 01:45:58,590 However, what we haven't yet seen is how to deal with other types of redundancy. 2023 01:45:58,590 --> 01:46:01,590 And so let's take a look at an example of that now. 2024 01:46:01,590 --> 01:46:03,900 Let's imagine, for example, that I want to style 2025 01:46:03,900 --> 01:46:10,180 multiple different elements in different ways, but using some common properties. 2026 01:46:10,180 --> 01:46:12,930 So, for example, let me create a new file that I'll, in this case, 2027 01:46:12,930 --> 01:46:15,420 call variables.html. 2028 01:46:15,420 --> 01:46:17,280 And you'll see why in a moment. 2029 01:46:17,280 --> 01:46:19,860 I'll go ahead and copy hello.html, but I'll get rid 2030 01:46:19,860 --> 01:46:22,670 of all this Bootstrap inside of it. 2031 01:46:22,670 --> 01:46:27,340 Let's imagine that here I have in maybe two list, an ordered list 2032 01:46:27,340 --> 01:46:32,410 and an unordered list, where my unordered list has 2033 01:46:32,410 --> 01:46:36,520 an ordered item, maybe three unordered items, 2034 01:46:36,520 --> 01:46:41,770 and my ordered list also has three ordered items. 2035 01:46:41,770 --> 01:46:43,630 Again, just for sake of demonstration, I'm 2036 01:46:43,630 --> 01:46:45,760 showing that we have these two lists now. 2037 01:46:45,760 --> 01:46:49,180 And I'll open up variables.html just to give you 2038 01:46:49,180 --> 01:46:52,270 a sense for what that could look like. 2039 01:46:52,270 --> 01:46:55,090 We have three unordered items in an unordered list, 2040 01:46:55,090 --> 01:46:58,180 three ordered items in our ordered list. 2041 01:46:58,180 --> 01:47:01,460 Let's imagine I wanted to style these a little bit differently. 2042 01:47:01,460 --> 01:47:03,790 Maybe inside the style section of my page 2043 01:47:03,790 --> 01:47:08,920 I want to style the unordered list to have a font size of 14 pixels 2044 01:47:08,920 --> 01:47:11,260 and maybe a color of red. 2045 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 2046 01:47:15,730 --> 01:47:17,930 pixels, but also a color of red. 2047 01:47:17,930 --> 01:47:20,230 I want to keep the same color for all the text, 2048 01:47:20,230 --> 01:47:23,200 but I want the font sizes to be different. 2049 01:47:23,200 --> 01:47:25,390 Now, if I refresh this page, here's what I see. 2050 01:47:25,390 --> 01:47:26,990 They are indeed of different sizes. 2051 01:47:26,990 --> 01:47:30,700 The ordered list items are larger than the unordered list items. 2052 01:47:30,700 --> 01:47:32,360 And they're all red. 2053 01:47:32,360 --> 01:47:34,510 But there was some redundancy, some repetition 2054 01:47:34,510 --> 01:47:37,510 that was introduced when I was writing my CSS code. 2055 01:47:37,510 --> 01:47:41,020 In particular when I was writing my CSS code, 2056 01:47:41,020 --> 01:47:43,720 I've repeated this usage of the color red. 2057 01:47:43,720 --> 01:47:46,600 If I ever want to change the color from red to blue, for example, 2058 01:47:46,600 --> 01:47:50,260 I'm going to have to change my code in two different places. 2059 01:47:50,260 --> 01:47:54,540 Ultimately, I'd just like for my CSS to be a little bit more powerful. 2060 01:47:54,540 --> 01:47:59,080 And so that brings us to our last topic today, which is a language called Sass. 2061 01:47:59,080 --> 01:48:02,860 And Sass is a language that is essentially an extension to CSS. 2062 01:48:02,860 --> 01:48:05,320 It adds additional features to what CSS has 2063 01:48:05,320 --> 01:48:07,300 to offer, just to make it a little bit more 2064 01:48:07,300 --> 01:48:11,020 powerful for us to be able to use and manipulate CSS in a way that's 2065 01:48:11,020 --> 01:48:14,350 going to be faster and remove some of the repetition 2066 01:48:14,350 --> 01:48:16,930 that we might have had in CSS previously. 2067 01:48:16,930 --> 01:48:22,190 And one of the key features of Sass is the ability to have variables. 2068 01:48:22,190 --> 01:48:24,790 So let's take a look at an example of this now. 2069 01:48:24,790 --> 01:48:28,390 I'm going to create a new file, normally when we created our CSS files, 2070 01:48:28,390 --> 01:48:31,390 we called them like variables.css, something 2071 01:48:31,390 --> 01:48:34,510 dot CSS to stand for a CSS file. 2072 01:48:34,510 --> 01:48:36,550 Sass is a different language, though. 2073 01:48:36,550 --> 01:48:38,770 So it's going to require a different extension. 2074 01:48:38,770 --> 01:48:45,320 We're going to conventionally use dot scss to stand for this is a Sass file. 2075 01:48:45,320 --> 01:48:48,580 So here is now variables.scss. 2076 01:48:48,580 --> 01:48:51,680 And now what I can do in Sass is I can actually create variables 2077 01:48:51,680 --> 01:48:54,730 in the same way that we could create variables in a programming language, 2078 01:48:54,730 --> 01:48:56,740 like Python, which we'll soon see. 2079 01:48:56,740 --> 01:48:59,290 CSS normally doesn't support variables, but Sass 2080 01:48:59,290 --> 01:49:01,150 is going to give us that power. 2081 01:49:01,150 --> 01:49:04,250 In Sass, all variables begin with a dollar sign. 2082 01:49:04,250 --> 01:49:09,270 So I can create a variable $color to create a variable called color. 2083 01:49:09,270 --> 01:49:13,600 And I can say the variable called color is going to be equal to red. 2084 01:49:13,600 --> 01:49:16,120 So this line here, line 1, is my way of telling 2085 01:49:16,120 --> 01:49:18,580 Sass I'd like to create a variable called color 2086 01:49:18,580 --> 01:49:22,030 and I'd like for its value to be red. 2087 01:49:22,030 --> 01:49:24,220 And now, I can add the same styling I had before. 2088 01:49:24,220 --> 01:49:27,370 I can just use normal CSS and say for an unordered list 2089 01:49:27,370 --> 01:49:29,980 I'd like the font size to be 14 pixels. 2090 01:49:29,980 --> 01:49:35,230 But the color, instead of saying red here, I can use the name of a variable. 2091 01:49:35,230 --> 01:49:41,380 I can say $color to mean go ahead and use the value of the variable color 2092 01:49:41,380 --> 01:49:44,350 as the color for this unordered list. 2093 01:49:44,350 --> 01:49:48,910 Then for an ordered list, I'll also say font size 18 pixels 2094 01:49:48,910 --> 01:49:53,680 and say color should also be this variable called color. 2095 01:49:53,680 --> 01:49:56,530 By using a variable, I've removed the repetition. 2096 01:49:56,530 --> 01:49:59,840 Rather than having the word red show up in multiple places in my code 2097 01:49:59,840 --> 01:50:02,680 where I would need to change it twice if I ever needed to change it, 2098 01:50:02,680 --> 01:50:04,930 now I have defined the variable once. 2099 01:50:04,930 --> 01:50:07,240 And I only ever need to change it in one place 2100 01:50:07,240 --> 01:50:11,330 if I ever need to make modifications to this particular file. 2101 01:50:11,330 --> 01:50:14,740 So now, let's try and link this file. 2102 01:50:14,740 --> 01:50:17,320 We'll go back to variables.html. 2103 01:50:17,320 --> 01:50:24,530 Instead of putting the style code here, I'll go ahead and link a style sheet 2104 01:50:24,530 --> 01:50:28,190 and say, the href should be variables.scss, 2105 01:50:28,190 --> 01:50:31,500 because that's the file where my styling exists. 2106 01:50:31,500 --> 01:50:35,600 So now let me try and open up variables.html after I've linked 2107 01:50:35,600 --> 01:50:37,350 the CSS. 2108 01:50:37,350 --> 01:50:39,690 And, all right, something seems not quite right. 2109 01:50:39,690 --> 01:50:41,130 I specified font sizes. 2110 01:50:41,130 --> 01:50:43,080 I specified that everything should be red. 2111 01:50:43,080 --> 01:50:44,130 But it's not showing up. 2112 01:50:44,130 --> 01:50:45,820 Everything is showing up black. 2113 01:50:45,820 --> 01:50:49,230 And I don't see any of the differences in sizing. 2114 01:50:49,230 --> 01:50:53,640 And the reason for this is while the web browser, things like Chrome and Safari 2115 01:50:53,640 --> 01:50:58,350 and Firefox can understand CSS, they can't by default understand 2116 01:50:58,350 --> 01:50:59,910 SCSS, or Sass. 2117 01:50:59,910 --> 01:51:03,870 Sass is an extension to CSS that web browsers don't understand out 2118 01:51:03,870 --> 01:51:05,350 of the box. 2119 01:51:05,350 --> 01:51:08,970 So in order to solve this problem, once we've written our Sass file, 2120 01:51:08,970 --> 01:51:12,420 we need to compile it, convert it, translate it, so to speak, 2121 01:51:12,420 --> 01:51:18,250 from Sass into plain old CSS so that our browser is able to understand it. 2122 01:51:18,250 --> 01:51:20,550 And in order to do this, you'll need to install 2123 01:51:20,550 --> 01:51:22,520 a program called Sass on your computer. 2124 01:51:22,520 --> 01:51:25,050 And you can install it on Mac or PC or Linux. 2125 01:51:25,050 --> 01:51:27,960 And now, in the terminal, in order to do this compilation, 2126 01:51:27,960 --> 01:51:35,400 I'm going to say Sass variables.scss, the file I'd like to compile, 2127 01:51:35,400 --> 01:51:38,390 colon variables.css. 2128 01:51:38,390 --> 01:51:42,580 So variables.scss is the file that I would like to compile. 2129 01:51:42,580 --> 01:51:46,020 And the file I'd like to generate is variables.css. 2130 01:51:46,020 --> 01:51:50,790 I'd like to turn my Sass file into a plain old CSS file. 2131 01:51:50,790 --> 01:51:52,500 I'll go ahead and press Return. 2132 01:51:52,500 --> 01:51:55,520 And all right, that compilation process is now done. 2133 01:51:55,520 --> 01:52:02,460 And so now, inside of variables.html, instead of referencing the SCSS file, 2134 01:52:02,460 --> 01:52:05,820 I'm going to reference the CSS file as the style sheet, 2135 01:52:05,820 --> 01:52:11,510 because my web browser only understands CSS, it doesn't understand Sass. 2136 01:52:11,510 --> 01:52:14,900 Now, when I load the page, now I see the result I expect. 2137 01:52:14,900 --> 01:52:18,170 Everything shows up as red and the font sizes are different. 2138 01:52:18,170 --> 01:52:20,570 So ultimately, this was a 2-step process. 2139 01:52:20,570 --> 01:52:24,860 I first needed to take my Sass code, compile it into CSS. 2140 01:52:24,860 --> 01:52:28,610 And then I could link the CSS to this particular page. 2141 01:52:28,610 --> 01:52:31,910 But the advantage now is that if ever I want to make some sort of change, 2142 01:52:31,910 --> 01:52:35,040 I want to change the color, rather than change it in two places, 2143 01:52:35,040 --> 01:52:39,170 or you might imagine in a more complex page, like tens or dozens of places, 2144 01:52:39,170 --> 01:52:45,620 I just go to the SCSS file, and I change the color from red to blue. 2145 01:52:45,620 --> 01:52:48,970 Now, if I refresh the page, all right everything is still red. 2146 01:52:48,970 --> 01:52:50,670 And that's because I forgot a step. 2147 01:52:50,670 --> 01:52:52,510 I changed the Sass file. 2148 01:52:52,510 --> 01:52:55,420 But that doesn't automatically change the CSS file. 2149 01:52:55,420 --> 01:53:01,180 I need to now recompile the CSS file by saying Sass variables.scss 2150 01:53:01,180 --> 01:53:06,760 variables.css, to compile the file again using the updated Sass file. 2151 01:53:06,760 --> 01:53:09,850 And now, I see the updated changes. 2152 01:53:09,850 --> 01:53:12,400 And if you're curious as to what the updated file looks like, 2153 01:53:12,400 --> 01:53:16,870 I'm actually look at variables.css to see what code happens to be there, 2154 01:53:16,870 --> 01:53:18,910 and, though, it's styled a little bit strangely. 2155 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. 2156 01:53:23,080 --> 01:53:26,050 So they've substituted the word blue for this variable. 2157 01:53:26,050 --> 01:53:30,120 And they've done the same thing for ordered lists as well. 2158 01:53:30,120 --> 01:53:32,430 Now, in practice, it's going to be pretty annoying 2159 01:53:32,430 --> 01:53:35,130 if I'm building a web page, building using Sass, 2160 01:53:35,130 --> 01:53:39,000 if I constantly need to go back and recompile my Sass into CSS 2161 01:53:39,000 --> 01:53:40,140 every single time. 2162 01:53:40,140 --> 01:53:42,570 What I'd like to do is just automate that process. 2163 01:53:42,570 --> 01:53:44,580 And Sass makes it easy to do this. 2164 01:53:44,580 --> 01:53:51,770 I can just say, Sass dash dash watch variables.scss variables.css. 2165 01:53:51,770 --> 01:53:55,650 And what that's going to do is now you see Sass is watching for changes. 2166 01:53:55,650 --> 01:53:59,550 Sass is going to monitor the variables.scss file. 2167 01:53:59,550 --> 01:54:03,300 And if ever I change my Sass file, Sass is going to know about it. 2168 01:54:03,300 --> 01:54:07,460 And it's automatically going to recompile the corresponding CSS file. 2169 01:54:07,460 --> 01:54:10,380 And you can do this not just with single files, but entire directories 2170 01:54:10,380 --> 01:54:13,110 as well if you have multiple different Sass files. 2171 01:54:13,110 --> 01:54:18,930 So now, what I can do is if in the variables.scss file I change 2172 01:54:18,930 --> 01:54:19,740 the color-- 2173 01:54:19,740 --> 01:54:22,700 instead of blue, I now want it to be green, for example-- 2174 01:54:22,700 --> 01:54:25,740 I now save the variables.scss file. 2175 01:54:25,740 --> 01:54:29,040 And now, without doing anything-- take a look at my terminal-- 2176 01:54:29,040 --> 01:54:32,650 Sass detected a change to variables.scss, 2177 01:54:32,650 --> 01:54:37,030 so it gave me a new version of my original CSS file. 2178 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 2179 01:54:41,540 --> 01:54:45,130 is green, as I would expect it to be. 2180 01:54:45,130 --> 01:54:48,630 So that's one of the very powerful features that Sass gives us. 2181 01:54:48,630 --> 01:54:52,170 It gives us the ability to add variables to our CSS code just 2182 01:54:52,170 --> 01:54:53,760 to factor out commonalities. 2183 01:54:53,760 --> 01:54:57,720 If there are common fonts, common colors, common borders, common styling, 2184 01:54:57,720 --> 01:55:00,000 that I want to apply to a lot of different things, 2185 01:55:00,000 --> 01:55:04,310 it becomes much easier just to use Sass in order to do so. 2186 01:55:04,310 --> 01:55:07,230 And finally, we'll take a look at a couple of other features 2187 01:55:07,230 --> 01:55:10,410 that Sass gives us the ability to do, one of them 2188 01:55:10,410 --> 01:55:15,910 is the ability to nest CSS selectors inside of other CSS selectors. 2189 01:55:15,910 --> 01:55:18,100 So one thing you've seen so far, for example, 2190 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 2191 01:55:24,030 --> 01:55:29,700 of divs, for example, I could say like, div arrow unordered list, 2192 01:55:29,700 --> 01:55:34,440 in order to style unordered lists that are inside of divs. 2193 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 2194 01:55:38,640 --> 01:55:43,620 this type of thing, in particular, by allowing us to nest CSS inside 2195 01:55:43,620 --> 01:55:46,070 of other pieces of CSS. 2196 01:55:46,070 --> 01:55:48,180 So just as an example of this, I'll go ahead 2197 01:55:48,180 --> 01:55:52,920 and open up a file I already brought, called nesting.html. 2198 01:55:52,920 --> 01:55:55,550 And so here is what we might see inside of nesting.html. 2199 01:55:55,550 --> 01:55:57,990 Here is the body of the page. 2200 01:55:57,990 --> 01:56:01,890 Inside the body of the page, I have a div, inside of which 2201 01:56:01,890 --> 01:56:05,610 is a paragraph inside the div and also a list, an unordered list, 2202 01:56:05,610 --> 01:56:09,280 or ul, that's inside of this div as well. 2203 01:56:09,280 --> 01:56:12,210 And then we also have a paragraph that's outside of the div. 2204 01:56:12,210 --> 01:56:15,410 And a list that's outside of the div in addition to that. 2205 01:56:15,410 --> 01:56:18,210 So a number of different elements, some of which are located inside 2206 01:56:18,210 --> 01:56:19,260 of other elements. 2207 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. 2208 01:56:24,650 --> 01:56:27,060 What Sass is going to allow us to do is it 2209 01:56:27,060 --> 01:56:31,450 lets us write a Sass file that looks a little something like this. 2210 01:56:31,450 --> 01:56:33,000 Let's take a look at what it's doing. 2211 01:56:33,000 --> 01:56:35,970 It's saying, for the entire div, I would like 2212 01:56:35,970 --> 01:56:39,150 to give that div a font size of 18 pixels. 2213 01:56:39,150 --> 01:56:42,210 And then, what CSS normally doesn't allow us to do, 2214 01:56:42,210 --> 01:56:44,610 but we can do now using the power of Sass, 2215 01:56:44,610 --> 01:56:48,510 is say, for any paragraphs that are inside of that div, 2216 01:56:48,510 --> 01:56:51,240 go ahead and give those paragraphs the color of blue. 2217 01:56:51,240 --> 01:56:54,330 And for any unordered lists that are inside of the div, 2218 01:56:54,330 --> 01:56:57,270 give those unordered lists a color of green. 2219 01:56:57,270 --> 01:57:00,450 By nesting these CSS selectors inside of others, 2220 01:57:00,450 --> 01:57:03,360 we've been able to get across the idea that I only 2221 01:57:03,360 --> 01:57:06,780 want to style the paragraph if it is inside of a div. 2222 01:57:06,780 --> 01:57:09,900 And this is just a little bit of a nicer, cleaner syntax 2223 01:57:09,900 --> 01:57:14,470 for doing some of these more complex styling tasks that might come up. 2224 01:57:14,470 --> 01:57:16,020 So what does this actually look like? 2225 01:57:16,020 --> 01:57:20,190 If I like take this SCSS file and turn it into normal CSS, 2226 01:57:20,190 --> 01:57:22,020 what is the result going to be? 2227 01:57:22,020 --> 01:57:23,380 Well, let's take a look. 2228 01:57:23,380 --> 01:57:27,150 We can try it out by let me go into my nesting folder 2229 01:57:27,150 --> 01:57:29,040 where all these files are located. 2230 01:57:29,040 --> 01:57:36,970 And if I run Sass nesting.scss, turn it into nesting.css, 2231 01:57:36,970 --> 01:57:40,710 now let's open up nesting.css and see what it looks like. 2232 01:57:40,710 --> 01:57:43,440 Here, it's turned into a take all of the divs, 2233 01:57:43,440 --> 01:57:45,680 give them a font size of 18 pixels. 2234 01:57:45,680 --> 01:57:49,650 And then, we're using the same descendant selector notation 2235 01:57:49,650 --> 01:57:52,920 that we saw before, where all the paragraphs inside of divs 2236 01:57:52,920 --> 01:57:56,130 should be colored blue, all the unordered lists inside of a div 2237 01:57:56,130 --> 01:57:57,420 should be colored green. 2238 01:57:57,420 --> 01:57:58,630 And this certainly works. 2239 01:57:58,630 --> 01:58:01,380 And we could have just written this CSS from the beginning, 2240 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 2241 01:58:05,730 --> 01:58:08,930 in order to really say, paragraphs inside of divs 2242 01:58:08,930 --> 01:58:12,760 should be structured this way, unordered lists are styled in some other way. 2243 01:58:12,760 --> 01:58:15,600 And using this nothing approach just makes it often easier 2244 01:58:15,600 --> 01:58:19,560 to take a look at this SCSS page and really understand 2245 01:58:19,560 --> 01:58:23,390 how all of the different style code interacts with each other. 2246 01:58:23,390 --> 01:58:28,590 So after all of this now, if I open up nesting.html, 2247 01:58:28,590 --> 01:58:31,590 we might see something that looks a little something like this. 2248 01:58:31,590 --> 01:58:35,310 The paragraph inside the div and the list inside of the div, those 2249 01:58:35,310 --> 01:58:38,490 both get changes to the way that they've been styled. 2250 01:58:38,490 --> 01:58:41,730 But unlike them, these paragraphs outside of the div 2251 01:58:41,730 --> 01:58:43,860 and the list that is also outside of the div, 2252 01:58:43,860 --> 01:58:47,290 those get styled a little bit differently. 2253 01:58:47,290 --> 01:58:49,740 So two features now we've seen inside of Sass. 2254 01:58:49,740 --> 01:58:52,310 We've first seen the ability to have variables 2255 01:58:52,310 --> 01:58:54,060 to make sure we're not repeating ourselves 2256 01:58:54,060 --> 01:58:55,740 in many places throughout the code. 2257 01:58:55,740 --> 01:59:00,360 And now, we've seen the ability to nest CSS selectors inside of each other 2258 01:59:00,360 --> 01:59:02,880 by taking advantage of Sass. 2259 01:59:02,880 --> 01:59:05,340 And finally, we'll take a look at one last feature 2260 01:59:05,340 --> 01:59:06,780 that Sass is going to give us. 2261 01:59:06,780 --> 01:59:09,060 And that is something called inheritance. 2262 01:59:09,060 --> 01:59:13,710 If we have certain CSS selectors that are related to other CSS selectors, 2263 01:59:13,710 --> 01:59:16,890 but they're may be adding some additional information. 2264 01:59:16,890 --> 01:59:20,350 And in this case, I'm actually going to show you the finished product first. 2265 01:59:20,350 --> 01:59:26,100 So let's go into inheritance and let me open up inheritance.html. 2266 01:59:26,100 --> 01:59:28,890 And here, you see I've tried to almost implement 2267 01:59:28,890 --> 01:59:32,370 Bootstrap-style alert messages in HTML. 2268 01:59:32,370 --> 01:59:35,280 I have a success message up at the top, a warning message, and then 2269 01:59:35,280 --> 01:59:36,480 an error message. 2270 01:59:36,480 --> 01:59:39,360 And each of these messages you'll notice are styled differently. 2271 01:59:39,360 --> 01:59:41,490 In particular they're each a different color. 2272 01:59:41,490 --> 01:59:44,010 But despite that, they share a lot in common. 2273 01:59:44,010 --> 01:59:45,270 They share a common border. 2274 01:59:45,270 --> 01:59:46,590 They share a common font. 2275 01:59:46,590 --> 01:59:49,290 They share a common size and many other properties 2276 01:59:49,290 --> 01:59:51,090 are all shared between these elements. 2277 01:59:51,090 --> 01:59:54,840 There are just some things that are a little bit different about them. 2278 01:59:54,840 --> 01:59:57,300 I could have written three different CSS selectors 2279 01:59:57,300 --> 02:00:01,030 to deal with all of these cases, but there might be some repetition there. 2280 02:00:01,030 --> 02:00:03,960 So here's what I can do by taking advantage of the features 2281 02:00:03,960 --> 02:00:05,610 that Sass gives me. 2282 02:00:05,610 --> 02:00:10,560 Let me go ahead and look at inheritance.scss to look at the code 2283 02:00:10,560 --> 02:00:12,530 for doing this. 2284 02:00:12,530 --> 02:00:15,650 And it looks a little bit cryptic at first. 2285 02:00:15,650 --> 02:00:17,360 But here's what I've defined. 2286 02:00:17,360 --> 02:00:21,800 I've here defined using a percent sign that this is what a generic message is 2287 02:00:21,800 --> 02:00:26,210 going to be, something that I can extend later to add additional information to. 2288 02:00:26,210 --> 02:00:29,390 All of the messages, whether they be success messages or danger messages 2289 02:00:29,390 --> 02:00:32,200 or warning messages, they're all going to have the same font. 2290 02:00:32,200 --> 02:00:33,950 They're all going to have the same border. 2291 02:00:33,950 --> 02:00:36,530 They're all going to have the same padding and margin, spacing 2292 02:00:36,530 --> 02:00:38,090 around and outside of it. 2293 02:00:38,090 --> 02:00:42,950 But each of the specific messages are going to be slightly different. 2294 02:00:42,950 --> 02:00:44,040 How are they different? 2295 02:00:44,040 --> 02:00:45,950 Well, let's take a look down here. 2296 02:00:45,950 --> 02:00:52,070 Anything with a class of success, I'm going to say extends this message. 2297 02:00:52,070 --> 02:00:55,490 And by extends this message what I mean is that anything with a class 2298 02:00:55,490 --> 02:01:00,260 of success is going to inherit all of these CSS properties-- the font, 2299 02:01:00,260 --> 02:01:02,660 the border, the padding in the margin-- 2300 02:01:02,660 --> 02:01:04,790 but it's going to add additional information to it. 2301 02:01:04,790 --> 02:01:07,130 In particular, we're going to add a color. 2302 02:01:07,130 --> 02:01:09,020 We're going to say that for success messages, 2303 02:01:09,020 --> 02:01:11,730 the background color is going to be green. 2304 02:01:11,730 --> 02:01:14,510 I've extended the basics of what a message is, but said 2305 02:01:14,510 --> 02:01:18,110 that this message in particular has some additional style that we're 2306 02:01:18,110 --> 02:01:20,330 going to assign to it as well. 2307 02:01:20,330 --> 02:01:23,000 And the other two messages behave in very similar ways. 2308 02:01:23,000 --> 02:01:26,180 My warning message extends the message, but instead 2309 02:01:26,180 --> 02:01:28,400 says the background color should be orange. 2310 02:01:28,400 --> 02:01:31,220 And finally, the error message also extends the message. 2311 02:01:31,220 --> 02:01:35,730 But this time, it gives us the background color of red instead. 2312 02:01:35,730 --> 02:01:38,030 So now, when you compile this all together 2313 02:01:38,030 --> 02:01:42,330 into inheritance.css, which I compiled it in advance, 2314 02:01:42,330 --> 02:01:44,510 this is what this is ultimately going to look like. 2315 02:01:44,510 --> 02:01:46,850 It translates what I've written into saying, 2316 02:01:46,850 --> 02:01:49,670 all right, success and warning and errors 2317 02:01:49,670 --> 02:01:51,860 should have all of these properties. 2318 02:01:51,860 --> 02:01:54,220 But success should also have this background color, 2319 02:01:54,220 --> 02:01:55,970 warning should have this background color, 2320 02:01:55,970 --> 02:01:57,930 error should have this background color. 2321 02:01:57,930 --> 02:02:00,110 So again, we could have written this CSS. 2322 02:02:00,110 --> 02:02:02,870 There is nothing that Sass does that we couldn't 2323 02:02:02,870 --> 02:02:05,450 have written ourselves using CSS. 2324 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. 2325 02:02:09,120 --> 02:02:11,690 So we can write things in a little bit of a nicer syntax 2326 02:02:11,690 --> 02:02:14,840 by saying the success message inherits from the message 2327 02:02:14,840 --> 02:02:16,440 but adds a background color. 2328 02:02:16,440 --> 02:02:19,800 And likewise, the warning and error messages do the same thing, 2329 02:02:19,800 --> 02:02:23,600 but in a simpler syntax and a bit of a nicer syntax, such that later 2330 02:02:23,600 --> 02:02:29,600 we can let the computer take the Sass code and compile it into CSS instead. 2331 02:02:29,600 --> 02:02:32,060 And so those now are some of the fundamentals 2332 02:02:32,060 --> 02:02:36,050 of what we've seen in building web programs using HTML and CSS. 2333 02:02:36,050 --> 02:02:39,950 We've seen how we can use HTML to describe the structure of our web page, 2334 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 2335 02:02:43,520 --> 02:02:47,570 and how CSS can then be used to style our web page in various different ways, 2336 02:02:47,570 --> 02:02:50,060 adding custom styling like colors and layouts, 2337 02:02:50,060 --> 02:02:53,090 but also thinking about things like responsive design, 2338 02:02:53,090 --> 02:02:55,610 like what happens on a mobile screen or on a tablet, 2339 02:02:55,610 --> 02:02:59,280 and making sure that our web pages look good on those screens too. 2340 02:02:59,280 --> 02:03:02,710 And then finally, we took a look at Sass, an extension to CSS, 2341 02:03:02,710 --> 02:03:04,460 that adds a number of additional features, 2342 02:03:04,460 --> 02:03:07,600 features like variables and nesting and inheritance, 2343 02:03:07,600 --> 02:03:10,370 that make it even easier for us to be able to write style 2344 02:03:10,370 --> 02:03:12,460 that we can apply to our web pages. 2345 02:03:12,460 --> 02:03:14,420 From there, we're going to be transitioning now 2346 02:03:14,420 --> 02:03:18,560 to looking at how we can use HTML and CSS in larger web applications 2347 02:03:18,560 --> 02:03:22,670 as we begin to incorporate other tools, tools like Python and JavaScript 2348 02:03:22,670 --> 02:03:24,920 and other languages and frameworks altogether. 2349 02:03:24,920 --> 02:03:28,010 So this is Web Programming with Python and JavaScript. 2350 02:03:28,010 --> 02:03:30,100 We'll see you next time.