1 00:00:00,620 --> 00:00:09,500 So here I've got a Code Ply again with no frameworks, so pure CSS, and we've got a h1 that has an id 2 00:00:09,560 --> 00:00:14,540 of heading as well as a class of title and it just says Hello World. 3 00:00:14,540 --> 00:00:18,770 Now over here there's many ways that I can change it's style, 4 00:00:18,770 --> 00:00:19,150 right? 5 00:00:19,250 --> 00:00:26,580 So I can say, for example, h1 color red, and if I hit run then of course it will turn red. 6 00:00:26,690 --> 00:00:31,020 But if you accidentally try to change the same property twice, 7 00:00:31,070 --> 00:00:38,420 say, for example, if I said now color is green, then the last CSS rule change will be the one that will 8 00:00:38,420 --> 00:00:39,130 be carried out. 9 00:00:39,200 --> 00:00:42,560 So if I hit run this is now going to be green instead of red. 10 00:00:42,560 --> 00:00:46,470 So basically the process is, changes it red, and then it changes it 11 00:00:46,470 --> 00:00:48,830 green. It's reading the code from top to bottom. 12 00:00:48,850 --> 00:00:49,890 It's not very clever here. 13 00:00:49,970 --> 00:00:55,070 So in this case the last CSS rule has priority over everything above it. 14 00:00:55,190 --> 00:01:02,180 Now as we said before I can either use the h1 which is an HTML element selector to change the color 15 00:01:02,630 --> 00:01:06,530 or I can use the class which is title to change the color. 16 00:01:06,560 --> 00:01:08,460 So let's change it to yellow. 17 00:01:08,690 --> 00:01:12,650 Now a class is more specific than an HTML element. 18 00:01:12,650 --> 00:01:17,900 So, think about it, on your web page you're probably going to have more HTML elements than classes. 19 00:01:17,900 --> 00:01:22,720 So, for example, if you had a whole bunch of paragraphs, they're probably all going to have different classes, 20 00:01:22,880 --> 00:01:28,320 so it makes sense to make the class selectors have higher priority, because they are more specific. 21 00:01:28,370 --> 00:01:35,030 So if I hit run now, you'll see that the Hello World is now yellow instead of red because this has a higher 22 00:01:35,030 --> 00:01:36,600 priority. Now 23 00:01:36,620 --> 00:01:45,470 finally, if I decided to change the color by using the id, so let's target that id, heading, and change the 24 00:01:45,470 --> 00:01:51,990 color to blue and I hit run you'll see that this has the highest priority of all. 25 00:01:52,220 --> 00:01:56,830 And our Hello World will display in blue rather than any other color. 26 00:01:57,050 --> 00:02:02,570 And if we take a look at the Chrome Developer Tools over here, you can see that all our colors are being 27 00:02:02,570 --> 00:02:07,880 applied but they're just being overridden by something with a higher priority. 28 00:02:07,910 --> 00:02:15,380 So that means that if this color change wasn't applied in the id, so if we deleted this line of code, then it 29 00:02:15,380 --> 00:02:18,210 would go to the next highest priority 30 00:02:18,330 --> 00:02:20,630 CSS rule, which is the class, 31 00:02:20,630 --> 00:02:23,120 and finally it would go to the h1. 32 00:02:23,120 --> 00:02:29,840 So, knowing what we know about how specific CSS rules are, for example we know that inline styles are 33 00:02:29,840 --> 00:02:34,230 more specific than say internal or external CSS styles, 34 00:02:34,280 --> 00:02:37,460 so if we change the color here to, 35 00:02:37,850 --> 00:02:42,330 I'm running out of colors here, orange, and we hit run, 36 00:02:42,440 --> 00:02:50,240 you can see that this is even higher priority than the ids and that is overriding all of our external 37 00:02:50,240 --> 00:02:50,980 stylesheet. 38 00:02:51,140 --> 00:02:54,240 So it can get pretty confusing very quickly. 39 00:02:54,260 --> 00:02:59,660 And also if you're writing a lot of CSS code, very often you're going to get into the situation where 40 00:02:59,660 --> 00:03:04,740 you start writing conflicting rules like this bunch we've got over here. 41 00:03:04,780 --> 00:03:10,630 So this ends up being a lot of code that's applied to the same thing, well applied three times basically, 42 00:03:10,640 --> 00:03:14,110 and the last one standing gets carried through in the end. 43 00:03:14,120 --> 00:03:18,460 But this is very inefficient and it's also very very bug prone. 44 00:03:18,560 --> 00:03:22,090 So how can you prevent creating conflicting rules? 45 00:03:22,160 --> 00:03:27,630 Well, the first thing to remember is, use ids very very sparingly. 46 00:03:27,740 --> 00:03:30,190 Don't try and use it when you can use a class. 47 00:03:30,230 --> 00:03:36,530 So, for example, in our case we've really only got ids for our sections, and, in part, that's because it 48 00:03:36,530 --> 00:03:38,540 helps us with our navigation. 49 00:03:38,540 --> 00:03:44,420 So just because you only have one of something isn't good enough to give it an id instead of a class. 50 00:03:44,450 --> 00:03:50,750 So, for example, if I wanted to change the style of our copyright text, then even though we're only going 51 00:03:50,750 --> 00:03:58,100 to have one copyright text on our page, it's not a good enough reason to use an id rather than using 52 00:03:58,130 --> 00:03:58,780 a class. 53 00:03:58,790 --> 00:04:01,710 A class is perfectly good enough in this case. 54 00:04:01,790 --> 00:04:08,240 So use ids really really sparingly, and I tend to recommend to only use it really for those sections 55 00:04:09,020 --> 00:04:12,240 and parts of your code that definitely need an id, 56 00:04:12,350 --> 00:04:17,570 for example, if you're working with Bootstrap carousels or Bootstrap elements, then they do need an 57 00:04:17,570 --> 00:04:25,580 id to target from the href. They need that navigational ability of the id, and that is a case where you 58 00:04:25,580 --> 00:04:31,820 might consider using it, but always first consider using class instead of going straight to an id, even 59 00:04:31,880 --> 00:04:33,340 if it only appears once. 60 00:04:33,350 --> 00:04:39,440 The other thing to remember is that, when you're applying classes to your elements, to only use one class. I 61 00:04:39,440 --> 00:04:44,570 know that it seems a little bit weird because we're using Bootstrap and Bootstrap loves it's multiple 62 00:04:44,570 --> 00:04:47,210 classes, which irks a lot of people. 63 00:04:47,240 --> 00:04:52,760 But in terms of the CSS classes that youre applying yourself, for example in this case the h1 has a 64 00:04:52,760 --> 00:05:01,490 class of big-heading, and it wasn't something like big and heading and, I don't know, white, right, where 65 00:05:01,520 --> 00:05:07,790 we have different styles for each of these classes and together they make up the big-heading. 66 00:05:07,790 --> 00:05:14,870 This is really bad practice because it's very very easy to get into conflicts that way so try to keep 67 00:05:14,870 --> 00:05:20,200 it specific and try to apply only a single custom class to each of your elements. 68 00:05:20,330 --> 00:05:24,360 And the other thing is avoid inline styles at all costs. 69 00:05:24,380 --> 00:05:28,220 This is really really bad 70 00:05:28,220 --> 00:05:30,010 CSS coding practice. 71 00:05:30,170 --> 00:05:36,760 There are no cases where your inline style can not be solved by using the external stylesheet. 72 00:05:36,770 --> 00:05:40,730 So this is just pure laziness and it's really really bad practice. 73 00:05:40,730 --> 00:05:41,900 So don't do that. 74 00:05:41,900 --> 00:05:48,620 So those are just a few bits of good practice to incorporate into your workflow so that you avoid conflicts 75 00:05:48,650 --> 00:05:51,700 and you have less problems debugging your code later on.