1 00:00:06,880 --> 00:00:11,050 Welcome back, everyone, in this lecture, we're going to be talking about common style attributes, 2 00:00:11,350 --> 00:00:13,570 things like backgrounds and borders. 3 00:00:13,840 --> 00:00:19,750 And we're also going to discuss how divisions like Div and Span can come into play in order to contain 4 00:00:19,750 --> 00:00:21,130 certain sections of our website. 5 00:00:21,520 --> 00:00:22,990 Let's get back to the code editor. 6 00:00:23,290 --> 00:00:25,810 OK, here I am back at our code editor. 7 00:00:26,140 --> 00:00:28,770 What I'm going to do is I'm going to start from scratch again. 8 00:00:28,780 --> 00:00:35,020 Let's delete this CSS code that we have so far and then come back to example that each HTML and I'm 9 00:00:35,020 --> 00:00:36,810 also going to delete this. 10 00:00:36,820 --> 00:00:42,430 And what I'm going to do is the following inside the body or create a paragraph tag. 11 00:00:42,760 --> 00:00:46,210 And I'm going to say this is outside a div. 12 00:00:47,690 --> 00:00:50,810 And then right below it, I'm going to create a dip. 13 00:00:50,900 --> 00:00:55,340 Remember, this is kind of like a container that is going to create a division that contains things 14 00:00:55,340 --> 00:00:55,940 inside of it. 15 00:00:56,510 --> 00:01:00,560 So I'll create another paragraph tag that says inside the div. 16 00:01:02,760 --> 00:01:03,330 There we go. 17 00:01:03,870 --> 00:01:11,010 And then the other thing I want to do is create another paragraph tag that says inside the div and this 18 00:01:11,010 --> 00:01:12,270 is a span. 19 00:01:12,810 --> 00:01:15,120 And then what I'm going to do is actually call a. 20 00:01:16,660 --> 00:01:20,440 Span and then here in all caps, I'll say span. 21 00:01:21,900 --> 00:01:24,850 OK, so notice what I have so far in the HTML. 22 00:01:24,870 --> 00:01:29,580 It kind of all looks the same as the outside of the inside the div and inside a div, and this is a 23 00:01:29,580 --> 00:01:30,900 span as far as the results. 24 00:01:31,230 --> 00:01:38,130 But here I can see I have the actual paragraph tags and I have two of the paragraph tags inside the 25 00:01:38,130 --> 00:01:38,430 div. 26 00:01:39,060 --> 00:01:44,670 So we're going to do is come back to our CIUSSS and begin doing a little bit of styling just to see 27 00:01:44,670 --> 00:01:45,360 how it affects. 28 00:01:45,870 --> 00:01:47,280 So if I say Div. 29 00:01:49,030 --> 00:01:55,210 Curly braces, I can actually affect the background color by saying background color, and then let's 30 00:01:55,210 --> 00:01:59,680 go ahead and choose color just to make it really obvious, I'll choose one that's green so we can see 31 00:01:59,710 --> 00:02:05,920 here that I can actually begin to affect multiple elements by creating a little container for them using 32 00:02:05,920 --> 00:02:06,760 this division. 33 00:02:07,060 --> 00:02:12,850 That's why Div is actually a useful element because it allows us to break up our website or web page 34 00:02:13,120 --> 00:02:14,200 into containers. 35 00:02:14,560 --> 00:02:22,060 And you can also see I have a span that could actually then override the diff so I could come here and 36 00:02:22,060 --> 00:02:23,440 then call the span tag. 37 00:02:24,910 --> 00:02:30,460 And then give that, let's say, a background color of just again to make it obvious of red. 38 00:02:31,030 --> 00:02:34,450 And you'll notice there is what's known as specificity. 39 00:02:34,840 --> 00:02:41,350 Specificity basically says that there's a certain hierarchy of which tags are going to overrule other 40 00:02:41,350 --> 00:02:41,800 tags. 41 00:02:42,070 --> 00:02:45,850 You'll notice that it actually doesn't matter what order I play season in the CSIS. 42 00:02:46,240 --> 00:02:54,130 If I said span first, it's still going to be able to overwrite the div, or if I put Spann next, it's 43 00:02:54,130 --> 00:02:55,720 still going to be able to overwrite the div. 44 00:02:56,140 --> 00:03:01,690 So keep in mind, there is a specificity, there is a hierarchy ordering to what is going to be able 45 00:03:01,690 --> 00:03:02,930 to overwrite what. 46 00:03:03,130 --> 00:03:06,310 And you can check that out by Google searching KSAZ specificity. 47 00:03:06,670 --> 00:03:10,780 It's not super important for us right now to dive into it, but just keep that in mind that there's 48 00:03:10,780 --> 00:03:15,430 going to be certain calls that are going to overwrite other calls and typically kind of the smaller 49 00:03:15,430 --> 00:03:18,010 scale is going to overwrite the larger scale. 50 00:03:18,280 --> 00:03:22,570 Hopefully, it's quite clear that Spann should probably overwrite div because we're focused on this 51 00:03:22,570 --> 00:03:26,590 very specific portion, and that's actually where the word comes from specificity. 52 00:03:26,770 --> 00:03:30,310 We want to be kind of overwriting for more and more specific things. 53 00:03:30,970 --> 00:03:36,190 Now you'll also notice that back in the HTML, I actually have a body tag. 54 00:03:36,550 --> 00:03:42,160 If I wanted to do something for the entire body, I could also call that here in the CSIS. 55 00:03:42,760 --> 00:03:45,940 So what I could do is, say the body type. 56 00:03:47,520 --> 00:03:50,580 And let's give this a background color, so we can say background color. 57 00:03:50,940 --> 00:03:54,030 And again, to make it obvious, let's choose something like cornflower blue. 58 00:03:54,560 --> 00:04:01,470 Now you can see I have a background for the entire web page, so calling things on the body allows us 59 00:04:01,470 --> 00:04:04,800 to have styling effects on the entire web page. 60 00:04:05,190 --> 00:04:09,480 Other things we can do that are common style attributes are to begin dealing with the borders. 61 00:04:09,570 --> 00:04:12,570 This is going to be especially useful when we deal with things like tables. 62 00:04:12,690 --> 00:04:14,550 So let's actually do it on this device. 63 00:04:14,790 --> 00:04:16,920 Remember, that's a little green division here. 64 00:04:17,279 --> 00:04:19,680 I can say a border. 65 00:04:21,190 --> 00:04:28,630 And I can say border color is going to be equal to and let's try to make it obvious, orange. 66 00:04:28,870 --> 00:04:33,550 However, notice it doesn't show up yet because I haven't actually assigned the thickness to it or a 67 00:04:33,550 --> 00:04:34,630 style, so I can say. 68 00:04:36,020 --> 00:04:36,770 Border. 69 00:04:37,310 --> 00:04:38,870 And let's give it a width. 70 00:04:40,070 --> 00:04:44,000 So the border with you actually have many ways of classifying this. 71 00:04:44,330 --> 00:04:46,100 You can say 10 pixels. 72 00:04:48,070 --> 00:04:49,150 And we'll say border. 73 00:04:50,440 --> 00:04:54,100 Style, and let's have it be a dated style. 74 00:04:54,400 --> 00:04:57,820 And once you actually have the style in place, you can then see the border. 75 00:04:57,880 --> 00:05:03,700 So notice we have the fine, a couple of things the style, the width and the actual color in order 76 00:05:03,700 --> 00:05:05,560 to see everything working together. 77 00:05:05,800 --> 00:05:10,690 There's definitely many different styles you can choose from as you begin to type border style again. 78 00:05:10,720 --> 00:05:14,260 We have a lot we can actually do, so dashed is another style. 79 00:05:14,620 --> 00:05:17,410 Clearly, this is a kind of a really ugly website, but you get the idea. 80 00:05:17,830 --> 00:05:22,780 You have things like border color with style, etc. many different attributes you can use. 81 00:05:22,780 --> 00:05:26,350 And this would be useful for something like a table, which you know is going to have borders. 82 00:05:28,630 --> 00:05:30,520 And that's really it for this lecture. 83 00:05:30,670 --> 00:05:37,060 We just wanted to plant the seed of the idea that you have the visions and spans available to you in 84 00:05:37,060 --> 00:05:41,560 case you're trying to deal with the same type of elements, but want to separate them out into different 85 00:05:41,560 --> 00:05:42,100 containers. 86 00:05:42,340 --> 00:05:45,010 So you can think of this device as its own larger container. 87 00:05:45,280 --> 00:05:47,830 And you also have span as it's a little smaller container. 88 00:05:48,070 --> 00:05:54,010 And typically, as you get more and more specific on an element that's going to overwrite the less specific 89 00:05:54,020 --> 00:05:59,230 so you can think of body as kind of the least specific out of everything because it's all technically 90 00:05:59,230 --> 00:05:59,860 in the body. 91 00:06:00,160 --> 00:06:04,030 And then as you get more specific like this division that's going to overwrite the background color 92 00:06:04,030 --> 00:06:09,790 of body and then you get more specific on span, that's going to overwrite the background for div and 93 00:06:09,790 --> 00:06:10,270 so on. 94 00:06:10,960 --> 00:06:11,320 OK. 95 00:06:11,650 --> 00:06:13,390 So that's it for this lecture. 96 00:06:13,390 --> 00:06:18,490 Again, you have properties like backgrounds and border colors that you can edit and then you have divs 97 00:06:18,490 --> 00:06:19,450 and spans. 98 00:06:19,990 --> 00:06:25,690 However, we're going to go into even more detail for other options for selections known as classes 99 00:06:25,690 --> 00:06:26,710 and ideas. 100 00:06:27,190 --> 00:06:28,420 I'll see you at the next lecture.