#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Concept: Inheritance and specialization
0:00 We saw that we can target CSS classes
0:02 using the dot character.
0:04 So, if we want to apply some kind of styling
0:07 to something with a class content
0:09 we just say .content, and within curly braces
0:12 we set all the CSS properties.
0:13 This can apply to one or more items
0:16 on the page or across the site.
0:18 However, sometimes you want to set
0:20 some base styles that all content has
0:24 but you might also want to say this little
0:26 bit of content here, this is a lead element.
0:28 It should stand out above and beyond the other content.
0:32 So, we can do that by saying .content.lead.
0:35 So, this element would have
0:37 both the content class and the lead class.
0:41 It says right in the name how this is going to work.
0:43 Cascading style sheets, so the styles cascade
0:46 or you can create more specialized versions.
0:50 So, here we have content, and we
0:51 have content.lead, and the more specific you are
0:55 those are the styles that will override the other ones.
0:59 So, if we have some kind of element down here
1:00 with both the class content and lead
1:03 it's going to first get all the content properties
1:06 and then anything in content lead is going to override them.
1:10 So, notice content says padding 20
1:12 but content.lead says padding 30
1:15 and if you look at the bottom, the little note
1:17 says the applied style's actually padding 30
1:20 but the line height of 1.25 vm
1:23 that is actually only set in the base
1:25 and it still applies to content lead
1:28 and we have the font size only set
1:30 in the specialization that also applies.
1:33 So, you can see that all of the blue elements
1:35 are being applied to content and lead
1:38 and that's because they either come
1:40 only in the base, or they're overridden
1:42 or only appear in the more specialized version.
1:45 This is a super powerful technique
1:47 to let you factor your styles, and
1:49 to base elements and specialized elements
1:52 and avoid repeating yourself within your style sheets.