1 00:00:02,050 --> 00:00:03,300 Back to our content. 2 00:00:03,300 --> 00:00:07,280 I want to make more progress towards our desired end result 3 00:00:07,280 --> 00:00:10,820 to that end result we want to have for this first webpage 4 00:00:10,820 --> 00:00:12,180 we're building here. 5 00:00:12,180 --> 00:00:13,030 And for that, 6 00:00:13,030 --> 00:00:17,313 I actually want to highlight my daily goal text. 7 00:00:18,190 --> 00:00:20,970 So the concrete goal I have for today, 8 00:00:20,970 --> 00:00:23,080 because I have to use two paragraphs, 9 00:00:23,080 --> 00:00:27,180 And if we ignore the link, they look exactly the same. 10 00:00:27,180 --> 00:00:30,080 Got the same style, same size and so on. 11 00:00:30,080 --> 00:00:31,990 And of course that's no problem, 12 00:00:31,990 --> 00:00:35,110 but it would be a very common requirement that you maybe 13 00:00:35,110 --> 00:00:39,880 wanna style some element differently than the average 14 00:00:39,880 --> 00:00:43,560 elements of the same type, so that you don't want to apply 15 00:00:43,560 --> 00:00:46,420 all the paragraph styles to all the paragraphs, 16 00:00:46,420 --> 00:00:50,130 but that some paragraphs should have their own styles. 17 00:00:50,130 --> 00:00:54,110 And the problem at the moment is that with that P selector 18 00:00:54,110 --> 00:00:55,810 here in our CSS code, 19 00:00:55,810 --> 00:00:59,960 we target all the paragraph elements on the page. 20 00:00:59,960 --> 00:01:02,760 And now I want to change the styling for one specific 21 00:01:02,760 --> 00:01:06,710 paragraph, this paragraph to be precise. 22 00:01:06,710 --> 00:01:09,027 Now how can we set different styling 23 00:01:09,027 --> 00:01:12,310 for one specific paragraph? 24 00:01:12,310 --> 00:01:15,826 We could bring back to style attribute to directly target 25 00:01:15,826 --> 00:01:19,010 this and just this paragraph. 26 00:01:19,010 --> 00:01:20,530 But whilst this would work, 27 00:01:20,530 --> 00:01:24,210 it would mean that we have some CSS code directly in our 28 00:01:24,210 --> 00:01:27,830 HTML file and in our HTML elements. 29 00:01:27,830 --> 00:01:31,310 And then we have some CSS code in this block 30 00:01:31,310 --> 00:01:34,770 of CSS code in a separate CSS file. 31 00:01:34,770 --> 00:01:35,673 And whilst this would work, 32 00:01:35,673 --> 00:01:38,510 this is simply not something we want to do, 33 00:01:38,510 --> 00:01:40,910 splitting our CSS code like this 34 00:01:40,910 --> 00:01:44,830 will make it harder to maintain as our website and 35 00:01:44,830 --> 00:01:46,373 its code base grows. 36 00:01:47,530 --> 00:01:49,283 Instead, CSS gives us other tools 37 00:01:49,283 --> 00:01:51,550 for selecting single elements. 38 00:01:51,550 --> 00:01:55,810 For example, besides selecting by element type, 39 00:01:55,810 --> 00:01:59,410 which we're currently doing in all our CSS rules, 40 00:01:59,410 --> 00:02:02,800 we can also select by ID. 41 00:02:02,800 --> 00:02:07,800 We can give our HTML elements an ID, a unique identifier, 42 00:02:08,610 --> 00:02:12,513 and every HTML element can receive such an ID. 43 00:02:13,660 --> 00:02:16,410 And here I'll give this paragraph an ID. 44 00:02:16,410 --> 00:02:18,160 So this ID attribute, 45 00:02:18,160 --> 00:02:21,250 which is one of the officially supported attributes. 46 00:02:21,250 --> 00:02:26,250 And then the value is any unique identifier of your choice. 47 00:02:26,420 --> 00:02:31,330 For example, today's dash challenge. 48 00:02:31,330 --> 00:02:35,170 Now I'm writing it like this instead of like this, 49 00:02:35,170 --> 00:02:36,170 because whilst this is, 50 00:02:36,170 --> 00:02:39,470 is typically how we would write text as a human. 51 00:02:39,470 --> 00:02:43,640 It would be harder to use in code when 52 00:02:43,640 --> 00:02:46,370 we want to select by that ID. 53 00:02:46,370 --> 00:02:49,610 When creating a unique identifier in code. 54 00:02:49,610 --> 00:02:52,310 So when you're creating a unique ID here in code. 55 00:02:52,310 --> 00:02:56,310 You want to use this notation where you have all lowercase 56 00:02:56,310 --> 00:03:00,810 words and you replace white space with dashes 57 00:03:00,810 --> 00:03:03,340 so that you have today's challenge like this, 58 00:03:03,340 --> 00:03:08,150 no special characters, no white space, all lower case. 59 00:03:08,150 --> 00:03:12,880 That's a very common way of creating machine-readable unique 60 00:03:12,880 --> 00:03:16,980 IDs because no matter where you're going to use that ID, 61 00:03:16,980 --> 00:03:20,290 for example, in your CSS code, as we'll do in a second, 62 00:03:20,290 --> 00:03:23,233 the browser will have no problem parsing this. 63 00:03:24,220 --> 00:03:25,970 So now with that id assigned, 64 00:03:25,970 --> 00:03:30,970 we can go back to our HTML code and maybe at the bottom 65 00:03:31,040 --> 00:03:33,243 though, the exact position doesn't matter. 66 00:03:33,243 --> 00:03:37,610 We can now add a new CSS rule. 67 00:03:37,610 --> 00:03:41,440 And now we want to add a rule where we don't use the type 68 00:03:41,440 --> 00:03:45,140 selector, but instead the ID selector. 69 00:03:45,140 --> 00:03:48,330 So we select an element that should be affected by this 70 00:03:48,330 --> 00:03:50,520 style, by ID. 71 00:03:50,520 --> 00:03:54,550 And we do this by adding a hash symbol here and then 72 00:03:54,550 --> 00:03:56,550 repeating that ID which we picked 73 00:03:56,550 --> 00:04:00,480 today's challenge in my case with no white 74 00:04:00,480 --> 00:04:05,450 space between the hash and the ID name, the ID value, 75 00:04:05,450 --> 00:04:10,150 this creates a so-called ID selector and after the type 76 00:04:10,150 --> 00:04:13,310 selector and the pseudo selector with hover, 77 00:04:13,310 --> 00:04:14,700 which we had earlier, 78 00:04:14,700 --> 00:04:18,000 this is the third kind of selector we learn about. 79 00:04:18,000 --> 00:04:20,550 Now, there are a couple of other selectors as well, 80 00:04:20,550 --> 00:04:23,290 which we're also going to learn about through out 81 00:04:23,290 --> 00:04:25,640 this course, once we need them, 82 00:04:25,640 --> 00:04:29,130 but this is one of our major CSS selector, 83 00:04:29,130 --> 00:04:34,130 which is worth remembering for selecting items by their ID. 84 00:04:35,050 --> 00:04:39,050 And it is worth mentioning that IDs should really be unique. 85 00:04:39,050 --> 00:04:42,240 So you shouldn't assign that same ID on some other element. 86 00:04:42,240 --> 00:04:43,913 You should not do that. 87 00:04:44,930 --> 00:04:49,930 So hence this rule will per definition only select and 88 00:04:49,970 --> 00:04:54,970 target one single HTML element in our HTML code. 89 00:04:55,620 --> 00:04:57,570 And then here we can again, 90 00:04:57,570 --> 00:05:00,360 write our CSS code as we learned it. 91 00:05:00,360 --> 00:05:03,620 So we can, for example, change to color. 92 00:05:03,620 --> 00:05:06,143 And here again, I prepared a color, 93 00:05:07,490 --> 00:05:12,320 which we can use where I set the red value to 107, 94 00:05:12,320 --> 00:05:17,023 the green value to 96 and the blue value to 83. 95 00:05:18,300 --> 00:05:21,490 And if we do that and I save all files, if I reload, 96 00:05:21,490 --> 00:05:25,350 now we have this slight orange color 97 00:05:25,350 --> 00:05:27,273 on this second paragraph. 98 00:05:28,290 --> 00:05:29,170 Now, in addition, 99 00:05:29,170 --> 00:05:33,210 I want to increase the font size now the size of the text, 100 00:05:33,210 --> 00:05:35,370 and I want to make it bold. 101 00:05:35,370 --> 00:05:37,173 And how can we now achieve this.