WEBVTT 0 00:00.620 --> 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 1 00:09.560 --> 00:14.540 of heading as well as a class of title and it just says Hello World. 2 00:14.540 --> 00:18.770 Now over here there's many ways that I can change it's style, 3 00:18.770 --> 00:19.150 right? 4 00:19.250 --> 00:26.580 So I can say, for example, h1 color red, and if I hit run then of course it will turn red. 5 00:26.690 --> 00:31.020 But if you accidentally try to change the same property twice, 6 00:31.070 --> 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 7 00:38.420 --> 00:39.130 be carried out. 8 00:39.200 --> 00:42.560 So if I hit run this is now going to be green instead of red. 9 00:42.560 --> 00:46.470 So basically the process is, changes it red, and then it changes it 10 00:46.470 --> 00:48.830 green. It's reading the code from top to bottom. 11 00:48.850 --> 00:49.890 It's not very clever here. 12 00:49.970 --> 00:55.070 So in this case the last CSS rule has priority over everything above it. 13 00:55.190 --> 01:02.180 Now as we said before I can either use the h1 which is an HTML element selector to change the color 14 01:02.630 --> 01:06.530 or I can use the class which is title to change the color. 15 01:06.560 --> 01:08.460 So let's change it to yellow. 16 01:08.690 --> 01:12.650 Now a class is more specific than an HTML element. 17 01:12.650 --> 01:17.900 So, think about it, on your web page you're probably going to have more HTML elements than classes. 18 01:17.900 --> 01:22.720 So, for example, if you had a whole bunch of paragraphs, they're probably all going to have different classes, 19 01:22.880 --> 01:28.320 so it makes sense to make the class selectors have higher priority, because they are more specific. 20 01:28.370 --> 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 21 01:35.030 --> 01:36.600 priority. Now 22 01:36.620 --> 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 23 01:45.470 --> 01:51.990 color to blue and I hit run you'll see that this has the highest priority of all. 24 01:52.220 --> 01:56.830 And our Hello World will display in blue rather than any other color. 25 01:57.050 --> 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 26 02:02.570 --> 02:07.880 applied but they're just being overridden by something with a higher priority. 27 02:07.910 --> 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 28 02:15.380 --> 02:18.210 would go to the next highest priority 29 02:18.330 --> 02:20.630 CSS rule, which is the class, 30 02:20.630 --> 02:23.120 and finally it would go to the h1. 31 02:23.120 --> 02:29.840 So, knowing what we know about how specific CSS rules are, for example we know that inline styles are 32 02:29.840 --> 02:34.230 more specific than say internal or external CSS styles, 33 02:34.280 --> 02:37.460 so if we change the color here to, 34 02:37.850 --> 02:42.330 I'm running out of colors here, orange, and we hit run, 35 02:42.440 --> 02:50.240 you can see that this is even higher priority than the ids and that is overriding all of our external 36 02:50.240 --> 02:50.980 stylesheet. 37 02:51.140 --> 02:54.240 So it can get pretty confusing very quickly. 38 02:54.260 --> 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 39 02:59.660 --> 03:04.740 you start writing conflicting rules like this bunch we've got over here. 40 03:04.780 --> 03:10.630 So this ends up being a lot of code that's applied to the same thing, well applied three times basically, 41 03:10.640 --> 03:14.110 and the last one standing gets carried through in the end. 42 03:14.120 --> 03:18.460 But this is very inefficient and it's also very very bug prone. 43 03:18.560 --> 03:22.090 So how can you prevent creating conflicting rules? 44 03:22.160 --> 03:27.630 Well, the first thing to remember is, use ids very very sparingly. 45 03:27.740 --> 03:30.190 Don't try and use it when you can use a class. 46 03:30.230 --> 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 47 03:36.530 --> 03:38.540 helps us with our navigation. 48 03:38.540 --> 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. 49 03:44.450 --> 03:50.750 So, for example, if I wanted to change the style of our copyright text, then even though we're only going 50 03:50.750 --> 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 51 03:58.130 --> 03:58.780 a class. 52 03:58.790 --> 04:01.710 A class is perfectly good enough in this case. 53 04:01.790 --> 04:08.240 So use ids really really sparingly, and I tend to recommend to only use it really for those sections 54 04:09.020 --> 04:12.240 and parts of your code that definitely need an id, 55 04:12.350 --> 04:17.570 for example, if you're working with Bootstrap carousels or Bootstrap elements, then they do need an 56 04:17.570 --> 04:25.580 id to target from the href. They need that navigational ability of the id, and that is a case where you 57 04:25.580 --> 04:31.820 might consider using it, but always first consider using class instead of going straight to an id, even 58 04:31.880 --> 04:33.340 if it only appears once. 59 04:33.350 --> 04:39.440 The other thing to remember is that, when you're applying classes to your elements, to only use one class. I 60 04:39.440 --> 04:44.570 know that it seems a little bit weird because we're using Bootstrap and Bootstrap loves it's multiple 61 04:44.570 --> 04:47.210 classes, which irks a lot of people. 62 04:47.240 --> 04:52.760 But in terms of the CSS classes that youre applying yourself, for example in this case the h1 has a 63 04:52.760 --> 05:01.490 class of big-heading, and it wasn't something like big and heading and, I don't know, white, right, where 64 05:01.520 --> 05:07.790 we have different styles for each of these classes and together they make up the big-heading. 65 05:07.790 --> 05:14.870 This is really bad practice because it's very very easy to get into conflicts that way so try to keep 66 05:14.870 --> 05:20.200 it specific and try to apply only a single custom class to each of your elements. 67 05:20.330 --> 05:24.360 And the other thing is avoid inline styles at all costs. 68 05:24.380 --> 05:28.220 This is really really bad 69 05:28.220 --> 05:30.010 CSS coding practice. 70 05:30.170 --> 05:36.760 There are no cases where your inline style can not be solved by using the external stylesheet. 71 05:36.770 --> 05:40.730 So this is just pure laziness and it's really really bad practice. 72 05:40.730 --> 05:41.900 So don't do that. 73 05:41.900 --> 05:48.620 So those are just a few bits of good practice to incorporate into your workflow so that you avoid conflicts 74 05:48.650 --> 05:51.700 and you have less problems debugging your code later on.