Professional Documents
Culture Documents
Introduction
Welcome
00:01 Hello I'm Eric Meyer, I started using CSS back in mid 1996.
00:07 I'm a former member of the CSS working group at the W3C and generally a
long-time author and advocate of using CSS and
00:17 web standards in general. So what we're going to do here is learn about
CSS during introduction to CSS and I hope you'll have fun,
00:26 So come on along with me.
What is CSS?
00:01 Before you start out it's probably worth asking what is CSS and
00:06 sort of by implication why would someone use it?
00:10 CSS, cascading style sheets, is effectively the clothing that you put on
00:15 a webpage or other document.
00:18 But we most typically see CSS used on
00:22 webpages and this is everything you see here in our Javacotea design, th
e fonts, the colors, the way it's laid out, the
00:30 separation of elements from one to another. That's all a set of clothes
that we've put on
00:36 this page, but underneath those clothes, underneath that presentation th
ere're still
00:41 these. There's the raw sort of body, the naked page if you will and unde
rneath that is the structural skeleton that makes it go,
00:51 the divs and paragraphs and all the XHTML. That's like the skeleton that
creates the document body onto which you can put
00:58 a set of clothes. In the same way that you can change
01:02 your presentation simply by changing an outfit, you can change the way a
page is presented by changing its outfit, its CSS.
01:12 Here's another site and this is this site without its CSS, the just sort
of the raw naked page and then we add some CSS and
01:21 this is what this page looks like, just as a result of some cascading st
yle sheets.
01:26 Here's a site called CSSBEAUTY, same situation.
01:29 It's a very plain looking page of course, I mean these pages all look ve
ry plain
01:33 before you start styling them, so you can see there are lists and there
are images and there's content and links and then when we turn the CSS on,
01:43 it looks like this. So this is, you know, again the same way that you ca
n go from
01:49 wearing sweatpants and a T-shirt to putting on elegant evening wear
01:53 and then change the presentation of yourself, change the way that you lo
ok, you can do the same thing with a webpage. So naked page, dressed page.
02:05 You can take this a little bit further.
02:08 In fact, for a while it was all the rage to have what is called style sw
itchers and this is the website of Jeremy Keith
02:13 adactio.comp, who has a number of themes for his website.
02:21 It's the same document. All I'm doing is I'm changing
02:25 through the little mechanism he's provided, which
02:28 style sheet is being applied to the page and so incredibly different res
ults.
02:37 Based on what style sheet we're using, here's his take on a sort of old-
school Jeffrey Zeldman Web design. The, this is
02:44 sort of a take off on web design that Jeff Zeldman had oh, back in aroun
d 2000 or so.
02:52 At any rate this as I say we're just changing the clothes that go on the
page,
03:00 but we're not changing its body and that's
03:03 one of the advantages of CSS.
03:05 For example, here's my personal website meyerweb.comp.
03:09 I'm looking at this over the network right now and
03:12 what I'm going to do is I'm going to
03:14 change the style sheet that drives meyerweb.
03:18 So that you can see that, and not only can I change the way that the pag
e looks I can change the way the entire site looks because
03:24 every page on my website as is
03:28 generally the case with any site that uses CSS, every page is pointing t
o a style sheet.
03:33 And so if I want to change the way the entire site looks I can go to tha
t style sheet and edit just that.
03:40 So actually have the change set up and ready to go and all I need to do
here is hit save to save over the network.
03:49 And then when I hit Reload,
03:54 notice that the entire page flipped around basically.
03:57 I have my sidebar on the left side now and my posts in my weblog, the me
ta information is now over here on the right side
04:07 whereas before it was on the left and the meyerweb.comp link up here cha
nged and I can go surfing around
04:13 through meyerweb, just pretty much picking any path that I feel like and
04:18 what I'm going to find is that
04:20 everything's been switched around. Now if I decide I don't like that
04:24 I can undo my change, save again,
04:28 hit Reload and everything's back to the way that it was. So if I,
04:33 see if I back up, this page will still be caught in the cache so I would
have to
04:37 keep hitting reload if I wanted those pages
04:40 to be fixed, the ones in my history, but if I click back then they'll
04:43 fix themselves and so this is now back to
04:47 the way that it was before I made the change. The sidebar is now over on
the right side and the meta information for my
04:55 weblog post is over here on the left and the little meyerweb.comp is bac
k here in the lower left-hand corner like it usually is. And that,
05:03 I could've taken an hour to go through every single page on my website b
asically and
05:08 whatever changes I make in the style sheet,
05:12 that's what happens to all the pages here, because all these pages are
05:18 pointing to that style sheet. So that's another
05:21 huge advantage of CSS. Not only is it a set of clothes for one page, but
it's a set of clothes for all of the pages that are on a given site,
05:30 because they all point to that single style sheet.
Design tour
Design tour
00:01 Like to introduce you to the design with which will be working throughou
t the rest of the title, throughout the other videos all the exercises and so on
.
00:10 This is basically the end result,
00:13 what you'll see in a lot of cases is
00:15 an exercise file were some portion of the style has been turned off and
then will fill it back in.
00:21 And that's how the exercise will be done, but this is overall what
00:25 we'll be looking at. Now you have of course all the fonts and colors
00:29 which are set through CSS.
00:31 The background of the masthead, the background of the navlinks and the s
idebars and the whole background and the setting fonts as well.
00:38 There's the fact of the overall layout. The fact that we have two column
s side-by-side,
00:43 that's something else that will be addressed through the CSS.
00:48 As you may notice, here we have navigation links, and
00:52 this is actually an ordered list. It is a list of links that have been m
ade into a horizontal navbar through the power of CSS
00:59 and we will talk about that. The other interesting thing is that these v
ertical separators here are not actually part of
01:03 the document source that's another stylistic effect that we'll discuss w
hen we'll get there.
01:09 Similarly, this green separator
01:11 underneath the legendary origins of tea that you might see that, and if
you've been doing
01:17 each theme all for a while, you might think of a horizontal rule, but ag
ain that's not a horizontal rule,
01:21 that's simply a style applied to the legendary origins of t heading. The
re is also
01:28 aspects such as aligning text
01:31 such as putting the July 16, 2006 over to one side, that we'll discuss a
nd how this image
01:37 sits off to one side and has the text flow around it. That's something e
lse,
01:42 that we want to pay attention to before we're done. We also have these b
oxes as it were in the sidebar, these separate, boxes each of which
01:49 has its own title, and here's a table down here, if we scroll down a bit
, so post archive is actually a table that's been styled, and
01:59 we'll talk about that in one of the later chapters. In addition, we have
this nice lovely footer across the bottom and we'll also
02:08 in one of the last chapters talk about how to have this same document
02:14 appear completely different when it's printed, so that when it's printed
out, it doesn't look like it does here on screen,
02:20 instead it has a set of print styles applied to it. So those are the, at
least the high points of things that we'll be talking
02:29 about in the rest of the videos here and
02:33 things we'll be addressing as the exercises are done.
3. Selectors
ID selector essentials
00:01 In this chapter we're going to be covering selectors in some detail, thi
s is because learning about selectors is really the key to
00:08 writing really good CSS. So, what we're going to start with is ID select
ors. Now,
00:15 in the markup here, there are a few ids, there's a div ID of masthead, r
ight after it there's an a element
00:23 with an ID of homelink and then after that is an ol with an ID of navlin
ks. There is also a paragraph with an ID of
00:29 today and a div with and ID of content.
00:31 IDs are assigned in the markup as you can see here.
00:35 You can't just make up IDs in your CSS and expect the browser to know
00:40 what to do with those unless there are corresponding IDs in the XHTML ma
rkup.
00:45 Now there is a special rule about IDs, you can only have one instance of
a given ID in the document. So here I have a div with an ID
00:53 of content that is the only element
00:55 in this entire document that can have an ID of content. Obviously we can
have IDs on
01:01 many different elements in fact, we could, if we were feeling particular
ly strange, put an ID on every single element as long as
01:08 every single one of those IDs was unique, that is a requirement,
01:13 that IDs have uniqueness within a given document.
01:17 The way that you select IDs is like this.
01:24 You use the octothorpe character, that's the little tic-tac-toe grid or
# sign or hash mark.
01:32 So you have that and then immediately follow the octothorpe with the nam
e of the ID, so,
01:38 since we're trying to select the element with an ID of masthead, we just
say
01:42 octothorpe masthead and then we're going to give it a background of let'
s say green,
01:48 and if we go over to our web browser and take a look, hit Reload, there'
s the green.
01:55 What this selector is saying is select any element whose ID attribute ha
s a value of masthead
02:00 and then make the background of it green.
02:04 So let's throw in a couple of more ID selectors here,
02:08 we'll do a silver background for the navlinks and
02:16 for the sidebar of the document which has an ID strange enough of sideba
r,
02:21 put a border around it. So if we go back to Firefox, and hit Reload
02:29 there you can see the borders come in,
02:31 the silver background is coming on the navigation links.
02:34 Basically we're just selecting these things by
02:38 the IDs that are associated with the elements.
02:41 So as you might started to gather just from these ID names, IDs are comm
only used to mark sections of affectively a
02:51 layout or at least sections of a document. So the masthead
02:54 of the document, the first part that contains things like the name of th
e site and navigation links and what today's
03:00 date is, that's all enclosed in an element with an ID of masthead, in th
is case it's a div with an ID of masthead and
03:06 that's often the case too.
03:08 You'll often see IDs that say things like sidebar, or navlinks, or navig
ation, or
03:14 those sorts of pieces of the document are what tend to be IDed. Now, you
're not
03:21 restricted to just doing IDs you can also
03:25 put in an element selector. So in this case, what we're saying is any ol
element, which has an ID of navlinks,
03:33 or any p element, which has an ID of sidebar. So if we save that and we
go back and we hit Reload, there's no change to the
03:41 navlinks, but the sidebar lost its border, and that's because what we sa
id back here
03:47 in our code was any paragraph with an ID of sidebar should get a one pix
el solid border. Well, the sidebar isn't a paragraph, it's a div.
03:55 So, what we did is we created a selection that doesn't apply to the side
bar in this document.
04:00 If we wanted to include the element name, we'd need to say div#sidebar,
or we can do what we did before and just say sidebar, like so.
04:13 There is one more thing to watch out for. You might accidentally do this
at some point,
04:19 put a space in between let's say an element name of like ol and an ID na
me like navlinks.
04:26 And if you do that, that completely changes the meaning of the selector
in question. If we go back to our Web browser and hit Reload,
04:34 you can see the silver goes completely away. That's because
04:38 what we've really done there is, we've changed this
04:41 so that we've created a descendent selector, which
04:44 we will discuss in a later video in this chapter.
04:47 But this doesn't mean any ol element with an ID of navlinks any more, ju
st because of that single space. If we get rid
04:55 of the space then, everything's back to normal.
04:57 And the last thing to note about ID names is that they are case-sensitiv
e.
05:02 Here I've changed the name of navlinks so that has capital N, capital L
and down here in my markup
05:07 navlinks is all lowercase. If we switch over and hit Reload there is sti
ll no silver background and that's because
05:15 navlinks with the capital N and L, does not match navlinks all lowercase
. They are as different as if we had called them night and day. So,
05:24 if I want this to apply here, I either need to change the N and the L to
be uppercase in the XHTML or I need to
05:32 change navlinks here to be all lowercase in the CSS. As long as the capi
talization is consistent then everything's fine.
05:41 It doesn't really matter what capitalization you use. If you want to use
05:45 the sort of capitalization that I was just showing, where each sort of s
ubword
05:49 has its first letter capitalized, or if you want to go all lowercase, or
you want to make all of your ID names all uppercase,
05:54 that's really up to you as long as you are consistent.
05:58 There were some older browsers,
06:00 notably earlier versions of Internet Explorer for Windows that didn't pa
y attention to this capitalization and that
06:06 led to some sloppiness in some peoples authoring styles, where they woul
d just mix case and IDs.
06:13 Do not do that, be consistent
06:16 and with the capitalization between your CSS and your XHTML for the most
obvious reason, that in most browsers
06:22 today and if you're not consistent in your capitalization, then your sty
les aren't going to get applied to the document.
06:29 So, that covers basic ID selectors. In the next video we'll talk about
06:34 somewhat related concept, Class selectors.
Class selector essentials
00:01 As a follow on to the previous video about ID selectors in this video we
're going to talk about Class selectors.
00:06 You might at first think there are some similarities and in some ways th
ere are.
00:11 If we look into the markup here, we can see that we started with the cla
ss of first
00:16 and then there's a list item with a class of last.
00:20 And there are few other classes scattered throughout the document.
00:23 The rule with classes is that unlike IDs, you can have as many instances
of a given class as you want. So if we scroll down a
00:31 little bit, we'll discover that there's a paragraph of the class of firs
t, just like we had a list item with the class of first.
00:37 We can have as many firsts as we want,
00:40 anytime something is the what we think of as being first, we can give it
that class.
00:46 In a sense, classes are used to collect elements into sets,
00:50 like all of the things that are first, or
00:53 all of the hyperlinks in a document that say, you know, the point to mor
e details about something so on a magazine website
01:01 on the front page there might be a headline and a little abstract paragr
aph or summary paragraph and then the link that says
01:07 Read More and you could class all of those read more links as more. So a
href equals whatever, class equals more.
01:15 If you were publishing some research and you had a bunch of images and s
ome of your images, were pie charts and
01:21 some were bar graphs and some of them were screenshots, you could class
01:25 the different kinds of images differently, you could have a class of bar
graph and a class of
01:28 pie chart and a class of screenshot,
01:31 for the various images and then style them differently.
01:34 So let's do this by combining with an element name,
01:38 we'll say, any list item with a class of first, let's put in a yellow ba
ckground, if we save that, switch over to the browser and hit Reload,
01:49 there is that yellow background on that first list item, quote only li.f
irst, so the list item with the class of first says
01:58 any list item that, whose class attribute has a value of first give it t
his style, in this case, a yellow background.
02:06 Now, If we take away the element name, if we just say .first, then that
means any element that had a class attribute whose value contains
02:13 the word first then give it a yellow background, so if we hit Reload her
e,
02:17 then not only do we have a yellow backed list item but we have a yellow
backed paragraph because both of those are
02:23 elements with a class of first.
02:26 But remember, that only works because of those first classes in there.
02:32 CSS3, actually does have ways to select first elements without using cla
sses, but nobody really supports those
02:38 right now or at least very few browsers support that right now, so
02:42 you end up doing this sort of thing.
02:44 Another way to select elements in a set is,
02:54 every element with a class of tue, for Tuesday, should have an orange ba
ckground
03:00 and if we hit Reload, you can see in the
03:04 little post archive calendar down here, we have
03:06 orange backgrounds for all the table cells that had a class of tue.
03:12 But here's an example where it can be helpful to have
03:15 the element listed because, let's say we just want to highlight the actu
al days
03:20 in the calendar and not the actual Tuesday header at the top. So we can
say td.tue and then hit Reload and
03:31 now because of the way that, that calendar is structured, only the table
data cells, the td elements that have a class of
03:37 tue are highlighted and the table header, the th element,
03:43 with the same class, not being a td element, doesn't get matched, you kn
ow.
03:48 This just says any td element, with a class of tue, so, a th element, wi
th a class of tue, doesn't get selected.
03:56 So that's just very simply how classes work
03:59 and in the next video, we're actually going to take a closer look at som
e of the nifty things you can do with classes.