1 00:00:05,260 --> 00:00:11,660 Welcome back in this lecture we're going to discuss backgrounds and Borders see SS So we've already 2 00:00:11,660 --> 00:00:17,330 discussed the color property in other really common property to adjust the background property and borders 3 00:00:17,330 --> 00:00:21,170 property and the various properties that are similar or related to them. 4 00:00:21,170 --> 00:00:26,260 We're also going to touch back on divs and spans that we discuss in the HTL crash course. 5 00:00:26,510 --> 00:00:27,350 Let's get started. 6 00:00:27,350 --> 00:00:27,950 All right. 7 00:00:28,040 --> 00:00:33,650 Here have my basic H-2A metafile and I've linked it to the stylesheet master about C Ss and my master 8 00:00:33,650 --> 00:00:35,980 that C Ss is currently blank. 9 00:00:35,990 --> 00:00:37,970 Let's add a few elements to our H-2A. 10 00:00:38,060 --> 00:00:44,140 And then we'll style some of their properties in the SS will begin by just creating a simple paragraph 11 00:00:44,140 --> 00:00:54,370 tag and we'll say this is a paragraph but I'm also going to add in outside the div and then lets put 12 00:00:54,370 --> 00:00:55,810 in a div tag. 13 00:00:56,290 --> 00:00:59,380 So this div tag notice it's a division right now. 14 00:00:59,380 --> 00:01:00,760 I'm not going to worry about class. 15 00:01:00,760 --> 00:01:03,090 We'll talk about that in an upcoming lecture. 16 00:01:03,130 --> 00:01:08,080 Instead I'm just going to have this division and I'm going to put in some paragraph text inside this 17 00:01:08,080 --> 00:01:15,720 division so I'll say I'm inside the div and let's put in another paragraph tag. 18 00:01:15,960 --> 00:01:18,230 Also inside the div. 19 00:01:18,650 --> 00:01:27,070 And finally we'll put in one more paragraph tan I'll say inside the div thought thought thought and 20 00:01:27,070 --> 00:01:29,180 then we're going to add in a span tab. 21 00:01:29,470 --> 00:01:34,510 So get a little bit of space here and then start typing outspan and you should see span and were able 22 00:01:34,510 --> 00:01:37,410 to autocomplete that. 23 00:01:37,620 --> 00:01:38,910 Or you can just type it up manually. 24 00:01:38,910 --> 00:01:47,020 The Open and span tags so inside of this will say in the span. 25 00:01:47,060 --> 00:01:49,660 OK so I'm going to save those changes. 26 00:01:49,760 --> 00:01:52,180 So how this paragraph and I have this division. 27 00:01:52,370 --> 00:01:54,730 And when I refresh my basic's thought each time. 28 00:01:54,950 --> 00:02:01,370 Right now my CSSA is blank so I just see this is a paragraph outside the div I'm inside. 29 00:02:01,640 --> 00:02:05,500 Also inside a div and then inside the div in a span. 30 00:02:05,810 --> 00:02:12,030 So right now the divs in the spans they're not really showing up as any different than the other paragraphs. 31 00:02:12,170 --> 00:02:19,550 OK now let's add in some CSSA style calls so we'll come back to master that CSSA and I'm actually going 32 00:02:19,550 --> 00:02:27,420 to apply a style to the entire body and weren't going to explore is the background property so notice 33 00:02:27,420 --> 00:02:31,800 as you begin to type background there's all kinds of property you can affect such as the origin the 34 00:02:31,800 --> 00:02:35,000 size image position color and so on. 35 00:02:35,010 --> 00:02:36,760 I'm just Mikol basic background. 36 00:02:37,050 --> 00:02:41,230 And here if I provide a color let's say Grey for instance. 37 00:02:41,430 --> 00:02:47,310 Save this and refresh anything that is within the body is going to have its background color changed 38 00:02:47,310 --> 00:02:51,630 to grey and you should be careful with this sort of choice because you can make something really awful 39 00:02:51,630 --> 00:02:56,080 like red and then you'll have this bright ugly red website but maybe you want it that way. 40 00:02:56,100 --> 00:02:58,210 So it's also more power to you. 41 00:02:58,620 --> 00:03:05,090 Now as an option where you can do is also provide a u r l image so it can say background. 42 00:03:05,120 --> 00:03:11,310 Your L and I have opened here some image from an splash dot com and you can really point out to any 43 00:03:11,310 --> 00:03:12,850 image hosted on line. 44 00:03:12,960 --> 00:03:21,230 If I just copy this image address of this cute little puppy and paste it here into my actual Your L 45 00:03:21,240 --> 00:03:21,830 tag. 46 00:03:22,770 --> 00:03:30,060 The Riego still say background your URL and this really long image save those changes and will come 47 00:03:30,060 --> 00:03:31,900 back here refreshed. 48 00:03:32,010 --> 00:03:37,980 And now if you zoom out you should see this image and notice how it's actually being repeated. 49 00:03:38,040 --> 00:03:46,900 So an option to make that stop is to add an background dash repeat. 50 00:03:46,910 --> 00:03:51,500 And then you can say no repeat and look at this autocomplete that's actually telling us the option. 51 00:03:51,500 --> 00:03:52,550 So that's really nice. 52 00:03:52,610 --> 00:03:58,520 We can have it rippee along the x axis or y axis or just no repeat save that and only refreshes page 53 00:03:58,550 --> 00:04:00,410 you only see that picture once. 54 00:04:00,470 --> 00:04:04,400 Now for pretty much all our sites we're not going to really be having your backgrounds. 55 00:04:04,400 --> 00:04:06,830 I just want to show you that you have that option. 56 00:04:06,880 --> 00:04:07,410 OK. 57 00:04:07,610 --> 00:04:12,530 So let me go ahead and comment all this out and I can comment this out just by highlighting all this 58 00:04:12,620 --> 00:04:15,080 and then doing control forward slash. 59 00:04:15,080 --> 00:04:20,300 Or you can just manually add and forward slash Asterix to the beginning and the end of whatever you 60 00:04:20,300 --> 00:04:21,580 want to comment out. 61 00:04:21,650 --> 00:04:24,510 So to say that it won't be affecting the body anymore. 62 00:04:24,570 --> 00:04:26,060 Let's refresh this page. 63 00:04:26,060 --> 00:04:26,520 There we go. 64 00:04:26,520 --> 00:04:34,710 So now we have it nice and clean white and let's go back and now discuss these divs and this particular 65 00:04:34,710 --> 00:04:35,740 span. 66 00:04:35,820 --> 00:04:41,790 So let's imagine that I want to just style a certain portion of my website maybe I don't want to style 67 00:04:41,790 --> 00:04:43,140 every single paragraph tag. 68 00:04:43,290 --> 00:04:46,020 Instead I only want to style some of the paragraph tags. 69 00:04:46,050 --> 00:04:49,460 This is where something like a div can come in real handy. 70 00:04:49,590 --> 00:04:56,170 So what I am going to do is just refer to that div and then change the background of that division. 71 00:04:56,170 --> 00:04:59,380 So I'll say background and notice by default. 72 00:04:59,380 --> 00:05:02,690 I can just say background blue background color. 73 00:05:02,830 --> 00:05:05,320 Ill treat it the same way I'm going to say that. 74 00:05:05,330 --> 00:05:07,420 Set the background of blue here. 75 00:05:07,420 --> 00:05:13,200 Refresh and everything inside the div is going to have background blue. 76 00:05:13,340 --> 00:05:14,860 We can also affect the border. 77 00:05:14,960 --> 00:05:23,000 So if you say border and give this a color such as orange save that then I can color this border that's 78 00:05:23,000 --> 00:05:28,340 around the div but notice right now I'm not seeing any effect and that's because we haven't specified 79 00:05:28,340 --> 00:05:31,820 how thick or how wide we want that border. 80 00:05:31,820 --> 00:05:38,700 So I can say border dash with and then I can say medium thin or thick. 81 00:05:39,190 --> 00:05:45,520 And then we also have to provide a border style sort of say border dash style and there's dasht grooves 82 00:05:45,550 --> 00:05:51,940 hidden dotted will say dotted for now save that refresh. 83 00:05:51,940 --> 00:05:54,980 And now I see a dotted orange border around this. 84 00:05:54,980 --> 00:05:59,240 And you can play around with these border styles solid is another style that's really commonly used 85 00:05:59,720 --> 00:06:00,500 reforest that. 86 00:06:00,510 --> 00:06:03,510 And now you see this solid orange around that. 87 00:06:03,590 --> 00:06:10,250 Keep in mind you can also provide actual pixels here so maybe you say 20 x for pixels if you want to 88 00:06:10,250 --> 00:06:16,070 make it really thick or if you want to just have it be really thin maybe just say two pixels or something 89 00:06:16,070 --> 00:06:17,600 like that refresh. 90 00:06:17,600 --> 00:06:19,480 And I see this thinner orange. 91 00:06:19,680 --> 00:06:20,310 OK. 92 00:06:20,480 --> 00:06:23,750 So the main idea here is that you can affect the background color. 93 00:06:23,780 --> 00:06:25,850 You can also set your all to your background. 94 00:06:26,090 --> 00:06:31,850 You have border but the border is not going to show up unless you say border with and border style. 95 00:06:31,850 --> 00:06:37,820 Now there is a shorthand for this and often what people do is instead of saying border border with and 96 00:06:37,820 --> 00:06:44,060 border style you can actually combine all of these to just one line by providing it in this order so 97 00:06:44,060 --> 00:06:52,160 you can say border orange to pick's solid and let's make it thicker something like 10 pixels. 98 00:06:52,170 --> 00:06:55,460 Let's change the colors to red and let's make it dasht here. 99 00:06:56,610 --> 00:06:59,440 So you can provide a single line code like this. 100 00:06:59,580 --> 00:07:02,410 And when we refresh this you'll see that taken effect. 101 00:07:02,430 --> 00:07:07,650 So since people like to effect borders without having to write border with border style CSSA will also 102 00:07:07,650 --> 00:07:10,690 accept these kind of three terms just linked to border. 103 00:07:11,070 --> 00:07:11,630 OK. 104 00:07:11,790 --> 00:07:16,080 So there are options for editing background them border and again notice what's happening. 105 00:07:16,080 --> 00:07:18,160 It's only affecting div tags. 106 00:07:20,100 --> 00:07:24,100 So just to show you again let's stylize all the paragraph tags. 107 00:07:24,120 --> 00:07:30,260 I can say color and maybe make it really obvious something like all paragraphs should be yellow. 108 00:07:30,510 --> 00:07:35,660 I run this and now all the paragraphs are yellow including the ones outside the div. 109 00:07:35,670 --> 00:07:39,680 Now let's imagine I want to affect this one in the span in a span. 110 00:07:39,690 --> 00:07:47,430 All I need to do is say span and then we can give it a specific background such as a red background 111 00:07:47,910 --> 00:07:51,980 and we can change its color to something maybe black should be pretty obvious. 112 00:07:52,380 --> 00:08:00,770 Ok so now I refresh this page and I see in a span with a red background in black font color. 113 00:08:01,110 --> 00:08:01,380 All right. 114 00:08:01,470 --> 00:08:03,730 That's really the basics of what we're going to discuss here. 115 00:08:03,780 --> 00:08:08,940 Again you have these background parameters these border parameters and you can run border either border 116 00:08:08,940 --> 00:08:12,330 with border style or all as a single line. 117 00:08:12,330 --> 00:08:17,010 And then we have the ability to tag paragraphs as well as divs and spans. 118 00:08:17,280 --> 00:08:17,850 OK. 119 00:08:18,000 --> 00:08:21,560 I hope that clarified why we use divs and spans as well. 120 00:08:21,600 --> 00:08:26,070 Coming up next we're going to talk about selectors which is probably one of the most important aspects 121 00:08:26,190 --> 00:08:31,090 of using C-s us being able to use IDS selectors and class selectors. 122 00:08:31,110 --> 00:08:34,650 That's really what we're going to be doing most in our real life projects. 123 00:08:34,650 --> 00:08:38,220 So it's going to be important to understand that very next lecture for this lecture. 124 00:08:38,220 --> 00:08:42,740 All you need to understand is that you can affect backgrounds in Borders and you can call div and span 125 00:08:42,740 --> 00:08:47,520 tags specifically if you have any questions feel free to post the Kewaunee forums. 126 00:08:47,520 --> 00:08:48,730 We'll see you at the next lecture.