1 00:00:02,056 --> 00:00:04,135 In this lecture, we're going to start 2 00:00:04,135 --> 00:00:07,459 to write CSS for text formatting, so you can see 3 00:00:07,459 --> 00:00:09,250 how CSS works. 4 00:00:09,250 --> 00:00:11,167 It's really easy. 5 00:00:12,472 --> 00:00:16,171 So, we'll jump right into the CSS file here, 6 00:00:16,171 --> 00:00:18,254 to start write some code. 7 00:00:20,056 --> 00:00:22,564 CSS is written in rules. 8 00:00:22,564 --> 00:00:26,731 Each rule consists of a selector, and a declaration block. 9 00:00:27,901 --> 00:00:32,068 To exemplify that, we'll start formatting the main heading. 10 00:00:33,004 --> 00:00:36,535 So, H1 is the selector 11 00:00:36,535 --> 00:00:39,762 because it will select all H1 elements. 12 00:00:39,762 --> 00:00:43,416 This means that all H1 elements will be formatted 13 00:00:43,416 --> 00:00:47,349 with the code we will write in the declaration block, 14 00:00:47,349 --> 00:00:49,266 here in curly brackets. 15 00:00:52,401 --> 00:00:55,484 So, I will start with the text color. 16 00:00:57,079 --> 00:00:59,749 We will choose green in this example. 17 00:00:59,749 --> 00:01:00,749 So, color... 18 00:01:03,259 --> 00:01:05,759 And I just write, green 19 00:01:06,671 --> 00:01:09,004 and then semicolon. 20 00:01:10,137 --> 00:01:12,900 And you see the H1 element actually changed 21 00:01:12,900 --> 00:01:14,483 its color to green. 22 00:01:15,844 --> 00:01:17,605 So, to sum this up, 23 00:01:17,605 --> 00:01:20,263 the property here is color, 24 00:01:20,263 --> 00:01:24,430 and the value of the property here is the name, green. 25 00:01:26,352 --> 00:01:30,102 Next, we want to change the text size, right? 26 00:01:31,216 --> 00:01:35,515 So just write font size 27 00:01:35,515 --> 00:01:40,432 and brackets gives us some suggestions as we write. 28 00:01:40,432 --> 00:01:43,515 And now I will choose just 40 pixels. 29 00:01:45,766 --> 00:01:47,594 You see, it changed? 30 00:01:47,594 --> 00:01:48,927 Maybe 50 pixels. 31 00:01:51,335 --> 00:01:53,418 No, 40 pixels was better. 32 00:01:54,516 --> 00:01:57,558 You see we are already designing in the browser, 33 00:01:57,558 --> 00:02:01,115 we're changing the values of the attributes, 34 00:02:01,115 --> 00:02:03,198 and see which looks best. 35 00:02:05,889 --> 00:02:09,165 Now suppose we wanted to change the font family. 36 00:02:09,165 --> 00:02:11,498 Let's say, to Helvetica New. 37 00:02:13,050 --> 00:02:14,217 Let's do that. 38 00:02:15,067 --> 00:02:17,984 It's font family, right? 39 00:02:19,043 --> 00:02:22,626 And now just type, Helvetica New. 40 00:02:26,859 --> 00:02:31,026 And again, the H1 element changed its family. 41 00:02:32,428 --> 00:02:35,613 Now if that font is not available on your system, 42 00:02:35,613 --> 00:02:38,282 which is likely, if you're on windows. 43 00:02:38,282 --> 00:02:41,978 Let's tell the browser to use Arial instead. 44 00:02:41,978 --> 00:02:46,145 And to do so, we just write Arial after a comma here, 45 00:02:47,527 --> 00:02:51,694 and then the semicolon, as before. 46 00:02:53,521 --> 00:02:55,582 So Helvetica is the first choice, 47 00:02:55,582 --> 00:02:58,165 and Arial is the second choice. 48 00:02:59,186 --> 00:03:03,353 And now, let's go do the same thing for the H2 elements. 49 00:03:04,518 --> 00:03:08,685 We want them to look the same, but a smaller font size. 50 00:03:09,752 --> 00:03:12,669 So let's copy this H1 rule, 51 00:03:15,967 --> 00:03:19,800 and paste it down here, and change this to H2. 52 00:03:22,146 --> 00:03:25,004 Now these two look exactly the same. 53 00:03:25,004 --> 00:03:28,254 The H1 looks exactly the same as the H2 54 00:03:30,288 --> 00:03:31,871 elements down here. 55 00:03:32,767 --> 00:03:35,533 Because for now we didn't change anything. 56 00:03:35,533 --> 00:03:39,200 So let's change this here to, let's say, 25. 57 00:03:41,197 --> 00:03:44,114 And that's a much better font size. 58 00:03:46,765 --> 00:03:48,729 Now, we repeated some rules here. 59 00:03:48,729 --> 00:03:49,995 You see? 60 00:03:49,995 --> 00:03:54,011 The H1 and the H2 have the same color 61 00:03:54,011 --> 00:03:56,094 and the same font family. 62 00:03:56,960 --> 00:03:58,927 And we should actually avoid that, 63 00:03:58,927 --> 00:04:02,111 because repeating code is bad practice. 64 00:04:02,111 --> 00:04:04,169 Instead of repeating, we can just group 65 00:04:04,169 --> 00:04:06,336 the common rules together. 66 00:04:07,258 --> 00:04:10,352 This is something we will be doing a lot, 67 00:04:10,352 --> 00:04:13,158 so just showing it to you. 68 00:04:13,158 --> 00:04:16,473 So, write H1 and H2, 69 00:04:16,473 --> 00:04:18,640 and the declaration block. 70 00:04:19,662 --> 00:04:22,495 So everything that is common here, 71 00:04:23,853 --> 00:04:28,345 I will cut and paste it up here. 72 00:04:28,345 --> 00:04:32,512 And the font family is also the same for these two. 73 00:04:36,067 --> 00:04:38,734 So, did you see what I did here? 74 00:04:40,417 --> 00:04:43,571 Now I can delete this from here, 75 00:04:43,571 --> 00:04:45,537 because it's already declared here 76 00:04:45,537 --> 00:04:47,704 in the common declaration. 77 00:04:48,859 --> 00:04:51,764 Now let's quickly format the paragraphs. 78 00:04:51,764 --> 00:04:55,361 I will first go back to the HTML file 79 00:04:55,361 --> 00:04:59,335 and delete this random text we put here, 80 00:04:59,335 --> 00:05:03,502 just to see how strong, and emphasize and underline works. 81 00:05:06,962 --> 00:05:10,895 As you can imagine, we'll use the P selector here. 82 00:05:10,895 --> 00:05:14,361 And I'll show you another bracket secret here. 83 00:05:14,361 --> 00:05:17,022 Instead of switching to the CSS file, 84 00:05:17,022 --> 00:05:20,772 you can edit CSS right here in the HTML file. 85 00:05:22,036 --> 00:05:24,796 Just click on the P tag, 86 00:05:24,796 --> 00:05:28,013 and then hit Command+E, or Control+E. 87 00:05:28,013 --> 00:05:29,467 Command+E. 88 00:05:29,467 --> 00:05:32,740 And this opens a CSS editing section 89 00:05:32,740 --> 00:05:35,361 right here in this file. 90 00:05:35,361 --> 00:05:37,887 This is called Quick Edit. 91 00:05:37,887 --> 00:05:40,212 Now hit new rule. 92 00:05:40,212 --> 00:05:43,397 Now it automatically puts the P selector 93 00:05:43,397 --> 00:05:46,564 and the declaration block here for us. 94 00:05:48,500 --> 00:05:50,750 OK, I want the font size... 95 00:05:52,525 --> 00:05:55,108 To, let's say, 18 pixels. 96 00:05:57,569 --> 00:05:58,402 Great. 97 00:06:00,279 --> 00:06:04,189 And let's justify this text. 98 00:06:04,189 --> 00:06:08,402 And for that, we use a text align property 99 00:06:08,402 --> 00:06:10,235 and set it to justify. 100 00:06:12,845 --> 00:06:14,389 Very well. 101 00:06:14,389 --> 00:06:18,556 We could also use right, center or left, 102 00:06:19,814 --> 00:06:21,925 but we want to justify here. 103 00:06:21,925 --> 00:06:25,195 I will also adjust the font family. 104 00:06:25,195 --> 00:06:27,696 Do you remember how to do that? 105 00:06:27,696 --> 00:06:31,285 It is font family 106 00:06:31,285 --> 00:06:34,618 and it was Helvetica New 107 00:06:38,716 --> 00:06:41,133 or as a second choice, Arial. 108 00:06:44,659 --> 00:06:45,492 All right. 109 00:06:47,136 --> 00:06:49,569 Maybe you noticed that the link text is still 110 00:06:49,569 --> 00:06:52,524 in original format down here. 111 00:06:52,524 --> 00:06:56,364 Now we could go ahead and format the A tag, right? 112 00:06:56,364 --> 00:07:00,171 That will show you a much better solution. 113 00:07:00,171 --> 00:07:03,254 So let's switch back to the CSS file. 114 00:07:05,411 --> 00:07:09,578 And at the beginning, I will add a rule for the body. 115 00:07:10,607 --> 00:07:13,929 And since everything is inside the body, 116 00:07:13,929 --> 00:07:18,283 this rule will apply to everything visible on the web page. 117 00:07:18,283 --> 00:07:22,768 So this means all elements that have no defined styles. 118 00:07:22,768 --> 00:07:25,900 So this is like a global rule. 119 00:07:25,900 --> 00:07:29,150 So, body, and that's it. 120 00:07:30,891 --> 00:07:35,058 So first thing, I could go ahead and copy the font family 121 00:07:36,833 --> 00:07:38,500 right into the body. 122 00:07:42,402 --> 00:07:43,576 Like this. 123 00:07:43,576 --> 00:07:45,865 OK, now you see that everything 124 00:07:45,865 --> 00:07:49,647 has the Helvetica New font family. 125 00:07:49,647 --> 00:07:53,480 Even the links, which I didn't even style yet. 126 00:07:54,425 --> 00:07:58,592 If I delete this font family declaration down here 127 00:07:59,546 --> 00:08:01,046 for the P element, 128 00:08:03,324 --> 00:08:07,955 it still looks the same because we defined that everything 129 00:08:07,955 --> 00:08:12,122 inside the body will have Helvetica New as font family. 130 00:08:13,295 --> 00:08:17,295 And I will do the same thing with the font size. 131 00:08:18,159 --> 00:08:20,401 We'll cut it here, 132 00:08:20,401 --> 00:08:22,568 paste it here in the body. 133 00:08:24,518 --> 00:08:27,609 So the paragraph is back to the 18 pixels, 134 00:08:27,609 --> 00:08:31,442 but now the links are also at 18 pixels. 135 00:08:33,505 --> 00:08:37,442 Now the reason this works, is because of CSS inheritance, 136 00:08:37,442 --> 00:08:41,510 which is a very important concept in CSS. 137 00:08:41,510 --> 00:08:44,036 We changed the font size in the body, 138 00:08:44,036 --> 00:08:47,364 and so the elements that are inside of the body 139 00:08:47,364 --> 00:08:49,281 inherit its style. 140 00:08:50,152 --> 00:08:53,059 So child elements inherit the properties 141 00:08:53,059 --> 00:08:55,817 from their parent elements. 142 00:08:55,817 --> 00:08:57,925 Unless we overwrite their styles, 143 00:08:57,925 --> 00:09:02,092 as we did right here in the H1 and H2. 144 00:09:04,489 --> 00:09:08,072 Sorry, in the H2 declarations. 145 00:09:09,343 --> 00:09:13,740 All right, I think this was a good introduction to CSS code. 146 00:09:13,740 --> 00:09:15,407 So, congratulations. 147 00:09:16,414 --> 00:09:19,454 You have created some nice, clean CSS code here 148 00:09:19,454 --> 00:09:22,687 without repetitions and have made the text 149 00:09:22,687 --> 00:09:25,119 look pretty good for now. 150 00:09:25,119 --> 00:09:26,536 Isn't that great? 151 00:09:27,500 --> 00:09:29,660 Now this was a lot of stuff to absorb, 152 00:09:29,660 --> 00:09:32,232 so feel free to go through it again 153 00:09:32,232 --> 00:09:35,790 and make sure you understand exactly what we did. 154 00:09:35,790 --> 00:09:37,608 Because it's very important 155 00:09:37,608 --> 00:09:40,651 that you understand everything from here 156 00:09:40,651 --> 00:09:43,978 because from now we will use these concepts 157 00:09:43,978 --> 00:09:46,895 for the next lectures.