#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Concept: Inheritance and specialization
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We saw that we can target CSS classes using the dot character. So, if we want to apply some kind of styling to something with a class content
0:10
we just say .content, and within curly braces we set all the CSS properties. This can apply to one or more items on the page or across the site.
0:19
However, sometimes you want to set some base styles that all content has but you might also want to say this little
0:27
bit of content here, this is a lead element. It should stand out above and beyond the other content. So, we can do that by saying .content.lead.
0:36
So, this element would have both the content class and the lead class. It says right in the name how this is going to work.
0:44
Cascading style sheets, so the styles cascade or you can create more specialized versions. So, here we have content, and we
0:52
have content.lead, and the more specific you are those are the styles that will override the other ones. So, if we have some kind of element down here
1:01
with both the class content and lead it's going to first get all the content properties and then anything in content lead is going to override them.
1:11
So, notice content says padding 20 but content.lead says padding 30 and if you look at the bottom, the little note
1:18
says the applied style's actually padding 30 but the line height of 1.25 vm that is actually only set in the base and it still applies to content lead
1:29
and we have the font size only set in the specialization that also applies. So, you can see that all of the blue elements
1:36
are being applied to content and lead and that's because they either come only in the base, or they're overridden
1:43
or only appear in the more specialized version. This is a super powerful technique to let you factor your styles, and
1:50
to base elements and specialized elements and avoid repeating yourself within your style sheets.