Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Selectors concepts
Login or
purchase this course
to watch this video and the rest of the course contents.
0:02
So let's talk about CSS selectors as a concept; we've seen that you can select by type, so we can start out with this site.css file here
0:11
and we can select my HTML node, so a body, div etc, we can select by CSS class that's . (dot) so here we want all things that have the lead class,
0:22
which would be including this paragraph up here, or we would say I want all the divs that are main, right, so there might be other things that are main
0:31
but we are targeting the divs that have the class main. And we could also select by id, so here we are saying
0:37
I'd like the image that is the profile image, or I'd like to go to a div and get to the profile section and do whatever we are going to do with that.
0:45
We've seen in our little demo app how we can combine these into a hierarchy, so we can say things like: "I want to go to the table,
0:51
get the table row, and it has the class .this_month, so the class this_month, and here we are setting that to be yellow."
0:58
We can even use this greater than sign, this angle bracket to say table angle bracket row
1:02
so I only want the table rows that are immediately contained within the table, I think in the example that we have here we have a table body,
1:10
so this would return no rows, the second statement here. And we also played around with the idea of inheritance and specialization,
1:17
so we have this content thing, and notice we are setting the padding and the line height and then we have a more specialized version
1:25
a content, which is also a lead and this will take precedence over just plain content, there is actually kind of a order of operators
1:33
like you have in programming languages or math, equations, things like that around what is more specific and what is less specific
1:40
for example an id is more specific than a class. But nonetheless, we have this content, which is more specialized
1:46
as a content lead and we have a regular content. So notice we have the padding and that padding is actually overwritten
1:53
in the lead to be 30, the font size we are setting, because it's just unset in content
1:59
but the line height we are not overwriting with the specialization so the thing that we end up with has basically padding of 30,
2:07
the fonts size of 18 pixels and the line height of 1.25em.