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