CSs Transcript

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.

Using the exercise files

00:01 In this movie we're just going to quickly talk about how to use the Exer
cise Files folder.
00:05 I'm going to assume the you've already copied the Exercise Files folder
onto your hard drive because if you try to access it from
00:11 a CD for example then you're not going to be able to modify anything and
the exercises aren't really going to work for you.
00:16 So the way this works is, in your Exercise Files folder you'll find a se
ries of folders that contain the exercise files
00:25 for various chapters. So if you were to
00:28 be getting ready to do the first exercise in the third chapter, you woul
d open up
00:35 the 03_cascade and find the series of exercise files which are numbered
according to which exercise they are, so the first one in
00:44 Chapter 3 is 0301 and the second one in Chapter 3 is 0302. So the way th
at you would
00:50 get yourself ready for the exercise is to load up the file in your favor
ite editor,
00:56 BBEdit my case, probably Dreamweaver in yours, but you might be an Emacs
person, who knows,
01:01 and then also load it up into the web browser that you're going to use,
such as Firefox and then
01:07 that's generally where I start is with the two files loaded up,
01:11 one in the editor, one in the web browser and just go back and forth bet
ween the two and that point usually is where the
01:17 movie starts and you can just follow along.

Installing the Web Developer toolbar

00:01 What I would like to share in this movie is
00:03 an incredibly useful tool that pretty much everyone
00:07 who's doing web development and particularly CSS development should be i
nstalling into their copy of Firefox or Mozilla, and
00:14 that's the Web Developer toolbar.
00:18 I'm going to go to addons.mozilla.org and search for web developer.
00:26 If you do that, oddly enough, the Web Developer toolbar is not the first
thing that comes up. You get things like server
00:31 switcher and Opera View and XML Developer Toolbar and you have to scroll
down a bit, but then you find Web Developer 1.0.2 by
00:38 Chris Pederick and you click on that and you find,
00:42 here we are, at Web Developer 1.0.2, Chris Pederick, works with
00:46 the following versions and you can install it. So you
00:49 install, it counts down to make sure that you really want to do this bec
ause you should only install software from sources that you trust.
00:56 Well, I trust this one, never had a problem with it yet, so it says what
developer will be installed when Firefox is restarted. So
01:03 we're going to quit Firefox, close them up,
01:08 we're going to launch Firefox again, I'm going to drag a file on here,
01:13 and you'll notice that here, on the top of the screen there's this new t
oolbar.
01:18 That is the Web Developer toolbar and you can do fun things with it, lik
e
01:22 disable all non- browser styles, basically,
01:26 you can turn them on or off, you can
01:30 add a user style sheet fairly easily, you can view CSS so if I hit view
CSS, it's going to give me a list of all the CSS
01:38 it's being applied to this file and where it comes from.
01:41 In this case, there's really only one file, that's this file called base
.CSS, but there is the entire contents of that
01:47 style sheet. If there were six style sheets associated with this documen
t, they'd all be listed here. You can also
01:54 edit the CSS if you really feel like it, it will
01:58 open up a little view and I can change the body, so that it's yellow, hm
mm, lovely.
02:05 Now, when I close this, that just stops. This also lets you disable thin
gs like JavaScript, obviously a pop-up.
02:14 You can disable a pop-up block or if you're doing some development work
02:17 you can look at cookies. There's all kinds of stuff in here. there's out
lining,
02:23 things like block level elements, so that would be paragraphs and divs.
02:27 And this just gives you a visual sense of the structure of the document.
You can outline custom elements if you want to, you can outline
02:35 tables, just outline headings, see, so you can figure out where your hea
dings are.
02:39 If you have frames you can outline those. There is also access to
02:44 the window resizer, so we can resize ourselves to 800 by 600.
02:49 To do testing for that, you can define your own resizes
02:53 and there's also HTML and CSS validate links. So if I want to check to s
ee if my CSS is valid,
03:01 Oh, oh, it's a local file I can't do that,
03:06 unless I pick Validate local CSS. The difference being that Validate CSS
only works if the CSS file is on a
03:13 publicly accessible website that the CSS elevator, but Validate Local CS
S,
03:19 grabs a copy of the CSS file off of your hard drive and sends it off to
the validator.
03:26 So now we'll contact the validator and will say, oh, no, you have an err
or.
03:31 It should mention what that is, there's a bug in the validator, that if
you have a line-height value that has just a number, then
03:39 it will throw an error, even though that's not an error. It will also gi
ve you warnings about colors and tell you what's valid and
03:44 all that kind of fun stuff. See, we show you the works and everything
03:48 and you can even go and validate the HTML for the CSS validator page if
you wanted to.
03:55 There are options for viewing source and there's also a whole set of opt
ions for the Web Developer toolbar. I can literally take
04:01 half an hour to show you everything that's possible in the Web Developer
toolbar.
04:06 Here you can see all of the anchors, you can have it show you all your I
Ds and classes. There's so much stuff in here,
04:15 that is just insanely useful and so I
04:17 very, very strongly recommend that if you're going to be doing any Web d
evelopment, any writing of CSS and especially any creation of layouts,
04:26 that you get the Web Developer toolbar, because it can really help you d
iagnose problems and get to a solution that much more quickly.
2. CSS and XHTML
XHTML essentials
00:01 In this chapter we're going to look at ways to associate CSS with XHTML,
basically to bring a style sheet together with a document.
00:10 In order to do that, it would be useful to spend a little bit of time at
first discussing XHTML terminology, just so that
00:18 everyone is on the same page in terms of
00:21 what we're going to be talking about. You might wonder why we're wasting
your time talking about the nitty-gritty of XHTML,
00:27 when this is supposed to be about the CSS and the truth is that you real
ly do need to have at least some familiarity with XHTML in order to
00:34 be a good CSS author. So, what we just want to do is review a few terms.
The first one is Element, and elements is
00:43 basically an atomic piece of the document. It's one of the basic structu
res of a given XHTML document. So div,
00:50 the p element for paragraph, the h1, h2, h3,
00:54 all these, you know, IMG, these are all elements and every element is
00:59 begun and end with a start tag and end tag, respectively.
01:03 So div is the element.
01:06 The first of the div tags is the start tag and then the /div is how you
indicate an end tag for that particular element.
01:16 Now, elements, at least most elements in XHTML
01:19 can contain content such as this div, which has a little bit of text in
it called This is content.
01:26 Elements like this are called non- replaced elements, because they're no
t replaced by anything else, they contain the content
01:32 that they're going to display. An image element, IMG which you can see o
n there, is what's known as a replaced element.
01:40 In other words, this is an element that points to some other resource th
at will replace it when the document is rendered.
01:47 The image will be brought in and placed inside the document and
01:51 this, so IMG is a replaced element and div, p, h1, h2,
01:58 and so on, these are non-replaced elements.
02:00 Now, elements can have what are known as
02:03 attributes and they can have multiple attributes, this div has an attrib
ute of class and has a class attribute, and attribute simply describes
02:12 some aspect of the element,
02:15 and every attribute has a value. In this case we have a class of lead.
02:20 So the value for the class attribute is lead,
02:25 and as you can see, in the case of the image,
02:28 there's actually not only the element, but
02:31 we have two attributes, each of which has its own value.
02:35 If you have an attribute, it must have a value even if it's an empty val
ue as is the case with this alt attribute.
02:41 Its value is basically empty, so
02:45 alt equals quote, quote, means okay, we have the attribute of alt, but i
ts value is just simply nothing.
02:52 But you can't just say alt and leave off the equals quote, quote, that i
t's not valid XHTML.
02:57 So the value of the SRC attribute is, is pic.jpg, which
03:03 in this case means that that's the image that the browser is going to go
grab and put into the document.
03:09 So that's the basics of XHTML terminology.
03:13 I'll refer to elements quite a bit throughout the rest of the videos and
not just in this chapter, but throughout the
03:19 chapters because a styling element is one of the most common things that
you do in
03:25 CSS. But attributes come into play to particularly the class attributes
so
03:30 I'll also probably mention attributes from time to time,
03:34 and now you know where they come from. If you're unfamiliar with XHTML,
then
03:39 you might want to check out the learning XHTML tutorial,
03:43 found also on Lynda.com, that will help get you up to speed if you don't
feel that
03:48 you're quite there with XHTML.
03:51 In the next video we're going to talk about CSS terminology.
CSS essentials
00:01 In this video, I'd like to cover
00:03 some basic CSS terminology in terms that you may or may not have heard b
efore and if you've heard, you may or may not be familiar
00:10 with. I just want to go through those so that we're all on the same page
in the rest of the videos because these are terms
00:17 that I'm going to be using again and again and again and again and they
also
00:21 help express the fundamental syntax of CSS, which is somewhat useful to
know.
00:27 So the first thing, that we want to look at, is what we call properties.
00:33 Here we have two properties, color and font size. Property
00:37 describes an aspect of an elements presentation so color is one aspect o
f the presentation of an h1, the font
00:43 size is another aspect of the presentation.
00:45 There's a whole long list of properties that we could talk about
00:50 and throughout the rest of the videos we will, at least for many of them
.
00:55 We'll talk about many of the properties that can be used.
00:58 The important thing to keep in mind right now is that, anytime you have
a property, it's always followed by a value, and the property
01:04 and value are always separated by a colon. So you see, here we have colo
r, colon, and font-size, colon and after each of those we find the values.
01:14 In the case of color that would be #333, which is a short hexadecimal
01:20 color notation. We'll talk about that in a later chapter and
01:25 for font size the value is X-large, which is short for extra-large.
01:30 These are just two of the many, many possible values there are, values c
an be names such as ex-large.
01:37 These are more technically known as keywords,
01:39 a measurement of length, a percentage value, a color expression, any num
ber of
01:44 things can be values and throughout the videos we're going to see a lot
of those.
01:49 when you write your value, you always want to follow with the semicolon,
because the
01:55 combination of property and then a colon separator and the value and a s
emicolon, terminator is what's called a declaration,
02:03 and here we have two declarations, color #333, font-size X-large,
02:08 each of those being its own declaration.
02:11 Now, as I said, you always want to follow the value with a semicolon.
02:15 Technically speaking, it's a declaration that has to be terminated or en
ded with a semicolon. You can,
02:22 if you have one in one declaration, as we have here, we have two you can
technically leave off the last semicolon,
02:29 the one in this case after font size X-large. You could leave that off,
because it's the last declaration in the series,
02:35 but it's generally regarded as good practice to always terminate your de
clarations with semicolons whether or not
02:42 the declaration question is the last one in the series just because
02:46 supposing you left off the semicolon after font-size X-large and then ca
me along later and decided to add another declaration.
02:52 You might forget that that semicolon wasn't there and that will lead to
a lot of bad stuff, because if you have two declarations in a
02:59 row, but no semicolon separating them, then, as far as CSS is concerned
they're not two declarations, they one very weirdly formed declaration,
03:07 that's not going to have the effect that you want so it's just easier to
always
03:13 just get in the habit of finishing every declaration with a semicolon.
03:17 A series of declarations contained together
03:20 in the curly braces, which you can see here, is what's called a declarat
ion block, probably because it's a block of
03:26 declarations. It's always surrounded by curly braces so that the curly b
races are basically the begin and end points of your
03:34 declaration block just like
03:36 the semicolon is always the endpoint of a given declaration.
03:40 Now next to a declaration block, you have what's called a selector
03:45 and the selector describes what elements will be selected in your docume
nt to have the styles described in the
03:53 declaration block applied to them. So in this case, we've said that all
h1s should be selected, all h1 elements
03:59 should be selected and the styles in a declaration block
04:04 associated here should be applied all h1, all h1s should get a color of
04:08 #333, which is a dark gray and
04:10 should have a font size of extra-large. All of this,
04:15 the selector and the declaration block taken together is called a rule.
04:20 So this is one rule and the rule is h1,
04:23 color #333, font-size X-large. So these are the various components of a
rule. A style sheet can contain anywhere from one to
04:33 theoretically infinite number of rules
04:36 and those are together all applied to a document. Now,
04:42 at this point not to worry so much about exactly what
04:45 selectors can be written and exactly what properties and values there ar
e, or for that matter, even how to associate CSS
04:52 with XHTML, because those are all going to be covered in other videos, o
ther chapters. Now, there's an entire chapter on selectors and
05:01 declarations, properties and values will be covered
05:06 throughout pretty much the entire rest of the series as for ways to asso
ciate CSS with XHTML, that is the subject
05:13 of the rest of the videos in this chapter.
Embedded style sheets
00:01 In this video, what we're going to do is we're going to take this comple
tely unstyled document and we're going to style it by means of an
00:09 embedded style sheet.
00:11 So what that means is, there is actually a style sheet that's embedded i
nto the document.
00:18 So if we take a look here, we can see that we have already in the docume
nt a style element. That would be style with the attribute type
00:25 equals text/CSS. That is necessary to have for a style element. You need
to have a type
00:32 attribute and the type attribute value for a CSS style sheet needs to be
text/CSS. So inside this element, we can put a style sheet,
00:44 as short or as long as we care to. So what we're going to do with this p
articular embedded style sheet is we're going to go the file base.css,
00:57 select the entire thing, I use Cmd+A,
01:00 Ctrl+A that you use for select all, copy it,
01:05 then close base.css and paste the entire style sheet into the style elem
ent.
01:13 So you can see that that's actually, now is inside
01:18 the style element and if we scroll up quite
01:21 a bit because it's a relatively sizeable style sheet, we find the
01:25 beginning of the style element and then if we go back over to Firefox, a
nd we hit Reload,
01:31 there it is, this style sheet is applied to the document and makes it lo
ok all pretty just like we wanted to.
01:39 So this is an embedded style sheet again because it is embedded into the
document. This is not necessarily the best way to do this though.
01:48 What we have is, we have an entire style sheet that we stuck into this d
ocument and made this document quite a bit longer than it used to be.
01:55 So, you know this is one way to include a little bit of, you know, small
style sheet or
02:00 if you had a template driven site, you could include the style sheet in
every single page if you really fell like it, but that's not really very efficie
nt.
02:08 It would be better if you could have the style sheets in a different fil
e
02:12 and then just refer to it from
02:14 your XHTML document, and that's what we're going to do in the next exerc
ise.

Linking a style sheet

00:01 In this video, what we're going to do is we're going to
00:04 create a reference to a style sheet that's actually external to our XHTM
L document and thereby associate the two
00:12 together and have the styles applied to the document. So here we are wit
h our lovely quote and quote unstyled document.
00:19 Says no other style whatsoever and in the head element,
00:24 what you can do is you can add a link on it. What a link does is it crea
tes a link from this XHTML document to something else.
00:33 The link element has an attribute called rel, which stands for relations
hip and that describes a relationship of the thing that we're pointing to,
00:42 to the document here. So the link rel means the relationship of the thin
g I'm linking is that it is a style sheet for
00:50 this document here. So the XHTML document style sheet has a rel of style
sheet.
00:56 We also need a type. This is going to be a CSS style sheet, so we want t
ext/CSS href equals and then a path to the
01:08 style sheet and we also want to say the media in which this will apply,
and we'll just have it apply in all media. We'll talk about
01:16 medium specific style sheets in chapter 9.
01:20 For now, just accept that media equals all this is generally the way you
want to go. That's the default value for media anyway. So if we hit save here,
01:28 and then switch over to the web browser containing your document and hit
Reload,
01:35 there you have it, we have created the link between this
01:38 XHTML document and an external style sheet, which is a CSS file,
01:44 and that puts the two together. The advantage here is that
01:47 we can have any number of pages on a website.
01:51 All of them simply linking to
01:53 the same style sheet using a link element, just like this one and in the
document head and
02:00 then there would just be one style sheet somewhere that, that could be a
ltered at will.
02:06 This is, the link does occur inside the head element, just like the styl
e element did in the previous exercise.
02:12 And that's pretty much all there is to it.
02:14 You can create a link from one to another.
Linking to multiple style sheets
00:01 As we saw on the last video, we can link a style sheet together with an
XHTML document, create a link between the two
00:08 pointing from the XHTML document to the style sheet that we want to use.
00:11 We can actually do that for more than one style sheet at a time and thos
e will be combined together in affect,
00:18 the way that this happens is you just have multiple link elements inside
the head so what it did here was, I haven't even copied it,
00:26 the link elements, I'm going to paste it in again, and really, the only
thing you need to change is the path to
00:33 the secondary style sheet, which I have in a fit originality called seco
ndary.css. So we have two links to,
00:43 from this document to external style sheets, we have a link to base.CSS
and another link to secondary.css, both of them will come in
00:52 and if we hit Reload, we'll see that some changes occur,
00:56 they are not huge changes and but they are there nonetheless.
00:59 We get a hatch background and also some changes of color in the sidebar.
01:07 Really, all that's happening here is they say, both of these style sheet
s have been linked to
01:12 this XHTML documents and the cascade, which is the cascading part of cas
cading style sheets
01:18 determines how the rules in each of these style sheets are combined in h
ow any conflicts will result. We'll discuss
01:26 the cascade in a later chapter in some detail. For now,
01:31 just accept that if there are conflicts,
01:35 there are mechanisms in place to determine how to resolve those conflict
s. The styles are combined together. So
01:40 with this, it's possible to split up your styles for your website so tha
t
01:46 perhaps one style sheet deals with the basic layout of the pages and ano
ther style sheet deals with the fonts and the colors or
01:53 alternatively you could have a basic style sheet that applies to every p
age on the websites but then the contact pages,
02:02 of all the pages that are in the contact section of the site,
02:06 also link to a style sheet that contains styles just for contact pages.
There are a number of ways in which you can
02:13 organize your style sheets, which we will discuss in a later video.
Using linked and embedded style sheets together
00:01 We've seen how style sheets can be embedded and also how there can be li
nked to style sheets and not only, but multiple linked
00:07 style sheets. What we're going to look at in this video is how
00:13 there can be both linked and embedded style sheets in the same document.
00:18 In this case, we have our layouts,
00:21 but if you take a close look at the sidebar over there on the right, to
the tee of the day and post archive
00:26 headings don't look quite the same as they did in previous chapters.
00:32 So what we're going to do is we're going to add to the styles that have
been linked in the external style sheet by doing some
00:39 styling here in the CSS. Now, what we have here is we have an embedded s
tyle sheet that already has the beginnings of a rule
00:45 set up. We already have our selector and all we need to do now is start
to fill in
00:52 some styles, some declarations to be precise about it. Ok,
01:00 so there is just a very basic start and if we go back over to Firefox
01:08 we discover upon reloading that we have some background color.
01:15 At this point, of course, you haven't seen really what background means
or exactly how it works, that will come in
01:23 later chapters. For now, let's just concentrate on the fact that the sty
les can come on together. We keep going with this
01:39 and a, in so doing, more complicated presentation more complex presentat
ion.
01:56 All the things that I put up here
01:58 will be covered in later chapters. So if we go back to the web browser a
nd hit the reload,
02:04 we see even more changes.
02:07 Again, just like when we had two linked style sheets working together, h
ere we have a linked and an embedded style sheet that
02:12 work together. The styles from the external style sheet, ex0206.css, are
brought in via the link and the
02:20 embedded style sheets styles are,
02:23 the two are combined, the embedded style sheet and the links style sheet
are combined, any conflicts are resolved and the final aggregate product
02:31 which is the presentation style sheet is used to style the page. Now the
re is something I wanted to point out here now that we
02:38 have this embedded style sheet, which is that if you wanted to, you coul
d rearrange this so that it's perhaps more readable to
02:45 you if I didn't like the way it was set up before. This arrangement,
02:51 and the arrangement that we had before, are exactly equivalent. CSS does
n't care how exactly you set up your declarations, in fact,
03:01 you can set them up so they look at this with extra spaces between decla
rations and values we'll put a little extra bit there
03:10 so that every declaration, every property value pair is on its own line,
if we go back and hit the reload,
03:18 nothing changes, because this is exactly the same as what we had before.
It's just written a little bit differently. This allows
03:26 each author and allows you to develop your own style for
03:30 writing out CSS. You can pick
03:34 a writing style that works best for you that you find easiest to read. S
ome people will find this sort of thing,
03:39 easy to read, some people will take this sort of approach and some will
do more like what I did where there are multiple
03:46 declarations per line. Any of these
03:49 are exactly equivalent to the others. So you're pretty much free to deve
lop your own writing style
03:56 as long as you remain to the basic syntax rules of separating a property
and a value with a colon, and ending a declaration with a semicolon and
04:04 having curly braces around the entire declaration, bracket, those are so
me things you, you don't get to change but in terms of the whitespace, if
04:12 you want to have every declaration on it's own line,
04:14 you can do that or if you just want to have every rule be just one littl
e long line of text you can do that to.

Using imported style sheets

00:01 We're back to our non-styled document.
00:04 In previous videos of this chapter, of course, we've linked to external
style sheets, and we embedded style sheets and we've
00:11 combined the two. Now I've taken all the way to look at yet another meth
od of associating CSS with a XHTML document
00:18 and that's importing. We go over to our style sheet, we have here,
00:23 an embedded style sheet, in which we could
00:26 do a little directive called at import.
00:33 This isn't exactly the decoration is more of a directive and has a very
specific syntax, which is fairly rare in CSS, as is
00:39 almost certainly the only time you'll ever use this sort of
00:42 construction, the at symbol and then import,
00:46 and after that a space and then the URL in parentheses. We provide the U
RL of the
00:52 style sheet that we wish to import, that the URL part of course is very
much like an href attribute in the link element.
01:02 So we set at import the
01:05 thing at this URL styles/base.css and having said that, if we go back ov
er to
01:11 our Web browser and hit Reload, we've
01:15 imported the style sheet just as if we had linked it.
01:20 And as with linking, is possible to have multiple imports,
01:24 let's say styles/secondary.css and
01:32 switch over to the web browser, hit Reload and have those changes. Funct
ionally this is the same as what we did before.
01:41 Whereas we had two links before now we have two imports or as they were
sometimes called atimports.
01:47 So might wonder why both these things exist.
01:51 The reason is that
01:52 the link element is part of XHTML. It's a way that XHTML documents
01:57 have to link to other things, not necessarily just style sheets, that's
far and away the most common use for
02:04 link, all of the other ones are very obscure and generally
02:08 only done for experimental purposes.
02:10 We have to spend a pretty long time doing web design before
02:14 you're likely to come in any other reason for the link element besides a
ssociating style sheets to your document.
02:21 But that's part of the XHTML specification.
02:24 CSS itself needed a way to associate one style sheet to another,
02:29 and that's what at import does.
02:32 It's a way in one style sheet to say bring in the contents of another st
yle sheet here so that's what's happening. So,
02:39 because you can't have link or any other XHTML in a style sheet.
02:46 Which one is better, there is,
02:48 that tends to be a matter of personal preference,
02:51 and it tends to be a matter of some debate if
02:54 I'm only associating external style sheets with my document I tend to us
e link elements
03:00 for a variety of reasons.
03:02 For those of you who might be interested in eventually doing scripting o
n your documents, it's very easy
03:08 to have downscripting effect link elements. It's a very, very difficult
03:12 for downscripting to affect
03:14 importing, in fact, it's, so far as I know well into impossible,
03:18 maybe not totally impossible, but very, very close to being so.
03:22 So if I'm only associating external style sheets with my document I'm go
ing to use link elements, I'm not going to embed a
03:28 style sheet just for the purpose of having one or more at imports.
03:32 But where this gets interesting is that this is an embedded style sheet
and so, in addition to having our imports we could also
03:40 have some normal you know, regular old
03:45 declarations and some regular old rules, that say things like, so let's
italicize our navlinks, and let's boldface our paragraphs
03:53 which, if we switch over and reload,
03:56 you can see that those things have happened.
04:00 So, if I know that I'm likely
04:03 in my pages to have a need for both external style sheets and embedded s
tyles I might then in that case decide to just
04:11 have embedded style sheets import the external style sheets and then
04:15 add the embedded styles that I want to afterward. That's a pretty rare c
ase. That really ever happens in my experience so
04:24 I end up linking a lot and I end up
04:26 add importing and frankly, embedding style sheets not very often at all.
04:31 The one thing to watch out for if you want to do this is that the CSS sp
ecification requires that
04:36 all your at imports come before any other rule.
04:39 If you wanted to take the two at imports and put them after the p font-w
eight bold and the navlinks font-style italic, that
04:45 would be illegal and a fully CSS conformant Web browser would actually i
gnore your imports if you put them after the font-weight bold,
04:54 navlinks font-style italic. These two lines have to come after any at im
port. You can have as many at imports as you want, although if you have
05:02 seven or eight or ten or twelve you're probably overdoing it, but you ca
n have them as long as they are
05:08 all at the beginning of the style sheet, before any other rules come in.
So that is one thing to
05:15 keep in mind, if you're going to be combining imported style sheets and
regular style rows in the same embedded style sheet.

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.