Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: Style-sheet overview
Login or purchase this course to watch this video and the rest of the course contents.
0:03 There is a variety of ways we can style HTML pages with CSS. But by far the most flexible and most modular and professional way to do this
0:13 is to use one or more style sheets. So, let's look really quickly at what goes in the style sheet, some of the major pieces,
0:20 and we'll use these ideas throughout the rest of this chapter, and really, honestly through the rest of this course.
0:26 Here we have this file and this static folder called site.css and any page we wanted to use it, obviously we have to include that style sheet
0:34 being present in the site obviously isn't enough, you have to include it in each and every HTML page you wanted to style,
0:40 and we'll see when we get to the more advanced the second part of the web development, a way to unify this across our entire site
0:48 so we put in one and only one place and it flows across the site, but however we accomplish that, we need this link "a href",
0:56 link to our style sheet with the "rel" style sheet settings. Now notice, we don't have to close it off here, unless we are doing XHTML,
1:03 all the HTML5 content browsers these days totally understand it like this.
1:07 The first thing that we can do is we can target elements that are just native to HTML,
1:12 so here we are going to target the body and we could target things like paragraphs, divs, "a" for anchors and things like that.
1:19 And so you can specify by a name, there is not that many HTML elements so there is a limited set of what you can put here, of course.
1:26 But, you can have these bare names for HTML elements and then you can style them and this is very common,
1:32 you might want to style tables look or h1, h2 headers look and things like that. Here you can see we are setting the background color
1:40 to #ccc which is just a little bit off white, and we are setting the color, the text color to #222, so something just a step back from full black.
1:51 And the format here is totally standard, you have the selector and the selectors can be complex as we'll see in just a second,
1:56 so body but this could be very complicated, then we have curly brace a bunch of CSS properties we are going to set
2:03 and then there is a close curly. Of course, semicolon each line. So, let's look at something a little more flexible,
2:09 if we want to style my CSS class, instead of just saying the name we say .name, so in CSS . (dot) means class.
2:17 And, we can map that over to HTML that looks like this, there's class= whatever you put after the dot. And here we are just doing more properties,
2:25 we are working with the box style for a little bit so we are setting the padding, we are setting the line height here is a little tip,
2:31 if you want a readable set of content, one thing that you can do that is really easy, that makes a big difference just as a reader of the site,
2:40 is if you set the line height a little bit higher than default, which is just one, because that little extra space makes it a little extra readable
2:48 and surprising how much just a little bit of line height=1.25 em or 1.5 em, something like that,
2:54 "em" is the standard height so this is like a scaling factor, like 1.25 times basically, it's a way to think of that.
3:00 Now, we can have like I said, more complicated selectors here, so we are expressing the hierarchy in this next one,
3:06 we are saying "I'd like to go to anything in the page that has the class nav",
3:10 .nav means class nav and then "space another item" means contained within that thing I found with the class nav, somewhere deep down in the tree
3:20 could be immediately contained or it could be several steps down, contained within this nav item, is an unordered list ul
3:26 and that unordered list has a dropdown class. There might be many unordered lists in the nav,
3:32 the one that has the class dropdown, so the lack of space between these, so ul.dropdown expresses that the class is on the ul.
3:42 And then, we want to say "immediately within that ul we have a thing with profile image",
3:48 so the "greater than" sign means it's not just somewhere in the hierarchy, it's directly contained within this thing, so ul and then right within it,
3:57 there is something with id profile. So, the hash there maps to id. So we have bare elements, we have .things for classes
4:09 and we have #things for ids, so here you can see #name maps to id=name in HTML.
4:15 Now, this is style sheet, so this is kind of the ss, if you will of CSS,
4:22 the other part is the cascading and inheritance styles, so if we look over here,
4:26 we can say .content.lead and this is a specialization of the content setting.
4:32 On the second item we are staying everything with content has padding of 20, but if it happens to be the content and a lead,
4:41 so maybe the first paragraph that is content is marked as lead, something like that, it gets a little more padding,
4:48 so when you combine without spaces, you are doing an "and" operation, so here we are saying "the element we are looking for
4:55 has both the class content and the class lead." Notice how this inherits from the content above, so the padding is replaced by the specialization.
5:05 So the lead one has padding 30 not 20, it's setting the font size to 18 so it's making the fonts more specific,
5:13 but the line height, because the more specialized one doesn't apply,
5:18 it falls back to just the content, so the line height of the content with lead is also 1.25 em. So that is a light introduction to CSS,
5:27 this will give you a little bit of a handhold on where we are getting started
5:31 and we are going to look at selectors in much greater detail in an upcoming video.