1 00:00:00,000 --> 00:00:00,640 2 00:00:00,640 --> 00:00:03,430 >> SPEAKER 1: So it's definitely better design to put your CSS properties 3 00:00:03,430 --> 00:00:07,170 inside of a style tag, inside of the head tag on the page, rather than use 4 00:00:07,170 --> 00:00:10,380 style attributes throughout the rest of your source. 5 00:00:10,380 --> 00:00:12,430 But suppose you want to use some of the same CSS 6 00:00:12,430 --> 00:00:14,270 properties in multiple files. 7 00:00:14,270 --> 00:00:17,810 >> Rather than copy and paste those properties into those disparate HTML 8 00:00:17,810 --> 00:00:22,860 files, why not put them in one central .css file and then include that file 9 00:00:22,860 --> 00:00:27,460 into multiple HTML pages, much like we put code in header files in order to 10 00:00:27,460 --> 00:00:31,390 include it across multiple programs in C. Let's take a look. 11 00:00:31,390 --> 00:00:33,700 >> Here in css-2.html. 12 00:00:33,700 --> 00:00:37,450 I have a whole bunch of CSS properties that I'd like to factor out. 13 00:00:37,450 --> 00:00:39,920 So let's go ahead and highlight those. 14 00:00:39,920 --> 00:00:41,080 Cut them out. 15 00:00:41,080 --> 00:00:43,900 And let's get rid of the style tags as well. 16 00:00:43,900 --> 00:00:48,590 Let's now move to this other tab that I've already called css-2.css, and 17 00:00:48,590 --> 00:00:51,870 paste in those CSS properties, saving the file. 18 00:00:51,870 --> 00:00:57,110 >> Let's now go back to css-2.html and specify, still on the head, that we 19 00:00:57,110 --> 00:00:59,870 want to link to the CSS file somehow. 20 00:00:59,870 --> 00:01:01,860 Open bracket link href="css-2.css". 21 00:01:01,860 --> 00:01:06,280 22 00:01:06,280 --> 00:01:10,280 >> And then let's specify that the relationship of this link tag with the 23 00:01:10,280 --> 00:01:14,060 document is to serve as a style sheet. 24 00:01:14,060 --> 00:01:17,420 Link is what's known as an empty element so we can open and close the 25 00:01:17,420 --> 00:01:19,870 tag in one single breath. 26 00:01:19,870 --> 00:01:25,890 Let's now save the file, change it's permissions, and open it in a browser. 27 00:01:25,890 --> 00:01:30,150 >> chmod a + r css-2.html. 28 00:01:30,150 --> 00:01:31,330 Enter. 29 00:01:31,330 --> 00:01:33,200 Now open up Chrome. 30 00:01:33,200 --> 00:01:41,240 http://localhost/css-2.html. 31 00:01:41,240 --> 00:01:43,490 >> I do see John Harvard's home page but not any of the 32 00:01:43,490 --> 00:01:45,560 stylizations that I expected. 33 00:01:45,560 --> 00:01:47,080 Now why might that be? 34 00:01:47,080 --> 00:01:50,190 Well, let's go back to the terminal window and take a look with ls. 35 00:01:50,190 --> 00:01:54,720 Let's go back here to gedit and in the terminal window type ls-l. 36 00:01:54,720 --> 00:02:00,170 >> It seems to be that css-2.html is indeed readable by all, but notice I 37 00:02:00,170 --> 00:02:01,190 made a mistake. 38 00:02:01,190 --> 00:02:04,450 I did not similarly change the permissions on the .css file. 39 00:02:04,450 --> 00:02:08,710 So right now, I, the file's owner, is the only one who can read or write it. 40 00:02:08,710 --> 00:02:10,460 So let's fix that as well with chmod. 41 00:02:10,460 --> 00:02:15,370 >> chmod a+r css-2.css. 42 00:02:15,370 --> 00:02:17,940 >> Let's now go back to Chrome and reload. 43 00:02:17,940 --> 00:02:19,830 And there is John Harvard's homepage. 44 00:02:19,830 --> 00:02:21,334