Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
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
1
2
00:00:09,560 --> 00:00:14,540
of heading as well as a class of title and it just says Hello World.
2
3
00:00:14,540 --> 00:00:18,770
Now over here there's many ways that I can change it's style,
3
4
00:00:18,770 --> 00:00:19,150
right?
4
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.
5
6
00:00:26,690 --> 00:00:31,020
But if you accidentally try to change the same property twice,
6
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
7
8
00:00:38,420 --> 00:00:39,130
be carried out.
8
9
00:00:39,200 --> 00:00:42,560
So if I hit run this is now going to be green instead of red.
9
10
00:00:42,560 --> 00:00:46,470
So basically the process is, changes it red, and then it changes it
10
11
00:00:46,470 --> 00:00:48,830
green. It's reading the code from top to bottom.
11
12
00:00:48,850 --> 00:00:49,890
It's not very clever here.
12
13
00:00:49,970 --> 00:00:55,070
So in this case the last CSS rule has priority over everything above it.
13
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
14
15
00:01:02,630 --> 00:01:06,530
or I can use the class which is title to change the color.
15
16
00:01:06,560 --> 00:01:08,460
So let's change it to yellow.
16
17
00:01:08,690 --> 00:01:12,650
Now a class is more specific than an HTML element.
17
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.
18
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,
19
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.
20
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
21
22
00:01:35,030 --> 00:01:36,600
priority. Now
22
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
23
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.
24
25
00:01:52,220 --> 00:01:56,830
And our Hello World will display in blue rather than any other color.
25
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
26
27
00:02:02,570 --> 00:02:07,880
applied but they're just being overridden by something with a higher priority.
27
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
28
29
00:02:15,380 --> 00:02:18,210
would go to the next highest priority
29
30
00:02:18,330 --> 00:02:20,630
CSS rule, which is the class,
30
31
00:02:20,630 --> 00:02:23,120
and finally it would go to the h1.
31
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
32
33
00:02:29,840 --> 00:02:34,230
more specific than say internal or external CSS styles,
33
34
00:02:34,280 --> 00:02:37,460
so if we change the color here to,
34
35
00:02:37,850 --> 00:02:42,330
I'm running out of colors here, orange, and we hit run,
35
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
36
37
00:02:50,240 --> 00:02:50,980
stylesheet.
37
38
00:02:51,140 --> 00:02:54,240
So it can get pretty confusing very quickly.
38
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
39
40
00:02:59,660 --> 00:03:04,740
you start writing conflicting rules like this bunch we've got over here.
40
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,
41
42
00:03:10,640 --> 00:03:14,110
and the last one standing gets carried through in the end.
42
43
00:03:14,120 --> 00:03:18,460
But this is very inefficient and it's also very very bug prone.
43
44
00:03:18,560 --> 00:03:22,090
So how can you prevent creating conflicting rules?
44
45
00:03:22,160 --> 00:03:27,630
Well, the first thing to remember is, use ids very very sparingly.
45
46
00:03:27,740 --> 00:03:30,190
Don't try and use it when you can use a class.
46
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
47
48
00:03:36,530 --> 00:03:38,540
helps us with our navigation.
48
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.
49
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
50
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
51
52
00:03:58,130 --> 00:03:58,780
a class.
52
53
00:03:58,790 --> 00:04:01,710
A class is perfectly good enough in this case.
53
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
54
55
00:04:09,020 --> 00:04:12,240
and parts of your code that definitely need an id,
55
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
56
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
57
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
58
59
00:04:31,880 --> 00:04:33,340
if it only appears once.
59
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
60
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
61
62
00:04:44,570 --> 00:04:47,210
classes, which irks a lot of people.
62
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
63
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
64
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.
65
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
66
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.
67
68
00:05:20,330 --> 00:05:24,360
And the other thing is avoid inline styles at all costs.
68
69
00:05:24,380 --> 00:05:28,220
This is really really bad
69
70
00:05:28,220 --> 00:05:30,010
CSS coding practice.
70
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.
71
72
00:05:36,770 --> 00:05:40,730
So this is just pure laziness and it's really really bad practice.
72
73
00:05:40,730 --> 00:05:41,900
So don't do that.
73
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
74
75
00:05:48,650 --> 00:05:51,700
and you have less problems debugging your code later on.
8394
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.