#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Concept: Structure of a CSS file
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's talk about the structure of a CSS file. Here we have a file, /data/site.css in our relative
0:08
web path, and if we want to include this, we're going to put a link to the href is /data/site.css. Don't confuse that with the javascript one
0:19
where you have src for source, and then you say rel equals style sheet. And, of course, you can have comments, you can see the top
0:26
is sort of these old school C style comments. If we want to style something, there's a whole language for how we do that.
0:32
So we're going to talk about a few of the core ideas. If we want to style something like just the body the body tag, we just type body.
0:40
If you want to style all the hyperlinks, just type a. If you want to style the divs, you type div, and so on.
0:47
So you can target a node by name, by HTML name. So here we can set the background color to some hexadecimal
0:55
kind of grayish, light gray, and the color itself to almost black, just short of black. So we can just use bare HTML names to target nodes
1:06
across the board. Often, though, we don't want to target every hyperlink or every body, or every div we want to target some special thing.
1:15
So maybe we want to just focus on the main content of the page. We want to give it a higher line height, 1.5 EM's is like 125% of what the default is.
1:28
And then the padding is padding all around you have 20 pixels of space on each side. The way we're going to do this is we're going to
1:35
specify a CSS class. So when we say . something, the . means we're talking about class names. So there's some element in the page
1:44
with class equals content. And we want all this to apply. So you can see on the left here, it says anything like .name means the element
1:52
class equals whatever that name is. We can also express hierarchies. So, for example, here we're saying .nav ul.dropdown
2:02
contain within something, # profile image. And this actually targets things that only live within this hierarchy.
2:10
There can be stuff in between, so we're saying something contained in an element with class nav inside that nav there's an unordered list, so the ul.
2:20
That unordered list has to have the class dropdown so applying the . like that means it has both the node name UL and the class dropdown.
2:30
The arrow means directly contained in there is a profile image, and the # means id. Whew. So you can get these very precise targets of
2:40
I want to go to the nav, and wherever there's a UL in there target it, and within the ul with the dropdown
2:47
exactly the next thing has to be a profile image. Make its width 64. So when we have #, that means we're talking about a id.
2:57
So #name would be something with id equals name. Finally, we can also express not just hierarchies, but and.
3:06
So here if we have no spaces, we have content.lead which means that we're both taking the class content and the class lead.
3:17
So it would be element class equals content lead. So you can put multiple classes in there like that.
3:23
And this would some form of inheritance and overriding. So we already have a content tag, now we're saying
3:29
the content that has, also, the lead class, we're going to do other stuff in addition to what we did before. All right, so there's a lot more to learn.
3:38
We're going to talk about it throughout this chapter but here are some of the core concepts. Target by tag, target by class name, target by id, and
3:47
combining these into hierarchies and and type statements.