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.