Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,600 --> 00:00:04,827 Welcome to the CSS basic section. 2 2 00:00:04,827 --> 00:00:06,862 So far, we have used HTML 3 3 00:00:06,862 --> 00:00:09,213 to put content on our webpage. 4 4 00:00:09,213 --> 00:00:12,189 Now, we'll use some basic CSS to actually 5 5 00:00:12,189 --> 00:00:14,534 style that content to make it look 6 6 00:00:14,534 --> 00:00:16,928 the way we want it. 7 7 00:00:16,928 --> 00:00:19,541 After this section, you will be able to build 8 8 00:00:19,541 --> 00:00:22,777 a simple layout with some formatted content. 9 9 00:00:22,777 --> 00:00:26,852 We will continue to work on this simple blog past webpage 10 10 00:00:26,852 --> 00:00:29,513 that I showed you before. 11 11 00:00:29,513 --> 00:00:31,491 So we will add some more content, 12 12 00:00:31,491 --> 00:00:34,851 build a simple layout and style the whole thing. 13 13 00:00:34,851 --> 00:00:37,858 After this section, we will be ready to start 14 14 00:00:37,858 --> 00:00:40,358 on our killer website project. 15 15 00:00:41,738 --> 00:00:43,071 So, what is CSS? 16 16 00:00:44,396 --> 00:00:47,563 CSS stands for cascading style sheets. 17 17 00:00:48,853 --> 00:00:53,020 CSS defines exactly how HTML elements should look. 18 18 00:00:53,971 --> 00:00:56,854 It allows us to make a clear separation 19 19 00:00:56,854 --> 00:00:59,611 line:15% between content and style. 20 20 00:00:59,611 --> 00:01:02,778 line:15% HTML is the content and CSS is style. 21 21 00:01:06,233 --> 00:01:09,633 These two images show the exact same HTML 22 22 00:01:09,633 --> 00:01:10,988 with the only difference 23 23 00:01:10,988 --> 00:01:13,046 that the website on the left side 24 24 00:01:13,046 --> 00:01:15,869 has not been formatted with CSS yet. 25 25 00:01:15,869 --> 00:01:19,306 It's just bare HTML, which doesn't look very good, 26 26 00:01:19,306 --> 00:01:20,139 of course. 27 27 00:01:22,254 --> 00:01:25,164 So how are we gonna use CSS in practice? 28 28 00:01:25,164 --> 00:01:28,224 There are three ways to use CSS. 29 29 00:01:28,224 --> 00:01:31,034 First, we can write CSS code 30 30 00:01:31,034 --> 00:01:35,107 right inside an HTML tag using the style attribute. 31 31 00:01:35,107 --> 00:01:39,205 Second, we can write CSS code in the head section 32 32 00:01:39,205 --> 00:01:40,872 of an HTML document. 33 33 00:01:41,713 --> 00:01:45,880 And third, CSS code can be put into an external file. 34 34 00:01:46,811 --> 00:01:49,654 And this is what we're actually going to do. 35 35 00:01:49,654 --> 00:01:51,311 Remember what I said about 36 36 00:01:51,311 --> 00:01:55,270 how CSS allows us to separate content from style? 37 37 00:01:55,270 --> 00:01:58,136 That is why we'll put all our visual styles 38 38 00:01:58,136 --> 00:02:01,514 in a separate file 'cause it's a much cleaner solution 39 39 00:02:01,514 --> 00:02:05,026 and therefore everybody does it that way. 40 40 00:02:05,026 --> 00:02:09,207 So let's go back to brackets and do this. 41 41 00:02:09,207 --> 00:02:11,423 So let's start by creating a new file 42 42 00:02:11,423 --> 00:02:14,848 just as we did before with the HTML file. 43 43 00:02:14,848 --> 00:02:15,848 So File, New 44 44 00:02:17,565 --> 00:02:21,579 and then save it with command S or control S 45 45 00:02:21,579 --> 00:02:23,996 and I will call it style.css. 46 46 00:02:25,879 --> 00:02:27,480 Okay, that's it. 47 47 00:02:27,480 --> 00:02:30,280 You see, now it appears here 48 48 00:02:30,280 --> 00:02:32,683 in our project folder. 49 49 00:02:32,683 --> 00:02:36,129 Now I'm going to go back to the HTML file 50 50 00:02:36,129 --> 00:02:38,707 because now we have to tell the HTML file 51 51 00:02:38,707 --> 00:02:42,306 in which CSS file the new styles will be. 52 52 00:02:42,306 --> 00:02:44,686 So to link these two documents 53 53 00:02:44,686 --> 00:02:47,686 we use the link tag in the HTML head 54 54 00:02:50,819 --> 00:02:52,069 just like this. 55 55 00:02:53,878 --> 00:02:54,711 Link. 56 56 00:02:57,419 --> 00:03:00,716 And this is another element which has no closing text. 57 57 00:03:00,716 --> 00:03:02,620 So it's just link. 58 58 00:03:02,620 --> 00:03:04,640 I hope you remember HTML attributes 59 59 00:03:04,640 --> 00:03:08,186 because we will use them right now. 60 60 00:03:08,186 --> 00:03:10,009 So at start we tell the browser 61 61 00:03:10,009 --> 00:03:13,724 that we want to link a style sheet. 62 62 00:03:13,724 --> 00:03:15,641 So rel and style sheet. 63 63 00:03:18,228 --> 00:03:19,228 Then next we 64 64 00:03:21,416 --> 00:03:23,249 tell the HTML document 65 65 00:03:24,826 --> 00:03:27,271 that it is a CSS file 66 66 00:03:27,271 --> 00:03:29,524 and finally with the H ref attribute 67 67 00:03:29,524 --> 00:03:31,941 we used before for our links, 68 68 00:03:32,902 --> 00:03:34,569 we tell the document 69 69 00:03:36,336 --> 00:03:38,319 where the CSS styles are. 70 70 00:03:38,319 --> 00:03:42,877 Style.css, which is the file we just created before. 71 71 00:03:42,877 --> 00:03:44,921 So hit enter and now 72 72 00:03:44,921 --> 00:03:47,504 these two documents are linked. 73 73 00:03:49,759 --> 00:03:53,926 Alright, now we are ready to start writing some CSS. 74 74 00:03:55,299 --> 00:03:58,466 line:15% And let's do that in the next lecture. 6012