1 00:00:05,410 --> 00:00:10,210 Welcome back in this lecture we're going to discuss C SS classes and ideas. 2 00:00:11,470 --> 00:00:16,870 We know that we can select every element of a certain tag type in our CSSA file that is to say we can 3 00:00:16,870 --> 00:00:22,000 just say select every paragraph element or select every heading one element just by referencing that 4 00:00:22,000 --> 00:00:24,890 specific tag inside the CSSA SS file. 5 00:00:25,240 --> 00:00:27,850 But what do we do if we only want to select some of these. 6 00:00:27,850 --> 00:00:31,150 Maybe I don't want to stylize every single paragraph element. 7 00:00:31,150 --> 00:00:33,220 I don't want to stylize one or two. 8 00:00:33,400 --> 00:00:39,370 Or maybe I just want to specify I want only stylize a single heading one element what we've already 9 00:00:39,370 --> 00:00:44,710 explored how it can use divs and spans but these options limit our structure in the h l. 10 00:00:44,980 --> 00:00:49,990 If we wanted to only stylize a few paragraph items we'd have to make sure that they're all in the same 11 00:00:49,990 --> 00:00:52,130 div and that may not work for us. 12 00:00:52,390 --> 00:00:58,270 So the solution to this issue of wanting to stylize only a few elements or only a single element is 13 00:00:58,270 --> 00:01:06,610 to use classes in IDS in RC SS every element can accept a class or id attribute. 14 00:01:06,790 --> 00:01:12,970 We can then specifically connect to these classes or IDs from our CSSA with a special syntax call and 15 00:01:12,970 --> 00:01:18,910 the syntax is a dot or a period for a class call and a hash tag for an id call. 16 00:01:18,910 --> 00:01:25,060 Classes are used to assign a CSL style to multiple different elements throughout the h l and these elements 17 00:01:25,060 --> 00:01:27,750 don't even need to be the exact same element type. 18 00:01:27,760 --> 00:01:34,250 They just need to share the same class name IDs are used to apply a style to a single specific element. 19 00:01:34,360 --> 00:01:37,690 That means IDs should be used for unique elements. 20 00:01:37,690 --> 00:01:41,720 All right let's explore these ideas further by jumping over to the text editor. 21 00:01:41,830 --> 00:01:43,730 OK here I am back at the text editor. 22 00:01:43,750 --> 00:01:48,730 I have a basic but I asked him file and it's linked to this master that CSSA file which is currently 23 00:01:48,730 --> 00:01:53,070 empty and this html file is linked to my browser because there's nothing in the body. 24 00:01:53,080 --> 00:01:54,790 I don't see anything right now in the browser. 25 00:01:54,970 --> 00:01:57,910 So let's fill it in with some extreme elements. 26 00:01:57,940 --> 00:02:07,630 We'll start off with maybe H-3 heading so I'll say I'm an H3 heading and then we'll create two divs. 27 00:02:07,780 --> 00:02:13,750 I'm going to create my first div and the first div I'm actually going to keep the class empty for now 28 00:02:14,470 --> 00:02:23,150 and I'll write a paragraph that says I'm inside the first div and then I will create another div. 29 00:02:23,150 --> 00:02:25,020 Again we'll leave the class empty right now. 30 00:02:25,430 --> 00:02:33,610 We'll create a paragraph inside of this that says I'm inside the second div and then at the end of all 31 00:02:33,610 --> 00:02:45,700 this I'll create one last paragraph and this will say I am a unique P outside the device save that let's 32 00:02:45,700 --> 00:02:52,160 refresh our page here and I could see the H-3 heading inside the first div inside the second two. 33 00:02:52,380 --> 00:02:55,040 And I mean you need paragraph outside of divs. 34 00:02:55,060 --> 00:02:55,550 All right. 35 00:02:55,660 --> 00:02:58,350 Let's imagine that I wanted to make this text. 36 00:02:58,360 --> 00:03:04,310 I'm inside the first div the color blue and I only wanted to effect this line to be the color blue. 37 00:03:04,570 --> 00:03:06,150 Well how can I do that. 38 00:03:06,160 --> 00:03:12,330 Unfortunately I can't just call this pair rafted because that would make all paragraph elements blue. 39 00:03:12,730 --> 00:03:18,910 And I can't just call a div 10 because that would make don't make this blue as well as blue. 40 00:03:18,910 --> 00:03:24,320 So what I need is some sort of unique identifier to change this paragraph to blue. 41 00:03:24,610 --> 00:03:26,310 And what I can do is use a class. 42 00:03:26,380 --> 00:03:28,560 So that's where I'm going to fill in this class. 43 00:03:28,720 --> 00:03:33,480 So let's give this first div a class name of first div. 44 00:03:33,760 --> 00:03:40,770 I'm going to save that and unlike before when we just typed in the element tag and then curly braces 45 00:03:41,190 --> 00:03:46,610 since I define an actual class name I'm going to use dot and then the class name. 46 00:03:46,800 --> 00:03:53,790 And in my case I called it first div and notice how Adam actually helps us out by suggesting the name. 47 00:03:54,150 --> 00:04:00,110 Then I'll have a set of curly braces and I'm going to say this color is blue. 48 00:04:00,240 --> 00:04:02,020 So my colon save. 49 00:04:02,040 --> 00:04:03,510 And then I refresh. 50 00:04:03,510 --> 00:04:08,030 And now I see it change blue for that one that was inside the first div. 51 00:04:08,040 --> 00:04:11,790 Now let's imagine I want to make the second one have a background color. 52 00:04:11,790 --> 00:04:19,260 Well to do that I'll just come back here and assign it a class so I can say second div save those changes 53 00:04:19,810 --> 00:04:21,520 and remember because it's a class. 54 00:04:21,570 --> 00:04:27,990 And he has specified dots and then second div and let's give this a background color say background 55 00:04:27,990 --> 00:04:30,350 color is gray. 56 00:04:30,450 --> 00:04:33,250 You can also alternately just say background that's gray. 57 00:04:33,270 --> 00:04:34,520 Save those changes. 58 00:04:34,560 --> 00:04:36,300 Come over here refresh. 59 00:04:36,300 --> 00:04:37,660 And now I see a background. 60 00:04:37,920 --> 00:04:44,190 So what's nice about this is I no longer have to worry about referencing a specific element tag because 61 00:04:44,190 --> 00:04:45,520 that could show up multiple times. 62 00:04:45,620 --> 00:04:46,470 HTL. 63 00:04:46,650 --> 00:04:48,590 So don't worry about specifying Div.. 64 00:04:48,750 --> 00:04:51,960 I also don't need to worry about specifying all paragraph elements. 65 00:04:52,110 --> 00:04:58,410 Instead I can assign a class to a group of specific elements and it's really common to use classes with 66 00:04:58,410 --> 00:05:03,440 these divisions or divs and then I can stylize only things that are within this class. 67 00:05:03,450 --> 00:05:10,910 And so everything that's within a div Now the other alternative is to use an ID selector and I de-select 68 00:05:10,910 --> 00:05:14,320 there should be used to single out a single h HTML element. 69 00:05:14,330 --> 00:05:18,950 So for example this paragraph is a good candidate for it because it's a unique paragraph outside the 70 00:05:18,950 --> 00:05:19,700 divs. 71 00:05:19,730 --> 00:05:24,740 So if I want to add some sort of style call just to a single element all my age T.M. I can assign an 72 00:05:24,740 --> 00:05:26,100 ID to this. 73 00:05:26,120 --> 00:05:29,660 So within that paragraph tag I'll say ID is equal to. 74 00:05:29,660 --> 00:05:32,350 And you just provide some sort of unique string name. 75 00:05:32,510 --> 00:05:40,000 So for example we'll say singled out so I have this idea that's now attached to this paragraph element. 76 00:05:40,000 --> 00:05:45,760 So if I save this and I only want to stylize this last paragraph element I don't need to worry right 77 00:05:45,760 --> 00:05:47,500 now about calling all paragraph elements. 78 00:05:47,500 --> 00:05:50,860 I just don't worry about calling ID in for IDs. 79 00:05:50,860 --> 00:05:57,340 The syntax is to start with this hash tag and then the idea name which in this case was singled out 80 00:05:58,240 --> 00:06:00,300 and let's change just color to be red. 81 00:06:02,390 --> 00:06:08,210 Save that and then I'm going to refresh here and now I see that last line has turned red. 82 00:06:08,610 --> 00:06:09,270 OK. 83 00:06:09,320 --> 00:06:14,630 And that's really the basics of the selector types between classes and IDs and classes are what we're 84 00:06:14,630 --> 00:06:17,960 going to be using a lot especially when we learn about bootstrap. 85 00:06:17,960 --> 00:06:21,340 So if we come back here I just want to do a quick review. 86 00:06:21,410 --> 00:06:30,560 You can specify this class attribute inside of a HTL elements and then to call it or stylize it from 87 00:06:30,560 --> 00:06:37,130 the CSSA you just say dots and then the class name and then for IDS which are typically going to be 88 00:06:37,130 --> 00:06:42,970 just a single a timeout element you supply an ID name and that the stylize it you'll say hash tag. 89 00:06:43,160 --> 00:06:45,060 And then the name of the ID. 90 00:06:45,260 --> 00:06:46,620 And that's really the basics. 91 00:06:46,640 --> 00:06:51,140 Later on we'll learn about Bootstrap which is going to have class names or the find for us that we can 92 00:06:51,140 --> 00:06:54,180 easily pass in the stylize things automatically. 93 00:06:54,270 --> 00:06:59,170 But right now all you need to understand is the basic syntax you can provide class and ID codes here 94 00:06:59,400 --> 00:07:05,350 about elements and then refer to them with periods for classes inside your CSSA and hash tags for IDs. 95 00:07:05,700 --> 00:07:07,420 OK that's it for this lecture. 96 00:07:07,430 --> 00:07:08,230 We'll see what the next one.