1 00:00:02,110 --> 00:00:04,160 Now let's talk about styling. 2 00:00:04,160 --> 00:00:06,250 You might notice one thing. 3 00:00:06,250 --> 00:00:08,980 If I enter something in that input field, 4 00:00:08,980 --> 00:00:12,900 actually a Sans Serif font gets used here for me. 5 00:00:12,900 --> 00:00:14,930 It clearly is a different font 6 00:00:14,930 --> 00:00:17,160 than what I have here for the label, 7 00:00:17,160 --> 00:00:18,760 and the same for the button. 8 00:00:18,760 --> 00:00:23,150 The button has a different font than I have for the label. 9 00:00:23,150 --> 00:00:24,480 And of course, in general, 10 00:00:24,480 --> 00:00:27,500 we have some default styles being applied here. 11 00:00:27,500 --> 00:00:29,070 The button looks like a button 12 00:00:29,070 --> 00:00:32,800 because it has this slight grayish background 13 00:00:32,800 --> 00:00:36,460 and it has this hover effect out of the box. 14 00:00:36,460 --> 00:00:40,100 And these are defaults, which will differ 15 00:00:40,100 --> 00:00:43,650 based on which browser and operating system you're using. 16 00:00:43,650 --> 00:00:45,610 But of course, these also are defaults, 17 00:00:45,610 --> 00:00:49,110 which you can overwrite to style this on your own. 18 00:00:49,110 --> 00:00:51,570 And that's what I want to do here. 19 00:00:51,570 --> 00:00:53,540 And for that install CSS, 20 00:00:53,540 --> 00:00:57,560 I'll start by setting my own font family. 21 00:00:57,560 --> 00:00:59,700 And therefore I'll go to body 22 00:00:59,700 --> 00:01:02,410 and add a font family here. 23 00:01:02,410 --> 00:01:05,650 But, I now could just use Sans Serif, 24 00:01:05,650 --> 00:01:08,050 but I want to use a different font family 25 00:01:08,050 --> 00:01:11,200 and therefore I'll visit fonts. google. com. 26 00:01:11,200 --> 00:01:14,530 Now here, you can pick any font family you want, 27 00:01:14,530 --> 00:01:17,230 but I'll go with Roboto again. 28 00:01:17,230 --> 00:01:20,100 So I'll select that and here select 29 00:01:20,100 --> 00:01:22,780 the regular style with a weight of 400 30 00:01:24,020 --> 00:01:27,273 and the bold style here with a weight of 700. 31 00:01:28,350 --> 00:01:30,880 And then as we did it before in this course, 32 00:01:30,880 --> 00:01:33,230 I'll copy that code here, 33 00:01:33,230 --> 00:01:37,370 go to index HTML, and add those link tags here 34 00:01:37,370 --> 00:01:39,630 above my styles link tag 35 00:01:40,800 --> 00:01:43,650 and press the auto format shortcut. 36 00:01:43,650 --> 00:01:46,000 And now installs CSS, 37 00:01:46,000 --> 00:01:49,950 I'll set Roboto as my style, as my font family, 38 00:01:49,950 --> 00:01:53,033 and then specify, send Sans Serif as a fallback. 39 00:01:54,250 --> 00:01:56,440 Now, if I do that, 40 00:01:56,440 --> 00:01:59,600 you'll notice that the label now is also Sans Serif. 41 00:01:59,600 --> 00:02:02,233 It uses this Roboto style, 42 00:02:03,110 --> 00:02:06,580 but it might be a bit hard to spot and not be obvious, 43 00:02:06,580 --> 00:02:09,960 but the input text font here 44 00:02:09,960 --> 00:02:13,500 and the button font is not Roberto. 45 00:02:13,500 --> 00:02:15,280 And since it's not that easy to spot, 46 00:02:15,280 --> 00:02:19,810 we can verified by inspecting it with the def tools. 47 00:02:19,810 --> 00:02:23,000 We see that there are a lot of default styles applied 48 00:02:23,000 --> 00:02:25,530 and we especially see that for the font, 49 00:02:25,530 --> 00:02:29,200 it's actually Arial here, in my case. 50 00:02:29,200 --> 00:02:31,610 And depending on which browser and operating system 51 00:02:31,610 --> 00:02:35,600 you're using, you might have a different style here, 52 00:02:35,600 --> 00:02:37,993 but it's Arial, not Roboto 53 00:02:38,940 --> 00:02:42,520 and that's not the style I want. 54 00:02:42,520 --> 00:02:45,780 Instead, I want to use the same font family 55 00:02:45,780 --> 00:02:47,320 for all my elements, 56 00:02:47,320 --> 00:02:51,710 including these HTML input elements and buttons. 57 00:02:51,710 --> 00:02:53,450 And that is something we can achieve, 58 00:02:53,450 --> 00:02:58,150 but we need to override these browser default styles. 59 00:02:58,150 --> 00:03:00,510 Now these browser default styles 60 00:03:00,510 --> 00:03:03,853 override my global font family on the body, 61 00:03:03,853 --> 00:03:05,920 because of specificity. 62 00:03:05,920 --> 00:03:07,640 If I inspect this button again, 63 00:03:07,640 --> 00:03:10,120 we see that the user agent style sheet here 64 00:03:10,120 --> 00:03:12,190 targets the button text selector, 65 00:03:12,190 --> 00:03:15,990 and then sets the font CSS property as a whole, 66 00:03:15,990 --> 00:03:20,990 which allows us to set font size and so on in one go. 67 00:03:21,020 --> 00:03:23,430 And then it sets it to Arial. 68 00:03:23,430 --> 00:03:26,710 Now my font family, which has set on the body, 69 00:03:26,710 --> 00:03:29,710 is inherited but is overwritten, 70 00:03:29,710 --> 00:03:32,420 as you can tell by the strike through effect, 71 00:03:32,420 --> 00:03:35,460 because targeting a specific element 72 00:03:35,460 --> 00:03:39,930 by its tag selector here as the browser default does it, 73 00:03:39,930 --> 00:03:43,690 has a higher specificity than inheritance. 74 00:03:43,690 --> 00:03:46,023 That's what you'll learn before in the course. 75 00:03:47,360 --> 00:03:50,950 And because that's the case, we need to override it again. 76 00:03:50,950 --> 00:03:52,890 And for this here, 77 00:03:52,890 --> 00:03:57,070 we can go to our button and set the font family, 78 00:03:57,070 --> 00:04:01,200 or actually the font as a whole to not just override 79 00:04:01,200 --> 00:04:05,433 the font family, but also the font size and so on. 80 00:04:06,510 --> 00:04:11,510 And now we could specify this manually step by step, 81 00:04:12,100 --> 00:04:16,640 the font CSS property then wants to know 82 00:04:16,640 --> 00:04:20,850 which font style we want, which font size we want, 83 00:04:20,850 --> 00:04:22,750 and then the font family. 84 00:04:22,750 --> 00:04:27,750 So we could set it like this, 85 00:04:27,820 --> 00:04:31,040 and now the button would have that same style 86 00:04:31,040 --> 00:04:32,520 if I inspect it. 87 00:04:32,520 --> 00:04:34,720 Now, we see that gets applied 88 00:04:34,720 --> 00:04:37,470 and you can see the difference if I toggle this here, 89 00:04:37,470 --> 00:04:39,440 you clearly see that the font size 90 00:04:39,440 --> 00:04:41,720 and actually also the font family, 91 00:04:41,720 --> 00:04:43,370 though that's not as clear, 92 00:04:43,370 --> 00:04:45,560 but that both changes. 93 00:04:45,560 --> 00:04:49,630 But, if I just want to use the same style as I have on the 94 00:04:49,630 --> 00:04:54,520 rest of this page, we can also set font here to inherit. 95 00:04:54,520 --> 00:04:58,000 Which is a special value, a special CSS value, 96 00:04:58,000 --> 00:05:01,680 which is available for most CSS properties. 97 00:05:01,680 --> 00:05:06,680 With inherit, you say the styles which you would inherit, 98 00:05:06,900 --> 00:05:10,870 should actually now have a higher specificity 99 00:05:10,870 --> 00:05:13,460 than the browser default styles. 100 00:05:13,460 --> 00:05:16,650 So we overwrite the browser default styles 101 00:05:16,650 --> 00:05:21,650 for this font CSS property here with the inherited stalls. 102 00:05:21,850 --> 00:05:25,323 So the default styles applied by our own style sheet. 103 00:05:26,330 --> 00:05:30,660 And if I set this, we also get is different font family 104 00:05:30,660 --> 00:05:33,053 and this different font size. 105 00:05:34,220 --> 00:05:38,470 I actually never do set my own font size here, but here, 106 00:05:38,470 --> 00:05:43,350 the default in general is one rem, or 16 pixels, 107 00:05:43,350 --> 00:05:46,810 and they offer that as then assumed as well. 108 00:05:46,810 --> 00:05:48,950 And therefor, setting font inherit 109 00:05:48,950 --> 00:05:51,880 is a very common thing to do on buttons 110 00:05:51,880 --> 00:05:56,300 and also input elements, where I'm now doing it as well, 111 00:05:56,300 --> 00:05:59,940 so that all these elements use the exact same font 112 00:05:59,940 --> 00:06:02,600 as you do it on the rest of the page. 113 00:06:02,600 --> 00:06:04,740 Of course that's not a must do, 114 00:06:04,740 --> 00:06:06,910 but it is something you could consider doing 115 00:06:06,910 --> 00:06:09,230 if you want to have to same topography 116 00:06:09,230 --> 00:06:12,353 and the same font across your entire page. 117 00:06:13,300 --> 00:06:14,133 Now with that, 118 00:06:14,133 --> 00:06:17,310 we got the most important and tricky part out of the way. 119 00:06:17,310 --> 00:06:19,890 Now I just want to apply more styling 120 00:06:19,890 --> 00:06:22,560 to both the input and the button here. 121 00:06:22,560 --> 00:06:25,010 And I'll start with the input. 122 00:06:25,010 --> 00:06:27,160 For one, some spacing between 123 00:06:27,160 --> 00:06:29,000 the label and the input would be nice. 124 00:06:29,000 --> 00:06:32,040 Some spacing inside of the input would be nice. 125 00:06:32,040 --> 00:06:36,230 I also want to change the border and make it more grayish. 126 00:06:36,230 --> 00:06:39,470 And I want to change the text color here. 127 00:06:39,470 --> 00:06:42,350 And I also want to change the focus style, 128 00:06:42,350 --> 00:06:46,150 which we have when this input gets selected. 129 00:06:46,150 --> 00:06:51,150 And therefore, for all of that, I'll go to this label, 130 00:06:51,730 --> 00:06:55,540 first of all, and add a label selector. 131 00:06:55,540 --> 00:06:58,000 The exact position does not matter. 132 00:06:58,000 --> 00:07:00,860 I just try to replicate the order of elements, 133 00:07:00,860 --> 00:07:03,670 which I also have in the HTML document. 134 00:07:03,670 --> 00:07:07,010 And there I have a label before I have an input, 135 00:07:07,010 --> 00:07:10,860 but that's not a must do in CSS, but then here, 136 00:07:10,860 --> 00:07:14,880 I'll add a margin bottom off dot five rem, 137 00:07:14,880 --> 00:07:16,243 so half a rem, 138 00:07:17,350 --> 00:07:18,950 and then for the input here, 139 00:07:18,950 --> 00:07:22,470 I'll set the border to one pixels solid 140 00:07:22,470 --> 00:07:27,470 and then pick a grayish color 141 00:07:28,110 --> 00:07:29,220 for this all start with 142 00:07:29,220 --> 00:07:32,663 a black color and then use a light gray here. 143 00:07:34,640 --> 00:07:36,900 And I'll add some padding, some spacing, 144 00:07:36,900 --> 00:07:39,250 some internal spacing at this input 145 00:07:39,250 --> 00:07:41,890 of, let's say, dot two five rem. 146 00:07:41,890 --> 00:07:43,820 So just a little bit of padding 147 00:07:44,900 --> 00:07:49,580 and I'll change the text color with the color CSS property. 148 00:07:49,580 --> 00:07:53,240 And there, I'll take does light gray color 149 00:07:53,240 --> 00:07:55,370 as a starting point, 150 00:07:55,370 --> 00:07:58,740 but then I'll hover over it and pick a darker gray color, 151 00:07:58,740 --> 00:08:01,223 but not black, just dark gray. 152 00:08:02,980 --> 00:08:06,200 And with that, that looks better. 153 00:08:06,200 --> 00:08:10,210 Now the margin bottom is not applied to the label because 154 00:08:10,210 --> 00:08:14,230 the label also turns out to be an inline element. 155 00:08:14,230 --> 00:08:16,850 And as you learned for top and bottom margins, 156 00:08:16,850 --> 00:08:20,080 there, we have some special behavior, 157 00:08:20,080 --> 00:08:22,970 basically that top and bottom margin is ignored. 158 00:08:22,970 --> 00:08:24,720 And therefore, to change this, 159 00:08:24,720 --> 00:08:27,960 I'll set the display to block here for the label, 160 00:08:27,960 --> 00:08:31,450 so that the bottom margin does have an effect, 161 00:08:31,450 --> 00:08:33,390 which it does now. 162 00:08:33,390 --> 00:08:36,230 Now I also want to change that focus style 163 00:08:36,230 --> 00:08:38,669 of the input, so when it's active. 164 00:08:38,669 --> 00:08:40,000 And for this, 165 00:08:40,000 --> 00:08:42,799 we can use another pseudo selector. 166 00:08:42,799 --> 00:08:46,560 On the input element, there is the focus 167 00:08:46,560 --> 00:08:50,670 pseudo selector targeted with colon focus. 168 00:08:50,670 --> 00:08:53,800 So we learned about colon hover and colon active 169 00:08:53,800 --> 00:08:57,100 before in the course, now we have colon focus 170 00:08:57,100 --> 00:09:00,723 to style this input when it's being focused. 171 00:09:01,660 --> 00:09:04,090 And here, I now want to 172 00:09:05,280 --> 00:09:08,860 target my background colors CSS property 173 00:09:08,860 --> 00:09:13,860 and actually, choose a brand new color. 174 00:09:14,270 --> 00:09:19,270 Maybe we use a bluish color here or purple, 175 00:09:20,490 --> 00:09:23,600 maybe a light purple here as a background color 176 00:09:26,540 --> 00:09:30,110 when this is targeted, and I messed this up 177 00:09:30,110 --> 00:09:31,313 so let me fix this. 178 00:09:32,170 --> 00:09:36,573 And I'll also change the text color and I'll use the same, 179 00:09:37,770 --> 00:09:40,773 whoops, use the same color there, 180 00:09:42,060 --> 00:09:45,370 but of course then move to a much darker purple. 181 00:09:45,370 --> 00:09:48,470 And I'll also change the border color then, 182 00:09:48,470 --> 00:09:51,880 and use that same darker purple for that. 183 00:09:51,880 --> 00:09:54,613 And of course you can style this however you want. 184 00:09:56,500 --> 00:09:58,770 But with that, if we save this, 185 00:09:58,770 --> 00:10:02,370 now we have this effect when we focused as input, 186 00:10:02,370 --> 00:10:04,973 and I'd say, that's now much easier to see. 187 00:10:06,580 --> 00:10:08,630 Now let's also style this button. 188 00:10:08,630 --> 00:10:11,030 And for this here I have this button selector 189 00:10:11,030 --> 00:10:13,630 and we're already inheriting the font. 190 00:10:13,630 --> 00:10:16,080 I also want to overwrite the background color 191 00:10:16,080 --> 00:10:19,340 and the border now, and also change the padding. 192 00:10:19,340 --> 00:10:20,730 And for the background color, 193 00:10:20,730 --> 00:10:24,200 I'll use that dark purple here. 194 00:10:24,200 --> 00:10:25,490 Then as a text color, 195 00:10:25,490 --> 00:10:29,960 I'll set white to have this contrast white color, 196 00:10:29,960 --> 00:10:32,380 and I'll just use this white shortcut, 197 00:10:32,380 --> 00:10:37,343 this a built in white color identifier here as a value. 198 00:10:38,500 --> 00:10:41,910 Then for the border I will set this to one pixel solid 199 00:10:41,910 --> 00:10:44,140 and use that same dark purple 200 00:10:46,460 --> 00:10:48,090 and then add a padding. 201 00:10:48,090 --> 00:10:53,090 And here I'll add dot five rem top and bottom, 202 00:10:53,330 --> 00:10:57,113 and let's say one dot five rem left and right. 203 00:10:58,333 --> 00:11:01,310 And if we saved this, we got this button now. 204 00:11:01,310 --> 00:11:02,960 Now that's not the finished button, though. 205 00:11:02,960 --> 00:11:06,700 I'll also give it some rounded corners with border radius, 206 00:11:06,700 --> 00:11:08,433 all four pixels, maybe. 207 00:11:09,420 --> 00:11:11,410 And I also want to make sure that 208 00:11:11,410 --> 00:11:13,340 if I hover over this button, 209 00:11:13,340 --> 00:11:17,400 the cursor changes to this hand cursor 210 00:11:18,540 --> 00:11:21,390 and that's something we can do by setting the cursor 211 00:11:21,390 --> 00:11:25,860 CSS property and setting it to a value of pointer. 212 00:11:25,860 --> 00:11:28,610 Now you've got different values which you can use here. 213 00:11:30,190 --> 00:11:32,290 There are a lot of values actually, 214 00:11:32,290 --> 00:11:34,750 but pointer is this hand icon. 215 00:11:34,750 --> 00:11:37,680 If I save that now it changes to this hand 216 00:11:37,680 --> 00:11:39,113 if I hover over the button. 217 00:11:40,170 --> 00:11:42,930 I also want to have a hover effect in general. 218 00:11:42,930 --> 00:11:46,710 And hence here, I'll select this button 219 00:11:46,710 --> 00:11:48,850 with the hover pseudo selector 220 00:11:48,850 --> 00:11:51,340 and change the styles that are assigned 221 00:11:51,340 --> 00:11:54,410 once we are hovering this button. 222 00:11:54,410 --> 00:11:57,320 And here, I want to change the background color 223 00:11:57,320 --> 00:11:59,990 and use a dark purple as a starting point, 224 00:11:59,990 --> 00:12:02,040 but then she was a lighter version, 225 00:12:02,040 --> 00:12:03,730 a slightly lighter version of 226 00:12:03,730 --> 00:12:07,220 that and do the same for the border color. 227 00:12:07,220 --> 00:12:10,763 Here I'll then use that same lighter purple. 228 00:12:12,320 --> 00:12:14,540 With that, if we saved this 229 00:12:14,540 --> 00:12:17,810 now that we have this slight hover effect. 230 00:12:17,810 --> 00:12:19,520 And that's it for this moment, 231 00:12:19,520 --> 00:12:21,610 this is also not the final demo 232 00:12:21,610 --> 00:12:23,240 for in which we're going to build. 233 00:12:23,240 --> 00:12:26,860 This is just an introduction to forms and how you can style 234 00:12:26,860 --> 00:12:29,520 the different forms and form elements. 235 00:12:29,520 --> 00:12:31,470 Now, did we got this all out of the way, 236 00:12:31,470 --> 00:12:35,250 let's come back to the HTML elements in general 237 00:12:35,250 --> 00:12:38,630 and let's understand which other elements 238 00:12:38,630 --> 00:12:43,433 and input types we have at our disposal, as well.