1. IntroductionWelcome| 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.
| | Collapse this transcript |
| 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, the 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 there're still
| | 00:41 | these. There's the raw sort of body, the naked page if you will
and underneath 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 style 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 very 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 can 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
look, 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 switchers 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 results.
| | 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 around 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 page 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 to a style sheet.
| | 03:33 | And so if I want to change the way the entire site
looks I can go to that 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 meta 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 changed 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
back 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 basically 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.
| | Collapse this transcript |
| Design tour| 00:01 | Like to introduce you to the design with which will be working
throughout 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 sidebars 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 columns 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 made into a horizontal navbar through the power of CSS
| | 00:59 | and we will talk about that. The other interesting thing is
that these vertical separators here are not actually part of
| | 01:03 | the document source that's another stylistic
effect that we'll discuss when 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 again that's not a horizontal rule,
| | 01:21 | that's simply a style applied to the
legendary origins of t heading. There 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 and how this image
| | 01:37 | sits off to one side and has the text
flow around it. That's something else,
| | 01:42 | that we want to pay attention to before we're done. We also have these
boxes 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.
| | Collapse this transcript |
| Using the exercise files| 00:01 | In this movie we're just going to quickly talk
about how to use the Exercise 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 series 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 would 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 that you would
| | 00:50 | get yourself ready for the exercise is to
load up the file in your favorite 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 between the two and that point usually is where the
| | 01:17 | movie starts and you can just follow along.
| | Collapse this transcript |
| 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 installing 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
because 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 toolbar.
| | 01:18 | That is the Web Developer toolbar and
you can do fun things with it, like
| | 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 document, 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, hmmm, lovely.
| | 02:05 | Now, when I close this, that just stops. This also lets
you disable things 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 outlining,
| | 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 headings 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 see 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 CSS,
| | 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 error.
| | 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 give 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 options 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 IDs 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
development, 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 diagnose problems and get to a solution that much more quickly.
| | Collapse this transcript |
|
|
2. CSS and XHTMLXHTML 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 really 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 structures 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 not replaced by anything else, they contain the content
| | 01:32 | that they're going to display. An image element, IMG which
you can see on there, is what's known as a replaced element.
| | 01:40 | In other words, this is an element that points to some other
resource that 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 attribute
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 value 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 its value is just simply nothing.
| | 02:52 | But you can't just say alt and leave off the
equals quote, quote, that it'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.
| | Collapse this transcript |
| 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 before 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 of 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
color, 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 can 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 number 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 semicolon, 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 ended 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 declarations 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 came 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 declaration block, probably because it's a block of
| | 03:26 | declarations. It's always surrounded by curly braces so that
the curly braces 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 document 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 are, or for that matter, even how to associate CSS
| | 04:52 | with XHTML, because those are all going to be covered in other videos,
other 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 associate CSS with XHTML, that is the subject
| | 05:13 | of the rest of the videos in this chapter.
| | Collapse this transcript |
| Embedded style sheets| 00:01 | In this video, what we're going to do is we're going to take this
completely 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 into the document.
| | 00:18 | So if we take a look here, we can see that we have already in the
document 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
particular 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 element.
| | 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, and we hit Reload,
| | 01:31 | there it is, this style sheet is applied to the document
and makes it look 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
document 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 efficient.
| | 02:08 | It would be better if you could have
the style sheets in a different file
| | 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 exercise.
| | Collapse this transcript |
| 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 XHTML document and thereby associate the two
| | 00:12 | together and have the styles applied to the document. So here
we are with 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 creates a link from this XHTML document to something else.
| | 00:33 | The link element has an attribute called rel, which stands for relationship
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 thing 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 text/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 altered at will.
| | 02:06 | This is, the link does occur inside the head element,
just like the style 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.
| | Collapse this transcript |
| 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 those 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 secondary.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 sheets have been linked to
| | 01:12 | this XHTML documents and the cascade, which is
the cascading part of cascading style sheets
| | 01:18 | determines how the rules in each of these style sheets are
combined in how 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 conflicts. The styles are combined together. So
| | 01:40 | with this, it's possible to split up
your styles for your website so that
| | 01:46 | perhaps one style sheet deals with the basic layout of the pages
and another style sheet deals with the fonts and the colors or
| | 01:53 | alternatively you could have a basic style sheet that applies
to every page 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.
| | Collapse this transcript |
| Using linked and embedded style sheets together| 00:01 | We've seen how style sheets can be embedded and also how there
can be linked 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 style 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 styles can come on together. We keep going with this
| | 01:39 | and a, in so doing, more complicated
presentation more complex presentation.
| | 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 and hit the reload,
| | 02:04 | we see even more changes.
| | 02:07 | Again, just like when we had two linked style sheets working
together, here 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 there 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 could 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 doesn'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
declarations 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. Some 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 develop 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 some
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 little long line of text you can do that to.
| | Collapse this transcript |
| 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 method 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 URL 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 over 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. Functionally 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 associating 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 style 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 use link elements
| | 03:00 | for a variety of reasons.
| | 03:02 | For those of you who might be interested in eventually
doing scripting on 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 going 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 styles 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 case. 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 specification 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-weight bold and the navlinks font-style italic, that
| | 04:45 | would be illegal and a fully CSS conformant Web browser would actually
ignore 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
import. 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 can 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.
| | Collapse this transcript |
|
|
3. SelectorsID selector essentials| 00:01 | In this chapter we're going to be covering selectors in some detail,
this 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 selectors. Now,
| | 00:15 | in the markup here, there are a few ids, there's a
div ID of masthead, right 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 navlinks. 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 markup.
| | 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
particularly 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 name 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 has 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 sidebar,
| | 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 commonly 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 the 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 this 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 navigation, 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 said back here
| | 03:47 | in our code was any paragraph with an ID of sidebar should get a one
pixel 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 sidebar 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 name 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, just 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-sensitive.
| | 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 still 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 capitalization 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 subword
| | 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 pay attention to this capitalization and that
| | 06:06 | led to some sloppiness in some peoples authoring
styles, where they would 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 styles 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.
| | Collapse this transcript |
| 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 there are.
| | 00:11 | If we look into the markup here, we can
see that we started with the class 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 first, 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 more details about something so on a magazine website
| | 01:01 | on the front page there might be a headline and a little abstract
paragraph 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 some 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
background, 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.first, 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 this 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 here,
| | 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 classes, 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 background
| | 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 actual 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 know.
| | 03:48 | This just says any td element, with a class of tue, so,
a th element, with 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 some of the nifty things you can do with classes.
| | Collapse this transcript |
| Best practices for classes| 00:01 | As a follow on to the previous video I
just want to take a minute to talk about
| | 00:04 | a few best practices when it comes
to classes. It can be very tempting to
| | 00:09 | over class as it were, to end classes
really nearly and I hit her in Jan.
| | 00:14 | Just on the off chance that you might need them
some day. As an example here in this document,
| | 00:20 | you can see where we have these list items here
| | 00:23 | that contain links that are navigation links and every
one of these list items has a class of navlink and in the
| | 00:29 | a element, inside them have classes of navlinks
and this is really, really, really inefficient.
| | 00:35 | There's no need for all of this
navlinking classing to happen here.
| | 00:41 | Instead, you could just take all that out so that instead of
| | 00:46 | having classes everywhere, you just have these plain elements and then
you might wonder to yourself well, how am I supposed to select those. Well,
| | 00:54 | that's coming up later in the chapter,
about the short preview answer is that
| | 00:58 | you use the ID up here on the element that encloses all
these other elements in order to make your selections.
| | 01:05 | This sort of drive to class everything in sight
| | 01:09 | is an understandable one, but it's one that needs to be restrained.
| | 01:13 | You can end up loading your documents markup and making it harder
to maintain, harder to read, because with all those classes
| | 01:19 | everywhere there's more markup to deal with. Here,
| | 01:23 | it's much cleaner. There's one other thing that
| | 01:26 | can be done with classes and you remember we
had first and last perhaps from the last one.
| | 01:41 | You can actually have multiple words in the same class
attribute, so we can have first and we can also have urgent.
| | 01:52 | So not only is this list item in
| | 01:54 | have a class of first meaning that
it's the first element of something
| | 01:58 | that's the meaning that we've just decided to give to first, is
not that the class name first intrinsically means this is the
| | 02:05 | first element of something else, is just that we're using the
name first to mean that and also the name urgent to mean that
| | 02:11 | there's something urgent about this particular
| | 02:14 | bit of information. So what we have here is a list item that's
in the class first and also the class of urgent and those can be
| | 02:22 | addressed separately in effect, so we can say li.first background
yellow, actually let's make it dot first background yellow.
| | 02:34 | So any element with the class of
frst will have a yellow background and
| | 02:40 | if we go to Firefox and hit Reload, then we can see that indeed
we have yellow backgrounds for all the elements that have a class
| | 02:48 | of first, but we can also say,
| | 02:51 | any element with a class of urgent, will
italicize. So now when I hit Reload,
| | 03:01 | the, the text about us is in italics,
because both of those selectors
| | 03:09 | both of those class selectors match this particular elements
class and the order these are in, actually doesn't matter.
| | 03:15 | So the fact that we have urgent
and then we have first, the order that
| | 03:21 | these were joined in this class value doesn't matter. It doesn't make
a difference in terms of what the order is up here. Now, the order
| | 03:28 | the styles are in a style sheet can matter, but we'll talk about
that in a video leader in this particular Chapter. That's
| | 03:36 | one thing that you can do with
| | 03:38 | classes. It's not a common need
it's not like you'll be doing this
| | 03:43 | what's sometimes called multiclassing,
| | 03:45 | every time you write a document. But the times,
that you do need it, it comes in very handy.
| | 03:52 | One classic example is if you're creating a portal page and the portal
has little boxes in it that have different bits of information in different forms,
| | 04:02 | each one of those might be rapped in a div, but the
widgets that allow user input of some kind for example,
| | 04:08 | a weather box, where the user can input
their zip code and get the local weather,
| | 04:12 | you can have that div class equals widget
| | 04:15 | and then a space and then user input or input allowed, or
you know, whatever class that makes sense to you and then have
| | 04:25 | a rule that styles all the little widgets with, you know, put a little
border around them and whatever else you want to do, but then with the class of
| | 04:33 | input allowed, or user input, you can change just certain
aspects of how those particular widgets are presented that
| | 04:41 | the border is red and thicker, or there's a different
background color on that particular widget. So,
| | 04:46 | that's the sort of situation in which
multiclassing can come in very handy.
| | Collapse this transcript |
| Grouped selection| 00:01 | In the videos so far in this chapter, we've
| | 00:04 | actually been working with, what are sometimes called simple selectors,
at least I thing of them as simple selectors. In each of these cases,
| | 00:12 | we're making one selection at a time.
So, for example, h1. So in this case,
| | 00:24 | we're saying, any h1 element, make it's
text uppercase, like we just did there.
| | 00:31 | And that's all fine but we're really only selecting one thing at
a time and suppose we wanted to do that for all heading levels,
| | 00:38 | one through six, so we might do it like this.
| | 00:45 | If we hit Reload we'll have the desired effect,
| | 00:49 | but that's really clumsy and just not
| | 00:53 | very efficient, you might think yourself, man there probably should
be a better way to do that and fortunately, there is and it's
| | 00:59 | called a group selection. So the way this works is all the things you
want to select, you can group together using commas just like this.
| | 01:16 | Actually, I'm just going to do it like that.
| | 01:18 | So instead of saying repetitively h1 text-transform
uppercase, h2 text-transform uppercase, well, I'll just say
| | 01:26 | h1, h2, h3, h4, h5 so, we're using the commas
to group them all together and then if we hit Reload,
| | 01:34 | there's no change, because what we've just done here is functionally
exactly the same as this. This and this are equivalent.
| | 01:43 | This is much nicer so this is the right way to do it.
| | 01:47 | Now if you don't like putting all the stuff on one line, all your
selectors on one line, you can group them like this, that's ok.
| | 01:56 | That's going to have exactly the same effect, the whitespace
there doesn't really matter. It's the commas that are important,
| | 02:02 | the commas bring these together into a group.
| | 02:04 | One thing you do want to watch out for, is that sometimes you
can get a little carried away and put a comma at the end and that
| | 02:12 | often completely breaks what you're
trying to do, as you can see here,
| | 02:15 | all the text transform and all the uppercasing ran away. Just
having a comma at the end of your selector with nothing after
| | 02:22 | it except for the declaration block that's a no, no. So
you want to make sure you don't have that last comma,
| | 02:27 | right before the declaration block starts. So, as another example,
| | 02:33 | suppose we wanted to put back a color on all table elements,
either table data, cells or table header cells, we can do
| | 02:42 | th, td, or td, th, that order actually doesn't make any
difference at all and then say background and we'll pick
| | 02:52 | something that might look very cryptic to you but which we will
discuss in a later chapter on colors and backgrounds and then
| | 03:00 | if we scroll down a little bit and look at
the post archive, by hitting a Reload,
| | 03:05 | there we go. We've added a greenish background color to
the backgrounds of all of the th and the td elements
| | 03:12 | in the entire document. This just happened to be the only ones.
So as we said before, you can group anything that you like.
| | 03:19 | You can group when any selector type, we can have all
| | 03:22 | Wednesday ths and all Friday tds that for whatever reason
we wanted to do that, we could have let's just say any
| | 03:33 | table header with a class of Wednesday
| | 03:35 | and any td element with a class of fri,
do this and so when we hit Reload, there you go.
| | 03:43 | You can have Ids in your selectors
| | 03:45 | that you group together, classes. Really, all you're doing is
| | 03:49 | what was shown before. With a group selector, you're just compressing
down this sort of a thing to this. So, that's grouped selection.
| | Collapse this transcript |
| Descendant selectors| 00:01 | Now it's time to get a little bit more complicated with selectors, which
is what we're going to do in this movie. But what we need to do first
| | 00:09 | is take a moment and consider the structure of the document,
| | 00:13 | which you can see here is markup from our Javaco example and
| | 00:19 | an XHTML document of course has a number of elements, some
of which contain others. The HTML element, for example
| | 00:25 | contains all the other elements.
| | 00:27 | The head element, as we can see here, contains
the title link and style elements. The body has
| | 00:35 | everything else really, the divs and the a, and the lists and
the list items, and the paragraphs and all that other stuff.
| | 00:43 | All of these are connected in parent, child relationships.
| | 00:48 | Most elements have either a child or a parent or both.
| | 00:52 | The HTML element, to pick an example,
has two children, the head and the body
| | 00:57 | and the head element has three children,
title, link and style. The body has
| | 01:02 | four children, those are the divs, like the masthead div,
the content div, the sidebar div, the footer div and
| | 01:09 | each of those divs have children as well. Basically
one element is the child of another if you can
| | 01:16 | go down one step here, so from head to title or from
body to div masthead. The image inside the masthead div
| | 01:24 | is not a child of the body. It's the
descendent of the body. Conversely, the body
| | 01:33 | is not the parent of the IMG,
is an ancestor of the IMG element.
| | 01:38 | The div, that's the masthead div,
| | 01:41 | that is a child of the body and the body is its parent. So,
| | 01:45 | as you can tell from that,
| | 01:47 | an element can have many ancestors,
but it can have only one parent,
| | 01:51 | and most elements can have many children. There are
few elements like IMG, that can't have children.
| | 01:56 | There's no such thing as a child element for an IMG element,
| | 02:00 | an image can have a parent and it can have ancestors but
it can't have any children or descendents, but the body as,
| | 02:07 | for example has just a whole tone of
descendents and children are also descendents.
| | 02:11 | The masthead div here is a descendent of the body
| | 02:14 | but it is also a more specific kind of
descendent called a child of the body.
| | 02:19 | The relationships between these connections should be drawn as
a tree. It's kind of an upside down tree, with the HTML element
| | 02:27 | at the top and then all of the
| | 02:29 | descendent elements coming down from it. So,
| | 02:33 | visually we might think of it more like
| | 02:35 | a root system, but it's still a tree. This can help us
| | 02:39 | visualize how we could write descendent selectors, where
we can select elements that are descended from other
| | 02:46 | elements. So, considering an example where we want a
style, all of the links that are inside of ordered lists
| | 02:53 | so in that case we would write the selector ol space a,
and that space between the two element names, indicates a
| | 03:00 | descendent relationship not a child relationship
but a descendent relationship and what
| | 03:04 | this does, we can read it backwards and say that
this selects all a elements that are descended from ol
| | 03:12 | elements. Any other a elements,
| | 03:15 | those a elements that are not descendent
from ol elements, are excluded form the selector,
| | 03:21 | they're not matched by this
particular selector. So we can use this
| | 03:25 | tree to find the various relationships the parent-child
and ancestor descendent relationships and it's one way of
| | 03:32 | visualizing how to create your descendent relationships.
| | 03:37 | So for example let's say that we want to
select paragraphs inside the masthead
| | 03:43 | and make them italicized. So we go to our code,
we can say masthead space p, font-style italic
| | 04:02 | and if we hit Reload the July 16, 2006 is
now italicized but since it's the only
| | 04:10 | p element that descends from
| | 04:12 | masthead ID div, it's the only one that's italicized.
All the other paragraphs throughout this document
| | 04:18 | are not going to be selected here. We might want to do the
same thing with the sidebar, so let's say sidebar p style italic,
| | 04:32 | and now paragraphs that are descending from the
| | 04:35 | element with an ID of sidebar will
be italicized. So if you look over
| | 04:38 | to the sidebar there and hit Reload we
have italicized text. Now, of course,
| | 04:44 | we can group these together so that instead of saying masthead p, font-
style italic, sidebar p font-style italic, just put a comma between the two
| | 04:52 | descendent selectors and so we have two descendent selectors that
are grouped together and any paragraph that descends from the
| | 04:58 | masthead or any paragraph that descends from
the sidebar, italicize them, and then we might
| | 05:04 | do some other treatment for paragraphs descending
from the content div of something like font-weight bold
| | 05:15 | and hit Reload and there we go. This is why, this is why,
| | 05:23 | you have to be careful when you write element
ID combinations like div with an ID of content.
| | 05:30 | You'll notice I put a space here,
| | 05:31 | and that would by mistake, in effect, this
would be any paragraph element that descends from
| | 05:36 | an element with an ID of content, and that
| | 05:39 | element descends from a div, make them bold and if we go back
and hit Reload, we'll discover that that's not working because
| | 05:47 | there is no div element that's an ancestor to the content div,
| | 05:52 | and the space between div and the content ID descriptor
| | 05:58 | creates that descendent relationship.
| | 06:01 | If I get rid of it, now I'm saying any
development that has an ID of content.
| | 06:06 | So, in this case any paragraph that descends from a div
element, where that div element has an ID of content make the
| | 06:14 | font-weight bold and there it works. So
| | 06:17 | that's why you have to be careful both with IDs and
classes, that you don't accidentally put a space between
| | 06:23 | an element descriptor and the ID or class descriptor,
unless you really do mean something like I want a paragraph
| | 06:32 | that descends from an element with an ID of content,
where that element itself descends from a div, which as we saw
| | 06:40 | won't work here, all we want is this one instead.
| | Collapse this transcript |
| The sources of style| 00:01 | For this movie you can sit back and
relax for a minute, it's not going to involve,
| | 00:04 | actually has on exercises but is going
to talk about where style comes from
| | 00:09 | and the answer is not style fairies. It is in fact,
| | 00:13 | a combination of three different sources. The one that you're probably most
interested in is author styles, that's styles written by the author as in you.
| | 00:23 | The second place that styles can come from,
| | 00:25 | hopefully very rarely is from what we call user styles or reader styles.
| | 00:30 | The person who is using a web browser can have their own style
sheet associated with that web browser that's applied to every
| | 00:37 | page that they view, every website
that they visit every local document,
| | 00:42 | every little XHTML document that they view, that's what a
user style sheet is for. Very, very few people have these.
| | 00:49 | But it is still possible. There's a third source, which is absolutely
common, no matter whether there's any other CSS involved or
| | 00:56 | not, and that's the user agent styles,
otherwise known as browser styles.
| | 01:00 | This is a style behavior that's built into the web browser,
| | 01:04 | and you might not think that there's the MRC spelt into the web browser,
because after all, you might look at what you think of as an unstyled page.
| | 01:12 | Here's an example of the
| | 01:14 | Javaco site that we've been working with, with no styles, and I put no
styles in quotes because actually there is a lot of styling going on in here.
| | 01:23 | The fact that there's a particular font in use,
that unlinked text is black, link text is blue,
| | 01:32 | images that are inside of links, like the Javaco tea have a border
around them, that paragraphs sit apart from other elements and have
| | 01:40 | some space above and below them, that headings do the same
thing. That an h1 is big, bold and ugly this is all style
| | 01:47 | information, it's all built into the browser the web browser has
| | 01:51 | basically inherent in it a style sheet that says
| | 01:56 | this is the absolute default for presenting an HTML or an XHTML document.
| | 02:02 | When you're an author style sheet, you're actually adding on top of that, you
are adding your styles to the styles that are already built into the web browser.
| | 02:09 | Because you might think that this an unstyle page
actually, you can create an unstyled page by modifying
| | 02:15 | some web browsers including Firefox.
This is the same page, that's really unstyled.
| | 02:21 | There's nothing being applied here by
default, except for the hyperlink treatment.
| | 02:28 | Well, the default colors in the default fonts because those
are actually coming from the web browser's preferences and
| | 02:34 | those are turned into style rules, but
everything else you can see here that
| | 02:39 | paragraphs don't really look like paragraphs anymore and headings
don't look like headings, is all running together in one
| | 02:44 | large undifferentiated mass of text.
If you look down towards the bottom,
| | 02:48 | just past the second image, it says post archive, July 2006, Sunday, Monday,
Tuesday, Wednesday, Thursday, Friday, Saturday, that's table markup, but
| | 02:57 | I basically have taken away
| | 02:58 | the browsers style sheet. it has no idea that
| | 03:01 | it's supposed to treat the table in any sort
of special way. It's just displaying that text
| | 03:08 | like they are no elements at all. This is really
unstyled and it could be even more unstyled,
| | 03:15 | if we had a way of blocking
| | 03:17 | the default font and the default colors and the default
underlining of links. Like I said, that come from the browser
| | 03:21 | preferences but it's still translated into CSS effects. So,
| | 03:27 | it's a little scary, but I mean, that's life without styles and
| | 03:31 | you couldn't actually sort of hack your browser
to do this and then go browsing around the web.
| | 03:36 | It's difficult, but it can be done.
| | 03:39 | So that's one source of style, is the user
agent styles, the browser styles, they are built in
| | 03:45 | and that's the basis, that's the lowest
sort of level of style, it's the foundation.
| | 03:52 | That's the first potential source of style. The second one, which
we mentioned before, is user styles reader styles. In any case where
| | 04:00 | the reader styles conflict with the user
agent styles the reader styles are going to win.
| | 04:04 | In considering the source, this is sort of the first step
in the cascade, in the conflict resolution built into the
| | 04:10 | cascade. The browser says okay if I have
user styles, those are going to win out over
| | 04:16 | the user agent styles, all other things being equal.
| | 04:20 | The reason that there are reader styles, or user styles is for accessibility
purposes, these are here for people who really need them. So, assume
| | 04:29 | that I am a user who is completely color blind, absolutely
cannot perceive any colors, the entire world is grayscale to me.
| | 04:37 | In that case I can't distinguish
necessarily between blue text and black text,
| | 04:43 | to tell which are hyperlinks and which are not and so
| | 04:47 | I might decide that I always want my links to be underlined,
absolutely no matter what. Ok, so I can set up
| | 04:55 | my user style sheet, to say that
links must always be underlined and
| | 04:58 | do not let anyone else overwrite that
| | 05:00 | and apply that to all pages that I visit, or
| | 05:03 | making sure I always underline all my links, maybe I want all of
my texts always be black on white, but I want all of my links to be
| | 05:09 | in reverse text, white text on a black background. These are just
| | 05:13 | the various possibilities,
| | 05:14 | reasons why a user might want to create their own style sheet.
The truth of the matter is that even those people who
| | 05:21 | would really benefit from user style sheets
| | 05:23 | don't realize they're there, in the same way that almost
nobody ever realizes that they can change their default fonts or
| | 05:29 | their default font sizes, even people who
are blind or colorblind or otherwise have
| | 05:36 | reasons so they might want to use a user
style sheet don't know that it's there.
| | 05:42 | However, the people who do know that a user style sheet is there
| | 05:45 | and make use of it, if you somehow manage to override
what they've done you will hear from them. So, it's
| | 05:50 | something to keep in mind there.
| | 05:53 | So, like I say, user style sheets are very rarely encountered.
Far more common are author style sheets. The thing that you write
| | 06:01 | in creating the layout of a page and setting
colors and fonts and all that kind of fun stuff.
| | 06:06 | So there will inevitably be
conflicts between these three things.
| | 06:10 | If you as the author say that you
want your unvisited links to the green,
| | 06:13 | the web browser has user agent styles, that say that unvisited links
should be blue. That's a conflict, one of the two has to win and
| | 06:20 | the cascade is how they are resolved, and the first step of
that is to consider the sources and say okay, if an author
| | 06:27 | style conflicts with the user agent style the author style wins.
| | 06:30 | The step after that considers specificity,
which is the subject of the next movie.
| | Collapse this transcript |
| Specificity| 00:01 | In this video we're going to talk about specificity, which
in a lot of ways is the heart of conflict resolution in CSS,
| | 00:08 | and the easiest way to sort of approach the subject is to
say, suppose that I have two rules that absolutely conflict,
| | 00:18 | I said I want my list items, my li elements to have a background
of red, but then, I also said that I want the level background of
| | 00:23 | green and I can't have both, I mean it would be cool if CSS would
just sort of strike them together, candy cane style, but it doesn't.
| | 00:30 | The list items have to have either
a red background or a green background.
| | 00:35 | Which one is it going to be, the
answer as it turns out is green.
| | 00:41 | But the question asked is why,
| | 00:43 | you might say to yourself, well, because green came later, but
suppose that I said this, I said body li background red, but
| | 00:53 | then I said li background green.
| | 00:55 | The green came second, but the red looks like it
might be, I don't know, a little more specific perhaps.
| | 01:02 | So which one do you think it is, red or green.
As it turns out, when we hit Reload it's red.
| | 01:08 | The reason for this is specificity, which
is one of those kind of dried topics that
| | 01:12 | you really have to understand very
| | 01:14 | close in order to be able to write CSS
really well. So let's use these as an example.
| | 01:19 | For this list item, role the li background green, there's one
element descriptor, li and so the specificity of that is 0,0,0,1.
| | 01:30 | The one being that there's one element descriptor
here. Now the other zeros, we'll get to in a moment,
| | 01:35 | but just accept that they're there. The specificity
of the body li is 0,0,0,2 because there's
| | 01:45 | two element descriptors, there's body and there's li.
| | 01:48 | So, when you have a case where there are two
| | 01:52 | declarations that conflict, we have background red, background
green, we have conflicting declarations applying to the same
| | 01:58 | elements which are list items in this document, then the
| | 02:03 | declaration whose associated selector
has a higher specificity will win out.
| | 02:07 | The other really doesn't matter, if the specificity isn't equal.
| | 02:11 | All right, so, because background red, the associate
selector has a higher specificity 0,0,0,2 then, the
| | 02:20 | selectors specificity associated with
background green, red wins out. Now,
| | 02:26 | suppose we put in a class
| | 02:29 | to one of these, like we might say, li.first background yellow,
| | 02:39 | then, when we go over, we discover that the list item with
the class of first is yellow, not because it's last, but
| | 02:47 | because it has a higher specificity. Here we have one
element descriptor and we have one class descriptor,
| | 02:53 | li for the element and .first for the
class, so the specificity here is 0,0,1
| | 02:58 | for the class and 1 for the element, so 0,0,1,1
| | 03:02 | is a higher specificity then 0,0,0,2, which is, will only have appear for body li,
so li.first wins out over body li. Now, the reason that, only that one list item
| | 03:15 | ends up with the yellow background, is because
it's the only one that has a class of first.
| | 03:20 | If we can group these together,
| | 03:26 | then both of those will win out because li.first 0,0,1,1 and
li.last 0,0,1,1, these don't all get counted up together, because
| | 03:36 | this is a group selector here, this one gets counted up and this
one gets counted up, separate from each other, exactly the same
| | 03:42 | as if I had written these as two different
rules, remember that how group selectors work.
| | 03:48 | Now, we can start to take this, you know, even further. I can
say html body li.first, which would give this one a specificity
| | 03:55 | of 0,0,1,3 because there's one class descriptor and three element
descriptors HTML, body and li. That's not really going to have an
| | 04:05 | impact in the presentation here, but it does
point out how these things sort of act together.
| | 04:12 | Let's do an ID, navlinks li, now you list item inside an element
| | 04:17 | with an ID of navlinks, should have a background of fuchsia.
| | 04:24 | So the specificity for this will be
0,1 for the ID, 0,1 for the element li.
| | 04:31 | So 0,1 navlinks, 0 cause there are no classes
| | 04:36 | and 1 for the element, the li and if we hit
Reload, now they are all fuchsia, because the,
| | 04:45 | the specificity of this selector outweighs any of these others.
| | 04:50 | Now, of course is important to remember that you only have
to worry about the specificity conflict if you have conflicting
| | 04:59 | declarations. We've been, you know, fighting with background right now,
but suppose right here the lowliest of these selectors, just plain, old
| | 05:05 | li, I set font style italic and the declaration font-style italic
is associated with a selector, li has a specificity of 0,0,0,1,
| | 05:15 | but it's still going to work, it's still going to come through,
| | 05:19 | because there is no conflicting font style declaration
| | 05:24 | in any of the rules whose selectors have hire specificities. So,
| | 05:28 | the specificity resolution only takes in when there are conflicts.
| | 05:33 | You might have been wondering this whole time I've been
muttering numbers at you, I've always started with a zero,
| | 05:38 | and you might have caused to wonder why that is,
| | 05:43 | and that's because there's one more way to cause
specificity to happen and that's the in-line style attribute.
| | 05:58 | The specificity of the style declaration
here is, the style attribute value is 1,0,0,0.
| | 06:06 | That's higher than 0,1,0,1,
| | 06:09 | which is the specificity of the navlinks li rule.
| | 06:14 | So when we go back and we hit Reload, the
element, which has the in-line style attribute,
| | 06:21 | will win out over basically anything that we put into
| | 06:24 | our author style sheet, into our own
style sheet, because it's specificity 1,0,0,0
| | 06:30 | can never be outweighed by any rule up here, because
| | 06:34 | rules that we put in our own style sheet will always start with zero
and this one will always start with one. So, this is a way to override
| | 06:44 | anything you might've written in a style sheet although
it's not a recommended way to style at all because you're
| | 06:51 | sticking style information into the document source and at that point,
you may as well just go back to font elements and spacer divs. So,
| | 06:59 | you can override with the highest specificity styled
| | 07:03 | attribute, but it is just not recommended,
so I'm going to take it back out.
| | 07:06 | So let's go back to sort of our original
case, which is, we have two rules
| | 07:19 | and this sort of have the same specificity,
| | 07:22 | and there's a conflict. So here, we're
going to see yellow backed, italic text.
| | 07:32 | And if we reverse these,
| | 07:35 | background yellow and then background green,
we're going to see green backed, italic text.
| | 07:41 | That's specificity in a nutshell, and it's not the most immediately
intuitive of concepts, but as I say it is very important to understand
| | 07:51 | in order to write more efficient CSS and also to figure out
why, on occasion, maybe you've added a rule, and nothing happens.
| | 08:02 | Sometimes that happens, you want to change something and
| | 08:06 | you go back to your browser and hit Reload and there's no change.
Whatever was you just typed in, had no apparent effect, and
| | 08:14 | there's a way to figure out whether or not that's a
specificity conflict, which we'll discuss in the next chapter.
| | Collapse this transcript |
| Making things important| 00:01 | In this video, we're going to talk about making things important,
| | 00:05 | and the best way to introduce that is to present
you with a situation you might run into actually
| | 00:10 | more than once in your styling career. Suppose
here that this h1 that says about tea history,
| | 00:17 | with the white background, we want to change that background to
green. So let's make a stab of that, let's say h1 background green
| | 00:26 | go back over, hit Reload, wait a minute, nothing happened.
| | 00:33 | Something 's gone wrong. Here's what I'm going to do to find out
| | 00:36 | what's gone wrong is what you think. I'm going to say
important, so not only do I want this h1s background to be
| | 00:44 | green, but it is important to me that it's background be
green and we'll go back, go hit Reload and green it is.
| | 00:51 | what this tells me is that somewhere in my style sheet I have
| | 00:55 | the rule that's setting that white background, has a higher
specificity than just plain old h1, so I'm using important as a
| | 01:01 | diagnostic tool here in affect.
| | 01:03 | Important declarations override any non-important
declarations. no matter what the specificities are,
| | 01:10 | no matter anything else really.
| | 01:12 | If I say h1 background green important, then
| | 01:15 | any non-important declarations that try to set the background color
for an h1 no matter how high the specificity of their selector is,
| | 01:22 | no matter what their source is, they will lose out to
this important declaration. So I know what the problem is,
| | 01:30 | now I just need to dig into the style sheet.
| | 01:35 | So in my style sheet I'm going to take a look and see
where's an h1, where am I setting an h1, ahhhh! here, I have
| | 01:41 | content h1 background fff, so that's
what's setting that white color and
| | 01:49 | if I take away the important, then, because
both those declarations are not important both
| | 01:55 | the one in my external style sheet that I just looked at and this one
here, then this one is going to lose out again, unless I fix the
| | 02:03 | problem either by raising the specificity of
this selector to be equal to the other one,
| | 02:09 | or by lowering the specificity of this selector to
match the one that I had over here. So, at this point,
| | 02:20 | it stays grey. If I hit Reload, no matter how many
times I hit Reload, it's going to stay green,
| | 02:24 | because this has the same specificity as the rule in the external
style sheet, there's a selector in the external style sheet and so
| | 02:34 | because this one comes later it wins out.
| | 02:37 | Now that's a very important to do for diagnostic purposes,
| | 02:43 | because supposing I've done this and not realize that I misspelled
h1 which, don't laugh, I've done it and I say h, exclamation point,
| | 02:52 | background green and then nothing happened since I say important
and still nothing happens that tells me that my problem is not
| | 03:00 | specificity, it's something else,
in this case it's that I misspelled h1,
| | 03:09 | but it's equally important to not leave
| | 03:12 | near important directive in your style sheets before you deploy
them. There's the temptation to say okay, I'm going to throw in an
| | 03:19 | important here to see if that fixes it, hey, it
fixed it, great, I'm just going to leave it alone.
| | 03:24 | I'm going to put this up on the web with the important in there,
| | 03:26 | and that's not such a great idea because,
| | 03:29 | you might find in the future that you want to override this
particular style somewhere else and so basically, the more
| | 03:37 | importants you leave in your style sheet, the more likely it is that you're
going to run into a conflict later and have to add more important directives, so
| | 03:44 | the more of them you have, the more of them
you end up getting in your style sheets.
| | 03:49 | That's why I say never leave important in a style sheet, if you
can possibly avoid it. Any time I go back and look in my own
| | 03:55 | style sheets and see an important playing around, I pretty much know that
| | 03:59 | the day that I did that I was being lazy.
| | 04:01 | And it's something that I should really go back and fix. So that's
just in a nutshell how important works. Any declaration that is
| | 04:08 | important is elevated onto its own plane and effectively that,
| | 04:12 | and that wins out over any non-important declarations,
| | 04:15 | no matter what the other factors are and only when you
have two important declarations that conflict do you
| | 04:22 | go back to using the cascade
| | 04:24 | resolution mechanisms, like specificity and the order
that they're declared in and all those other sorts of things.
| | Collapse this transcript |
| Inheritance essentials| 00:02 | For this video, we're going talk about a core feature of CSS
called inheritance which you can see here, is we have an example
| | 00:09 | file all over the author colors have been removed
in the style sheet, we've taken out all the colors.
| | 00:14 | And so let's just very quickly add an orange color to the body.
So if we go back and hit Reload the text changes to orange. The
| | 00:26 | masthead Javaco tea, of course, that's an image, so it doesn't
change and the other images don't become orange but all the
| | 00:31 | regular text is turned to orange, but what you just did is you set
the body element to be orange, you didn't say anything about the
| | 00:38 | other elements in the document and all the content here is
another element. There's no text that's directly a part
| | 00:44 | of the body. All the text here is actually inside of other
elements which are descended from the body and we didn't say
| | 00:49 | anything about them, we just said
that the body should be orange, so,
| | 00:52 | Why is all this other text orange, I mean other than
| | 00:56 | because gosh, that's what I would expect to happen.
| | 00:59 | Computers, of course, are notoriously short on intuition,
so just because you think something should happen doesn't
| | 01:05 | mean that the computer automatically is going to do it.
| | 01:07 | There needs to be a mechanism, in my case the mechanism is a
mis-inheritance. So let's consider to the document structure.
| | 01:13 | Take a look at the document tree again.
What happens is that you apply in our case,
| | 01:18 | the color orange to the body element
| | 01:20 | and then that value for a color, propagates its way down the tree
and goes to the other elements in the tree and keeps on going now
| | 01:29 | propagating downwards, downwards, downwards, downwards. Spreading
downward from the body, child elements inherit values from their parent
| | 01:36 | elements. Now. not every property is inherited. Not every CSS property
is inherited, the exceptions generally are a matter of common sense.
| | 01:44 | Things like borders, you wouldn't want a situation where
you apply the border to the body and then every single
| | 01:50 | element throughout the entire document suddenly got the same border. That
would just be yucky. Generally speaking the properties that are inherited
| | 01:56 | are the ones that it just makes sense that they would be like color,
or a font weight, or font family, you know, things like that
| | 02:03 | and the things that aren't inherited are the thinks that it wouldn't make
sense to inherit, like borders and margins and padding in width and so on.
| | 02:11 | Now, there's one thing, you might've
noticed. The links are still blue,
| | 02:16 | the hyperlinks have stayed blue, they're not orange.
| | 02:20 | Basically, the reason for that is that value is only inherited
if there's no competition, if there's nothing to compete with the
| | 02:25 | inherited value, then it applies. For example,
we can take the sidebar and set its color to teal,
| | 02:35 | so have a nice blue there and then if we hit Reload,
| | 02:40 | the foreground of the sidebar, the text and some of the
associated borders have now become teal and the reason for that
| | 02:47 | is that we had two colors in
effect, that's applied to the sidebar.
| | 02:52 | What you see here is that the Orange made its way down to
the sidebar div, but with our new rule, we are expressly
| | 02:58 | assigning a color of teal to that element, so it wins
out the expressly assigned value, it wins out over the
| | 03:04 | inherited value and then the new value that we've just assigned
as the cyber div, that propagates its way down its subtree of
| | 03:11 | the document tree basically to all
the descendent elements of the sidebar div.
| | 03:15 | The reason that works is because inherited values have no
specificity, remember we talked about specificity earlier in the
| | 03:22 | chapter. Inherited values don't have
zero specificity, they have none at all.
| | 03:27 | An inherited value will always lose to a directly assigned
value and the blue for the links is coming from the user
| | 03:33 | agent style sheet. The browser has a built-in style effectively,
that says unvisited links should be blue. So when we said
| | 03:41 | body color orange, that orange color propagated its way down the
document tree and then when it reaches the hyperlink, there are
| | 03:48 | two conflicting values there, there's the inherent value of
orange and there's the directly assigned value of blue from the
| | 03:53 | browser. The directly assign value wins, because it has some
associate specificity the inherited value has none at all.
| | 04:02 | The other thing about inherited values is not only do they
lose their specificity, but they also lose their importance. I
| | 04:08 | could say body color orange important. So that's, you know, that's
really important to me that the color orange be used here.
| | 04:15 | That applies when the color orange is
applied to the body element, the important
| | 04:20 | takes hold, but if we hit Reload here, you see there's no change
because as the orange value is inherited the specificity is lost and
| | 04:29 | the importance is lost, as you can see here,
the links stay blue, the sidebar stays steel.
| | 04:36 | That's what happens when it comes to inheritance,
oftentimes there's a bit of a misconception.
| | 04:41 | People all start talking about the cascade, but what they're
really talking about is inheritance, because they think well,
| | 04:46 | style cascades its way down the document tree. As we've seen
earlier in this chapter the cascade is actually the set of
| | 04:54 | conflict resolution mechanisms that are used to determine
how disparate styles are brought together and a final
| | 05:00 | presentation style sheet is arrived at. The process of having one style
propagate to child elements like color did here is inheritance not cascading.
| | Collapse this transcript |
| Making things really unstyled| 00:02 | This movie is going to show you how to modify Firefox or
Mozilla if you prefer, so that you can see things in a really
| | 00:09 | unstyled state, should you choose to do so. This is actually
a little bit easier to do on Windows than it is on the Macintosh.
| | 00:16 | On OS X you have to Show the package contents of Firefox and
then open up Contents and open up a Mac OS and then open up the
| | 00:26 | res for resources folder and then, once you get in there, you'll
find files like forms.css and html.css. I'm actually going to
| | 00:36 | sort this by kind, so that all the CSS files are in one place. Here's the
style sheet that controls how the view source window is presented in Firefox,
| | 00:46 | but the ones that most directly relate to webpage presentation are
forms.css and html.css and quirk.css, ua is actually for the user agent.
| | 00:57 | So, what we're going to do is, I'm
going to move all this to the trash
| | 01:01 | and having done that, now I'm going to take a file,
| | 01:10 | take a copy of the Javaco file and there you go.
| | 01:13 | There's the webpage without any user agent styles
applied. Now, there are some styles still showing up
| | 01:20 | and the reason for that, I go back to the finder, I'm going
to open this up in BBEdit, you can see that there are some
| | 01:27 | style sheets already applied to
this document so if we remove those
| | 01:35 | and save the document and reload, here we go, just about
completely unstyle, the exceptions being link styling, which
| | 01:43 | is derived from the browser preferences and
so on. You can to do things like go to lynda.com,
| | 01:52 | here's lynda.com in a completely unstyled state
| | 01:55 | and you'll notice we're seeing things like
JavaScript here. JavaScript is showing up.
| | 02:01 | That's because a script element, which is embedded in the
document, by default is set to display none, but we don't have
| | 02:09 | that anymore, we don't have the user agent saying don't show
me scripts. For that matter up at the top of the page, you
| | 02:16 | can see learning at your own pace registered to
registration mark, lynda.com and then, tr.midRow
| | 02:23 | h1#multiuser, blah, blah, blah, that would be the title element
and the style element from the head of the document being displayed,
| | 02:30 | because again there's nothing to say display none. The user agent
style sheet has gone away. The other thing is that, because of this
| | 02:38 | things like the address bar don't
really work presentation wise, because
| | 02:48 | those or in part controlled by the style sheet. Here is my own
website, meyerweb.comp, completely shattered by the lack of user
| | 02:56 | style sheets, so I'm going to quit Mozilla,
excuse me, Firefox, and I'm going to bring back
| | 03:06 | the resources directory from the trash, drag the CSS files back
| | 03:14 | and launch Firefox again. You basically, you can't
change those things in and out when Firefox is running,
| | 03:21 | and have any effect and then we'll
come back to this page, there it is,
| | 03:31 | it's still unstyled, but if we were to go to lynda.com,
| | 03:37 | we would discover that everything is back to normal,
or back to where we want to be and ditto for myweb.com
| | 03:44 | if we happen to go there. That's how you get rid
of the built-in styles and play around with them.
| | 03:50 | If you're on Windows it's pretty easy, you just search for the
file html.css, do you find that file on your hard drive for
| | 03:58 | that filename and you'll find a directory.
| | Collapse this transcript |
| User style sheets| 00:02 | In this movie, we're just going to quickly look at how you would
associate a user style sheet with your web browser so that it would be
| | 00:09 | applied to any page you might visit. So
here we have a copy of Javaco tea design.
| | 00:14 | This is Safari. Every browser is a little different and actually
Firefox makes this, and Mozilla makes this really difficult,
| | 00:21 | but Safari makes it pretty easy and in Windows Internet Explorer
you can do it pretty easily too. Here in Safari you call up the
| | 00:29 | preferences and there are these various
options, but under advanced there's style sheet,
| | 00:35 | and you can pick other, to be able to browse the hard drive
| | 00:40 | and you go and find a file like ex0311.css, choose that,
and you'll notice that the page just changed. That's
| | 00:52 | because the user style sheet has been applied.
| | 00:55 | The contants of that user style sheet, you can actually see right
here, what I'm saying is make all elements have a black foreground
| | 01:02 | and white background, except for a elements, which we
underlined and have a weight foreground and a black
| | 01:07 | background and I've made all these importants as discussed in
an earlier videos because I absolutely want these to apply.
| | 01:14 | These are important to me as the user, I really want them to
happen, so they are important to me so I marked them as being
| | 01:19 | important, and here's the situation.
| | 01:21 | This is what the page looks like and if we were to go to a different
site and you say whatsoever, we'll pick lynda.com, again, there we go.
| | 01:31 | All the background images pretty much are switched off and
| | 01:35 | all background color for that matter and links are being
presented in the reverse text so anyone can do this just,
| | 01:42 | you know, for a bit of a giggle to wonder around
the Internet and see what sites look like with
| | 01:48 | your own user style sheet applied but
this again would be important for me
| | 01:53 | or for anyone who is fully colorblind and needs to be able to
| | 01:57 | distinguish links from the rest of the text,
| | 02:00 | or who has some other form of a disability that they, that
they need to overcome and if we direct a nonselected then,
| | 02:10 | everything just goes back to normal.
| | 02:12 | Under Windows, in your preferences,
what you need to look for is under General,
| | 02:16 | the general preferences tab, there's an Accessibility button
that you can add and in there, there's a place to browse
| | 02:24 | your hard drive for a user style sheet,
| | 02:27 | other then that difference basically, the effects are the same,
it's just a difference in how you navigate your way through the
| | 02:33 | preferences in Internet Explorer as opposed to Safari.
| | Collapse this transcript |
|
|
4. LayoutBox model essentials| 00:01 | In this movie we're going to take a moment and talk about the CSS box
model. This is the model that CSS house for drawing element boxes.
| | 00:09 | Every element generates a box whether or
not it's a continuous box or not. So, this is
| | 00:15 | sort of the basis of everything in XHTML or
everything in CSS, generates a rectangle. So,
| | 00:21 | what I've done here is actually, I have
| | 00:24 | with a little bit of trickery created a way
in which we can actually see the margins. Margins
| | 00:28 | typically are completely transparent. In fact, not
just typically, but always completely transparent,
| | 00:34 | but what I've done is I've wrapped another element around the paragraph,
put a background image on that wrapping element so that that shows
| | 00:43 | through the margin. So anywhere you see this crosshatch that's
actually a margin on the paragraph. We can see that in the source,
| | 00:53 | the wrapping div is what's actually used
to visualize the margins on the paragraph.
| | 00:59 | So if we were to make this margin really
huge, like 50 pixels on top and bottom
| | 01:08 | then, there you go. That's 50 pixels a margin on the top and
bottom and again we're seeing this pattern through the margins,
| | 01:15 | they are not actually being applied
to the margins. You can never make
| | 01:18 | margins directly visible. You can only sort of make them implicitly
visible like I have here. So, if in the future you think to yourself,
| | 01:26 | wow, it would be really cool if I could put something in the background
of the margin, just the margin of this element, that's not really possible.
| | 01:32 | But what this can show is if we just put 1em
of margin all the way around the edge of this
| | 01:38 | paragraph, then you actually get the margins on all four
sides. Now, 1em and em is the unit of measure in CSS,
| | 01:46 | well is related to the font size. In this case,
| | 01:48 | a margin of 1em means exactly the
same as the font size for the paragraph.
| | 01:53 | If I made the font size of the paragraph
temporarily 10 pixels, which is
| | 01:59 | too small to comfortably read, but it makes it easy. Now,
| | 02:02 | if I make it 10 pixels, then
| | 02:04 | the 1em margins will calculate to be
10 pixels wide, so that's 10 pixels of top,
| | 02:10 | right, bottom and left margin, all the way around, whereas if I
| | 02:14 | take the font size up to 20 pixels,
| | 02:17 | 20 pixels of margin all the way around the edges.
| | 02:20 | So, I'm not going to actually set direct
font sizes, but there is margin, there's border,
| | 02:31 | and you can see there's a border on the inside there and that
| | 02:39 | border goes around the content, but inside the margin
of an element and there's also padding, padding going between
| | 02:49 | the margin, or going between the border and the content.
| | 02:55 | Now, I'm actually going to change the
| | 02:59 | margin and padding to the pixel based for a moment,
| | 03:06 | and you can see that there you have pixels instead of ems. I
tend to like ems, because they scale with changes in font size.
| | 03:14 | If I, in my web browser here, hit Cmd + and make the font
size bigger, you can see that the margins are actually growing
| | 03:21 | and if I bring it down, then they shrink.
| | 03:24 | This is one of the reasons why I really like to use em based
| | 03:27 | measures for margins and padding because then
they will scale along with any change in the text size.
| | 03:32 | I've been known to do em-based borders, but borders, honestly, if
you're using them are almost always going to be pixel based, either
| | 03:40 | one or two pixels in my experience,
although they do occasionally go larger.
| | 03:44 | This isn't always the case, there are times when
| | 03:48 | I'll do like a thick top border on an element,
I can say border top of a third of an em,
| | 04:00 | and then that border will also scale with changes in text size.
| | 04:05 | Those are infrequent at best, so what we have there is
| | 04:10 | how the box model works. Now, there's one more thing
| | 04:13 | that should be pointed out, and this is when I'm going to go
back to pixel sizes. Suppose I also set a width for my paragraph.
| | 04:24 | I'm going to give it a 300 pixel
width and I'm going to hit Reload.
| | 04:28 | Now this is actually very useful to see.
| | 04:31 | What's happening here, if you were to count the pixels from
one border to the other, it would actually be greater than 300
| | 04:38 | pixels. Setting a width of 300 pixels, actually means
that you're setting the width of the content area
| | 04:44 | of the elements. In this case, the content of the paragraph
is 300 pixels wide, and then there's 10 pixels of padding
| | 04:51 | outside of that. So that's now a
total of 320 pixels and then the two
| | 04:56 | side borders each add up pixels,
| | 04:58 | so you have 322 pixels from outer border edge to outer border edge,
| | 05:03 | going horizontally and then
| | 05:06 | there's this 10-pixel margin on the left. On the right,
you might think, well there's another 10 pixel margin and then
| | 05:14 | there's just sort of an filled space, but actually,
technically the way CSS is written, what happens is,
| | 05:20 | if you have more space on the right side
| | 05:22 | than your margin would ordinarily fill, then the margin
is automatically increased to fill that entire space.
| | 05:28 | The end result is basically the same,
but it's something worth keeping in mind.
| | 05:36 | This is true for elements and what is known as the normal
flow, which is to say just plain old elements that have
| | 05:41 | text and they're not floating their position or
| | 05:44 | otherwise have had interesting things like that done
to them, that they're just sort of normal text.
| | 05:49 | Elements which are floated, which will we
talking about here, in an upcoming video,
| | 05:54 | don't have this sort of magic margin expansion.
So it's like I say, it's a subtle point but
| | 06:00 | it's one that that's actually worth
mentioning given what we're seeing here.
| | 06:05 | There's a way actually if you had
a situation like this where you wanted to
| | 06:09 | quote, unquote, right align your element,
| | 06:12 | what you do instead of saying margin
| | 06:15 | just 10 pixels all way around is set your top
| | 06:20 | right and bottom margins to be 10 pixels or whatever
it is you want and make the left margin auto for automatic.
| | 06:28 | That means that the left margin
is the one the will automatically size
| | 06:32 | to fill in whatever space is available. So,
| | 06:34 | that's a way to push a box over to the right side, if that's
what you want to do and then this actually also means that
| | 06:42 | if you make both your right and your left margins auto,
that they'll split the difference and center the box. So,
| | 06:49 | a few little things about the box model there and, and margins.
| | 06:53 | But in the end, the important thing to remember here is that
| | 06:58 | if you set a width, if you set an explicit width of some
type for an element you're only setting the width of the content
| | 07:05 | area and any padding our borders or margin beyond that are added
| | 07:10 | to that web so we don't have a box here that's 300
pixels wide, we have a box that's actually 322 pixels wide,
| | 07:17 | from the outer border edge to the outer
border edge. So that's a look at the box model and
| | 07:24 | in the next videos we're going to see how to make use of that
in laying out the Javaco design and create columns, for example.
| | Collapse this transcript |
| Simple floating| 00:01 | For this movie, I'm going to talk about simple floating,
| | 00:04 | as opposed to the more complex floating. Actually, what I
mean by simple floating is just the act of taking an image and
| | 00:10 | putting it over to one side and letting
a regular text just flow around it.
| | 00:15 | It's a very common effect and I'm sure you've seen it on the web
many a time, you've see in print many a time so here's how it's done.
| | 00:24 | If you take a look here in the legendary origins of tea portion,
there's an image of a tea kettle, which is been there throughout,
| | 00:32 | but at this point, it actually needs a little help.
This is the way that an image would appear if it
| | 00:38 | didn't have some floating applied to it
| | 00:41 | and in this case, I've put little
| | 00:44 | square brackets and hyphens on either side of it, so that
when it actually does float we can see the point in the
| | 00:51 | text where it was before we floated it.
| | 00:54 | So we go over to our Exercise file and just very simply,
| | 01:03 | so if we want it to go to the left,
we're going to float it to the left
| | 01:10 | and go back to the web browser and hit Reload,
| | 01:14 | there you go, has floated to the left and you can see
| | 01:17 | the little tie fighter shaped character sequence. They are
| | 01:22 | right near the image, actually with
the little square brackets and hyphens.
| | 01:27 | The image is still, I mean
in the document source, the IMG
| | 01:30 | element is still right there,
but in terms of layout it's been
| | 01:34 | floated to the side and the term float comes from
| | 01:38 | actually the original description of this capability when
it was added to Netscape 1.1, way, way back in the day,
| | 01:45 | that you're able to float an image in which it
| | 01:48 | floats to one side. That's just literally how it was described.
You can float left or you can float right, either one,
| | 01:55 | you can't float center, sorry, really your only
choices for floating are left, right or none.
| | 01:59 | None is the default, of course. Things don't float by default. So it's
been moved over to the left. Of course it's a little bit crowded here.
| | 02:08 | The text is right up against that image, which is
| | 02:11 | just typically the way it is. There's no reason
for the text to avoid the image at this point,
| | 02:16 | any more than it absolutely has to.
| | 02:19 | But this, you'll notice that
the text is of course flowing around
| | 02:23 | at the best it can. So we'll push
| | 02:27 | the text away from the image by adding
a margin to it. So let's see, margin,
| | 02:37 | we can use pixels here, we can give it a top margin
of 10 pixels and the right margin of 10 pixels,
| | 02:43 | bottom margin of 10 pixels and
well, let's go all the way around.
| | 02:47 | So that we'll put 10 pixels of margin on each side.
| | 02:50 | And if we hit Reload, you can see that the images
| | 02:54 | push the text away from itself. That's the margin actually.
The margin has been applied directly to the image,
| | 02:59 | is part of the floated image and so the text can't
overlap the margin. That's why it's pushed away
| | 03:05 | from the image a bit, but notice too, that the image
itself, because of that 10 pixels left margin has
| | 03:11 | pushed itself inward a little bit and its left edge is no
longer lined up with the, the left edge of all the rest of
| | 03:16 | the text. So if we go back and we make that left margin zero,
| | 03:21 | then taking that away means that the image won't be pushed inward
anymore, it will float left as far as it can and stop, but
| | 03:27 | the top, right and bottom margins
are still keeping text away from
| | 03:31 | the visible portion of the image.
We can decide that we want
| | 03:36 | less top margin and more right margin or it could be em based, which
is actually one of my usual favorite things to do, it will become
| | 03:45 | very familiar before we're all done here. If we hit Reload, that's
a little different in terms of placement, but with the em based
| | 03:52 | margins, that means that because 1em is equal to the font size
of the element and images do have font sizes, it's just that
| | 04:00 | typically we don't see anything as a result. If the
| | 04:05 | font size of the page were change by the user, then
| | 04:08 | the margins would scale along with it, so that's really
one of those things that's an interesting question, if
| | 04:14 | you have an image do you want to give it
| | 04:16 | pixel based margins because image is after all pixel based
| | 04:20 | in terms of how tall and wide it is, or do you want to make it em
based because the image is almost certainly surrounded by text and
| | 04:29 | the em based margins can scale along with
changes in the text size. There's no
| | 04:34 | right answer per say. It's really more a question of what sort
of design effects do you want, what's your personal preference,
| | 04:40 | those sort of things, but you do have the option. So that's simple
floating, is basically just take something, you move it to the right,
| | 04:47 | or you move it to the left as we
did and let other content flow around
| | 04:52 | as we're going to see in the next couple of movies,
| | 04:54 | though floats can be used for more than just
| | 04:57 | having images that text flows around,
you can also use it for laying out a document.
| | Collapse this transcript |
| Using float for layout| 00:01 | What you see here is the Javaco site, without the columns, which is why
it looks kind of weird and in this video, what we're going to do is create
| | 00:10 | those columns or at least a basic version of those
columns using floats, that is by floating the columns. So,
| | 00:21 | in our markup, where there are two divs,
| | 00:25 | there's one, this div, with an idea
of content which encloses all of the
| | 00:29 | main content, which we can think of in our design as the quote,
unquote, left-hand column and then there's a div with an idea of
| | 00:35 | sidebar, which has all the stuff
that goes on the right in our design.
| | 00:39 | So the first thing we are going to do here is we're going to float the
content div and give it a width, I'm going to give it an em-based width,
| | 00:49 | cause I'm all about the ems as I'm sure you are and 40em is, you get
40 times the font size. So if the font size happens to be, you know,
| | 00:58 | 15 pixels than it's going to be 600 pixels wide.
| | 01:03 | I'm just going to hit the reload and I'll warn you right now,
that as strange as this looks, when I hit Reload it will be worse,
| | 01:09 | but just for a moment, don't panic.
| | 01:12 | If you squint, you know, really hard
| | 01:15 | and look closely you can see that the
| | 01:17 | content div, The Legendary Origins
of Tea bit, is actually over on the left.
| | 01:23 | Instead of taking up the whole width of the document.
| | 01:26 | Now, I'm going to take that sidebar and also float it. This one, we're going
to float to the right and I'm going to give it a width as well, an em based
| | 01:35 | width as well, I'm going to make it 17em
| | 01:39 | and when we go back and hit Reload,
| | 01:43 | there you go, the sidebar is now floating to the right
| | 01:46 | and has that, you know, specific width. So, these guys are floating
to the left and to the right respectively, and are keeping themselves
| | 01:55 | to their sides and if we actually shrink the
browser window down a bit, you can see that they
| | 02:03 | get closer and closer until all of a sudden the sidebar
disappears. It actually doesn't disappear, it just drops down below
| | 02:11 | the left floated content bar, because the way the floats
work is if you have two close there, next to each other, that's
| | 02:16 | fine as long as there's enough room for them
both, but if you get to the point where they can't
| | 02:21 | go next to each other without overlapping,
| | 02:24 | then they don't overlap, which ever one comes
| | 02:26 | second in the document source, drops down below the first one.
That's just the way flows are defined to behave. So, because there's
| | 02:34 | not enough room here for the sidebar in the content divs
| | 02:38 | to float next to each other, the sidebar
since it comes after the content div
| | 02:42 | in the markup, in the document source it drops down. Now if we
| | 02:47 | scootch this back out, eventually, there is enough room and suddenly
they snap back into place, which is kind of an interesting effect, but
| | 02:54 | clearly not really what you would want in a design that you deploy.
| | 03:00 | There is also the problem of this great big gap between the two. There's
one way to deal with that, although it's not necessarily ideal. Instead of
| | 03:08 | floating the sidebar right, we can float
it to the left and if we hit Reload,
| | 03:13 | what you can see is that the content
| | 03:15 | div floats the left and then, that leaves space for the
| | 03:21 | sidebar div to float, and since it floats to the left,
it floats left until it comes right up against that
| | 03:26 | content div, like literally, they are effectively touching,
| | 03:30 | and the reason they are next to each other, is that there's enough room for
them to be next to each other, but again, if we take the browser window down,
| | 03:36 | when we get to a certain point,
| | 03:39 | there goes the sidebar, it has dropped down and this time, since
it's floating left, it drops down below the content div, but it
| | 03:45 | goes all the way to the left instead of to the right, because
before we had right floating, now we have left floating.
| | 03:52 | If you're in a situation where you have
| | 03:54 | one float dropping below another and you're not quite
for why a good way to diagnose it is to throw in
| | 04:01 | a background. So for example we might put in a background of
FFA on the content div and in that way, we can see its extent
| | 04:11 | and we can, you know, in this case it's as a
little leisure, where we can see exactly where it ends.
| | 04:19 | So, no matter, you know, whether the sidebars floated right
or floated left, by giving the content div some kind of temporary
| | 04:27 | background, it doesn't matter, you know, what
color you use, as long as it's something you
| | 04:31 | either like or can see, or both, this a good way to
| | 04:36 | see the extent of the content.
| | 04:38 | Now with this set up, we do still have the dropping problem
and the problem of the two columns, are so widely separated from
| | 04:44 | each other, at least in this case and that separation can
vary depending on the with of the browser window. So in
| | 04:52 | the next movie we're going to discuss how to address both
of those by using a little negative margin trick to put
| | 05:00 | these two columns right next to each other,
with a constant width, space between them.
| | Collapse this transcript |
| Fixing column drop| 00:01 | So at the end of the last movie we had the situation,
| | 00:04 | seen here were, we have two columns,
one on the left one on the right
| | 00:09 | and variable amount of space between the two. I mean,
it doesn't change as long as the browser window
| | 00:14 | doesn't change the width and very few people ever to change their
browser window. It's, while they're browsing around the Internet, but
| | 00:21 | what this means is that someone has their
| | 00:24 | browser window maximize to 1024x768 is going to see this much of
| | 00:29 | a gap, where someone who has 800x600 is only going to see this much
of a gap and you know, maybe that's Ok with you and maybe it's not.
| | 00:36 | In my case I'm going to assume that it's not and that
we wish to fix this. So, what we're going to do,
| | 00:42 | Well the first thing we are going to do is take the width off
of the content completely. Just no width. Actually, if we
| | 00:52 | save and reload what we discover is that
| | 00:54 | because there's a bunch of content here the float,
| | 00:57 | basically, it expands until it can't be any larger and then
it stops. That doesn't leave enough room for a sidebar,
| | 01:06 | but we're going to address that in just a moment. The next thing
is that we're going to add some padding to the content div.
| | 01:14 | We're not going to have any top padding, we're going to
have a whole mass of right padding, we'll make this 20em,
| | 01:23 | which is wider than the 17em, the width
of the sidebar. The key here is that
| | 01:27 | you want the padding on the side or you want the sidebar to go
wider than the actual sidebar. A little bit of bottom padding,
| | 01:33 | a little bit of right padding to push the content over then if we
go back to the web browser and hit Reload, OK, same basic situation.
| | 01:42 | The content is being actually pushed in from the left by the left
padding, but on the right we have this big blank space, created by that
| | 01:50 | 20em of right padding. And it's into that big blank space that we
want our sidebar to go, because of like I said, the key is that you
| | 01:56 | make that padding wider than the actual sidebar,
| | 02:00 | or whatever it is that you want to float over there. These are
both floats, so we need a way to get that second float, the sidebar
| | 02:07 | up into the space that we just created for
and you might think that you could do it
| | 02:11 | by pulling the float upward by grabbing the top and pulling it upward
but that actually doesn't work, because of the way CSS is written.
| | 02:19 | So what we're going to do instead, is we're going to cheat
just a tiny little bit and when I say cheat, what I mean is
| | 02:28 | exploit the way that the CSS float algorithms actually
work. So the key here is to have a situation where the
| | 02:35 | mathematical width of the sidebar in
this case, the second float is zero or less.
| | 02:42 | So in this case, we have a sidebar with a width of
17em and a, in this case left margin of minus 18em.
| | 02:49 | So that actually, mathematically, gives the layout box,
| | 02:53 | a layout width of negative 1em, the important thing being that it's
zero or less and If we do that, when we hit Reload, ding, tadaa!,
| | 03:04 | there's the sidebar, right where we want it.
| | 03:08 | Why that works is that the CSS float
layout algorithms say that if you have
| | 03:13 | floated elements that have the potential to sit next to each other, you
can have as many of them next to each other as will fit from side to side.
| | 03:22 | And if there isn't room for a float, then that's when it drops
down. Well, here, because the, the width of the sidebar is
| | 03:29 | zero or less, there's always room for it,
there's no such thing as a situation where
| | 03:34 | there can't be room for it really. So,
| | 03:37 | there's a place for it to go and so it's drawn there.
| | 03:40 | The way that it gets drawn is governed by other portions of
the foot algorithm, so you end up with these two columns
| | 03:47 | basically next to each other, in fact, they are
overlapping, I mean you can see that. The background
| | 03:52 | color on the content div makes that very clear, that
| | 03:56 | you're actually overlapping a portion of
| | 03:58 | the content div with the sidebar div.
This is why you have to be careful.
| | 04:02 | If you don't think about this far enough in advance,
| | 04:05 | if we hit Reload here, after having dropped that right padding from 20em
to 3em, yes the content is going to get completely overlapped because
| | 04:13 | as far as that content is concerned there really isn't a
float next to it on the right side for it to flow around
| | 04:20 | because of the trick that we did, making
them lay out with effectively negative.
| | 04:24 | So if you're going to do this, make sure that you leave enough space and
of course have 20em of right padding here, the sidebars with the 17em,
| | 04:32 | so that will leave a difference of 3em, which is the
| | 04:36 | distance between the two and now,
| | 04:39 | we can reflow this, we can change the width and the sidebar
stays right next to the content and there's no problem there,
| | 04:46 | and it reflows very nicely. Just as
you might expect, a layout to do and if we
| | 04:52 | take off our little diagnostic background then there we go.
| | 04:57 | We have one column next to another,
just using a little floating trick.
| | 05:03 | Negative margins actually do get
| | 05:04 | their own video in Chapter seven, so that's somewhere else
to check out if you want to dig a little more deeply into the
| | 05:11 | whole concept of using negative margins in certain ways, but it's
really things like negative margins that allow for some creative
| | 05:19 | design effects and some creative layout effects.
| | 05:22 | If you're thinking at the moment however of using negative
padding, please don't because there is no such thing. Padding
| | 05:28 | can never be less than zero. Margins on the other
hand can be less than zero as we saw in this video.
| | Collapse this transcript |
| Clearing essentials| 00:01 | In this movie we're going to find out how to
avoid problems like you see right here on the screen.
| | 00:05 | I floated to the columns to the left actually
in this case and given them explicit widths,
| | 00:09 | which is a bit of a rehearsal from before, but it helps to illustrate
what's going on. We've got this green stripe problem. That's
| | 00:15 | the footer actually. The footers
all away at the top of the document,
| | 00:19 | up their equal with the two
floated elements, the two floated images,
| | 00:23 | with the two floated columns and you can
see that content right there to the right,
| | 00:28 | that's not good. You might think ok,
well maybe I'll float this sidebar
| | 00:33 | to the right and that will push it down, but actually not so much, that'll
just let the content of the footer flow between the two floated divs,
| | 00:42 | and it doesn't really move down at all. What we need is,
we need a way to push the footer down so it's below
| | 00:47 | these floats and fortunately there's a way to do
that. It's called clear. Clear to the rescue.
| | 00:54 | So what I'm going to do is add a little style
here, footer and I'm going to say clear left.
| | 01:07 | Ok, so what I'm basically saying is I want this element,
| | 01:11 | in this case the element with an ID of footer
to have itself pushed down so that it's
| | 01:16 | beyond any left floating elements that come before it in the
document. Ok, so push it clear on down, clear it down. If we hit
| | 01:25 | reload the footer gets away, it actually hasn't gone away,
| | 01:29 | it's dropped down to the bottom,
but notice, it's cleared to the left.
| | 01:34 | It's clearing down below any left floated element that comes before it. So,
it's not clearing below any right floated elements like the sidebar div.
| | 01:42 | So it's just going to keep going right on under the sidebar div. If we want to
clear it below both, well, if we want to clear it below the right floated div,
| | 01:51 | we can say clear right and that's going to push it down blow any
right floated div, but of course, what happens if that left column
| | 01:58 | becomes taller. We're going to have an overlap problem again.
| | 02:02 | If the left-hand column did become taller on,
let's say a different page, then you'd still have
| | 02:07 | the footer cleared below the right floated sidebar, but then
the content would get showed around and there'd be overlapping
| | 02:14 | and it will be bad, so better still, clear both, which is clear
this footer below any floated element that comes before it,
| | 02:22 | which has no apparent effect here, but
| | 02:25 | should the left column ever become taller, then
| | 02:27 | the footer would keep getting pushed down below the left floated
column, or the right floated column, whichever one is taller.
| | 02:33 | This is why floats get used for layout in the first place,
| | 02:36 | it's because of clear, because you can take the
footer and just stick it on down there and that's
| | 02:42 | pretty much clearing there for you. Now, the
| | 02:45 | way that clear actually works technically is that the
| | 02:48 | top margin of the cleared element is automatically overwritten
and set to a sufficient size that it puts the visible
| | 02:58 | portion of the cleared element below any previous floats. So if
we were to try to set a top margin for the footer, we might say,
| | 03:10 | you know, what we want is we want to, actually let's make that bigger,
we want the footer to be 20 pixels below anything that floated beforehand.
| | 03:19 | You can see I just said margin 20 pixels and that put
20 pixels of side margin to any pixels of bottom margin, but
| | 03:26 | there's no top margin, because the way clear
works, it's overriding that top margin. So,
| | 03:32 | if you want to actually have the footer pushed away from
floats that come before it, what you need do is you need to put
| | 03:40 | the margin you want on the bottom of your floated
elements and it's better to do both of them
| | 03:49 | because you don't necessarily know which one will be taller. So,
| | 03:52 | this way, which ever one of these two is the tallest on a
given page, there will be an extra 20 pixels of bottom margin,
| | 03:59 | on the bottom of the floats and that will push
| | 04:02 | the visible portion of the footer down by 20 pixels. So again,
if you want some sort of separation, 20 pixels, 2ems, whatever,
| | 04:10 | between your floated columns in your footer you need to
| | 04:14 | create that separation through bottom margins on
the floated columns not on the top of the footer.
| | Collapse this transcript |
| Float containment| 00:01 | What you see here is a situation where I've
unfloated the columns for a moment and I've
| | 00:09 | enclosed them in a container div, this is just generally
what this sort of thing is called. There's a div that
| | 00:15 | begins right before the content div and it
ends right after the end of the sidebar div and
| | 00:21 | these things usually have an ID of container. So there you
go, div id equals container. That begins as I say before
| | 00:28 | the content and it ends right after the end of the sidebar.
| | 00:32 | And this is the background color that I've given it. Now,
| | 00:35 | the reason that these columns are floating is that I've actually written
a rule to override the built-in float styles and let me get rid of that now,
| | 00:44 | so that they actually float into place the way they
are supposed to and when I hit Reload, there they are.
| | 00:51 | But the container disappeared. Ok,
that's weird. Why did that happen.
| | 00:57 | That actually happened, because it
collapsed down to have no height at all.
| | 01:01 | So the thing about floats is they don't
occupy the normal flow of the document.
| | 01:06 | The normal flow of the document would be the unfloated, unpositioned, just
very generic float of the document, for example this is all normal flow.
| | 01:16 | All right. This is mostly non-normal float, it's mostly floated stuff,
because we floated the content, we floated the sidebar and that's all
| | 01:24 | not in the normal flow. In fact, the one thing that is in the normal flow here, pretty much is the footer.
| | 01:30 | Also some aspects of the masthead. So,
| | 01:34 | if you have something like a div, that's containing
| | 01:37 | two other divs and you float both those divs, than the
container div has no normal float content, and so it has no
| | 01:43 | height, it has zero height. Now, you might wonder why in
the name of all those holly, that makes any sense at all and
| | 01:49 | actually makes a lot of sense if you look at the tea kettle
| | 01:52 | image that we floated to the left, remember that's
| | 01:54 | an image inside the first paragraph,
that's then been floated to the left
| | 01:58 | and it's sticking out of that first paragraph.
| | 02:02 | If it didn't, if elements always grew to
contain floats that were inside of them,
| | 02:08 | then what we would have is the first
paragraph, and there would be a big blank space
| | 02:12 | before the next paragraph happened, because the paragraph
| | 02:15 | containing that floated image would have to expand the
containment. That would be horrible, nobody would like that.
| | 02:21 | So, because floats were really only intended to do things like
| | 02:25 | taking image or some other element, put it
to the side and let other text flow around it,
| | 02:29 | that's how they're written, but when it comes to layout,
| | 02:32 | that's not what we want, right. We
want this container div to surround
| | 02:37 | visually the two floated columns. So,
there are a couple of ways to address this.
| | 02:42 | Perhaps the most obvious one is the fact that
| | 02:44 | floated elements do grow to contain any floats that they contain.
| | 02:49 | So if we were to float our container then,
| | 02:53 | it would grow to contain the floated
columns. If we hit Reload, it's back.
| | 03:05 | There it is, you can see it, it's
wrapped all the way around, but there is
| | 03:11 | a potential problem there, which is that, let's say, instead of the
background I wanted to do, I'm going to use red, because it will stand out.
| | 03:22 | That's all fine, but then we can't always assume that the
two columns are going to be quote, unquote, 100% wide and
| | 03:29 | push all the way out to the edges
so what we'll need here really is,
| | 03:36 | if we wanted to make sure, we might say with 100%
| | 03:42 | and that would make this container nice and wide, but notice what just
happened. It just got wider than the actual browser window. That's
| | 03:50 | because if you recall, from the first video in this chapter,
| | 03:53 | width is the content width and then any borders
or padding beyond that are added to it, so this
| | 03:59 | is now actually four pixels beyond the right edge of the browser
window and that will be two pixels of border on either side.
| | 04:06 | That's not really what we wanted. So maybe there's another way,
one where we can sort of let it grow out to the maximum extent,
| | 04:17 | or basically where we can return it to the normal flow and yet think
a way into having it contain floats and actually there is such a way.
| | 04:26 | So instead of float left, what
we're going to do is overflow auto,
| | 04:33 | and we need to get rid of the width
as well, hit Reload, then there we go.
| | 04:37 | The reason that this is more desirable
| | 04:41 | is that because the div is back into
the normal flow is not being floated, then,
| | 04:46 | because of the way that CSS rules are written,
that will always expand to be as wide as it can be.
| | 04:50 | Officially speaking it will always
| | 04:51 | expand to fill its parent element, which in this case is the body.
| | 04:56 | But since we didn't explicitly give it a
width of 100%, then it expands as much as it can,
| | 05:02 | including things like padding and borders
and even margins so the content gets
| | 05:08 | squeezed down a little bit, if necessary in this case.
| | 05:12 | So that's normal flow behavior, which
is not how floats work, as we saw before,
| | 05:16 | but the reason that it's growing,
| | 05:18 | even though it's in the normal floats, growing to contain its
floats is that it's been set to overflow auto. Overflow is
| | 05:24 | property that controls how content is drawn if it
happens to be taller than its actual parent. So,
| | 05:32 | you could for example say overflow hidden and then if any of
this content happen to stick out of the container div, then it
| | 05:38 | would just get clipped off, it would be hidden.
| | 05:40 | That's all interesting, but you might wonder why in heck,
| | 05:43 | the results of overflow auto, would be to grow to contain
floats and as it turns out that's because of, a sort of an
| | 05:50 | obscure corner of the CSS specification, which says, effectively
that, I mean it doesn't come right out and say if there
| | 05:56 | are floats then the overflow auto means that a normal flow
element will grow to contain them but because the way our flow
| | 06:02 | auto was described, this is one of
the things that it needs to do. So,
| | 06:07 | if you want to track down the descriptions of how overflow works in
the CSS specification, you can certainly do that, or you can just
| | 06:15 | sort of accept that this is one of
those things that just works by magic
| | 06:18 | and go with it. So if you want to have an element that contains
floats that are within it like this container div is doing here,
| | 06:26 | those are your two primary choices,
either to float the container, or
| | 06:31 | don't float it and set it to the overflow auto.
| | Collapse this transcript |
| Creating a navbar from a list| 00:01 | So in this movie we're actually going to take a look at how
we can change the kind of display role elements can have.
| | 00:10 | That may sound a little abstract.
Let's make it concrete. The
| | 00:14 | nav bar you can see here, actually is gone back to being
an ordered list of 123456, there are six navigation links,
| | 00:22 | and we don't want it to look like that, do we? We want
to be a horizontal navigation bar, and we can do that.
| | 00:27 | You can see here near the bottom of this code the ordered
list with the ID of navlinks, that were the navigation links
| | 00:33 | with all the list items, and that's all cool.
| | 00:35 | So these list items by default,
generate what are known as block boxes.
| | 00:41 | A block box is the same kind of box that would be
generated by a div, or a paragraph, or heading,
| | 00:46 | those sort of thing, when they go
| | 00:47 | completely side to side and they don't
let any other elements sit next to them.
| | 00:52 | Hyperlinks and Spans and other such things generate what
are known as inline boxes, where you can have a bunch of
| | 00:58 | them on the same line of text and there's no problem there, they are
actually wrapped from line to line if necessary. So, what we want
| | 01:04 | to do here really is take the list items, which are generating
block boxes and make them act more like they are spans and
| | 01:10 | rather than changing the actual markup all we really need to do
is say for the list items that are inside that navlinks, oh well,
| | 01:18 | we're just going to have them be display inline.
| | 01:23 | And if we go back over and hit Reload, there you go.
| | 01:27 | Now, the other aspects, the little vertical
separators, those are done with borders as
| | 01:32 | will be discussed in Chapter 7, but the
| | 01:36 | basic point here is that these have got been from
generating block boxes to generating inline boxes. So,
| | 01:43 | what we want to do here is just take a little bit of
a precaution. Remember this is still an ordered list,
| | 01:48 | and there're still list items and in a couple browsers,
| | 01:52 | what you will find sometimes is that
| | 01:54 | even if you make your list items inline, they are still going to
generate their markers- that would be the 123456. So, just to make
| | 02:01 | sure we're going to say list-style none and that will switch off
the markers there. This is not going to have any visible effect
| | 02:13 | here in Firefox because Firefox rather appropriately,
| | 02:17 | at least in my opinion, says, hey, these aren't
| | 02:20 | the list items aren't generating the list item boxes anymore
| | 02:25 | which are block type boxes, so I'm going to
| | 02:28 | because they're generating in-line boxes,
I'm not going to put the marker on, but
| | 02:31 | anyway, you know, not every browser apparently agrees with
that. So you say list-style none, just to cover your bases
| | 02:37 | and make sure that those markers don't show up in other browsers.
| | 02:41 | So, that's display. There's really one other
| | 02:45 | display value, no, there are two other display values that are of
| | 02:49 | large interest, but there's one other that I'd like to point out.
| | 02:53 | You may recall, or you may not, that there is
| | 02:59 | a b elements inside the h1, which is used to set the
color of the about tea text and the b element is inline.
| | 03:09 | By default the b element generates an inline
box. So, what we're going to do here,
| | 03:14 | I'm going to set the background of it for a moment to be black.
| | 03:20 | Now, I'm going to go over and hit Reload.
| | 03:23 | There's that black inline box, well,
there's that black background on that inline box
| | 03:28 | and now, what I'm going to say is display block.
| | 03:32 | And if we now hit Reload, there you go,
the b element is now generating a black box.
| | 03:40 | For those of you who have some experience with XHTML and HTML,
this doesn't mean that the b element has gone from being an
| | 03:46 | inline element, to a block element.
| | 03:49 | The only change is in the kind of box
that's being generated. There is one other
| | 03:54 | value of display that gets used fairly often and that's none.
Display none means just don't display a box for this element,
| | 04:03 | and if we hit Reload, the b element is
going to go away right now. All gone.
| | 04:09 | It generates no box, it has no influence on the layout of the
document. This is used primarily to do things like hide things
| | 04:20 | that need to be sort of popped up as it were,
| | 04:23 | sometimes drop down menus are hidden in their unhovered state,
| | 04:27 | they are hidden by using display none. Sometimes it's by using visibility
hidden. That always depends. The other reason that display none gets used
| | 04:36 | is for things like printing, suppressing
the display of things in print, which will
| | 04:40 | be discussed in Chapter 9. But that's a
display, basically displays what you fiddle,
| | 04:46 | with the kind of box that an element generates.
| | Collapse this transcript |
|
|
5. Adding Colors and BackgroundsColoring text| 00:01 | So in this chapter, we are going to
talk about color and background colors.
| | 00:05 | Setting both the foreground and the background of various elements
to have colors in the case of background images. In this first video,
| | 00:13 | we're going to talk color, and we're just going to look very
quickly at how to set color, the foreground color on elements.
| | 00:22 | and, as you can see here, what we have is we have a basic document with
all the colors taken out of it, the layouts there and everything but
| | 00:29 | the colors have been taken away,
| | 00:30 | except for, there actually are a few, cause you can't take out all
the color. Text for example is black and the reason that happens is
| | 00:38 | due to the browser. Here in the preferences for the web browser
you can see that text has been configured to default the
| | 00:44 | black, backgrounds have been configured to default white,
unvisited links to blue, visited links to purple, so that's,
| | 00:54 | those effectively create CSS rules that the browser applies to this
document and that's why text is black by default. Now, you might not
| | 01:02 | think of that as a style, and yet it is, because if the text
had no color, you couldn't see it, it would be completely
| | 01:08 | transparent. So what we see here is that there are unvisited links,
like about us and brewing and drinking up near the top, those are blue.
| | 01:15 | The visited links are products, contact us, those are purple.
| | 01:18 | There is a of a little bit of color and that's in the images, and
that includes the Javaco across the top of the document. That's
| | 01:25 | an image just like the picture of the tea kettle, or the picture
of the tea, over to the side. Those just have the colors that
| | 01:31 | are part of the images, I mean, that makes sense.
| | 01:35 | So, with CSS, we can affect the foreground
| | 01:38 | of elements, we can affect the foreground color. Now, what that
really means is we can change the text color. So. as an example,
| | 01:45 | we can say that all of our paragraphs
are going to have a color of teal,
| | 01:52 | which, I don't know why, that always makes
me to think of a duck, but anyway teal.
| | 01:58 | We hit Reload on, in Firefox, and there you go, we have
teal paragraphs, teal text on a tee site. So that just
| | 02:09 | changes the foreground color, which as
I say is equivalent to the text color.
| | 02:13 | Now, we can also say for example,
h2 color orange. Now I hit Reload.
| | 02:25 | The h2 element there, turns orange,
but notice something interesting.
| | 02:29 | The border turned orange too.
| | 02:32 | Now, that doesn't always happen. Why that happened here is that
if you go and look at the basic style sheet, there is an h2 here.
| | 02:42 | There's a rule for h2s that says
| | 02:45 | the bottom border should be one pixel and solid.
It doesn't say anything about the color.
| | 02:50 | You can, with orders, specify the color directly
and we'll talk about that in a different chapter.
| | 02:56 | But that wasn't done here, is just border bottom 1px solid.
| | 03:02 | So the way CSS is specified, what it says is, if there's a border,
| | 03:08 | but there wasn't an explicit border color assigned to it,
then the color of the border should be taken from the color that
| | 03:15 | the value of color for the element. So when I said color
orange, the web browser said, well, I've got this border here,
| | 03:21 | and it doesn't have an explicit value, I'm going to copy that
orange. You can override that. You could say border-color black and
| | 03:38 | having done that, you set color orange to the color black.
| | 03:43 | There you go, a black border.
| | 03:45 | Now, whether or not you want to do that is the only question,
but you certainly can, if you want to have your border
| | 03:51 | color be different than your text color, then you can have it
that way or if you want the border color to automatically pick
| | 03:58 | up the color the text is, you can do that too, and there are
other ways to specify color, then just sort of these one force
| | 04:06 | words like orange and black and teal.
| | 04:09 | Well, we'll see what those are in the next video.
| | Collapse this transcript |
| Defining color in CSS| 00:01 | In this video we're going to talk about the five ways to define color in
CSS. The first one, you've already seen, or at least if you've watched
| | 00:08 | the preview video, that's keywords, things
like black, or White, or teal, or orange,
| | 00:14 | just very civil names describe the color that they are creating.
| | 00:18 | There's a limited list of those, which we'll see in
just a moment. We also have a Hex, or hexadecimal,
| | 00:24 | which there's an example here of CC3300
| | 00:28 | and then the short hexadecimal version.
| | 00:30 | You can show things down basically, under certain circumstances,
| | 00:34 | and we also have our RGB Decimal notation.
| | 00:36 | For RGB values, you have the RGB with
parentheses and inside of these parentheses
| | 00:40 | you put the actual color that you want, in this case the decimal 204, 51,
0, or if you're going to use percentages, use something like 80%, 20%, 0%.
| | 00:53 | Let's look at the keywords for a moment, there's a list of 17 keywords
in CSS 2.1. In previous to CSS 2.1 there was actually a list of 16,
| | 01:04 | but 2.1 added orange. So, sometimes we
refer to CSS 2.1 as CSS, now with orange.
| | 01:10 | You can see here in this image that
we took from the CSS 2.1 specification,
| | 01:15 | these are the 17 named colors
and their hexadecimal equivalents.
| | 01:21 | Any browser that claims to be CSS conformant,
| | 01:24 | has to be able to deal with these color names.
| | 01:28 | Now, as you can see, these have hexadecimal
equivalents, for example, red is ff0000,
| | 01:35 | which basically means all the red you
can give me and no green and no blue.
| | 01:40 | White all ffffff, black all zeros.
| | 01:44 | The keywords are great if you just need one of the 17 colors
and have no need for any more precise color then that, but
| | 01:50 | you probably will need more precise color than that, as
an example something that you might pick out of a color
| | 01:56 | picker, like the one we see here from Adobe Photoshop.
| | 01:59 | You can see right near the bottom of the dialog box, sort of to the right
and center, there's a hexadecimal value right there, CC3300. That describes
| | 02:09 | this particular color that's showing up in the preview box
and right above that hexadecimal value, there's an RGB
| | 02:17 | of 204, 51 and 0. Those are decimal RGB numbers.
| | 02:22 | So this particular shade of orange red CC3300,
| | 02:28 | or 204, 51, 0, those are two different ways of expressing exactly
the same color. Now, the other stuff there, you see the HSB, the Lab,
| | 02:34 | HSB, the Lab, the CMYK. Those are the things
that Photoshop allows you to do. You can't
| | 02:38 | specify CSS colors using HSB, Lab, or CMYK notation,
at least not yet. Maybe one day, but not right now.
| | 02:47 | So let's go back to our list of keywords and there's our CC3300.
| | 02:52 | In hexadecimal notation, each pair of digits
| | 02:56 | describes the given color level. So, the first two digits, CC,
that's two-digit hexadecimal number that describes how much
| | 03:03 | red there's going to be and that's on a scale of 002ff,
| | 03:08 | the hexadecimal being in the counting system that goes
from zero to f and then starts over. So, the 33, is
| | 03:16 | that level of green and then 00 is that level of blue, which would be
none. So, in hexadecimal all white is all Fs and all black is all zeros.
| | 03:25 | CSS offers a short hexadecimal notation, where if you have a
value that consists of two repeating pairs, like CC3300, you
| | 03:34 | can short it down to just C30.
Now, if we had CA3701, there's no way
| | 03:41 | to take it down to the short hexadecimal notation, only if you
have these explosive pairs, because when a browser sees C30,
| | 03:49 | it says, oh ok, I have to expend this to CC3300.
| | 03:52 | Now, is one better than the other to use.
| | 03:55 | Only if you like one better than the other. From a browser
point of view, from my results point of view, these are
| | 04:00 | functionally equivalent. C30 would give you exactly the same color
that CC3300 does. So it really comes down to which one you prefer.
| | 04:08 | You would rather have colors written out even when there
are working in pairs. If you want them in the six digit
| | 04:15 | notation, then that's fine, do that. If you like to
compress it down to the shorter Hex, then go for it.
| | 04:20 | Now, I said that the hexadecimal pairs go in the region 00 to FF.
That's equivalent to the decimal range zero to 255, which is why
| | 04:29 | the RGB decimal notation uses that range. White
in RGB decimal is 255, 255, 255, black is 0, 0, 0.
| | 04:38 | So the equivalent of CC3300 is 204, 51, 0, just like we
saw on our Photoshop color picker, CC3300, 24, 52, 0.
| | 04:50 | Hexadecimal value CC is exactly
equivalent to the decimal value 204.
| | 04:57 | 33 in hexadecimal is 51 in decimal.
| | 05:00 | So that's where RGB decimal come from, it's a base 10 decimal
way of representing hexadecimal values, because not everyone can
| | 05:10 | comfortably think in hexadecimal. Strange but true, so RGB decimal is
there to make things a little easier and easier still is RGB percent,
| | 05:20 | which in equivalence to our RGB 204,
51, 0 is an RGB of 80%, 20%, 0%.
| | 05:27 | RGB percentages go with a range
as you might expect, 0% to 100%.
| | 05:32 | White is all 100%, black is 0%. as we
can see here. So how to get from
| | 05:38 | RGB decimal to RGB percentage, is to divide each
of the decimal values by 255. So our 204, 51, 0,
| | 05:47 | 204 divided by 255 is 0.8 which is 80%,
51 divided by 255 is 0.2, that's 20%
| | 05:55 | and zero divided by 255 of course is zero or 0%.
| | 05:58 | There're many people who find it much easier to think
in terms of color percentages than they do in terms of
| | 06:04 | decimal values on a rage, 0 to 255 or hexadecimal
on a range 00 to FF. The drawback is that
| | 06:12 | because of the way browsers are, percentages are a
little bit courser, you should be in theory able to use
| | 06:17 | the decimal fractions with the RGB
percent, things like 66.67% and 42.5%,
| | 06:24 | but browsers don't always handle that very well. Some of them will
round down those fractions, so 66.67% becomes 66%. There are others that
| | 06:34 | do or may in the future, round
| | 06:36 | to the nearest whole number so the 66.67% will become 67%. So you get
these slight differences in colors possibly between browsers if you use
| | 06:47 | percentage fractions. So, if you prefer
to use percentages, that's great.
| | 06:53 | By all means, do so. If you prefer to
use the RGB decimal because they are a
| | 06:57 | little bit more precise instead of basically a hundred points
from 0-100, you have 255 points, from zero to 255. You can do
| | 07:05 | that, or hexadecimal. Whatever you like. In a lot of
cases, honestly, you're probably going to pick a color
| | 07:11 | with a color picker or on a color wheel of some kind,
| | 07:14 | once you find the color values that you want, you can get them
| | 07:18 | out of your program if you're using Photoshop or
| | 07:21 | if your sampling colors off of images, whatever
it is you're doing, your tool will tell you,
| | 07:26 | and probably in one of several ways what those color values
are, you can probably get a six digit hexadecimal value out of
| | 07:33 | it, or RGB 's from zero to 255 or even percentages.
| | 07:39 | So, you know, you can make some up in your
style sheet, however you want to do them.
| | 07:43 | There's no one that's objectively better than another. It's
really just what makes you the most comfortable and as I say what
| | 07:50 | your tools yield for you. If you use a Photoshop
color picker, and it's got that little six digit Hex
| | 07:55 | box right at the bottom, you can just select it and
copy it and paste it in your style sheet and there you go. But,
| | 08:02 | however you do it, not only can you apply these colors to
text as we saw in a previous video, but also to backgrounds of
| | 08:09 | elements as we'll see in the next video.
| | Collapse this transcript |
| Coloring backgrounds| 00:01 | Right, as we've seen earlier in the chapter, there are very simple
ways to set foreground color and also a variety of ways to set color
| | 00:08 | in general and five different ways of setting color
| | 00:10 | using any Keywords or Hexadecimal or Decimal, or
| | 00:14 | you know, RGB, those various approaches.
So, what we're going to look at in
| | 00:19 | this video, is we're going to look at setting
very simple backgrounds. Basically just
| | 00:24 | flat colors, solid background for various elements.
| | 00:29 | You might be used to this, from sort
of old school design, where you can say
| | 00:40 | set the background color on the body to something
like E3EDC2 and having done that, you end up with
| | 00:52 | sort of a mint tea green background.
So nothing unusual there as compared to
| | 00:59 | possible design, which is roughly equivalent to saying
| | 01:01 | body BG color equals whatever, E3EDC2 for example.
| | 01:07 | Primary difference in CSS between plain old background
colors in the markup and old hexadecimal design and
| | 01:14 | during the CSS way is that you're not limited
to setting background on the body a few table
| | 01:22 | elements like table cells. You can set a
background color for anything. So you could say,
| | 01:31 | the element has an ID of masthead, I'd like to have
a background color, whose hexadecimal value is ABD240
| | 01:38 | and I would like the element with an ID
of navlinks, have the background color
| | 01:50 | whose hexadecimal value is 686397. Ok,
| | 01:56 | and having added those two, which I'm going to highlight there.
| | 02:00 | We can go back to Firefox and reload and
there you go, in our web browser we've set
| | 02:06 | the element with the ID of masthead to have a green background,
and we set the element with an ID of links to have a sort of a
| | 02:14 | dusty purple background, and that's what happened, very straight
forwards and what happens with these background colors is that the
| | 02:20 | color is filled into the entire background area of the element,
the content area and the padding and the border area, so
| | 02:27 | wherever that background area is for that element,
| | 02:30 | that's where the background color is going to go. The one place where
the background color does not go is into margins and we're going to
| | 02:35 | talk more about margins and padding and
border areas in a different chapter, but
| | 02:41 | for now just that's where background color goes.
| | 02:44 | Now we can continue the trend and say sidebar
background color and this one will do as an RGB,
| | 02:56 | RGB value 23%, 24%, 18% in this case and
that will fill in the sidebar with this sort of
| | 03:06 | grayish, greenish background color.
| | 03:09 | Now, I'm not making these up of course,
these come from the design, the
| | 03:13 | the designer put together for this page.
| | 03:16 | In fact, one of the reasons that this is a good idea for a
designer to do this sort of thing when I'm in charge and
| | 03:22 | if there isn't a designer in charge, then
really unfortunate color combinations result.
| | 03:27 | So I'm not just making these up at random,
What this does illustrate, of course, is that
| | 03:31 | you're not locked into a single color
| | 03:34 | throughout your entire style sheet. You really only have to stick
to a given color value for a given property. So for a given
| | 03:41 | background color, you have to pick one of the various color value
types RGB percent, RGB decimal, hexadecimal, and use that, but
| | 03:50 | it's like you have to use hexadecimal all the way through your style
sheet or you have to use RGB percentage all the way through your
| | 03:55 | style sheet no matter what. Use what you like best, or use
what makes the most sense. If you pulled a few of your
| | 04:01 | values off of the Photoshop color
picker and you just, you know,
| | 04:06 | selected the hexadecimal value at the bottom, copied it, pasted
it in your style sheet and then somewhere else you knew you wanted a
| | 04:12 | certain percentage combination of RGB colors,
| | 04:15 | not a problem. If you want to go through the effort of converting
them all to be consistent, you can do that to, its up to you. Now,
| | 04:22 | one of the fun things you can do,
I'm going to set a background color for
| | 04:29 | the h3s, the headings in the sidebar, this is
going to be 155, 150, 202, which is sort of a
| | 04:38 | pretty light dusty purple, sort of
thing. Ok, so that's the color that
| | 04:43 | we're going to use for that h3s here, which is
the tea that day and post archive, but, you can also
| | 04:49 | use background colors in sort of creative ways to create
what are effectively optical illusions, I mean optical
| | 04:56 | but they are still illusions. So,
should I say RGB 227, 237, 194,
| | 05:06 | let's see what we have it for, I hit Reload and
hey, we get that, it looks like I've
punched pieces out of the sidebar
| | 05:13 | and let the bodies background color show
through. that's not what I did, I actually set
| | 05:18 | the h3 backgrounds to have exactly the same color
| | 05:21 | as the body and so these sort of lead together in a sense.
| | 05:25 | The eye can't distinguish where one ends and the
other begins, because they have exactly the same color
| | 05:31 | and they have exactly the same color because 227, 237,
194 is the RGB decimal equivalent of E3EDC2. This
| | 05:42 | hexadecimal value, is exactly the same as this decimal value.
| | 05:46 | Maybe we don't want to do that, maybe we want to go back to our
| | 05:48 | late dusty purple, so I'll just
set them back to 155, 150, 202,
| | 05:53 | and if you watch carefully the tee of the day
and the post archives when I hit Reload
| | 05:57 | ding, there you go, that's what this h3 backgrounds are, just that before
I happened to be filling them in with the same solid color that the body uses,
| | 06:05 | now I'm using a different color. So just,
you know, a little tip, sometimes you can use
| | 06:11 | two different elements background,
to sort of join them together visually.
| | 06:15 | And you can use your imagination as to what sort of
effects would be possible there and this was just one. So
| | 06:22 | that shows us how to use simple background colors and in the next
| | 06:27 | few videos, we're going to look at how to add images
to backgrounds and do interesting fun things with them.
| | Collapse this transcript |
| Applying background images| 00:01 | So, so far we've been in this chapter, we've been talking about
color and how to add color to the foreground or the background.
| | 00:08 | Now it's time to do something a little more
interesting with backgrounds and that's add images,
| | 00:12 | or an image, as the case may be and add one image
per background, although you can add images,
| | 00:19 | you can have as many different backgrounds as you like have images in
them. So, what we're going to do in this video is just take an image
| | 00:27 | and apply it to the background of an element
using CSS. Now, if you look here, what you see is
| | 00:33 | sort of a basic version of our Javaco design,
| | 00:37 | and what I've done in the content area is
| | 00:39 | I've given it sort of a light gray background,
so everything underneath the masthead and
| | 00:44 | that little white separator between the masthead and the rest
of it, we have this light gray background, and that's the
| | 00:51 | area to which I'm going to add an image. So you
can see, here's the style, the CSS setup, to give
| | 00:59 | element with an ID of content this background color, and now I'm
going to add a background image and the way this works is you actually
| | 01:10 | have a reference, a URL reference to an external file, an image,
although theoretically you could put any kind of file back there.
| | 01:20 | In practice, you really can only add
| | 01:23 | rest images, that the format of the browser understands
like GIF, or JPEG or PNG or something like that. So,
| | 01:31 | I'm going to add a reference to image curl-gray.gif. Now,
| | 01:38 | this URL is a, is a relative URL, which you may be familiar with in turn
relative URLs in hyperlinks. You can also do an absolute URL if you wanted to.
| | 01:49 | We're going to use a relative URL.
| | 01:52 | Image URLs in URLs in general in CSS are relative to
| | 01:55 | the location of the style sheet, not the location of
| | 01:59 | the HTML document, or the XHTML document. So,
| | 02:03 | if I had a URL reference in my external style sheet, then the URL
| | 02:09 | reference to an image from an external style sheet
| | 02:12 | would be relative to the location of that external style sheet.
Here, since the style sheet is embedded into the HTML document,
| | 02:19 | basically it's taken from where the style sheet is, the subject
just happens to live inside this XHTML document. So,
| | 02:25 | what this is going to do is, from
the location of the style sheet, the
| | 02:28 | browser is going to go to an images subdirectory
from the directory that the style sheet is living in
| | 02:34 | and then it's going to look for the image curl-gray.gif,
| | 02:39 | which if you look here, here's
images and there's curl-gray.gif. So,
| | 02:47 | having done that and hit save,
if we hit Reload in Firefox, tadaa!
| | 02:53 | the image has shown up, is being repeated through out the entire
background of the content, the element with ID of content.
| | 03:02 | It's just one image is just one instance of the scroll, which is
just been repeated again and again and again and we don't see that
| | 03:10 | background color anymore, because it's completely obscured
by this repeated image, this tiles image. In fact, if we
| | 03:16 | scroll down you can see that it goes
as far as the end of the content area.
| | 03:21 | So we can also do this on the body if we
particularly felt like it instead of having content,
| | 03:27 | have this background color, which we can shift it to the body and then
that would go throughout the entire body, not just the content area.
| | 03:36 | Of course we wouldn't be able to see it here, where the masthead and the
navlinks are, because those are basically in front of the body quote, unquote.
| | 03:44 | They're drawn over top of the body and so their background is
obscure, the body background behind them. If we were to take
| | 03:50 | this background away, then we would see this repeated
| | 03:53 | graphic throughout the masthead and the
navlinks here. So that's how you add an image to
| | 04:01 | an element and its really pretty darned easy. What we're going to see
in the next few videos is how to do more than just sort of simple tiling
| | 04:12 | and affect the direction of the tiling,
| | 04:15 | even the placement of the image and other fun stuff like that.
| | Collapse this transcript |
| Manipulating the direction of background images| 00:01 | So what we're going to talk about in this video is
| | 00:03 | one of the fun things you do with background images.
As we saw in the previous video, you can associate
| | 00:10 | an image with the background, so that it is repeated throughout that entire
background, but that's not the end of it, you can actually affect how
| | 00:19 | the images repeated. It doesn't just have to be sort of mindlessly
tiled and fill in the entire background. As an example,
| | 00:28 | here's where we were at the end of the, of the previous
video. We can with probably background- repeat
| | 00:37 | say let's repeat along the x-axis, which is the horizontal axis. If we
do that and hit Reload, there we go, the image is repeated horizontally,
| | 00:48 | along that which is to say along the x-axis,
and now, the rest of the background
| | 00:53 | where the image isn't being repeated, we can see the
background color again, we can see the 85%, 85%, 85% gray.
| | 01:00 | So in the top left corner the image is repeating horizontally.
| | 01:04 | You can also have it repeat vertically,
| | 01:07 | and that's as simple as just saying repeat-y.
| | 01:11 | Not why as in the question, but repeat along the y-axis. So now
the image is repeating along the left side here, up and down,
| | 01:20 | is starting the top left corner
| | 01:23 | and just repeats along that edge there and again we can
see the background color wherever the image is not drawn.
| | 01:31 | There's one more value you can use here,
| | 01:33 | which is, you might not want your image to repeat for
whatever reason, you might just want it to show up once,
| | 01:38 | and then be there and with no repeat that's
exactly what you can do. The image is placed
| | 01:44 | by default in the top left corner of the element background and with
| | 01:48 | background repeat or no repeat, it appears once and that's it. Now, with a
little image like this, that might not be such a big deal, but you might have a big
| | 01:58 | watermark of some kind that you want to put behind the top left
corner of a document or, you know, some sort of transition effect.
| | 02:07 | That's where repeat x, repeat y
| | 02:10 | and no repeat can come into play. With repeat x you can create with
just a little tiny image of a gradient, you can create a drop shadow.
| | 02:18 | For example, along the bottom of something
| | 02:21 | or along a top of something. So that's where this, this repeating comes into
play and with background repeat you can say no repeat, repeat x, repeat y.
| | 02:31 | The default value is repeat, which is just to mindlessly title
| | 02:35 | throughout the entire background. That's the default value.
| | 02:39 | Now that's all well and good but of course, you might want
to have your nonrepeated image appear someplace other than
| | 02:46 | the top left corner of the elements background and that's
exactly what we're going to talk about in the next video.
| | Collapse this transcript |
| Positioning backgrounds| 00:01 | As you just saw in the previous video,
| | 00:03 | you can not only place an image in the background of an
| | 00:07 | element, you can also affect the way it repeats, you can have
it repeat horizontally, vertically or not repeat at all.
| | 00:14 | Now, what we're going to look at in this video,
is how you can effect the placement of that image an
| | 00:18 | we're going to do that with our little no
repeated image here, or nonrepeated image
| | 00:22 | up, in the upper left-hand quarter of the content.
| | 00:27 | Let's say a background position top. This is not the end of what
we can do, but it's a good place to restart. We hit Reload,
| | 00:39 | the, tadaa! The image goes right into the center of the top of
| | 00:43 | the elements background. If you only have
one keyword and this is a keyword top, then
| | 00:51 | it's assumed that the one that you
didn't provide is center. So there are
| | 00:56 | five keywords in that position, there're top, bottom, right, left
| | 01:00 | and center. So I could say top center, and that would be
exactly the same as just saying top, because if I don't
| | 01:10 | have that second keyword, then center is assumed. If I
change this to say right, then the browser would assume
| | 01:21 | that I wanted it in the right center. You can see it's over there on the
right edge in the vertical center of the element, not the center of the page.
| | 01:29 | The center of the element. So our center element is,
| | 01:32 | that's been lined up with the midpoint,
the vertical midpoint of that element. OK, now,
| | 01:40 | this is equivalent, this top or top center,
| | 01:43 | can be expressed in different ways. I can say 50% 0. What that means is
take this element and put it 50% of the way across the element and 0 down,
| | 01:54 | so don't push it down at all, just put it
50% of the way across and that comes out to be
| | 01:59 | basically top center, 50% and was actually having as the
midpoint of that image is lined up with the midpoint of the
| | 02:07 | element and then in the case of zero
is just not pushed down at all.
| | 02:12 | It can be. The thing is that the order matters here. When it
comes to numbers, the order matters. With the keywords you can
| | 02:18 | center top or top center, doesn't matter
it's still going to end up in that
| | 02:22 | top center area, but with the numbers it's always the horizontal position
first and the vertical position second. If I reverse this, I'm saying don't
| | 02:31 | push the background image over at all, but
| | 02:33 | but align it vertically, at the 50% point, and you'll to
see that this is going to flip over to the left center.
| | 02:40 | Because, again, with the numbers, the order matters. If I want
it top center, I got to say 50% zero. So only if I just set 75%,
| | 02:50 | and I don't provide another number, that's
the horizontal position, that's going to
| | 02:54 | place the image three quarters of
the way across the element and 50%
| | 03:01 | down. So, 50% being in the mid, vertical midpoint of that element, so you
can see there it is, its three quarters of the way across and vertically
| | 03:10 | it's centered, it's up to 50% point because, when I have a number like
this, when I just 75% it's assumed that the other number is 50% and since
| | 03:19 | the horizontal always comes first, that
means that a vertical 50% is always assumed.
| | 03:24 | Now we don't have to always stick to percentages, I could say I want
this to be 75% of the way across and 50 pixels down from the top.
| | 03:35 | So there, the top edge of that background image is going to be 50
pixels below the top edge of the element and is going to be three
| | 03:43 | quarters of the way across the
element. Now the fact that the image
| | 03:48 | bottom happens to line up with the boarder, there that is a total coincidence. If I were to change the text size, then you can see
| | 03:57 | that alignment doesn't actually exist. That's completely
an illusion, just happens to have landed there.
| | 04:05 | Now, where this get's interesting is if we do
| | 04:09 | actual repetition. So suppose I say repeat-x
from my background position of 75% 50 pixels.
| | 04:17 | I say repeat along the x-axis and it does. Repeat x doesn't mean repeat
right, it actually means repeat in both directions along the x-axis.
| | 04:26 | So from that placement of 75% 50px,
| | 04:32 | which is right where it was before, the image
is tiled out horizontally in both directions.
| | 04:39 | And if I flip it so that I'm actually doing repeat-y instead of
repeat-x, and again, from that position, from that placement,
| | 04:51 | it repeats in both directions, both upwards
| | 04:54 | and downwards along the y-axis. There's no such thing as repeat down
in CSS. There's only repeat-y and it goes in both directions here. So,
| | 05:03 | why that makes a difference, you
can actually see, if I were to say
| | 05:12 | repeat-y top center, that's going to move this so that
| | 05:16 | the origin image, which is the placement of the
| | 05:19 | first image is in the top center, just like we saw
before and then it's tiled vertically in both directions.
| | 05:27 | Bu that means, effectively, it's
visually justified to the top of
| | 05:31 | the element background and if I
were to change this to le's say just
| | 05:36 | center, then watch over here what
it happens when I hit Reload.
| | 05:41 | See how there is that slight change. What's
happened now is that this straight is being
| | 05:45 | centered, because the origin image, the first placement is right
in the middle of the element and that's repeated in both directions.
| | 05:53 | You get the stripe effectively visually
centered within the element background so
| | 05:58 | there's a little bit of, of images, of visible at the top of
the element background, a little bit visible at the bottom
| | 06:03 | of the background. So that's why there's a
difference in where you position the background image
| | 06:09 | and then you tile it. It is exactly the same
thing if we were to do a full on repeat,
| | 06:13 | which we can do if the background position is centered
| | 06:20 | and then we just repeat. The tiling is centered within
| | 06:25 | the element effectively, so no matter how
we change the size of the browser window,
| | 06:32 | the pattern always stays centered within
| | 06:36 | the element, whereas if I were to take this back to the let's say top left
or 00, which is the default value, then the origin image is going to be
| | 06:48 | the top left corner and no matter how that element changes size,
| | 06:56 | The painting is always anchored to that,
| | 06:58 | background is always anchored to that top left corner. So,
| | 07:02 | there's how background positioning can actually affect
the way that the tiling looks in a web browser.
| | 07:11 | In the next exercise we're going to take a look at
| | 07:15 | how we can bring all this down
effectively into a very simple expression.
| | Collapse this transcript |
| Background shorthand| 00:01 | So what we've seen for the last 2 videos is was ways of
| | 00:04 | placing an image into the background of an element
and changing how its positioned, how it's repeated.
| | 00:11 | All that has left us with, if you look at the CSS, is something,
| | 00:17 | it's honestly a little reverse and kind of repetitive, it's background
color, background image, background repeat, background position.
| | 00:24 | It would be really nice if this were all expressible
in a single property and fortunately it is.
| | 00:34 | So we'll join all this stuff up and get rid of the color
part and just leave myself with background, RGB 85%, 85%, 85%
| | 00:43 | URL of the image I want to use, here's the repeat,
here's the position and if I save that, and reload,
| | 00:50 | there's a difference because that's exactly
equivalent to what I just had, with all the
| | 00:55 | individual values listed out one by one and the individual
properties listed out one by one. This is background as a shorthand,
| | 01:02 | it's a shorthand for that other thing
that we saw before. Now, the thing about
| | 01:07 | background as a shorthand is that
the order that these things go in,
| | 01:12 | mostly doesn't matter with one exception.
So if I decided that I didn't want my color,
| | 01:18 | if I think it makes more sense to
have the color at the end, so that I say,
| | 01:23 | here's the image, here is the image repetition, here's where
the origin image gets placed and then here's the background
| | 01:28 | color, is sort of fall back if my image doesn't
show up. You can write it that way, that's fine.
| | 01:33 | The in which these are it doesn't matter
except for the background position. So,
| | 01:39 | if you have 00, or if we had a 50% 75%, those have to stay together
and they have to be in the order horizontal and then vertical
| | 01:51 | just like they do with background position, because basically
what you do is you are taking the value from each of those
| | 01:56 | background image, background position,
background color and you're putting them all into
| | 02:02 | this background shorthand property, and you can put them
in whatever order you want, but you can't like split them up
| | 02:07 | and I can't take the background position values and just split them up and
put them wherever you want and expect the browser to know what you want to do.
| | 02:14 | So we could at this point, change the way this is setup, so that
| | 02:21 | we have the image but it's not repeated and it's placed
| | 02:25 | halfway across the element and three quarters of
the way down and we're going to actually drop out
| | 02:32 | the blue in our background color so that we get sort of a yellow.
| | 02:37 | There you go, that's what we got by doing that. If
I take these and move them around and I try to improve
| | 02:47 | the color a bit, because wow, that
ever hurt, then, there you have that.
| | 02:54 | There's background, is basically a way of shortening things up
| | 02:58 | so you don't have to write out every single one of the properties and values.
There's one thing that you do want to watch out for though and that is,
| | 03:08 | that if you leave out any of these,
| | 03:10 | if I were to say background, URL blah, 50% 75% RGB 85%, 85%, 60%, I
didn't say anything about background repeat so it's set to its default,
| | 03:21 | which in fact is repeat, so having done that,
| | 03:25 | even though know I didn't say anything about repetition, it's
going to be fully repeated throughout the background of the element.
| | 03:33 | Similarly, if I don't say
anything about the background position,
| | 03:38 | then it's going to default to the top left.
| | 03:43 | If I leave off a color, then it
will default to transparent, which is,
| | 03:47 | there won't be a color and if I don't include the URL
| | 03:51 | for background image than there just won't be an image, because it
will default to none. That is just something to watch out for with
| | 03:57 | background and with shorthand properties
in general. If you leave out a piece of
| | 04:02 | the shorthand value, like in this case, background position or
background repeat, the browser will just automatically fill in
| | 04:08 | whatever the default is for the corresponding property.
| | 04:11 | So the default for backup position is
| | 04:14 | 00, which is the top left corner.
So if you don't say anything for
| | 04:19 | the background positioning, in your background value,
then 00, the default is what's going to be filled in.
| | 04:24 | So that's background with the shorthand for you.
| | Collapse this transcript |
|
|
6. Setting TypographyAltering line height| 00:01 | What we're going to discuss in this chapter is,
| | 00:04 | what is in fact, CSS Typography. Now, if you talk to someone who is
really a hard-core typographer, they are going to get all excited about
| | 00:12 | things like leading and kerning and serifs and swashes and
probably buckles. For all I know there's a lot that goes into
| | 00:21 | typography and you know, print designers in particular
really, really get into it, and they get into fonts and
| | 00:28 | tight catalogues and that sort of thing. CSS is not
| | 00:30 | so advanced. It doesn't have what
| | 00:34 | a typographer would think of as real
kerning control or real leading control.
| | 00:38 | In fact, those are terms that I only vaguely understand myself but
I've talked to a lot of typographers and they tell me that CSS has
| | 00:44 | basically almost nothing
| | 00:46 | in the way of that. But what CSS does allow you to do is affect
| | 00:49 | the fonts that are used, font sizes and some of the presentation of
text and that's what we're going to be looking at in this chapter.
| | 00:57 | So for this video what we're going to talk about is line-height,
| | 01:01 | and how you can affect line-height on elements. So as a good basic example,
when I say for paragraphs, we're going to have a line-height of three.
| | 01:13 | This is one of those rare cases in CSS where you can have a
numeric value that doesn't have a unit after it. This doesn't mean
| | 01:19 | three pixels and it doesn't mean 3 inches or 3 mm or 3 furlongs
or 3 light years or any of those sort of things it's simply 3.
| | 01:29 | What that basically does
| | 01:31 | is it creates a multiplier, it multiplies
| | 01:35 | the elements font size,
| | 01:37 | by three and that gives the line-height.
So for the font size here is 15 pixels.
| | 01:42 | If that's what the font size were
set to be, then the line-height
| | 01:45 | for these paragraphs is going
to be 45 pixels, that's 3 X 15.
| | 01:49 | The nice thing about the multiplier, of
course, is that you don't have to know what the
| | 01:53 | font size is going to be and even
if it changes, the line-height stays
| | 01:58 | proportional to whatever the font size is,
| | 02:03 | which you can check out by using
Cmd plus and minus to raise or lower
| | 02:09 | the font size, assuming you're using Firefox or Mozilla or
| | 02:13 | one of those kinds of browsers. So,
| | 02:18 | what we've done here like it says, the line- height
| | 02:20 | for paragraphs should be three times as font size.
| | 02:24 | There's another way to express it actually,
which is let's say 3em, and that's going to have
| | 02:29 | the same visual effect here, given the situation. No there is a
difference between the two, which I'm going to discuss in just a minute.
| | 02:37 | You can also, as you can tell, you're not only limited to
multipliers, you can use light measures if you want to, although it's
| | 02:43 | generally not a great idea. Here's an example,
paragraph with the line- height of one pixel.
| | 02:48 | Probably not what you wanted.
| | 02:50 | Not what I would want certainly, but it's something that you can do.
| | 02:54 | You can't have negative line-heights, so
don't get too many crazy ideas, but you can
| | 02:59 | take them down as low as one pixel, just, you know, you probably
shouldn't. You can just say line-height 1em and then you would get
| | 03:08 | this sort of text, which is nice enough but
if you're particularly attuned to the way that
| | 03:14 | Web browsers sort of lay things up by default,
this a little more crowded than is usually the case.
| | 03:21 | This is not entirely the default,
generally default is somewhere around
| | 03:26 | 1.2em, depends on the browser though. That's the thing,
the CSS specification doesn't say what the default
| | 03:34 | distance for line-height should be
because different languages might have
| | 03:40 | different defaults and CSS is not
| | 03:43 | specific to any single language so
| | 03:46 | basically what the CSS specification says is, there should be
a default and it should probably be somewhere around 1.2 and
| | 03:53 | you know, that's the thing, web browsers
have this tendency to do things around
| | 03:58 | a line-height of 1.2, but they're not exactly the same.
Every one is just a little bit different so don't rely on
| | 04:07 | a specific line-height being the default. If you absolutely have
to have a specific line-height, you need to go in and declare it
| | 04:13 | yourself, you need to expressly say this
is what the line-height is going to be.
| | 04:17 | Now, you might wonder, ok, I can have line-height 1.2em, and
I can have line-height 1.2 and there's no difference there,
| | 04:24 | and so Why would I, why would there be one and not the
other. This is actually a little bit difficult to illustrate
| | 04:30 | on the paragraph, but it easier to illustrate on
the body element, and I'm going to bring things up a bit.
| | 04:36 | So let's say we set our body to have a line- height of 1.5em.
| | 04:41 | All right, so this is going to make the line-height of the
body element 1.5 times the font size of the body element.
| | 04:47 | You notice everything sort of spread out a little bit because
what happens is, let's say that the body's font size is 12 pixels,
| | 04:54 | that's what it comes out to be. So whatever
| | 04:57 | combination of circumstances, maybe the user has set it to be that, may
be somewhere else in the style sheet we set the body font size should
| | 05:03 | be 12 pixels, whatever it is, just let's assume is 12 pixels.
| | 05:07 | So line-height 1.5em,
| | 05:10 | would multiply that 12 pixels by 1 and
a half and get a value of 18 pixels,
| | 05:14 | and then, that value of 18px, 18 pixels for the line-height is
what we get inherited by all the descendent elements of the body,
| | 05:22 | if you recall inheritance from an
earlier chapter. So H1's, Paragraphs, links
| | 05:30 | whatever, they're all going to inherit that value of 18 px,
| | 05:36 | because I used 1.5em, but if I just say
line-height 1.5 then, what gets inherited is not
| | 05:41 | that calculated line of 18 pixels,
what gets inherited is the 1.5.
| | 05:46 | And so you can see, what happens there
| | 05:49 | it's a small chain, but it's still noticeable.
| | 05:52 | Each element multiplies its font size by 1.5, and that's what it
uses for its own line-height. So if you have headings that are bigger
| | 06:01 | than the rest of the text, their line- heights will be 1 and a half
times their font size, which is going to be larger than one and a half
| | 06:07 | times regular paragraph text. So we go back and make the body
| | 06:11 | 1.5em again. Now, we're back to having the line-heights
| | 06:16 | be calculated 18 pixels, and that's what gets inherited. So look,
for example at about tea history, see how it shrunk down, and that's
| | 06:23 | because its line-height is now 18 pixels,
it's not 1.5 times its font size is just
| | 06:28 | 18 pixels. Even if that about tea history thing had a font size of
| | 06:33 | 60 pixels or 72 pixels,
| | 06:36 | it's line-height would still be 18 pixels and that would make
things kind of crowded so that's why this scaling factor the 1.5
| | 06:44 | the unitless number is recommended so strongly
over things like 1.5em and certainly over
| | 06:51 | pixel line-heights, I mean you can do pixel line-heights
but you're really setting yourself up for a lot of anguish,
| | 06:59 | because if you say line-height 15 pixels,
| | 07:03 | then all the elements that descend from
| | 07:05 | that element are going to pick up that line-height
of 15 pixels, no matter what their font sizes are.
| | 07:09 | you could have tiny footer text, that's only
| | 07:14 | 8 pixels tall and it has it's line-height of 15 pixels.
| | 07:17 | So scaling factors are pretty much always preferred over united
| | 07:23 | links like pixels, or ems or whatever the case
might be. So that's basically a line-height for you.
| | Collapse this transcript |
| Font style and weight| 00:01 | So in this video, what we're going to do is look at
| | 00:04 | three different ways that you can
| | 00:06 | affect the way that a font is presented.
| | 00:08 | The first of these is font style.
| | 00:12 | So this is a font-style: italic as an example and
| | 00:23 | all the paragraphs are italicized, yeah.
| | 00:27 | Now there's one other value for
font style and that's oblique. You can
| | 00:30 | have italic or oblique and ostensibly these are different.
| | 00:34 | If you look at this, the text here,
| | 00:37 | this is a specific italic font face
that's created for this particular font
| | 00:42 | and if we set this to oblique, then
| | 00:48 | there should be a difference, but there isn't.
| | 00:52 | In this browser, like to say
extensively there should be a difference
| | 00:55 | and oblique fonts is really just
| | 00:57 | the regular font that's been slanted
| | 00:59 | and italic font has its own face.
| | 01:03 | The letter forms are specifically drawn for
the purposes of being displayed in italics,
| | 01:08 | as it turns out browsers,
| | 01:10 | at least as of this recording,
| | 01:13 | treat the two as being equivalent, the oblique as italic and
vice versa and it might be that one or two browsers at least
| | 01:20 | get right down to it, basically
| | 01:24 | browsers just don't draw a distinction, italic is oblique and
vice versa. So almost nobody ever uses oblique as a value.
| | 01:32 | They use italic or they don't.
| | 01:36 | Now, there's the default value for
font style which is normal and that's
| | 01:41 | not an italicized not oblique text basically.
| | 01:44 | So pretty much any time you see a font style, it's going to have
| | 01:47 | an italic at this point. Now there's another way to affect fonts
and that's by changing the weight. So we can make their weight bold.
| | 01:57 | So now we have bold face to an italicized text
| | 02:01 | and bold facing involves different
| | 02:05 | faces than either italics or normal. Dig
| | 02:08 | into the guts of a font package on a computer you're going to find like a
normal italic font face and a bold font face and a bold-italic font face
| | 02:16 | and there may be several more besides,
| | 02:20 | but that's how fonts are typically set up. Now,
| | 02:23 | you can say instead of bolding, you can say bolder as in this
should be more bold than its parent element should be, but that
| | 02:33 | honestly doesn't have much effect in current browsers. It's
also technically possible to give font-weight a series of
| | 02:39 | numeric values from 100 to 900
in increments of 100 and that would
| | 02:44 | theoretically let the browser pick
between any one of nine different weights.
| | 02:49 | So you can have a really late font at the 100 and a really heavy
font at 900 and browsers just basically don't support that and
| | 02:56 | the fonts that are available don't have
the faces to support that anyway. So
| | 03:01 | pretty much if you see font-weight either's going
to be bold or normal, which is the default value.
| | 03:08 | And then finally there is
| | 03:12 | a somewhat interesting, there's an interesting little
| | 03:19 | font effecter called font-variant,
| | 03:24 | then the default value for font-variant
is normal, just like the others
| | 03:28 | and it has only one other value, and that's small-caps.
| | 03:33 | And if we are to say for our heading levels 1
to 4, h1, h2, h3, h4, font-variant small- caps,
| | 03:39 | this is the result. You notice how the headings have changed
to use small caps or small capitals. What that really means is
| | 03:45 | that capital letters are used throughout but what would
normally be lowercase letters have smaller capitals and what
| | 03:51 | would normally be uppercase letters
just have normal capital letters.
| | 03:55 | That's really all there is to font-variant.
| | 03:59 | And in this case, because there are really two values, normal or
small caps, the only time you would ever use font-variant is if you
| | 04:04 | want an element to have
| | 04:06 | small caps. Now where this gets
interesting is if we were to try to
| | 04:10 | apply that to the paragraphs as well.
| | 04:15 | Now it turns out that the particular
font we are using actually does have
| | 04:20 | the ability to have a bold italics small caps
| | 04:24 | font because small caps is yet another font face and
| | 04:28 | a small-cap bold italic and so on and so forth, these are all
| | 04:32 | individual faces within the font
| | 04:34 | and so we have this ability. Not every font
is going to let you combine these and it's
| | 04:41 | difficult to predict ahead of time, which fonts will permit
you to combine these and which ones won't. There are literally
| | 04:48 | some fonts that if you try to bold face italicize,
they will not let you. They're rare, but they do exist.
| | 04:57 | we're going to talk more about font faces and how fonts work
| | 05:05 | in a later video in this chapter. So
| | 05:09 | you can italicize, you can boldface, you can small cap,
sometimes, perhaps even often you can combine them but you may
| | 05:16 | on occasion run into a case where you try to combine let's say
| | 05:21 | italicizing and small caps and something goes wrong and
| | 05:25 | what you have to keep in mind is that it may not be your fault,
they may simply be whatever font face you're working with, but
| | 05:31 | when it comes to the common font faces,
this is not generally a problem and we'll see,
| | 05:37 | as I say in a letter video,
| | 05:39 | how characters are assigned given font faces and
| | 05:43 | what the implications can be.
| | Collapse this transcript |
| Sizing fonts| 00:01 | In this video we're going to talk about sizing
fonts and this is a subject that could rightfully
| | 00:07 | occupy it's own book probably or an entire video title, just
talking about fonts and font sizing and all of the ins and outs,
| | 00:15 | but the basics are really very simple. You can
| | 00:18 | make an element have a font size
that's either a specific length, let's say
| | 00:24 | 12 pixels or is related to its parent element.
| | 00:30 | That's a good starting point. Let's take the h1
in the content area and the content, main content,
| | 00:38 | of the document, give it a font let's say 200 pixels and
what this means is the font size of this h1 should be 200%
| | 00:45 | the font size of that h1's parent element.
| | 00:48 | If we scroll down a bit
| | 00:51 | we see this h1 right here. Its parent element
| | 00:54 | is actually the div with the id of content, so the font size of the
h1 will be 200% the font size of the div with the id of content.
| | 01:04 | And if we load, there you go,
| | 01:07 | it's twice the size, 200% or twice the size.
| | 01:10 | What I just didn't in CSS terms is exactly functionally
equivalent to saying 2em, 2em, 200% either way it's
| | 01:18 | twice the size of
| | 01:20 | the parent element. So I could do
content h2, font size 1.5em or 150%.
| | 01:32 | And then
| | 01:33 | there we go that's the h2's parent element again is that div
| | 01:37 | with the id of content.
| | 01:39 | So the h2 will be half again as big or 1 1/2 times the
| | 01:44 | font size for that div.
| | 01:46 | Now, you are not constrained to ems
and percentages, you could for example say
| | 01:52 | I want font size of paragraphs to be smaller,
| | 01:58 | and that would make them smaller.
| | 02:02 | Again, this is related to the parent elements,
so if these paragraphs whose parent is that
| | 02:07 | content div
| | 02:08 | the font size of the paragraphs is smaller than
that of the content div, but how much smaller isn't
| | 02:13 | explicitly defined by the CSS
specification is simply has to be smaller,
| | 02:18 | it could be just a little tiny bit smaller, it could be a whole
lot smaller. In practice, smaller usually comes out to be
| | 02:25 | around 0.85em
| | 02:28 | but it's not always precisely equivalent and
| | 02:33 | I would be nice if at this point I could say and here are the situations
in which there are differences, but it's not quite that simple.
| | 02:41 | The algorithms don't seem to be that easily analyzable.
| | 02:47 | So, you just sort of taken off if the font size is around 0.85em
| | 02:51 | in terms of its effects and you say things like smaller because
you don't really care exactly how much smaller the paragraph's
| | 02:58 | font size is going to be or whatever element, you don't care
how much smaller is going to be, it just needs to be smaller.
| | 03:04 | There's also larger, not bigger, but larger
| | 03:12 | which is the opposite effect, it's larger than
it's parent element's font size. How much larger?
| | 03:20 | Not really specified.
| | 03:24 | usually in the vicinity of around 1 1/4 to 1.2em
| | 03:29 | 120% to 125%, but
| | 03:31 | that's not guaranteed, it could be 133%
in some obscure browser you never heard of.
| | 03:38 | So, using things like smaller and
larger again only if you don't care
| | 03:43 | to be very precise about how much
smaller or larger a font size should be
| | 03:48 | because we can see here, let's say font size 85%.
| | 03:54 | That's very similar to smaller, but did you notice
there was a slight difference there, very slight.
| | 04:03 | If we go from smaller back to 85% I'm going to hit Reload
| | 04:07 | and watch right in the first paragraph
right sort of near the fourth line or so.
| | 04:12 | See that, is this tiny little change.
| | 04:16 | That's what I mean,
| | 04:17 | it's very difficult to analyze exactly what's going on there.
| | 04:21 | There are other keywords besides larger and
smaller. There's also just plain old small
| | 04:26 | font size small,
| | 04:27 | which you might say okay, that's exactly the same as smaller
but not really because suppose instead of making the paragraph
| | 04:37 | font size small I just make the body font size
small and you'll notice everything sort of skills
| | 04:43 | in relation to that.
| | 04:44 | Basically there are seven keywords they go X.X.small
for extra extra small, x.small, small, medium,
| | 04:50 | large, x.large and x.x.large,
| | 04:54 | and exactly what those correspond to is left up to each
individual browser. Every browser could do x.x.large as
| | 05:00 | a completely different size,
| | 05:02 | as long as x.x.large was larger than x.large which
was in turn larger than large, which was larger than
| | 05:08 | medium and so on.
| | 05:10 | The default, according to CSS for font size, is medium
that should give you whatever the default is for
| | 05:18 | your browser and small should be smaller than that.
| | 05:22 | You can use keywords,
| | 05:23 | you can use percentages, you can use
| | 05:27 | ems if you like. There's one thing to watch out for though. I'm
going to back to same body font size small and I'm going to say
| | 05:35 | paragraph font size 85%.
| | 05:40 | Notice that the paragraphs have gotten tinier.
| | 05:43 | Here is the reason,
| | 05:44 | because the body has been set to a font size off small.
| | 05:48 | Alright, and so that gets inherited by it's descended
elements, so the content div inherits the font size of small
| | 05:57 | and then the h1 sets itself to be twice whatever
small means and the h2 sets itself to be 150% whatever
| | 06:04 | small means. The paragraphs sets itself to be 85% of small so what
I've really done I've said ok, make the body small but then make
| | 06:10 | the paragraph smaller than that.
| | 06:12 | Alright, if I were to take this even further and do something
you know, potentially disastrous like content font-size smaller
| | 06:23 | the paragraphs get teeny teeny tiny and nobody can read them.
| | 06:27 | This is entirely possible, so one of the things
you want to watch out for with font sizes is it
| | 06:31 | if you have situations where you're accidentally nesting
changes in font size you can get these sort of runaway effects.
| | 06:38 | Now there are some web browsers that will enforce minimum
font sizes. Safari, for example, on the Macintosh has a-
| | 06:46 | will let you stop
| | 06:49 | smallest of text, basically you can say it
| | 06:51 | 9 pixels or 8 pixels or whatever size. Don't make text
any smaller. I don't care what the CSS says, but
| | 06:57 | other browsers for example Firefox here don't
| | 07:01 | have those kinds of limits so,
| | 07:04 | if we squint really hard and we pretend that
that this was all written by houseflies,
| | 07:10 | we can sort of make out that it says the history of tea extends
so far into the past that it's very origins are shrouded by
| | 07:16 | legend, but of course part of that is the fact that I'm very
familiar with this text and so I can't make out what it says,
| | 07:20 | you would never ever want to present this to a user.
| | 07:23 | So, there's no particular fix for this, necessarily,
| | 07:29 | except being careful
| | 07:31 | and not nesting relative changes in font size.
| | 07:37 | You might think to yourself, well geez, why would I ever do that? Who
would ever get caught by that? That's actually easier than you think
| | 07:43 | because suppose you had a series of nested lists, lists inside of
lists inside of lists and an outline of something like a core syllabus
| | 07:51 | and you said all unordered lists
should be a font size of smaller
| | 07:56 | or an unordered list should have a font size of 85%. Well,
a third level nested list would be 85% of 85% of 85%,
| | 08:04 | which is teeny tiny and
| | 08:07 | basically unreadable.
| | 08:08 | So that's something you want to watch out for font sizing.
| | 08:12 | So, like I say, I mean the basic of font sizing
| | 08:15 | are very simple.
| | 08:16 | But sort of these combinations of being
careful about nesting and the fact that if you
| | 08:21 | have things get smaller and smaller and
smaller things can become unreadable.
| | 08:25 | That's where there's really no substitute except
a lot of experience at doing this sort of things
| | 08:32 | and there can be an entire training course and book
just about fonts and font sizing and so, absent that,
| | 08:40 | making mistakes is actually the best way to learn and believe
me I have made many many font sizing mistakes in my career and
| | 08:47 | still do on occasion, it can be easy, even if you're someone
who's done it for very long time to forget that Oh that's
| | 08:53 | right, I do have three levels of nested lists
and so when I made this font size change
| | 08:58 | I didn't really think about what the effect would be.
| | 09:00 | There is a, I'll just give you a quick tip. Suppose you want
| | 09:05 | your list to be smaller for some reason.
| | 09:10 | But you want all your lists
| | 09:11 | to be the same size, right now they're just getting smaller and smaller
and smaller the further you nest them, but with the descendent selector
| | 09:20 | you can do this. So, any unordered list should have a font-size as
smaller, but any unordered list that's inside an unordered list
| | 09:29 | should have a font size of 1em, which basically stops
that whole smaller thing so the top-level unordered list
| | 09:36 | becomes smaller within any nested lists inside of it
| | 09:39 | with the font size 1em, basically pick-up
| | 09:42 | what smaller meant and they all stay the same size consistently.
| | 09:47 | So just a little tip there, something that I picked up through
years and years of font sizing mistakes and hopefully will
| | 09:55 | allow you to avoid making many of the same mistakes.
| | Collapse this transcript |
| Using font families| 00:01 | So what we're going to look at in
this video is font families, how to
| | 00:05 | use font family to substitute the font-face that is used
| | 00:10 | Uh, font family, font face, what's
the difference? Well, let's take a look.
| | 00:15 | So, for our headings, we're going to say font-family
| | 00:24 | Verdana, and if you look at the headings like about tea history or
The Legendary Origins of Tea, or Tea of the Day or the Post Archive,
| | 00:33 | when we reload
| | 00:34 | now they're using Verdana.
| | 00:38 | What happens there, technically is that the browser says ok, I'm going
to use Verdana for the font-family, so I'm going to pick the appropriate
| | 00:45 | face from within that font-family, a font-family being a collection
of font-faces. So there might be Verdana regular and Verdana
| | 00:51 | bold and Verdana italic and Verdana bold-italic, all those sorts
of things. In this case we've just said font family Verdana,
| | 00:58 | we haven't set necessarily anything to be bold or italic.
| | 01:00 | We surely haven't set any italics so
| | 01:04 | the browser's going to say ok,
| | 01:05 | this is the particular font-family
| | 01:07 | that I need to look for a face in and that's how we end up with
| | 01:12 | this various Verdana x text.
| | 01:16 | Now,
| | 01:18 | you don't have to just say use this font family or nothing
else, in the fact that's sort of discouraged, your able to
| | 01:25 | provide a comma separated lists so I say Verdana
| | 01:29 | is our first choice and then if you don't have Verdana, ok you
can use Arial and if you don't have Arial then you're going to use
| | 01:37 | Helvetica and if you don't have any of those for some
reason, if by some bizarre quirk of fate you have a computer
| | 01:44 | running your web browser or any computer that has neither Verdana
nor Arial nor Helvetica then would you please at least use some
| | 01:51 | sans-serif font that you have available. And
the difference between serif and sans-serif fonts
| | 01:57 | again, you could find a typography
| | 02:00 | geek who could wax rhapsodical about this
particular bit for probably hours on end, but
| | 02:06 | what this comes down to is thing like Verdana and
Arial if you look at the text in the headings
| | 02:12 | has fairly basic letterforms, they have strong sort of lines.
And they don't have, if you look at the main text underneath
| | 02:21 | The Legendary Origins of Tea, they don't have
| | 02:23 | little things that stick out to the sides or the
bottom of the center on the key or the way that the
| | 02:29 | the center on a Y has a little sort of knob on the end
| | 02:33 | and the lowercase a has a little
tail that extends out, those are serifs.
| | 02:38 | And so the, those fonts that have those are called
serif fonts, fonts that don't have those are called
| | 02:43 | sans-serif fonts.
| | 02:45 | And again,
| | 02:46 | if you play this for somebody who is a real
| | 02:48 | expert in typography they're going to tear their hair out and mutter
about people talking about these things when they don't know
| | 02:54 | what they're talking about and I admit, I'm not an expert,
| | 02:57 | but that's the basic difference and usually just with a little practice
you can usually spot the difference between a serif and a sans-serif
| | 03:04 | font pretty easily.
| | 03:06 | Maybe it's like art, I know it when I see it, at any rate.
| | 03:13 | What we can do
| | 03:17 | is we can select from a number of different font-families.
| | 03:23 | There's one thing you want to watch out for, if you have a
font-family whose name has a space in it, like Courier New,
| | 03:29 | is generally a best practice to put that in quotes.
| | 03:33 | You can use single quotes or double as long as you're consistent, put two
double quotes around it or you can put two single quotes around it, but
| | 03:37 | either way is a Courier New, and Courier is a monospace font.
| | 03:44 | So, I've said in the sidebar paragraphs should use Courier New
| | 03:48 | for their font-family and if Courier New is not
available and then use some kind of monospace font
| | 03:54 | and there it shows up in a
monospace font. Monospace meaning every
| | 03:58 | letter takes up the same amount of horizontal
| | 04:01 | space, a lowercase I takes up the same amount of
horizontal space as a lowercase M, whereas if you look at
| | 04:07 | the text on the rest of the page, both the serif and the sans-serif,
those are one of those proportional fonts where a lowercase i takes up a lot
| | 04:13 | less horizontal space than an uppercase
m for example. So, monospace fonts,
| | 04:18 | it's kind of like using a typewriter
| | 04:20 | for those of you who remember what typewriters are,
| | 04:23 | every character takes up the same amount of horizontal space.
| | 04:26 | So that's monospace font, not necessarily the greatest
| | 04:30 | visual effect ever, but
| | 04:32 | it's something you can do there. Now
| | 04:35 | the generic font families, serif, sans-serif, monospace,
| | 04:41 | it's suggested that those always go
with the end of your font-family list.
| | 04:45 | There are two other generic families
besides sans-serif and monospace
| | 04:51 | and they get used very rarely.
There is a font-family Cursive,
| | 04:57 | there's also one called Fantasy
| | 04:59 | so you can say font-family fantasy
| | 05:01 | and I would pretty much have the browser pick
| | 05:04 | any random font that does not
fall into the other 4 categories
| | 05:07 | and use that for display and there's just no way
to predict ahead of time what is going to happened.
| | 05:13 | That's a Fantasy font according
to this browser in this computer.
| | 05:18 | But if I switch it to Cursive
| | 05:20 | I get a Cursive font.
| | 05:23 | There are a few problems here.
| | 05:25 | The are no Cursive fonts at the moment,
there are common to all browsers in all
| | 05:29 | operating systems. With sans-serif fonts, Verdana and Arial
| | 05:35 | are fairly widespread. You can
find them in almost any computer
| | 05:38 | no matter what operating system is running
| | 05:40 | In the serif realm Times, Times New
Roman and variances those are very common.
| | 05:47 | You can find those on Windows machines,
on Macs, on Linux machines Oftentimes.
| | 05:51 | So there,
| | 05:54 | you have those but when it comes to these as Cursive
and Fantasy, there's just nothing that's cross platform.
| | 06:00 | There are a number of reasons for this
| | 06:02 | most of historical. When Microsoft created
| | 06:05 | some web fonts for free distribution in the mid-to-late 90s
| | 06:10 | they were all serif, sans-serif and monospace.
| | 06:13 | And so these got installed all over the place and
| | 06:16 | things like Verdana,
| | 06:18 | thank you Microsoft for Verdana, but on the other
hand Microsoft did not in that package include
| | 06:25 | Cursive or Fantasy fonts.
| | 06:27 | So these are very, very rarely used. The thing is of course if
| | 06:32 | a cursive font doesn't exists
| | 06:35 | for whatever reason if the browser just doesn't know of any fonts
| | 06:38 | that can be classified as Cursive, then, in this case it will say well I
can't find any Cursive fonts so I'm just going to fall back to whatever my
| | 06:44 | default is. So it's not like you won't get
any text it just won't necessarily be Cursive.
| | 06:51 | But here's where it gets even more interesting.
So I've set font-family Cursive and font style italic
| | 06:59 | and the way that CSS font structure really works is
that for literally every character that's displayed
| | 07:05 | the web browser says okay,
| | 07:07 | this character's supposed to be
displayed as an italic Cursive font.
| | 07:10 | Do I have any cursive fonts that have
italic faces or can I somehow generate them.
| | 07:15 | And that's up to each browser to figure out
| | 07:17 | A) does it has the resources on hand and B) if it does
not have the right resources on hand, can it generate them?
| | 07:22 | Firefox here might be just taking the italic
text that I had and slanting them, just
| | 07:28 | programmatically slanting them so
| | 07:30 | sort of skewing them like you might do in Photoshop.
| | 07:32 | So that's what Firefox does
| | 07:35 | but on the same computer, Safari,
| | 07:38 | it'll do this.
| | 07:40 | It knows it is supposed to have the cursive
| | 07:43 | font-family in use but it also knows
it is supposed to have an italic font used.
| | 07:48 | Alright, so it means it is trying to find
| | 07:51 | a font face somewhere that is both cursive and italic and
| | 07:54 | Safari didn't find one and rather
than try to programmatically slant
| | 07:59 | all of the Cursive text it just
| | 08:02 | stops looking for Cursive and it looks for
| | 08:05 | something that is
| | 08:06 | italicized so that it can use and this is what it settled on.
Because if I take out font style italic, then I go to Safari
| | 08:15 | there you go, it's italicized.
| | 08:17 | Safari is not wrong
| | 08:19 | to do what it does. It's simply
not consistent with other browsers.
| | 08:23 | Sure it would be nice if they were all completely consistent
in every last little detail but let's be honest, in the entire
| | 08:28 | history of there being more than one
web browser they were never consistent.
| | 08:32 | There was a time when there were literally to Web browsers in the entire world. They did not do the same things.
| | 08:38 | Browsers have never been consistent and never will be, right
now they are far more consistent than they've ever been
| | 08:44 | so at least we'll have that to fall back on.
| | 08:46 | So this is another reason why
cursive fonts tend not to be used
| | 08:51 | because of the way font selection
works you're never quite sure if just
| | 08:55 | doing something simple like saying hey, I'd like this text also
be italicized will cause massive changes in the actual font-face
| | 09:01 | that gets used
| | 09:02 | and Fantasy's even more crazy because with Fantasy
| | 09:07 | well a browser might decide, you know, the only font that
I have that even comes close to being Fantasy is Webdings
| | 09:13 | so I'm going to replace all the text with symbols
| | 09:15 | that could qualify as a Fantasy fonts so
| | 09:19 | pretty much serifs, sans-serif and monospace are the only ones you
see and honestly you only ever see monospace if someone's publishing
| | 09:25 | code or CSS as the case may be.
| | 09:29 | So that's something that you do have to watch of four and
| | 09:33 | it is possible for even non-cursive fonts, such as,
| | 09:39 | for serifs and sans-serif fonts to not have
the kind of face that you're looking for.
| | 09:45 | So again, if you run into a case where you have a font and then
| | 09:50 | the font goes
| | 09:52 | kind of strange when you do something
like italicize it or bold face it
| | 09:56 | or do both at the same time, it could simply
be that the browser can't find a font face
| | 10:02 | that's has the particularly combination of effects you want in the
font-family you want to use and that's falling back to a different
| | 10:08 | font-family.
| | 10:10 | So, these sort of
| | 10:12 | obscure details can complicate things, but the basics are
very straightforward if you want a font-family you say
| | 10:17 | here's my list of
| | 10:18 | font-families that I'm willing to accept and here's my generic
fallback. You know, so for headings Verdana's my first choice,
| | 10:24 | Arial's my second choice, Helvetica's my third
choice and if none of those is going to work then
| | 10:31 | at least some sans-serif font
| | 10:33 | should be used, and that's how you do font-families.
| | Collapse this transcript |
| Font shorthand| 00:01 | So in this video we're going to see
how to bring together various fonts
| | 00:04 | styling properties that we've been looking
at and put them into one shorthand property.
| | 00:10 | You can see here that there is already some styling of the
| | 00:14 | main paragraphs here in this particular design,
| | 00:17 | and this was accomplished with the rule you see here. The
| | 00:21 | content P font-family Arial, sans-serif, font-weight
bold, font-style italic, font-size smaller.
| | 00:26 | It would be really nice if we didn't have to say all
those things, so repetitively we can just say font bold
| | 00:31 | italic smaller Arial, sans-serif and that could
take the place of all those other guys which
| | 00:43 | it can, but you'll notice,
let met put that back for a second,
| | 00:47 | that I didn't put those together
in the same order they were written
| | 00:50 | previously. I said bold italic smaller Arial,
sans-serif and there's a reason for that.
| | 00:55 | In the font shorthand, unlike most other shorthand properties,
| | 00:58 | there are two things that must be
present, and they must be present in
| | 01:03 | a specific order and in a specific
place and that's the size and the family.
| | 01:09 | If you have a font declaration to the
font property, then the value that goes with it
| | 01:14 | has to have size and then family, in that order.
| | 01:18 | So smaller
| | 01:19 | is the size, Arial, sans-serif is the family value.
| | 01:23 | This can be font 1em, Arial, Helvetica, Verdana, sans -serif, doesn't
matter, you have to have the size and then the family. They have to
| | 01:30 | be in that order and have taken at the end so if
you do anything else like bold or italic, those come
| | 01:35 | before the size and the family.
| | 01:38 | The weird thing being that
| | 01:39 | I can say font bold italic smaller Arial,
sans-serif or I can say font italic bold
| | 01:45 | smaller Arial, sans-serif and the effect would be the same the bold and
the italic and if we had small-caps. The small-caps, the font variant,
| | 01:54 | those three can be in any order as long as
they come before the size and the family.
| | 02:01 | So it could be
| | 02:02 | small-caps bold italic, small-caps
italic bold, bold small-caps italic, whatever.
| | 02:06 | Those three can be in any order, they just have to come before
the font size. the font size has to come before the font family.
| | 02:13 | There you go, it's
| | 02:14 | boldfaced, italicized, small-cap, it's also
smaller than and it's Arial and it's sans-serif.
| | 02:21 | This one very sort of subtle thing
that most people don't realize, in fact,
| | 02:26 | just about a month before I recorded this,
| | 02:29 | I mentioned, what I'm about to tell you in
| | 02:32 | a seminar setting and some of the people in that seminar were
people like Jeffrey Selman and Jason Santamaria and people
| | 02:39 | who do this kind of stuff for living and I told them what I'm about
to tell you and most of the people in the audience didn't know this.
| | 02:45 | Here it is, suppose I just set font smaller
| | 02:48 | Arial, sans-serif.
| | 02:50 | If you look over all what I have here, I have,
| | 02:53 | and let me take out the font family, the font and the font size from before.
So I set font-weight bold, font-style italic, font smaller Arial, sans-serif.
| | 03:04 | I hit Reload and I have smaller Arial, and there's no
bolding and there's no italics, and here's the reason.
| | 03:11 | With a shorthand property,
| | 03:14 | if you leave out a given value like font-weight or font-style it
gets reset to its default. So what I've really done is I've set
| | 03:21 | font-weight bold, font-style italic and then I've set font
normal, normal for the weight, the style and the variant,
| | 03:28 | smaller, Arial, sans-serif. So the font-
weight bold and font-style italic get
| | 03:33 | blown away by the implicit defaults that are filled into
the font declaration right here. So is as if I never said
| | 03:41 | anything about bold or italic. So if you want to use a shorthand
property and you want these like boldface and italic, those have to be in
| | 03:50 | the font declaration. Again
| | 03:52 | worry, they need to be before the size
or family and so there you go, tadaaa!,
| | 03:58 | bold facing and italics.
| | 04:01 | Here's the other thing and this is completely without precedent in CSS,
it is the only place you can do something like this. Guess what that is?
| | 04:12 | You're right. If you watched the first
video in this chapter, it's the line-height.
| | 04:18 | You can in the font shorthand say
| | 04:21 | the font size in then slash, the line-height and that's sort of the
exception to, the last two things have to be the font size and the font
| | 04:27 | family, they have to be in that order.
| | 04:29 | You can stick the line height in, sort of as part of the
| | 04:31 | font size, so you can say,
| | 04:33 | I want this font to boldfaced and italicized and the font size
should be smaller, but the line-height should be 1.5 times
| | 04:39 | what ever that smaller turns out to be and
use Arial and sans-serif and there you go.
| | 04:49 | It spreads out. Now what we just saw here, smaller/1.5em,
| | 04:55 | in this case it's going to turn out to be the same thing,
| | 04:58 | but remember, or if you haven't seen it, go back and watch the
first video about line-heights, for the subtle differences between
| | 05:05 | 1.5 and 1.5em when it comes to line-height.
So you can do this if you like,
| | 05:10 | you can throw in your line-height here, or if you really want it
to, you could say line-height 1.5 and then font bold, whatever,
| | 05:21 | because, aha, but you can't, it's like
| | 05:29 | the default is going to get filled in there.
| | 05:33 | So if you're going to have the line-height in there, make
sure it comes after the font declaration, cause otherwise,
| | 05:40 | if you leave it out,
| | 05:41 | then the line-height is going to get reset to normal,
| | 05:45 | which is whatever the browser's default is. So
| | 05:49 | there you have it.
| | 05:51 | The ins and outs of the font shorthand and
| | 05:54 | how you have to be a little bit careful with it, because if you
leave anything out, you might accidently reset some other value in
| | 06:02 | a way that you wouldn't expecting.
| | Collapse this transcript |
| Justifying text| 00:01 | So in this video, we're just going to
| | 00:03 | take a quick look at horizontal alignment of text. This is a
| | 00:07 | way that you can effect the presentation of text without
having to mess around with things like font faces and
| | 00:13 | font families and font weights and other font stuff.
| | 00:17 | So, as an example,
| | 00:19 | we could, let's say, right align all of our paragraph text,
why not, seems like fun, so we just say text-align right.
| | 00:28 | So for paragraphs the text will be
| | 00:31 | right aligned and it all goes over the right side.
| | 00:34 | Now the very avant-garde, not necessarily the way that
| | 00:39 | people who read English or other
| | 00:41 | Western languages are used to seeing it, but there
is none the less, and what happens here is that each
| | 00:46 | line of text is shifted over so that
its right edge gets lined up with the
| | 00:51 | right edge of its parent element. So within each paragraph
there are a number of lines of text. Let's take the second
| | 00:58 | paragraph that starts "It was in the
16th century that the Portuguese missionaries,"
| | 01:02 | has three lines of text and within that
paragraph box each of those lines of text
| | 01:07 | gets shifted over so that the right edge of each
| | 01:11 | text line is lined up with the right edge of the paragraph
| | 01:15 | and more specifically with the
| | 01:17 | right content edge of the paragraph.
| | 01:19 | If there are any padding on the paragraph then the
| | 01:21 | alignment point would be inside of the padding, but
| | 01:24 | we'll talk about padding in a different chapter actually.
| | 01:27 |
For now, just take that and
| | 01:30 | you'll learn more later.
| | 01:32 | There's also left aligning.
| | 01:34 | As you might guess any left to right languages like English or
| | 01:37 | Spanish or French or really any
Roman-based language you're going to have
| | 01:44 | left alignment as the default because
it's a left to right language,
| | 01:48 | but in text, aligned left is the default value
and left aligned languages like English, and so on.
| | 01:53 | We can text-align right and could do
| | 01:56 | text-align Center in which each box,
| | 02:00 | each line box is centered,
| | 02:02 | between the two edges, but there is something interesting to
notice here which is the wine boxes next to the image of the
| | 02:10 | tea kettle are centered in the space that they have available
to them. That's completely in keeping with what we would
| | 02:15 | expect and is in keeping with the CSS specifications, but
| | 02:20 | basically each of those lines of text is centered between
| | 02:23 | the space that has available next to that
| | 02:25 | image of the tea kettle and the other
| | 02:27 | edge of the paragraph. So it was in the line, "It was in the 16th
century that Portuguese missionary were seduced by tea's flavor,"
| | 02:35 | align it's centered along with the center point
| | 02:38 | of the distance between the image
and the edge of the paragraph. So,
| | 02:43 | how much space a line has it sort of centers itself in that
space. The same thing with all the others is just that
| | 02:49 | for example the first line of text, which starts
"the history of tea extends so far into the past,"
| | 02:53 | it doesn't have anything to either side
of it so it just centers itself within
| | 02:57 | left right edges of this paragraph.
| | 02:59 | There's one other text alignment value that we can use for text align and
that's justify. Now what this does is it justifies text, which is a little
| | 03:09 | easier to show then it is to
| | 03:11 | explain verbally so here's what it does. It evens out
| | 03:16 | effectively each line of text except for
the last one in the given element so that the
| | 03:21 | text goes from one edge, all the way to the other. You can
see how there's this sort of neat lining up of the text edges
| | 03:27 | along each left and right side.
| | 03:30 | This is fairly common in print and is very tempting to do this.
It's very, very tempting to go for fully justified text, but
| | 03:40 | there are some potential drawbacks. One is that
| | 03:44 | because you can't necessarily control exactly what's
going to happen, if you get really narrow text. Notice
| | 03:51 | there's a line right near the top of the tea kettle, before tea quickly
spread and there're these big gaps between the words, there's also
| | 03:59 | one near the bottom, the intricate customs which, line and these big
gaps between words and that's what can happen with fully justified text.
| | 04:06 | You can wind up with some very strange effects some that aren't
very nice. Here's one, "It was in the 16th century that
| | 04:15 | Portuguese missionaries," is a huge gap
in there. Now this is not generally a
| | 04:22 | problem if you have very wide browser windows, but you don't
have control of your browser window size. So this is one of
| | 04:28 | the reasons why full text justification tends
not to be used. The one exception there is in print.
| | 04:35 | There are people who will oftentimes do fully
justified text in print, that's for Chapter 9.
| | 04:42 | So anyway, that's one of the text alignment you can do justify, which
goes along with right left and center and these are all as we saw,
| | 04:50 | horizontal alignments of text. What we'll talk about
in the next video is the vertical alignment of text.
| | Collapse this transcript |
| Vertically aligning text| 00:01 | In the last video we talked about
| | 00:03 | horizontal alignment of text and centering and right and
left and that sort of think. You also vertically align
| | 00:09 | text, although what's really more the
case is that you can vertically align
| | 00:13 | elements within text.
| | 00:16 | As an example, let's take a look in our markup.
| | 00:19 | Our h1 element,
| | 00:22 | the about tea history has a B element inside of it which is used
| | 00:27 | generally to change the color. The about tea
| | 00:31 | is the B element and it sort of uses a stylistic hook, we're
going to use it as a hook to look at vertical alignment.
| | 00:39 | So I'm going to go up here in our
| | 00:42 | style sheet, I'm going to say h1 b, that's the boldface
element that's inside h1 like the one that we're dealing with.
| | 00:50 | So what we're going to say is vertical-align sub.
| | 00:55 | This is sub as in subscript.
| | 00:58 | So keep your eye in the about tea bit.
| | 01:01 | Notice how it shifted down. That's
subscripting. Effectively what
| | 01:05 | a vertical line sub means is push this
element down as though it was a subscript.
| | 01:10 | Doesn't say exactly how far that should be, doesn't say anything about
changing the font size, you would think of a subscript as being a
| | 01:15 | smaller font size, but that's
| | 01:17 | not what vertical align sub means. It simply means change the
vertical alignment of this element so that it's down a bit. There is,
| | 01:24 | as you might expect a corresponding super for superscript,
| | 01:31 | where the element is lifted up as a superscript would be the
exact distance is not specified so different browsers might
| | 01:38 | do is that it differently. There's no change of font
size, it's simply lifted up into a superscript. Now,
| | 01:44 | that's pretty simple. There are a variety of
| | 01:48 | keywords like top and text top and text bottom
these are not very often used and they are actually
| | 01:56 | kind of difficult to explain. So really, I think
| | 02:01 | once you sort of know the basics of vertical alignment
| | 02:04 | doing more research on those always works.
| | 02:07 | Well there's also the ability of vertically aligning things using
length measures like pixels or ems and in this case, vertical align 1em
| | 02:15 | will mean take that b and move it up,
| | 02:18 | the distance equivalent to the value
of the font size for this element. So,
| | 02:24 | there it is, it's pushed up
| | 02:25 | what you might think of as a full line, but notice how the white area
there, which is the background of the h1, notice how it got taller.
| | 02:32 | The b element inside of the overall text of the h1
| | 02:38 | is changing actually the height of the line
| | 02:41 | of text that is inside this h1, about tea history. That's all part
of a single line of text. That line of text is getting taller,
| | 02:49 | as we're changing vertical alignment to push
| | 02:52 | the element up or down or whatever. So
| | 02:55 | that actually illustrates how vertical alignment can affect the
line height without you ever saying anything about the line height.
| | 03:01 | Even if we were to say line height 1em,
| | 03:03 | the line box would get somewhat
| | 03:06 | pushed apart or at least it could,
| | 03:09 | so that's something to watch out for and there's a vertical-
align baseline, which is the default. That means line up
| | 03:18 | the baseline of this text with sort of
the overall baseline of the line of text.
| | 03:22 | You can have negative vertical alignments, should you so choose.
| | 03:27 | This pushes the b element down. So that's a vertical alignment
in a nut shell. It's actually not very common to use vertical
| | 03:33 | alignment, but there are cases when you want to,
for example with a superscript you might want to
| | 03:38 | exactly control how much that goes up rather than saying vertical-
align super which is effectively the default for superscript elements.
| | 03:47 | You might say vertical-align 0,5em so
that will push it up half a line effectively.
| | 03:51 | And then font size, you might want to exactly
set what the font size should be. There's a faux
| | 04:00 | superscript not that I know why you would ever
superscript the words about tea colon, but in case
| | 04:06 | you ever need it to, there's how
you could do it, just is saying
| | 04:10 | vertical-align 0,5em, font-size 0,7em
and we'll see that effect. So
| | 04:19 | that's vertical alignment for you.
| | Collapse this transcript |
| Transforming text| 00:00 | So here for our text instead of doing something like vertically align
or horizontally align, we're actually going to transform our text. It's
| | 00:08 | going to be changed into something other
than what it intrinsically would be.
| | 00:13 | We're going to concentrate on the text
in the content area as we have been
| | 00:17 | and you can see that this is the same old
ordinary text that we've been having all along.
| | 00:20 | But what we're going to do is we're going to say content h1
| | 00:27 | text-transform uppercase, without touching the document
source, without changing any of the text in the document,
| | 00:39 | the text will be uppercased,
| | 00:42 | purely stylistic. If we were to go back and take a look in the
markup, you can see right here about tea history is all lowercase.
| | 00:50 | If you look over in the sidebar the tea of
the day and post archive headings those are
| | 00:54 | using the capitalization that's already
intrinsic to the document. We can say sidebar h3
| | 01:06 | text-transform lowercase and the text is lowercased.
| | 01:11 | Again this is utterly a stylistic thing
| | 01:14 | and we're not altering what's in the document source at all.
| | 01:18 | And now we're going to do something extra fun, text-transform
| | 01:31 | capitalize using I understand the American spelling
with a Z instead of an S as other countries do, but
| | 01:39 | that's just what the keyword is.
Text-transform capitalize and the paragraphs
| | 01:45 | all get the first character of each word capitalized.
| | 01:49 | And that's very interesting. Of course you're relying
on the browser to know what exactly a word is
| | 01:56 | and Firefox here does a pretty decent job.
| | 01:59 | It apparently makes the assumption that if there's a string
of text that has a space before it that's a word. But
| | 02:07 | if we were to take the same document and load it up in Safari
| | 02:11 | take a look at for example the beginning of the third paragraph where it
says It's most likely that it was the Japanese green teas. Notice the its
| | 02:19 | and actually the next line down Japan's,
| | 02:22 | the S in each case after the
apostrophe is being capitalized. In fact,
| | 02:26 | if we had the word you're, Y-O-U-R-E, the
R after the apostrophe might be capitalized.
| | 02:33 | This is because Safari's algorithm
for determining what a word is
| | 02:38 | assumes that something like an apostrophe
| | 02:41 | which could also be a single quote
| | 02:44 | is the beginning of a word, and that's sort of the problem in relying
on these sort of things. You're always at the mercy of what the browser
| | 02:51 | authors were able to come up with. CSS does not define what a word
is and, and really that's all for the best because you know linguists
| | 02:58 | argue about that at times and
| | 03:00 | different languages have different
ways of marking what a word is. In
| | 03:04 | Latin derived languages, Western European
languages, it's usually the case that words are
| | 03:10 | space separated and that sort of thing, but there are languages
such as Chinese or Japanese, where no such distinction exists. So
| | 03:17 | what we have here is a situation where
| | 03:20 | by having set text-transform capitalize we have
weird capitalization happening in one browser
| | 03:26 | but not in another and that's just
| | 03:29 | the way it is. So you can decide whether or not that
means that you want to use text-transform capitalize or not
| | 03:35 | with any text transformation you know
| | 03:37 | like this that could happen. Uppercase and lowercase,
| | 03:40 | not so much of a big deal cause either the text is all uppercased or
all lowercased and that's really kind of hard to mess up none the less.
| | 03:46 | There you go, text transformation.
| | Collapse this transcript |
| Text decoration| 00:01 | So in this video, we're going to discuss text decoration,
| | 00:05 | which is not the process of hanging Christmas
ornaments on your text, although in essence it is about
| | 00:10 | text ornamentation, only in this case the ornaments
are things like underlining and overlining. So,
| | 00:16 | if you look at our page here, we already
have some text that has text decoration.
| | 00:20 | The links in the nav bar, about us, brewing, drinking,
products, contact us, those all have underlining. We may decide
| | 00:26 | that we want to get rid of that underlining.
| | 00:28 | So what we can do is say navlinks a
text-decoration none. Having done that,
| | 00:46 | the text decoration goes away, there
is no text decoration on those links.
| | 00:51 | We can decorate or undecorate, pretty much whatever we want.
The default for text decoration as you might imagine is
| | 00:57 | none. We could underline our h1s text and there we go.
| | 01:10 | We have the h1 text underlined.
| | 01:12 | Of course, now, a user coming into this
| | 01:16 | who is been conditioned to think that all underlined text is linkage
and all non-underlined text is not. Might look at this and say,
| | 01:24 | well that's weird they've got the text across there in that purple bar
that isn't really linking but then is this about tea history that's a
| | 01:29 | link. I wonder what happens if I click on it and
nothing happens and they get really frustrated.
| | 01:33 | That is a possibility that you have to watch out for.
| | 01:36 | Notice something else.
| | 01:37 | The underlying color takes its
color from the text color of the h1
| | 01:41 | and the about tea part, which doesn't actually have an
underline has that blue underline go underneath it.
| | 01:48 | We'll get back to that in just a little bit here.
| | 01:53 | You can actually combine facts. You
could both overline and underline some text,
| | 01:59 | or you could just overline it, or heck, if you want it to,
| | 02:03 | for some particular reason, you could
underline, overline and line through it
| | 02:08 | and zoozoozoom!, there you have it.
| | 02:10 | You don't have to do all that,
you could just do line-through.
| | 02:17 | Text decoration acts like a shorthand property and then you can
have overline, underlined and line through and you can have them
| | 02:22 | in any order, but there isn't like a text decoration underlying
property. There are no other properties for this to be
| | 02:28 | a shorthand too, so technically it's not a
shorthand property, it just sort of acts like one.
| | 02:32 | So you can combine underline, overline and
line through, in any order you want in any
| | 02:38 | fashion you want on a given element.
| | 02:41 | Let's take this back actually to just underline and overline.
| | 02:45 | Now we'll go back to the bit where
we have this dream text and this
| | 02:50 | purple underline and overline that go past it.
| | 02:52 | This is how a text decoration works in effect.
| | 02:56 | If you have a descendent element,
| | 02:58 | I'll go down and take a look at it, there's our
| | 03:01 | h1 with the b element and the b element gets a different
color than the h1 element, but we decorated the h1,
| | 03:08 | we didn't decorate the b element.
| | 03:10 | So the decoration for the main h1 goes past that b element.
| | 03:16 | And if we wanted to turn off the text decoration it's really
basically impossible on the b, is basically impossible to do so
| | 03:23 | because if we say text-decoration none,
what we've done is we've said, do the default,
| | 03:31 | this right here. There is no decoration on the
b element, there's decoration going past it.
| | 03:36 | That's not quite the same thing. So if I hit Reload,
| | 03:39 | nothing will happen because I can't turn off
| | 03:42 | the text decoration around the b element. I could if
I were willing to sort of burn the house down, say,
| | 03:51 | underline and overline for my text-decoration, but then
I'd also have to make the color of the b element white
| | 04:06 | and there, I turned off the text decoration,
| | 04:08 | but I also turned off the text. It's not visible anymore. The
reason that works is that and here's another way to do this,
| | 04:16 | we can just set the text decoration underline overline on the
b element, basically it's underline and overline get drawn over
| | 04:23 | the h1s underline and overline, which we can see by using vertical
align, which is a holdover from the one of the previous videos.
| | 04:34 | Suppose I shove that up a bit, you can see that the b element
has its own text decoration and the h1 has it's text decoration
| | 04:41 | and the only reason that the Green
| | 04:44 | overline and underline were there and the purple wasn't
and was that the green ones were literally drawn on top of
| | 04:50 | the purple ones. So that's kind of the deal with text decoration
if you have an element inside of another element and that outside
| | 04:56 | element has text decoration, you can't
| | 04:59 | turn off quote to quote text decoration
around the inner element. You can
| | 05:04 | try to fake your way around it but it
becomes rather difficult to do. So,
| | 05:09 | there's a little caveat about text
decoration, but in general, you can
| | 05:14 | underline, overline, line through or you can remove text
decoration from things like hyperlinks if you don't want them to
| | 05:20 | be underlined for some reason.
| | Collapse this transcript |
|
|
7. Using Margins and Borders to Create White Space and SeparationMargin essentials| 00:03 | This is the chapter where we have a lot of fun talking about
basically ways of separating and spacing out various elements.
| | 00:10 | This covers margins, borders, padding and basically,
| | 00:14 | the reason that these things exist is to let you
| | 00:18 | control the amount of separation between one element and another
or between the edge of an element's content and the edge of
| | 00:27 | the elements background, those sorts of things.
| | 00:30 | A lot of very good design is in
| | 00:34 | how things are separated and in what fashion and how much and
| | 00:40 | all that sort of thing. Well, I can't teach you how to be a good
designer, I can teach you the mechanics of how to realize a good design.
| | 00:49 | So what we're going to talk about in this video is margins.
| | 00:54 | Margins are completely transparent space that goes around
a given element. So if you think about the "blank line",
| | 01:05 | between the paragraphs, that's actually margins on the
paragraph, is top and bottom margins on the paragraphs
| | 01:11 | pushing the paragraphs apart.
| | 01:13 | There is no carriage return. They get stuck
in there, that's actually just a margin.
| | 01:17 | So we can use margins to do things like let's say, to push things away from
each other. For example, the masthead, we're going to give it a bottom margin.
| | 01:31 | When you have an em-based margin like this
one 1.75em this is one an three quarters ems
| | 01:37 | and when it comes to margins and padding and borders
| | 01:40 | 1em equals the font size for that element.
| | 01:43 | So in this case we're saying the bottom margin of the masthead
div should be one and three quarters times the font size for
| | 01:49 | the masthead div. If the masthead's
| | 01:52 | font size is 10 pixels, the bottom margin should be 17.5 pixels
or there, varying, you know, as close to that as possible. So
| | 02:01 | that helps push things away and the amount, the number of ems or
pixels if it turns out it's going to be a pixel-based margins is
| | 02:10 | dependent on the design really,
| | 02:13 | that they've been given by the designer or
that you've created if you are the designer.
| | 02:21 | So we can do things like remove margins by saying margin zero.
| | 02:25 | From of pure CSS point of view, there's no such thing as a
default margin, there aren't elements that have default margins
| | 02:33 | from a CSS point of view. As far as CSS is
concerned, an element is an element is an element.
| | 02:39 | But Web browsers have intrinsic styles. For example, the
| | 02:44 | margins on paragraphs that push one paragraph away from
another, that's a built in browser style, it's. So,
| | 02:51 | also things like unordered lists,
| | 02:54 | unordered lists may have margins. They may also have padding,
| | 02:57 | but we're going to talk about that in another video in this chapter.
| | 03:00 | So sometimes you find yourself explicitly removing margins as
opposed to explicitly adding them. Now here's a case where the
| | 03:11 | list items in the navlinks, let me scroll this down a
little bit, so that you can see, the navlinks list items
| | 03:16 | I'm giving each one of those a right margin,
margin right of half an em, but if you look
| | 03:23 | here before I hit Reload you can see the
| | 03:26 | the list items that are about, that contain
about us, about tea, brewing, drinking,
| | 03:30 | products and contact us, these are kind of smooshed together
| | 03:34 | and so with half em right margin on each one
of the list items that contains those links,
| | 03:40 | you can see they start to spread apart a bit.
| | 03:42 | We're not done with pushing them part for this chapter,
but we are for this video. Then we're just going to
| | 03:48 | spread this out a little bit and come back to add
more stuff later. So you can keep going with this.
| | 03:58 | For example, the homelink
| | 04:07 | and that's the anchor element up here, the a href
equals, and id equals homelink and then there's
| | 04:16 | the javacotea image inside of it.
| | 04:19 | I've given us some margins. I'll come back
to what that means in just a second but
| | 04:23 | there are some of the effects of pushing things around.
| | 04:26 | So this 1em 2em 1em 2em,
| | 04:29 | these are merchandise in the order top right bottom
left, which is clockwise from the top so 12 3 6 9 or
| | 04:37 | TRBL keep you out of trouble is
| | 04:40 | for top right bottom left.
| | 04:43 | So the first of the four here is the top so it's
a 1em top margin, a 2em right margin, a 1em bottom
| | 04:49 | margin and a 2em left margin.
| | 04:52 | This margin is a shorthand, it's a shorthand for the properties
margin top, margin right, margin bottom and margin left.
| | 04:59 | You don't have to write it out quite like this however
you notice there is a repetition here, we have
| | 05:04 | been effectively a b a b,
| | 05:08 | 1em 2em 1em 2em. We can actually take off the second pair
of a b, so we can just say 1em 2em what that's going to
| | 05:14 | is it's going to set the top and right
| | 05:17 | values and then the bottom value will get
copied from the top and the left value
| | 05:21 | will get copied from the right. So this margin 1em 2em
is exactly functionally equivalent to the 1em 2em 1em 2em.
| | 05:30 | Again, as with so many other things in CSS, in this sort of
situation, which one of these you choose to use is really up
| | 05:37 | to you if you prefer writing out all
the values so that you can see them,
| | 05:40 | then that's fine, go ahead and do it.
If you would prefer to have fewer characters
| | 05:45 | so that you have just the bare minimum of
what you need then you can go this route. Now,
| | 05:51 | had we decided that we wanted a top 1em, a right 2em,
no bottom margin and a left margin of 2em, could of set
| | 06:01 | 1em 2em 0 and in this case that's the top right and bottom values
and the left side gets copied from the right value of 2em.
| | 06:10 | We'll leave it out like that
| | 06:13 | and just add few more margins I suppose.
| | 06:24 | So in this case, we have for each one in the content column,
| | 06:32 | the h1 should have a top margin of
zero and a right margin of 33%,
| | 06:37 | bottom margin of 1,25em and no left margin.
So that 33% if we go back over, and take a look,
| | 06:43 | keep your eye on the about tea history line
| | 06:46 | is going to shrink down and the space
| | 06:49 | to the right of it from between the edge of the white background
on that h1 and effectively the right side of the column,
| | 06:57 | that's that 33% margin.
| | 06:59 | The easy way to think about this is that that's 32% of the
| | 07:04 | total space that the h1 was taking
up before we gave it the margin. So
| | 07:09 | within the area that the h1 can take up inside
of the content div that they are setting inside,
| | 07:15 | there's this 33% right margin and so
| | 07:19 | the background area of the h1 is taking up the
other 67% of that space that's available to it.
| | 07:27 | That will keep the h1 a little bit shorter as shown in the design.
| | 07:38 | We can keep going with this and add margins to
| | 07:47 | h2 so that the h2, The Legendary Origins of Tea, there'll be a little bit of
a difference there. Some of these may seem very subtle and you might wander
| | 07:58 | if there's really a reasons for them.
| | 08:01 | In put effect, there is,
| | 08:06 | basically because that's what was shown in the comp.
| | 08:09 | So here I've taken the margins off for the form element in the sidebar.
| | 08:14 | Form elements by default have a margin,
| | 08:16 | at least in internal web browser and remember that's not a CSS default, it's
a browser default, but every browser I've come across in the last 12 years
| | 08:25 | has had default margins on form elements.
| | 08:28 | So here's a case where
| | 08:32 | with this sidebar div rule, the margin top 0.75em,
| | 08:36 | what we're going to do is push a number of divs in the
| | 08:40 | sidebar apart from each other.
| | 08:45 | There's a little space right there between each of the divs.
| | 08:52 | Divs, at least according to the browser of
the day, do not have an intrinsic margin so
| | 09:03 | here's a case where I'm using the shorthand property to sort
of make my life let's say simpler for this tea of the day
| | 09:11 | h4, what I really want is a bottom margin
| | 09:15 | and I don't want any the other margins and I could say margin top 0
| | 09:19 | margin bottom 0.5em and then trust that the
browser is not going to have left or right margins
| | 09:25 | applied to each form intrinsically, of course that means that
I'm relying on browsers to do something that I expect them to do,
| | 09:32 | not only now, but all the way into
the future and if there's one thing that
| | 09:36 | close to a decade and a half in the industry
has taught me is that browsers will never
| | 09:40 | honor those wishes over the long haul.
| | 09:42 | They are always going to change
something, usually something that you
| | 09:45 | would least expect so in this case what I've set is I want to get rid
of the top margin, I want to set the specific bottom margin and I want
| | 09:52 | to make sure that there's never any left or right margins, so I'm just
going to say margin 0 0 0.5em, so that's zero top, zero right, half em on
| | 10:00 | the bottom and then the left, the value fort he left margin
| | 10:02 | gets copied from the right margin because I didn't supply it.
| | 10:06 | So there you go,
| | 10:08 | and then the last thing I'm going to do here
| | 10:17 | is do something that probably is a little
odd at first. Let's see the results.
| | 10:26 | Notice the table here, the table is currently sitting flush
left inside of the box that it occupies. And when I reload
| | 10:34 | it's going to center itself,
| | 10:36 | and what happens in CSS if you have an element
| | 10:40 | like a table that has a
| | 10:42 | limited width, as tables do, tables will
| | 10:46 | be as narrow as they can be and still display that content
| | 10:50 | or if you have an element to which
you've given an exclusive width, let's say,
| | 10:57 | we said for this table we wanted it to
have a width of 100 pixels, that's
| | 11:03 | not necessarily a great idea, but we're going to go with it, or even
| | 11:08 | let's say 80 percent, we want it to be 80% wide, we might decide that.
| | 11:15 | So if you have an element that has a width specified
or you have a table element, basically, which
| | 11:21 | sort of implicitly derives a width from its content and
then you give it automatic left or right margins, then
| | 11:28 | the automatic left or right margins basically will take the difference
between the elements width and the total amount of the width that that has,
| | 11:34 | split in two and take it equally, so that
| | 11:38 | creates a center effect, because the automatic
left and right margins are set to be equal.
| | 11:44 | And that puts the element centered inside of its
| | 11:47 | parent. Now had I done that for the h4s, let's say I did this,
| | 11:54 | for the tea of the day h4s, I set margins zero auto 0.5em
| | 11:59 | and hit Reload, there's no real change here, they are centered
| | 12:02 | is just that they take up the full width
of the divs inside which they live so that's
| | 12:08 | technically centered even though,
| | 12:10 | visually, it's no different than what we saw before, but that's
because by default, if you don't give an explicit width to
| | 12:16 | something like an h4, a paragraph or a div, it's
just going to expand out to be as wide as it can be
| | 12:22 | to fill the space that has and so, almost nobody ever
| | 12:28 | puts an auto left and right margins unless they're trying to center
something like a table or something that has an explicit width.
| | 12:35 | There's one small backward compatibility note I'd like to make
| | 12:39 | this auto margin centering effect does not work in Internet
Explorer 5.5 and earlier so if you are working with
| | 12:49 | IE 5.5 and earlier, then this auto margin doesn't really work.
You can fake your way around it though by saying effectively
| | 13:01 | by centering, using text-align center on whatever the
| | 13:09 | parent element of the thing is that
you're trying to center, and then
| | 13:13 | for the thing you're trying to center,
| | 13:17 | you say text-align left because in IE 5.5 and earlier,
IE 5.5 and earlier thought that text alignment
| | 13:25 | also elements align, even though it doesn't.
| | 13:28 | Text align only refers to the alignment of text, it says nothing
about centering or right justifying elements like tables.
| | 13:34 | Still IE 5, IE 5.5 and earlier versions
| | 13:38 | thought that it did and
| | 13:40 | for whatever reason they didn't implement
the auto margin centering, so this is
| | 13:45 | a known workaround where you use text alignment and
| | 13:49 | auto margins in conjunction to get the centering
effect even in IE 5 and IE 5.5 and if you
| | 13:57 | ever run into a situation where you're going to need to do
that, you can always do a Google for, you know, text align
| | 14:05 | auto margins centering or something like that
| | 14:08 | and the, get more information.
| | 14:11 | So that's a quick look at margins and after this
we're going to take a look at Borders and Padding.
| | Collapse this transcript |
| Adding borders| 00:01 | In this video we're going to talk about borders and elements. Borders
are a way of providing sort of a more concrete separation between
| | 00:09 | pieces of a design and what we're going to do here,
| | 00:11 | you can see, this is the page as it
now stands and if we compare this to the
| | 00:19 | designers comp that was given to us there are a few borders
here is practically that we don't have yet. For example
| | 00:26 | underneath The Legendary Origins of Tea, there's a separator.
| | 00:29 | Also under the Labrador tea,
| | 00:32 | heading over in the sidebar and the tea of the day box,
| | 00:36 | there are these bottom borders.
| | 00:38 | There is one other set of borders in this design and that's the
separators between the links in the navigation bar across the top.
| | 00:44 | This is the sort of thing you might
| | 00:45 | think yourself oh, look it's a vertical pipe character,
| | 00:48 | and I can just type that off of my keyboard and you can,
| | 00:52 | if you're willing to insert those characters into your
document source, but we can do with CSS, just using orders,
| | 01:01 | and the first place that we're going
to take care of this is with the content
| | 01:07 | h2 where we're going to put a bottom border on it,
| | 01:13 | if you recall it was what looked like a one
pixel solid border and it had a green color that we
| | 01:20 | got from the designer as being B0D742 and
| | 01:27 | having done that, if we flip back over to Firefox and hit Reload,
| | 01:34 | there's that border, just like we saw in the comp. Now this
| | 01:39 | is not the right separation yet from the text, it's a little
too close to the texts. That we're actually going to fix
| | 01:44 | in one of the next couple videos when we'll about Padding.
| | 01:48 | But at the moment we've got the
border that we want. Adding a border to
| | 01:53 | the h4 under the tea of the today is similarly simple, you say.
| | 02:01 | Now in this case, we can actually get away
with saying quarter one px solid, because
| | 02:08 | what we want is we want a white border then, that way border matches
the text color and we can make the assumption that the border
| | 02:16 | under heading should always match its
| | 02:18 | text color so by leaving off
| | 02:21 | the text color in our code
| | 02:23 | and just saying border bottom 1px solid, we get the effect
| | 02:28 | and sort of future proof ourselves.
| | 02:30 | Now the last thing is going to be, the certainly more interesting
one and that's the border separators between the links in the comp.
| | 02:40 | What we have if we look at the markup is
we have a bunch of, well we have an ordered list
| | 02:45 | with list items, and
| | 02:48 | usually those list items contain various links.
| | 02:52 | So what we're going to do is on these navigation link
| | 02:57 | list items is create right borders,
but a border on each right one, so
| | 03:05 | again, using a color that we got
| | 03:08 | from asking the designer. A right border
on each of these list items of one pixel solid
| | 03:13 | and a given color, we hit Reload, you can see
that those borders are starting to appear.
| | 03:18 | Now, it's not exactly like it looks in comp yet,
because we still have to do things like add padding,
| | 03:23 | not only to the list items here, but also to the
| | 03:27 | order list in which they sit, so that we can make the
| | 03:30 | purple area of the navigation bar bigger, but
this is a start. You can already see that we have
| | 03:34 | these vertical line separators between each of these links.
| | 03:38 | But there's one more than we want.
Over to the right edge of contact us,
| | 03:42 | we have a border that
| | 03:44 | we're not looking for, it doesn't exist in the comp.
| | 03:48 | So we're going to need to do little bit of a structural trick.
| | 03:54 | You'll notice if you look closely,
| | 03:56 | the first list item in the list has a class of first and the last list
item in the list has a class of last. We're going to use that to our advantage.
| | 04:04 | Right here by saying navlinks li.last,
border-right 0. That's going to
| | 04:17 | effectively switch off the border there.
| | 04:19 | It's going to do that in a couple of ways, but we're
going to reload, we notice that separator comes away.
| | 04:24 | What we've done, we could have set border right 0 none,
| | 04:29 | like that. Basically border right 0 is setting
| | 04:34 | the right borders width to be zero,
| | 04:37 | but it's also by default setting
the right borders style to be none
| | 04:41 | as opposed to solid and if a border doesn't have a style
| | 04:46 | if the border style of a border is none, then it has no width or
color for that matter it simply ceases to exist so, you can say
| | 04:54 | border right zero and know that if that's going to effectively switch
off a given order or you could say border none, border-right none
| | 05:01 | and that will give you the same
| | 05:04 | effect. So, again whichever one you find you like
better is the one that you should stick with.
| | 05:10 | There are a number of border styles, besides none and
solid, things like dotted and dashed and groove where
| | 05:20 | pretty much each of them does what
you would expect given their naming.
| | 05:24 | So you can look into those
| | 05:26 | in more detail, if you like or play around with them.
| | 05:30 | The one that's a little interesting, we're just
going to take a quick look at what is double.
| | 05:37 | If you look at the border underneath the h2 now it's
| | 05:41 | three pixels wide, but it's a double border
so there's a space between the two, between
| | 05:47 | two lines in the border.
| | 05:48 | The interesting bit here, the reason I bring
this up is that you can't control the ratio of
| | 05:53 | the border, the two lines widths,
to the width of the gap between them.
| | 05:57 | So if I were to say border
| | 05:59 | and if I were to say the border bottom here 4px double,
| | 06:02 | I don't know if the gap is going to get bigger or the inner
one of those lines will get bigger or the outer one of those
| | 06:08 | lines will get bigger and more to the point, there's no way
for me to be sure that it will be consistent across browsers.
| | 06:14 | Odds are that it won't. So, generally, if
| | 06:17 | someone is using a double border they're doing it
this way three pixels wide, because they can be
| | 06:23 | pretty darn sure that they are going to get a one pixel
line, one pixel gap and a one-pixel line and be done with it.
| | 06:29 | Another interesting question is what
happens if you say, one pixel double.
| | 06:32 | Some browsers have been known to simply drop
the gap between the two lines, but anyway,
| | 06:38 | that's the one border style that can get a little interesting.
| | 06:42 | The others are fairly straightforward
like I say, dotted, dashed and so on and you can
| | 06:47 | look into those in more detail, should you so desire.
| | Collapse this transcript |
| Padding| 00:00 | In this video we're going to add padding, having done margins
and borders, already as you can see we have in our
| | 00:06 | style sheet and now we're going to put some padding on things. Now padding is the space between the content of an element and the border.
| | 00:15 | And it's part of the background area so any padding we add the
background of the element is going to extend into that padding.
| | 00:21 | A good example of this
| | 00:23 | is with the navlinks, that purple bar that we've got going across the
top. We'll give that let's say half of em of padding on the top and the
| | 00:30 | bottom and three ems of padding on the
side. If we reload, there you go, the
| | 00:35 | navlink bar is gotten larger that half
of the padding on the top and bottom, basically
| | 00:40 | pushes extra space between the content area, which is where all those
list items and links are, the about us and brewing and so on, and
| | 00:48 | the edges of the background area. In technical fact,
| | 00:53 | paddings between the content edge and the inner border edge. So
if we had a border around the navlink here, then the padding would
| | 00:59 | actually be the distance between the content and the inside
of that border. We don't have that. We're going to see that
| | 01:05 | in a moment when we do some padding in the content.
| | 01:07 | This is also how we're going to push those
| | 01:10 | borders apart from the links. Right now we have those
| | 01:13 | vertical separator borders that are jammed right up
against the right edge of each of the list items, so,
| | 01:19 | it's just simple padding right of, in this
case we're going to go three quarters of an em,
| | 01:28 | hit Reload, there you go. They push apart, have
these lovely separators between each of the links.
| | 01:35 | You might wonder why do we have a right margin of half em and
a right padding of three quarters of an em and that's actually
| | 01:41 | an interesting question. The reason being that
| | 01:45 | the white space between each of these list items,
| | 01:49 | counts for a little bit of space.
| | 01:51 | So that carriage return or line feed if you
prefer in tab that I have highlighted there
| | 01:57 | creates a little bit of a separation between the contents of
two list items and experience has shown me that that tends to be
| | 02:04 | about a quarter of an em, so the right margin of half an
em, plus the cord around that sort of intrinsic white space
| | 02:11 | handling separation comes out to about a three quarters of an
em, which is why when you look at the borders, they seem to be
| | 02:17 | centered between the base for the link text in each case.
| | 02:20 | So we can just keep going with that for the homelink link
| | 02:31 | which is what it is time to write.
| | 02:34 | we can give it a couple of ems of top padding and no right
padding and a half em of bottom padding and 1em of left padding,
| | 02:43 | just like that and then if you look at the Javaco tea a bit,
| | 02:46 | and extends outward and suddenly
the mass area is taller. Also the
| | 02:52 | background area gets taller and notice the white curl image
there in the upper right hand corner of the strain that's
| | 02:59 | actually a background on the homelink link.
| | 03:03 | We're using padding to make that
hyperlink bigger, so that we can see
| | 03:07 | all that background image. If we
used margins instead of padding here
| | 03:11 | then be background area would be smaller,
| | 03:14 | because margins don't extend the background area, only padding
does and so we might have that background image get cut off.
| | 03:20 | So that's why we're using padding there.
| | 03:23 | We can continue on with adding some padding.
| | 03:26 | For example, the content each one here, which is the
one that has the weight box around it, we might give it
| | 03:34 | a similar lead to the navlinks, a half an em of top bottom padding
and a couple of ems of right and left padding and then the h2.
| | 03:46 | That's the one that has the green bottom border underneath it.
We're going to use some bottom padding to push the border away from
| | 03:52 | the content of the h2.
| | 03:54 | So when we go back over and hit Reload, you'll see that the white
area around about tea history is going to get larger and the
| | 04:00 | border is going to push itself away from
| | 04:03 | The Legendary Origins of Tea text,
| | 04:05 | just like that.
| | 04:06 | That's that half em of padding helping us
out on The Legendary Origins of Tea, giving us
| | 04:13 | something that's pretty much like
what we saw with the designers comp.
| | 04:18 | so only the about tea history is
sort of spread apart and we're not
| | 04:22 | done with those things we actually in an upcoming video,
| | 04:25 | we'll talk a little bit about
| | 04:26 | how to finish up the last polish points, but for now this is
| | 04:31 | how we're going to make this work.
| | 04:32 | So let's go back and actually add
| | 04:36 | a little bit of padding over in the sidebar.
| | 04:38 | If you look over here, there's no padding around the form.
| | 04:42 | Basically the text input in the search box in the form element
is just shrunk wrapped around basically the the contents
| | 04:51 | there, and the same thing with the tea of the day in the post archive
headings are very sort of constrained and for that matter, if you look at the
| | 04:57 | interior of the tea of the day box, where it says Labrador Tea and
it's got some text, that stuff is all grayed up against the edges
| | 05:04 | of the div that's creating that box. We don't want that.
We actually want to push those in a little bit so there's
| | 05:10 | visual separation between the contents and the edges of
the box. We probably want to do that even if that weren't
| | 05:16 | what the comp calls for, just because honestly this just doesn't look very
good and that's, it's kind of annoying to read, so we want to fix it anyway,
| | 05:23 | and that's what we're going to do. For the form
| | 05:27 | we can give it some all around padding with
the 8/10 of an em or 4/5 of an em if you prefer,
| | 05:35 | and then for the divs we're going to give them no top
padding, some right and left padding and some bottom padding.
| | 05:43 | Now, the reason that we do want to give them any top padding, if
we go back to Firefox, if we gave them top padding, that would push
| | 05:48 | the tea of the day in the post archive headings downwards and would put
gray above them and that's not what we want according to the designers comp.
| | 05:55 | We just what to push things inward and the bottom padding will
| | 05:59 | prevent things like you can see here, where the tea of
the day picture is jammed right up against the bottom of
| | 06:04 | that div box. That's actually not such
a bad effect in my opinion, but it's not
| | 06:10 | what the designer called for. If you look
in the comp, you can see that the designer has
| | 06:14 | space set out there so we want to recreate that and this
| | 06:18 | padding of 0 1em 1em will help do that, and if we reload,
| | 06:24 | there you can see, we've created some extra space.
| | 06:27 | But wait a minute you say,
| | 06:29 | those headings just got pushed inward, post archive in
the tea of the day. Yes, there's really no way to say,
| | 06:36 | apply padding to all of the contents of
this element except for the ones I don't want to,
| | 06:40 | you can directly say that in CSS but you can fake your way around it and
we're going to find out in the next video. For now we're just going to
| | 06:46 | have to accept that that's
| | 06:47 | the state of things and will
take steps to overcome them
| | 06:50 | later. As for why we used eight tens of an em for the form,
| | 06:55 | that just seemed to be about the right amount when
compared to the visual comp. The comp actually looks
| | 07:01 | like there might be slightly more than that and we can fit it
with that if we like, we can say, well maybe 0.8em then maybe
| | 07:08 | that's good on the sides and maybe we want one quarter em on the
top and bottom and we'll just go and we'll reload and maybe that's
| | 07:14 | a little better. The nice thing about CSS of
course being that you can just go to the style sheet,
| | 07:18 | fill it with some numbers, you know, do some trial and error if you
like it and it really doesn't cost you a whole lot to do that. So
| | 07:26 | there's really only a couple more
things I'd like to do here before we
| | 07:32 | move on to the next video. One is to add a little
bit of padding to those h3s, that would be the
| | 07:43 | tea of the day and the post archive. I want to get some top and bottom
padding cause if you look again in the comp, they're nice and spacious and
| | 07:50 | so I'd like to recreate that and here it is, just like that.
| | 07:56 | And then the last thing is at least in the sidebar is for
| | 08:01 | this tea of the day, Labrador Tea, where it says Labrador
Tea, if you look, it has a little bit of spacing
| | 08:07 | and the top as well so we're just going to take care of that.
| | 08:13 | And then the last little bit is just the footer,
| | 08:28 | so that we can recreate as much of the space as we
can, shown there, in the footer in the design comp,
| | 08:34 | and so if you reload, you notice
Labrador Tea kind of stretches out and
| | 08:39 | there's the footer gotten all nice and tall.
| | 08:42 | So that's how you add padding. As I said before, there are
obviously some things that we need to clear up like the
| | 08:48 | space around the post archive,
| | 08:51 | the tea of the day headings and also for that matter
of a fact that the about tea history white box doesn't
| | 08:59 | go over to left as far as it
should according to the design comp,
| | 09:02 | and for that matter,
| | 09:04 | the fact that there's blank space between the edges of the
browser window and all of the content, look around the masthead,
| | 09:10 | the design comp, doesn't really want it that way, so we need to get
rid of that and in the next video we're going to do all that stuff.
| | Collapse this transcript |
| Using negative margins| 00:01 | With the additions of margins, borders and
paddings, we've come pretty little far way
| | 00:06 | in terms of making our design look
like what the designer wanted.
| | 00:11 | But there are still some things that need
to be addressed as an example of the date
| | 00:15 | near the upper right-hand corner,
| | 00:17 | that the designer count for October
26, 2005 is supposed to be on the
| | 00:22 | navlinks bar and not below it as it is right now. The about tea
history has a white box that's supposed to extend all the way
| | 00:30 | out to the left side of the design and not line up with the
legendary origins of tea and the rest of the content in the
| | 00:37 | content column, and the tea of the today in post archive headings, those
are supposed to go all the way out to the edges of their respected
| | 00:43 | boxes, and that's not happening right now either.
| | 00:47 | So we need to fix that. There are a variety of ways we could
go about this we can try to take the about tea history heading
| | 00:55 | and move it out of its content
column so that it's not pushed over
| | 00:59 | along with the rest of the content column,
| | 01:01 | but that really means rearranging the document structure just to create
stylistic effects, and I always try to avoid those if at all possible.
| | 01:08 | Similarly try and get that July 16, 2006
| | 01:12 | or basically get the date up into that bar. That
| | 01:16 | could be a little tricky.
| | 01:17 | We can do it let's say with floats but then we'd have to figure
out how to get one float to sit over the top of another and
| | 01:24 | that doesn't really work very well and
| | 01:27 | we could try to float it and not have the
| | 01:30 | navlinks be afloat but then we'd have to move
the date to be before the navigation links, and
| | 01:35 | we can't restructure hacking. What we can do instead is for
these things is use a little trick, a little negative margin trick.
| | 01:43 | We're going to start this, basically I'm going to start this by saying
margin top zero because as it stands right now the space between
| | 01:53 | the July 16, 2006 text and the
| | 01:56 | element above it, that's the top margin on that paragraph.
| | 02:00 | As it turns out it's a 1em top margin. So if I set that to zero, then as
you can see here the date snuggles right up against the navlinks, but
| | 02:08 | that's ok, it's closer
| | 02:10 | but it's not what we wanted yet, but if we change this top margin
to be negative, so we actually say, let's say, negative 1em
| | 02:18 | then what's going to happen over here is that's just going to keep
getting pulled upward. The whole paragraph is actually a paragraph
| | 02:25 | containing this date and it's just being pulled upwards, further and
further, thanks to this negative top margin. So we have it into the bar
| | 02:32 | it's not exactly where we want it,
| | 02:34 | but visually we've got it into the bar, structurally, nothing has changed
of course, but visually we're getting it very close to where we want.
| | 02:40 | And now the last thing is just to find the right distance for this to
move as it turns out that's about 1.66em, if we hit Reload, there you go.
| | 02:52 | It looks vertically centered in the bar
| | 02:55 | but that's because of that negative top margin. So
| | 03:00 | that's the way to use negative margins, you basically
use negative margins to pull things out and pull things
| | 03:04 | over each other. It's a little visual trick, but the nice thing is
that we didn't have to go and hack through the document structure and
| | 03:11 | created a two cell table or something like that, just to
| | 03:14 | put one thing next to another.
| | 03:16 | We didn't have to worry about that at all.
| | 03:18 | Similarly for that h1 in the content, instead of having a right margin of
zero we're going to try a right margin of minus 2em, which pulls it on out.
| | 03:35 | Now, digging into the style sheet it turns out that
| | 03:38 | the left margin of the content div is
| | 03:41 | 3em, about tea history is one and a half times the font size of
| | 03:46 | the rest of the content div, so with a negative 2em
| | 03:50 | left margin it gets pulled the same distance as
| | 03:53 | that space. So everything lines up nicely and
| | 03:58 | if you look back, we also had a right and left
padding of 2em, which is exactly equal to
| | 04:03 | the distance of the negative margin there, which is why
| | 04:06 | the a in about tea history lines up with the rest of the column.
| | 04:10 | I didn't mention that
| | 04:12 | when I gave it 2em padding in the last video, but
now you know, I was thinking ahead a little bit.
| | 04:18 | So we're going to use a similar approach for the
| | 04:21 | the sidebar headings, the tea of the day and post archive.
| | 04:25 | With these guys I'm just going to say
margin, no top and bottom margins, -0.8em
| | 04:35 | and if we hit Reload they spread out very nicely.
| | 04:40 | 0.8em, why that, because the h3s have a font size of 1.25em
| | 04:47 | and 0.8 times 1.25 equals one,
| | 04:51 | and that equals the 1em
| | 04:54 | right and left padding on the divs in the sidebar.
Now, having done that as you may have noticed, now the
| | 05:00 | text and tea of the day and post archive is gotten jammed
all over the side and we don't want that to happen. So here
| | 05:07 | we'll change the left and right padding on the guys to be exactly equal
to the negative left and right margin that we just set and tadaaaa!
| | 05:15 | There they go. We can fit that a little bit
| | 05:18 | should we so choose, but that gives us the
| | 05:23 | result we want so why not run with it.
| | 05:27 | Now there is one more thing to point out here, which is the
body element, the body, the document, whatever you want to call it.
| | 05:35 | There is this quote, unquote gutter space around
| | 05:38 | the entirety of our design here. You can see this most easily
| | 05:42 | around the sides and the top of the masthead where there's just
this blank space, it's been stuck in between the edges of the
| | 05:48 | browser window and the design.
| | 05:51 | This is a browser default. Pretty much every browser that
exists today has this default. Interesting thing is, that's
| | 05:59 | typically implemented as a style on the body element,
| | 06:03 | and almost every browser in the world does it as a margin,
but there's an argument to be made and some browsers accept this
| | 06:12 | argument, that that's actually padding on the
body. Frankly, I think that that's correct.
| | 06:18 | That really is body padding, a body margin,
but that's not what other browsers have done,
| | 06:23 | it's not what most browsers have done, so the way
that we get rid of that in as cross browser and the
| | 06:29 | safest way possible is to say body, margin zero, padding zero,
| | 06:34 | and having done that, if we go back and reload, see everything
moves out, there's no separation now between the design and
| | 06:43 | the rest and the edges of the browser window, and we have things
looking pretty darn much like they appeared in the designers comp.
| | 06:57 | So that's the fun that you can have with negative margins and zeroing
out certain margins. In the last video we're going to talk about
| | 07:07 | margin collapsing, which is a
| | 07:09 | little bit of a technical issue, but it's, it's important to understand,
so that you can understand why certain things happen in web browsers.
| | Collapse this transcript |
| Margin collapsing| 00:01 | In this video we're going to take just
a minute to talk about the process of
| | 00:05 | margin collapsing. It probably sounds very boring or
alternatively perhaps catastrophic but it's really neither.
| | 00:12 | This is a process by which margins are
| | 00:15 | in a sense, combined in order to provide
the layout source flats that we might expect.
| | 00:22 | The first thing we're going to do actually
| | 00:26 | is get rid of the margin on paragraphs, simple enough,
| | 00:30 | we're just going to say no margin on paragraphs,
| | 00:32 | and if you look at the paragraphs in this main content, where
| | 00:36 | the image has been removed in order to make this little easier to
understand. Watch what happens to the paragraphs when we hit Reload.
| | 00:42 | They all jam up together. There's no space between paragraphs anymore
because the quote and quote blank line between paragraphs has nothing to do
| | 00:49 | with line feature, character change
or anything like that, it's a margin,
| | 00:53 | it's a margin effect,
| | 00:55 | by default paragraphs have 1em of top and bottom margin.
| | 01:01 | So we have no margin here.
| | 01:04 | Let's put in some padding. I said before
that by default paragraphs of have 1em of
| | 01:14 | 1em of top and bottom margin, why
not 1em of top and bottom padding?
| | 01:18 | Well, the interesting thing there is, if
we do that, and we go back and reload,
| | 01:22 | there's a lot of space between these paragraphs.
| | 01:26 | Ok, now what's happening is probably easiest to see
| | 01:30 | if we put let's say a bottom border,
| | 01:40 | I'll make it really obvious, ok, so we have
dashed red border on each of these paragraphs
| | 01:46 | and there's 1em of padding on the bottom of each of
these and 1em of padding on the top of each of these.
| | 01:52 | All right, but that means that there is 2em
of space between each of these paragraphs.
| | 01:59 | The 1em of bottom padding plus the 1 em of top padding in the
following paragraph. The border here is just helping us see
| | 02:06 | the difference between where the, where the border
is between the two, effectively where they meet up.
| | 02:12 | So let's flip that around.
| | 02:15 | Let's have margin of 1em 0 and padding of 0. All right.
| | 02:25 | And these guys get up very nice and close to each other.
Now the thing is it's not that there's no bottom margin here,
| | 02:32 | remember, margins are outside of border, so
| | 02:34 | these, the bottom borders now are along
the bottom edge of each paragraph's content.
| | 02:43 | We'll take those out so that it's a little easier to see. There's
really only 1em of space here and that's because of margin
| | 02:49 | collapsing. what happens when you have two margins that are vertically
adjacent effectively, so if you have a paragraph followed by a paragraph,
| | 02:56 | and the first of the two paragraphs has a 1em bottom margin and
| | 03:00 | the second of the two paragraphs
| | 03:02 | has 1em top margin, you have them slide together until
one of those margins touches the border of the other
| | 03:08 | element. So, in a way you can think of margins like strips
of transparent plastic that go around your elements and
| | 03:16 | everything else, the borders, the padding and the content has
a piece of paper around which those, the transparent plastic
| | 03:22 | margins go and when you have two adjacent margins, the
| | 03:26 | transparent plastic margins slide over each other
| | 03:29 | until the edge of one of those strips of plastic touches the
| | 03:33 | edge of paper on the other margin. At that point they stop. Ok.
| | 03:38 | They don't get any closer. So,
| | 03:41 | that's in effect how margin collapsing works.
| | 03:45 | That's at least the basic bit. Now, here's where
| | 03:50 | margin collapsing comes in, in ways that you
might not expect. I'm going to, for the moment,
| | 03:57 | make sure that the masthead has
no top padding and if I hit Reload,
| | 04:03 | notice that suddenly blank space
opened up on quote and quote space.
| | 04:06 | That's actually a margin inside the masthead.
| | 04:12 | The reason that that happens is that there's an element in there,
| | 04:16 | that has a top margin that's sticking out of the masthead div.
| | 04:21 | That's completely legal,
| | 04:23 | that can happen and there are reasons why that's a good idea,
they don't make sense in this circumstance, but this isn't
| | 04:29 | the circumstance for which margin collapsing was envisioned. It
makes sense when you have a whole bunch of elements and lists.
| | 04:35 | For example, without margin
collapsing lists would get very, very,
| | 04:39 | or at least could get very, very spacious
and there would be a lot of margins in an
| | 04:44 | strange things would happen at the beginning and end of lists. So it's
just one example, but anyway, there's a margin sticking out of this masthead.
| | 04:55 |
The way that we get around that, well, there
are two ways that we can get around it. One is to
| | 05:00 | make sure there's no top margins or bottom margin sticking out of
something like a masthead div, but that's not always really practical.
| | 05:06 | the other thing that you can do is put either a border or padding
across the top or the bottom of something like the masthead div.
| | 05:12 | So in this case, instead of a padding-top of zero,
we might say padding-top 1px. I doesn't matter how much
| | 05:18 | top padding there is in this case,
there just needs to be some,
| | 05:21 | and then reload that top padding make sure that he
| | 05:25 | margin doesn't stick out of the div
| | 05:28 | and give us some problems here. We're going to do the
same thing with a top border. We could've had a solid
| | 05:33 | top border, a one pixel solid border that
was the same color as the background color
| | 05:38 | of the elements, and that would've had the
same effect as the one pixel top padding.
| | 05:43 | So you know, whichever one you
prefer, using margins or padding,
| | 05:47 | in these sort of situations is really kind of up to you,
| | 05:50 | is just something to watch out for with margin collapsing. If
you ever have a case where you have an element that there's
| | 05:56 | blank space before it or after it, or there's a quote and quote
blank line before or after it, that's something to watch out for is
| | 06:03 | the possibility there might be margins sticking out of it. In those
cases, if you say, geez, I've have got this box with this background
| | 06:10 | color, but it has this blank space it's occurring above or
below it, just give that box a border quickly, you know,
| | 06:16 | just a one pixel border, just for a second to see if the one pixel
border, could you know, basically fixes the problem and it does and that
| | 06:23 | means you have a margin sticking out of
| | 06:25 | that div. If it doesn't, that means that there's
| | 06:27 | something else you need to look for, that's creating the blank
space, may be an element right before it that is pushing it down. So,
| | 06:35 | that's margin collapsing one of the little
| | 06:39 | fiddly mechanisms inside CSS that 98% of the time makes
your life easier, but the other 2% of the time is very
| | 06:45 | exasperating and so knowing about it helps you eliminate that 2%.
| | Collapse this transcript |
|
|
8. Creating TablesStyling tables and captions| 00:01 | In this chapter we're going to talk about styling tables.
| | 00:05 | Now, you might think yourself, wait a minute, tables, I thought this
was what we're getting away from and we're not actually talking about
| | 00:10 | tables for layout, we're talking about actual
table tables, like the post archive calendar,
| | 00:15 | which here, for this particular chapter we've moved it up above tea
of the day to make it a little easier see. Now, when do things to it.
| | 00:24 | There's nothing wrong with tables, the tables are not evil, tables
were never evil, tables were just really egregiously abused
| | 00:31 | and made to do things that they were never intended to do and one
of the problems with tables I had is that it was really bloated and
| | 00:37 | inefficient and made pages huge and difficult to deal with.
| | 00:41 | On the other hand, there is information that is tabular in
nature. If you had a financial summary that would be a table
| | 00:48 | or a monthly calendar as far as
I'm concerned is a table. You have
| | 00:52 | columns representing the days of the week and
you have rows representing weeks of the month.
| | 00:56 | That's to me is a table. It's
| | 00:58 | possible to create a monthly calendar
without using any table markup, but
| | 01:03 | for me and I've just never really seen why you would do that
even if I've created examples showing ii. Pretty much I've
| | 01:08 | created examples and say, hey, this is how you would do a monthly calendar
without a table and this is also why you shouldn't. So, what we have here,
| | 01:16 | over in the post archive box is
| | 01:18 | a table and actually everything below the post archive heading, the
July 2006, the Sunday Monday, Tuesday, Wednesday, Thursday, Friday,
| | 01:25 | Saturday, all the numbers, those are all enclosed in a table.
| | 01:30 | Now, what we're going to do is take a quick look
| | 01:33 | and actually we're going to zip down here,
| | 01:36 | and you can see here, there's a table, and it has a caption,
| | 01:40 | there's a caption element, and then there's a table head, the t head
element with some table headers and a t body element, table body with
| | 01:49 | a bunch of rows and a bunch of table cells,
| | 01:53 | and each of those table cells actually has a class
| | 01:56 | indicating which day of the week it is,
we'll see why that is in our later videos
| | 02:01 | in this chapter. What we're going to do here, the first we're
going to do is make this a little bit smaller, just very simply.
| | 02:10 | I'm going to make the whole thing smaller,
which will shrink it down. OK. Now,
| | 02:22 | that's ok and you can do that, and it might also be nice to pull
a little bit of a margin on here to push it away from the post
| | 02:31 | archive header and also to center it.
| | 02:34 | We talked about this in the videos on margins, in the previous chapter,
and we're going to recap it here just a little bit. A 1em top margin and
| | 02:42 | automatic, auto left gray margins,
which will center it inside the box.
| | 02:48 | Now we have this caption.
| | 02:50 | Actually this is where something interesting comes in. You notice that
space opened up between the table and the caption and that's actually
| | 02:58 | something of a point of contention.
| | 03:00 | The caption is within the table, so it really
should be inside of the tables margin, but
| | 03:06 | that's not what happened here, so, what we may want to do instead
| | 03:13 | is change this so that the table doesn't have any actual margin,
| | 03:20 | but the caption element does have a top margin and
| | 03:33 | that will push it down to where we're looking for it to be.
| | 03:37 | We might also want to say, instead of just margin-top,
margin 1em auto and then no bottom margin, and that will
| | 03:48 | pop and line out the way that we wanted. This is the case where
| | 03:52 | using, you know, the same auto margins for the captions and the table and
putting in margin on the caption instead of the table. Whether or not
| | 03:59 | that's the way it should be down, is as
I say a matter of at least some debate, but
| | 04:04 | for cross browser consistency is surely the best way to go.
| | 04:08 | There is one thing that
| | 04:10 | probably we should do here though, the month. Let's make that
a little bigger and bolder so that it's a little more obvious.
| | 04:17 | We already said that we wanted the
font size of the table to be smaller.
| | 04:20 | So we can make the font size of the caption be larger which,
| | 04:25 | in any sane browser implementation would take the font
size of the caption back up to where it was before
| | 04:35 | we made the whole table smaller. Basically go down one font size and
that we'll be smaller and then go back up one level with larger,
| | 04:41 | get back to where we were before and then we can, you know,
with the font-weight make it bold faced and now, July 2006,
| | 04:49 | stands out a little bit more. We can fiddle with the padding
and the margins and the caption for its placement but this is
| | 04:56 | pretty good the way it is.
| | 04:58 | It's a nice way to have something that's associated with
the table, that captions it without having to add like another
| | 05:04 | heading or something like that, in order to say July 2006.
| | 05:08 | So that's a very basic styling of
tables in terms of font sizing and margins.
| | 05:14 | In the next video, we're going to get into
| | 05:16 | styling more directly and some of the elements within the table.
| | Collapse this transcript |
| Styling table cells| 00:01 | In this video, we're actually going
to start styling table cells.
| | 00:05 | So in our calendar table,
| | 00:07 | each of the days of the week, each
of the days of the month I guess
| | 00:11 | is enclosed in it's own table cell and we can
| | 00:16 | style those so they stand out a little more,
| | 00:19 | or so the things line the way that we want or
to spread things out or whatever we to do so
| | 00:25 | post-archive td, to select the actual table data cells
as opposed to th. We can say border, 1px solid #787A6B
| | 00:42 | which is a color that we pulled from talking with the designer,
| | 00:46 | if we hit Reload, a border gets on
every single of those table cells
| | 00:49 | and including obviously the ones that
don't have actual days of the month,
| | 00:54 | but there's not a whole of which really get around that
| | 00:57 | cross browser fashion. In fact, if you look down to markup,
| | 01:00 | you'll see that these table cells don't have any actual content
and in Internet Explorer for Windows without the content,
| | 01:06 | you're not going to get the table borders. If you want the table borders,
you have to put something in each of those, like a nonbreaking space element,
| | 01:13 | ampersand mbsp semicolon, in other browsers by default,
| | 01:19 | cells are styled, whether or not they have content.
| | 01:21 | The thing is that if you want
| | 01:24 | the empty cells to be styled in every browser
you'd have to put in nonbreaking spaces.
| | 01:29 | If you don't then, well, we'll see in a moment.
| | 01:39 | Empty-cells hide, that doesn't work
in Internet Explorer for Windows,
| | 01:43 | but it does work in more recent browsers.
| | 01:45 | So if you have a situation where you want your empty cells to
not be styled not to show up at all basically like they are here,
| | 01:52 | then you would say empty cells hide
| | 01:54 | and not put anything, no nonbreaking space entity or anything
else inside those empty tables, so you would leave them empty,
| | 02:01 | and then you would get this effect.
If you want them to show up
| | 02:05 | then you get rid of the empty cells hide, for example Firefox,
well you get rid of the empty cells hide in your CSS
| | 02:11 | and then you put nonbreaking spaces into your table cells
| | 02:15 | and then they will show up all nice and pretty. Anyway,
| | 02:20 | we might decide that we'd like a little
bit more space inside each of these.
| | 02:25 | So having done that,
| | 02:27 | we can see that these now are all spread out and they're all
| | 02:31 | very sort of airy and light and taking up a lot of space.
| | 02:34 | Now, we might decided instead that actually we'd like
to make sure that there's no padding whatsoever,
| | 02:39 | really get this sort of crunched down.
| | 02:42 | This is less padding than is typically the default. Web browsers
| | 02:46 | usually have a default padding built in for table cells
somewhere in the vicinity of two pixels, but again,
| | 02:51 | there's no way to guarantee that every
browser will be exactly the same on score.
| | 02:56 | Like you can say padding zero and get
rid of any spacing inside the cells.
| | 03:03 | Now, the space between cells you might think yourself oh hey, I just, I
can effect that effect with the margin but that turns out not to be the case.
| | 03:09 | Table cells aren't allowed to have margins.
The CSS specification says explicitly that
| | 03:15 | internal table elements, which is
actually table rows, table cells,
| | 03:19 | table headers, etc. don't get margins.
| | 03:21 | So if you want to enforce separation between table cells,
| | 03:26 | there are a couple of CSS properties that exist, but again not supported
by Internet Explorer for Windows. So instead, you use the cell spacing attribute
| | 03:35 | on the table element. So if you want two pixels of space between your table
cells, you say cell spacing equals two and if you want one, you say one
| | 03:43 | and it would be nice if we did have to do that if we can
take the cell spacing attribute out and just use CSS, but
| | 03:49 | that's not really practical right now,
| | 03:51 | unless your website never gets any visitors from Internet
Explorer for Windows, and hey, if that's the case then get it done.
| | 03:58 | We may decide here that we'd like
to put a little bit of a background
| | 04:02 | for table cells and accompanied by a pretty color.
| | 04:08 | So this will give table cells contents a very dark
gray color, not quite so dark gray background,
| | 04:17 | so they will look like that,
| | 04:19 | and then of course as you can see the hyperlinks
are due to rule somewhere else in the CSS
| | 04:24 | are said to be white. So they now really stand out.
| | 04:28 | And the last thing we're going to do here is
| | 04:30 | take care of the fact that contents aren't really, they
seem a little weird don't they, they are a little offset.
| | 04:36 | Some cell contents seem to be just fine,
| | 04:39 | and others seem to be sort of
| | 04:40 | jammed over to the left, and that's
really because they are all left aligned,
| | 04:44 | and somebody's table cells are wider than others because for
example the WED for Wednesday is wider then the FRI for Friday.
| | 04:52 | So what we're going to do
| | 04:53 | is we're going to make these guys
center and that will even things up,
| | 04:59 | and sort of obscures the fact, it doesn't totally hide it, but
it obscures the fact that each of the columns is, is a different
| | 05:05 | whip, a slightly different width.
| | 05:06 | Friday and Saturday tend to get a little
squished than Tuesday and Wednesday and Thursday.
| | 05:11 | If that particularly bothers you,
we could also say something like width 15%
| | 05:19 | and then things will start to even on a little bit more.
| | 05:21 | They will not be precisely equivalent, but they're going to be
| | 05:25 | a lot closer and the reason they may not be precisely
equivalent is because honestly the way tables are laid out
| | 05:30 | is a little bit voodoo-ish, it's kind of
strange and abnormal. You can't ever be
| | 05:36 | totally certain that you're going to get exactly what you want.
| | 05:38 | Table cells automatically grow if the content is wider than
| | 05:42 | the defined width of the table cell.
| | 05:44 | Of course, 15 times 7 is 105 and so 14 times 7 would be 98
| | 05:53 | and so 14% might be a better choice than 15%.
| | 05:57 | But you can see that the table actually got a
little bit wider when I went from 15% to 14%.
| | 06:01 | Again, this is, you know, you know the table
layout algorithms, are going to be different
| | 06:05 | from one browser to another and they might
| | 06:08 | create vaguely weirdish effects. You can never
be quite entirely certain what might happen. So,
| | 06:15 | if you prefer having this more regular
| | 06:18 | column width, then that's great. If you're willing to
just let the columns be as wide as they need to be and
| | 06:24 | no wider, then you could just not
| | 06:26 | define the width for your table cells and everything is ok.
| | Collapse this transcript |
| Styling a column with classes| 00:01 | In this video, what we're going to talk about is styling columns and you
might think to yourself, hey that should be easy, there's just columns
| | 00:08 | there, but if you look at html markup of tables, it's very row
centric, if TR element is for table rows and TD element is
| | 00:15 | for table cells, but you don't have TC
elements for table columns there is a call COL
| | 00:21 | element, but how that should relate to the cells and the rows is
actually sort of an interesting question and for that matter,
| | 00:29 | how to style columns is under some debate even as
| | 00:33 | this is being recorded so we're going to fake our way
| | 00:37 | around the problem. Effectively, we're going to do
| | 00:39 | a little end-run using some markup tricks of our
own. I'm going to open up what's on the split view
| | 00:46 | this is my editor here, which will open up
two Windows looking at the same document
| | 00:50 | so that that way, one of them can look up the markup of the table, see,
and the other one can look at the style sheet, which we're going to add to.
| | 00:58 | So let's say we want to over here,
you know, post archive we want to
| | 01:02 | highlight Thursdays, Thursdays are
important for whatever reason and so
| | 01:08 | if you look, you can see that each of these table cells and
each these rows has a class based on what day of the week it is
| | 01:13 | the first day of the week has a class of Sun for
Sunday and the next one has a class of mon for Monday,
| | 01:19 | so on, and we want to start Thursday,
so we can say post-archive .thu so,
| | 01:24 | any element that has a class of thu
inside the post-archive area, here we go,
| | 01:32 | we'll throw in a background of #686397 and that's the same.
| | 01:43 | Now, technically, I should just
be able to say border 1px solid
| | 01:47 | and I would pick up whatever the color is for
| | 01:51 | the table cell, in fact, we can do that now.
| | 01:53 | You can see that this can be a little
weird though because the table heading has
| | 01:57 | one color and table cells have another color.
| | 01:59 | And so we get this sort of inconsistent
effect. Maybe you like this, but
| | 02:04 | it is sort of inconsistent. So let's give it an explicit
| | 02:08 | value, which is actually the same as the background
which will make it seem to sort of extend outward.
| | 02:12 | The other reason to give an explicit
| | 02:14 | border color is that for reasons best known only to itself,
| | 02:17 | Internet Explorer for Windows, if you don't define
| | 02:21 | a border color it will make them white or
| | 02:23 | a very light color, whether you defined
| | 02:27 | an explicit color for the table cell or not it just ignores that for
some strange reason, so we will play it safe and do it like this. Now,
| | 02:34 | this is great, we highlighted Thursdays,
but we also highlighted the Thursday
| | 02:39 | table header, the Thu at the top and
| | 02:41 | maybe that's a good idea, but it
| | 02:43 | kind of looks a little weird having that box stick up above
| | 02:46 | the rest of the calendar so what we're going to do is actually limit
these to TD elements and have a class of thu, because if you look in that
| | 02:57 | thead, we have th elements, table header elements with scope of
call, this is an accessibility feature that basically says any
| | 03:05 | table cells that are in the same column as this table header,
this the table header that goes with those table cells. It's a
| | 03:10 | good accessibility thing to do if you
| | 03:12 | column headers so that's something to keep in mind.
| | 03:16 | So, having done that, if we reload,
| | 03:18 | we discover that hey, great, we just highlighted Thursdays
| | 03:22 | and we could stop there, or
| | 03:24 | we might decide that we'd actually like to help that,
| | 03:27 | take a little th you visually, have a visual
distinction of some type, so we'll say th.thu,
| | 03:34 | th.thursday and let's give it the same color as that background.
That might be interesting, so we'll do that and hit Reload and now,
| | 03:46 | Thursday he has the same foreground color as the table cells
| | 03:50 | and it's column has a background color. So the point here really
is to demonstrate how you can use, THs, TDs, you know, separately
| | 04:00 | in order to create certain effects. Now
the other possibility is instead of saying
| | 04:07 | td.thu, we could have said, any element with
the class of thu, which is inside the table body,
| | 04:17 | which is itself inside an element
and in your post-archive do this
| | 04:20 | and then any element with the class
of thu that's inside the table head,
| | 04:24 | do this, that's going to have if I hit Reload
| | 04:28 | exactly the same effect. This is just a different way of
learning a selector to address the same element or elements.
| | 04:35 | Again, neither of these is really better or worse than the other
they're simply different ways of getting to the same end result.
| | 04:42 | So that's how to do to column styling in as
cross browser friendly fashion as possible.
| | Collapse this transcript |
| Styling links inside table cells| 00:02 | So for this video we're going to look at
| | 00:04 | actual links inside the table cells and how we might
| | 00:08 | improve their interactivity a little bit
and also some of the issues that follow as a result.
| | 00:14 | So we have these white boldfaced bits
of text, that are actually hyperlinks.
| | 00:20 | Once you'll be moving the cursor we can see it changes
into the little gloved hand of clicking. We may want to
| | 00:27 | bump up actually effectively the visual
feedback beyond just a little clicking glove.
| | 00:33 | We might also want to put on a hover effect for example,
so here at the end of the style sheet I'm going to put in
| | 00:41 | for any a element inside the post-archive that gets hovered
| | 00:50 | to a background it's found elsewhere.
And if we hit Reload at first,
| | 01:01 | we don't see anything until we move in the cursor and start hovering and
you can see that we now have a cute little green background hover effect.
| | 01:11 | The only real problem being that
not only is the background hover
| | 01:16 | points to our problem,
| | 01:17 | these links are only as wide as their content, which is to be
expected. I mean if you have a hyperlink, the hyperlink is only as
| | 01:23 | big as the content inside the hyperlink,
whether it's text or an image,
| | 01:28 | but here is not so great because you know, I might
| | 01:31 | have my pointer over one of the tables, notice like I do here and
yet I can click on it, but if I click on it nothing will happen
| | 01:37 | because I'm over the hyperlink here, I have to exactly hit this and
that's actually not a great usability. There's an actual law called Fitz
| | 01:44 | law, which basically says, if you have a hotspot, if you have something
that you can click with you should make the interactive areas
| | 01:50 | basically as large as you can without,
you know, interfering with other things.
| | 01:55 | So here's what we're going to do.
We're actually going to convert
| | 02:05 | the way that these hyperlinks are drawn
| | 02:11 | from the inline, from generating inline boxes which is what
they usually are to drawing block boxes. Now, if I hit Reload
| | 02:18 | nothing really changes visually
| | 02:20 | yet until I'm moving my mouse and I start hovering.
| | 02:25 | And you notice now that these
| | 02:27 | links fill in, basically their entire table cells.
| | 02:31 | So anywhere inside a table cell
| | 02:34 | is now clickable because the link is generating a largish box.
| | 02:39 | Now is generating block little boxes as though they
were a div or a paragraph inside this table cell.
| | 02:44 | And now we can see this even more easily if we went back and add in
| | 02:51 | table cell width the spread out the table,
| | 02:53 | like we did it briefly in an earlier video and again,
| | 02:57 | these guys now have their click boxes, if you want it to think
it that way, spread out to cover the entire table cell and that's
| | 03:03 | because the a element is generating a block box,
| | 03:07 | just the same as if it were a div or a
paragraph or heading or something like that.
| | 03:10 | So that's a one way to make
| | 03:13 | the links inside of a table like this one, like a monthly calendar
be a little bit easier to interact with and also look a little bit
| | 03:19 | better, because frankly, you know, before,
| | 03:22 | if we'd hovered over the seven before
| | 03:24 | we added the display block, then there would have
just been this little green strip behind the seven,
| | 03:28 | highlighting that and the rest of the
| | 03:30 | table cell would've just remained with a dark grey background and this way
it fills it in all completely and nicely and it's all very lovely and
| | 03:38 | frankly looks a good deal more professional than what happened before
we added the display block, so it's just a quick look at how to
| | 03:47 | make links inside of calendars or tables
in general, act a little bit better.
| | Collapse this transcript |
|
|
9. Styling for PrintStyling for specific mediums| 00:01 | In this chapter what we're going to talk about is styling
for media, other than the screen, the most common of which is
| | 00:06 | styling for print. You might never have considered that a
webpage could be output in any medium other than a web browser.
| | 00:14 | But in point of facts, a webpage is really just some XHTML document with
some styling, and neither XHTML nor CSS are required to be used only in
| | 00:17 | web browsers or by web browsers or on a monitor you could
| | 00:27 | print it out. Now the pages that exist, we can
print it now, which I'm going to do here, using
| | 00:32 | basically we are going to look at a print preview and this is
what the page would more or less look like if we printed it out.
| | 00:38 | The styles that we have applied would so far as is possible,
be applied to the print as well as to the screen. So
| | 00:46 | you can see some of the colors are coming through, the borders
are there, and these sort of things, but there are other
| | 00:51 | things that are missing, for example backgrounds. The user does
not have to print backgrounds, in fact, every browser pretty much
| | 00:57 | as of this recording is configured
to not print backgrounds by default.
| | 01:02 | You can imagine the reason for that.
| | 01:03 | If you had a page that was white text on a black background and
the user decided to print it out and the browser was set up
| | 01:10 | to print background by default, somebody would choose through a
whole lot of ink cartridge before they get done even printing out
| | 01:16 | the first page. So there you have it.
| | 01:19 | That's what this page would look like. Now,
it looks like that because the styles we've applied
| | 01:23 | are being applied in all media.
| | 01:26 | If we look at the link at the top of the document,
| | 01:29 | just like we discussed back in Chapter 2,
| | 01:32 | we can see that at the very end of this link is the media equals all.
| | 01:38 | This means that this style sheet, should be applied in all
media, the screen medium such as on a computer, print medium,
| | 01:45 | the production medium, if
| | 01:47 | you happen to have something that can distinguish between a screen
and projection, handheld medium, if you have a web browser on a
| | 01:54 | handheld device that understands handheld media types and so
and so on. Basically this style sheet will always be applied. We
| | 01:59 | could restrict it so that it only shows up on screen so that this
style sheet would then not be applied when it comes to printing or
| | 02:07 | anything other than the screen medium, which could be
a web browser, on a computer or let's say in web TV.
| | 02:13 | You can combine these two, you can decide it was, it should only
apply in screen, in print and not apply in any of those others.
| | 02:19 | Practically speaking, the most common media types that you ever
have to worry about is screen and print. Handheld is in here
| | 02:25 | in middle late 2006, as we're recording this, handheld is starting
to make a further large upsurge in the United States, it's already
| | 02:33 | become very big overseas and so mobile web
browsing is trying to become more and more
| | 02:39 | common and mobile web browsers that understand handheld style sheets
are becoming more and more common. We are not going to cover handheld
| | 02:46 | style sheets today, but the principles that we're going to
cover here will apply the way that we set up a print style sheet,
| | 02:52 | exactly the same sorts of things have to be done in order to set up a handheld
style sheet. Let's say that we have our screen style sheet and we decide
| | 02:59 | that we will also want to
a print style sheet, we could say,
| | 03:03 | that this is going to be our print style sheet,
so we only want to apply in the print medium.
| | 03:10 | If we say this, we go back to Firefox and reload, the web browser,
| | 03:14 | nothing will happen, so far as we can tell nothing is happened
because the screen style sheet is still applying in the screen medium, but
| | 03:22 | if we go to preview our print, you can see that things
are very different now, because the print style sheet is now,
| | 03:28 | there's now a print style sheet being applied and it only
applies if we actually go to the print media or in this case a
| | 03:34 | preview of a print medium. So if you were to put out this
document, the same page you're looking at there in Firefox would
| | 03:41 | look the way it does here on a piece of paper once printed
out, because of the association of a print style sheet and the
| | 03:48 | restriction of the styles that you see there to
| | 03:51 | the screen medium. So that's the basics of how to associate a
print style sheet. Now. what we're going to do in the videos to follow
| | 03:58 | is create the print style sheet that we just saw being applied.
| | Collapse this transcript |
| Creating a print style sheet| 00:01 | For this video, we're going to
| | 00:03 | get things set up so that we can start
doing print styling and add some basic print
| | 00:08 | styles before moving on in later videos to more complicated
effects. So you see here is the same old design
| | 00:16 | with its lovely screen styles. Now, what we have here if you look at
the code, is a link to our screen style sheet and a link to our print
| | 00:24 | style sheet, in this case ex0902.
| | 00:26 | There are two ways really to go about designing, creating a
print style sheet. One is to work on your print style sheet
| | 00:34 | for little while, more or less blind, until you think you know what
you've got, print it out, see if you're right, and if you're wrong,
| | 00:39 | adjust, print it out again and then basically just keep printing it
out as you're printing out your pages. You go until you have
| | 00:45 | the print style sheet that you want. If you have that kind of paper
budget to burn and then more power to you, I on the other hand prefer to
| | 00:52 | do this. Instead of having a screen styles applied,
I pick a media type that will never possibly apply.
| | 00:59 | Basically to get them out of the way. So, tty, that's a
perfectly valid media type and yet pretty much nobody uses tty
| | 01:07 | displays anymore. A web browser is not
| | 01:10 | a tty device and neither is a printer. For that matter,
| | 01:13 | by changing the media type of the basic style sheet to tty,
| | 01:18 | it's not going to apply it to this, this page, either on screen or
in print and now, now what we can do is we can change the media type
| | 01:25 | of the print style sheet to screen. So that way,
we'll be getting our own sort of print preview
| | 01:32 | in the web browser and so we can do the good old save and reload in order
to make things happen. So if we hit Reload here, then the styles are gone
| | 01:41 | and if I were to do a print preview, there also wouldn't be any
styles there, because we haven't created our print styles yet.
| | 01:47 | We have a reference here to an external style sheet. Up to
this point pretty much except for way back in chapter 2, I've
| | 01:53 | been doing all of the style additions in embedded style sheets,
and that's one way to do it that's really more useful
| | 01:59 | though as a teaching need, than anything else, for this chapter.
| | 02:03 | Since it's almost invariably the case, the print style
sheets are external style sheets and they are linked in, then
| | 02:09 | that's what we're going to do here. We're going to have a link to an
external style sheet in each of the videos and we'll go and edit those, so
| | 02:17 | if you open up the styles folder, than what you find is
| | 02:22 | a number of style sheets. We'll open up
ex0902 and here it is, completely blank.
| | 02:28 | This perhaps will not come as much of a surprise.
| | 02:32 | So in this ex0902, we're just going to set some very basic styles such
as for the body of, and with this, what we're going to do is pick a
| | 02:43 | font-family that's appropriate for print. Now, there's a lot of debate as
to whether or not, serif or sans-serif font is easier to read and whether
| | 02:52 | one type is easier to read on screen and another type is easier
to read in print and there's a lot of argument back and forth.
| | 02:58 | And I don't propose to assert that I know the answer to this.
Very smart people have made claims on both sides of the
| | 03:05 | fence some have said, that serifs are always easier to read,
| | 03:08 | some said sans-serif are always easier to read, so on
and so forth. And anyway, what we're going to do here,
| | 03:13 | is we're going to say for the body, for in print,
| | 03:16 | we're going to use Times New Roman,
| | 03:21 | if that's not available TimesNR are and if that's not available,
Times, if none of those are available, then let's at least use
| | 03:31 | a serif font. So that will if
we switch back to our web browser
| | 03:37 | has a slide effect, because the web browser
| | 03:40 | previously wasn't actually defaulting to Times new Roman,
it was a defaulting to probably Times or something similar.
| | 03:46 | Now, we might also choose to set a specific font size and this is
where things can get a little interesting, because for the longest time,
| | 03:55 | we've been told not to use points in Web design, and in fact, using
points for screen design is a horrible, horrible, horrible idea
| | 04:01 | for a variety of reasons that would really take too long to
explain in this video but what it comes down to is accurate
| | 04:07 | presentation of point measures is dependent on your display,
knowing how many pixels there are in an inch and your
| | 04:14 | display almost invariably does not know how many pixels there
are per inch for a display, cause computer aren't that smart.
| | 04:20 | On the other hand, printers know how many dots they have for an inch,
so they know how many dots they need to make 12 point text. So you
| | 04:27 | might think about using points in print style.
| | 04:31 | There are those who oppose this on the grounds that in some web
browsers the user is completely unable to restyle the font size
| | 04:39 | before they go and print, and that's a debate I think best left
for another day. I'm going to leave in the 12 points, because I
| | 04:46 | have not personally seen that many downsides
| | 04:49 | that something that I encourage every author to weigh the pros and cons
and make their own decision regarding what they're going to do with
| | 04:55 | point and of course if you deploy a style sheet like this and
then you get e-mail from people showing you that that's a
| | 05:00 | problem for your website, you can always just edit your CSS
to take out the sizing, but anyway, we're going to that here.
| | 05:08 | While we're at it, we're going to reproduce a style from
| | 05:15 | the screen style sheet, which is to remove any borders from
around images that are inside hyperlinks, you can see that
| | 05:21 | happening here, actually the Javacotea has a thick blue
border around it, which is pretty much a holdover from the
| | 05:26 | Mosaic Web browser days. So we turn that off,
| | 05:28 | just by saying IMG border zero and the last thing that we're
going to do is just very basically in this particular exercise is,
| | 05:37 | you see here that we have the image still. This is a foreground
image, so it will print, unlike a background image for example,
| | 05:43 | but we don't want it to print like that, we
would really like to have it do what it does
| | 05:49 | in the screen style sheet. So this is just a recreation of
| | 05:59 | what's in the screen style sheet. These are the same styles
that are used for screen presentations. So there, at this point
| | 06:07 | we've done some real basics, set up
the font for the overall document,
| | 06:12 | you know, the font family anyway, and a base, sort of a base
on font size, removed borders from images there inside of links
| | 06:18 | and floated the illustration image over to the left, just
like it is in the screen style sheet. So that's a baby step,
| | 06:25 | but still it's a good foundation
for the next part, when we start to
| | 06:29 | switch off the pieces of
| | 06:32 | the pages that don't really need to be printed.
| | Collapse this transcript |
| Hiding layout for print| 00:01 | Now that we have some basic print styles that we're previewing here on
our screen, through the method that was shown in the previous video.
| | 00:08 | What we need to do, is start to think about
what it is we actually want to print.
| | 00:12 | For example, should we print the Javaco tea image. The Javaco
comes through very nice, but the tea very hard to make out,
| | 00:19 | because it's white text of a white background, and we
could put some sort of color background on the masthead but
| | 00:24 | we have absolutely no guarantee
that it will be printed. in fact, we can
| | 00:28 | take a pretty strong guess that that background won't be printed.
Basically print design people rarely ever set background colors unless
| | 00:35 | there're background colors that don't have to
be there in order for the print out to work ok.
| | 00:39 | A more relevant example though, is the navigation links.
| | 00:42 | We can see they are completely unstyled here, so we can see it's an
ordered list of navigation, it's an ordered list of links, except for number two,
| | 00:48 | which is unlinked text, because that's the page that we're on.
| | 00:52 | The question remains, do we really need to print those out at all,
| | 00:55 | because navigation links aren't going to do anybody any good in
print. You can stab your finger onto a link on a peace paper all you
| | 01:02 | want and it's not likely to do anything, at least not in 2006. Similarly
the stuff in the sidebar, how much of that is really necessary.
| | 01:11 | The tea of the day, should the tea of the day appear on any page
that gets printed out, the post archive, how about that, the
| | 01:16 | search box. So, what we need do is start to think about
| | 01:20 | things that we don't want to print and the way to make a nonprint,
the navlink is a pretty easy one, we don't want the navlinks show up.
| | 01:28 | So, all you have to do is say, display none
| | 01:34 | and the element with the id of navlinks will simply
not show up. So we hit Reload, it goes away.
| | 01:41 | Once we are all done with this and we switch this
back to being a real print style sheet, when the
| | 01:46 | user prints out this page,
| | 01:48 | the navlinks just won't show up at all and that's probably a good
thing because again, you know, why take up space, you know, chew up
| | 01:54 | ink cartridges, laser toner or whatever and make the page
longer with stuff that just is completely irrelevant in the
| | 02:02 | print medium. The same thing is true of
search box really. So we could start to build
| | 02:10 | a group selector that says, you know, we want to get
rid of the search and for that matter the post-archive.
| | 02:16 | Nobody really needs to know the post-archive,
especially since the post-archive might be relevant,
| | 02:22 | the day that the article is printed, or the day page is
printed and then six month for now maybe not so much. So,
| | 02:30 | at this point the search box and
the post-archive, when we hit Reload
| | 02:34 | will go away. So now we have
| | 02:37 | the masthead, the date, the main content,
to tea of the day and the footer.
| | 02:41 | That's what's showing up.
| | 02:43 | And if we further decide that well, it's okay to print the picture of
the tea kettle, maybe the tea of the day image, just doesn't need to
| | 02:50 | get printed. It's enough that we're going to include information about
the tea of today and so in that case, tea-of-the-day img when we go back,
| | 03:02 | that's gone as well.
| | 03:04 | What we have now for printing is this information and that's
| | 03:08 | probably enough. That makes for a fairly useful printout and again
| | 03:12 | why the tea of the day should be printed or not
| | 03:14 | that is an interesting question and that it depends to
some degree on the clients or your own personal preference
| | 03:20 | if you are your client and what
| | 03:23 | is wanted. do we want the tea of the day to show up on every page
that gets printed out, because that's the tea of the day for that
| | 03:28 | day and is it going to look weird for the that tea of the day
| | 03:32 | to still be there on a print out six month from now, and maybe yes, maybe
no. We're going to leave it in, we're going to assume what the client says.
| | 03:38 | Yes, absolutely, I want the tea of the day to be on every print
out, we don't have to have a picture, but we should list the
| | 03:44 | tea of the day, because that is a reminder that there are interesting
teas and so on and so forth, so we're going to leave it in.
| | 03:49 | That will also allow us to take some interesting challenges in doing sort
of sectional style and making certain bits to stand out from certain other bits.
| | 03:56 | So that's just the basics of how you switch off in effect pieces of
the layout, that aren't relevant to print when you're going to do print.
| | 04:04 | In the next bit, we're actually going to start pulling this
together so it looks a little bit more like professional printout.
| | Collapse this transcript |
| Styling for print| 00:01 | For this video, we're basically just going to be improving the way
that the print styles look so that we in the end have something that we
| | 00:08 | would want to hold in our hands on a piece of paper. We're just going to add
some improvements to this things, like putting a bottom border on the masthead.
| | 00:17 | In the screen styles, of course, we have a background color
| | 00:21 | for the master of this site, apart from the
rest of the page, but you, as has been said before,
| | 00:26 | we can't expect the background to show up in print. Is just almost certainly
not going to happen. So, what we're going to do is we're going to say,
| | 00:41 | masthead border-bottom 1px solid #000. Now, foreground colors will show up if
some of the users has a color printer, which many people do, of course, these days.
| | 00:54 | So we can set blur, colors and such but, never set a
color that you are relying on to be there, for example,
| | 01:04 | if you need to draw attention to something
| | 01:07 | and you decided that the way you're going to
do that is you're going to color the text red,
| | 01:11 | and then you're going to say somewhere in
your printout, look for the red text.
| | 01:16 | The user may not have a color printer, they may print it out on a
laser printer that doesn't do color or maybe they're really cheap
| | 01:22 | and they never replace their color cartridges or whatever it is,
| | 01:26 | never rely on color for those sorts of things,
specially in print because there is just no way to know
| | 01:33 | for sure that the user is going to have a color print
out by the time they're done. For all you know, maybe the,
| | 01:42 | they will print out in color and then they'll fax it to a
friend who will then get it in really low-resolution, you know,
| | 01:49 | one bit color one bit black-and-white, so there,
| | 01:56 | you have it. If you look at this, one thing we might do in order
to draw the, you know, sort of distinguish the headings from the rest
| | 02:05 | of the document content is to
| | 02:09 | actually make them to be a sans-serif font. So we
can say nothing unusual here, so having done that,
| | 02:32 | and ok, we can stick with that. That might work. Then, again, you
might decide that mixing serif and sans-serif fonts, in a document
| | 02:40 | isn't really your cup of tea. Ha, ha, ha. So,
| | 02:47 | that's, you know, for you to decide. We've got this,
| | 02:53 | this situation here, where the date is just sitting right there
between the Javaco and the, the border and it would be nice if
| | 03:00 | we could put it over to the right side
like we did in the screen layout, but
| | 03:08 | and, and also move it up, but also let's say italicize it,
in order to draw attention to it. So today is actually the
| | 03:16 | idea of the other element containing
the date and we might say text-align right
| | 03:24 | which will push it all the way over to the right side. font-style italic, and
then we're going to give it a negative top margin, just like we did in Chapter 7,
| | 03:36 | in the last video there, so in this case we're just going to give it a
negative top margin of 1em, no side margins, a little bit. Well actually
| | 03:49 | let's just give it no bottom margin to start with.
| | 03:52 | So we hit Reload and there you can see that the
| | 03:57 | date flows over to the right side,
| | 03:59 | shifts itself up thanks to that negative top margin and italicizes
itself, but then also that brings that border up pretty darn close to
| | 04:10 | the date into the Javaco tea bit, so with a
little bit of bottom margin on the date, we can
| | 04:17 | actually push that border down a little bit so we'll hit Reload,
| | 04:21 | that pushes it down a bit, that, that feels a little bit better.
| | 04:24 | So we're going to, we're going to stick with that. Now, what we
| | 04:34 | also want to do here is push the content in a little bit.
| | 04:41 | Now there's a reason for this, and is mostly because
| | 04:50 | there's the content margins 0.5%.
| | 04:53 | So will be no top and bottom margin but
5% left and right margins and if we hit Reload,
| | 04:59 | that will shift the content inward.
| | 05:01 | The reason that we added the 5% there is because I think that
| | 05:05 | just the content looks better if it shifted in little bit the
main content. So you have a masthead that sort of spreads out
| | 05:12 | and eventually we'll have a footer that does the same, but the main content
is pushed in a little bit. It's a little bit constraining and makes it fell a
| | 05:18 | little bit more like, I don't know,
a magazine print out, let's say.
| | 05:23 | This is more of a personal feeling, it does
| | 05:26 | reduce somewhat the amount of, of
| | 05:29 | print area that can actually be used
by the content and so that could make
| | 05:34 | a document longer, it could make it run multiple pages, make it
run on two pages instead of one for example, that's, you know,
| | 05:41 | that's just something that every person has to decide, but
this shows how we can, we can squeeze this down a little bit.
| | 05:49 | On the other hand, that about tea history heading,
| | 05:52 | I kind of like to pull that back
| | 05:55 | to where it was, or at least get it close. So we can do that
just by saying content h1, margin-left -5% and it'll pull it back.
| | 06:14 | Now, maybe this works and maybe it doesn't.
It works for me, so we're going to stick with that.
| | 06:20 | And then that's going to
| | 06:23 | bring us to a good place to, to reflect upon what we're
going to do about the tea of the day and the footer, which
| | 06:31 | we're going to talk about in the next video.
| | Collapse this transcript |
| Complex styling for print| 00:01 | At this point in our print styling, we've reached the place were
we need to deal with the tea of the day section of our design.
| | 00:08 | The reason we need to deal with it a little
differently is that the tea of the day is really like
| | 00:12 | an aside, it's not directly related to The Legendary Origins
of Tea, certainly they're both about tea, but the origins of tea
| | 00:21 | and the tea of the day, are kind of the past and present kind
of a thing, at least on the day that you print out the document.
| | 00:27 | We'd like to visually distinguish the two. We'd like
to take the tea of the day and set it apart visually
| | 00:31 | even when printing out, so that we can draw that distinction from a
sort of a design standpoint. So what I'm going to do is say, that for
| | 00:39 | the tea of the day div, we'll deal
with the idea of tea of the day,
| | 00:47 | a 3px double border, some center aligned
text and a little bit of padding to
| | 00:58 | push the text inside the div, away
from that three pixel double border
| | 01:03 | and if we hit Reload,
| | 01:05 | we can see that that started. Ok, well, that's the visual distinction,
that's taken up an awful lot of space though, just for, you
| | 01:12 | know, the tee of the day.
| | 01:15 | There are a number of ways that we can mitigate this.
| | 01:17 | The one of the things actually, that's bothering me at the moment is
that basically, it's all the way from one side of the page to the other,
| | 01:22 | even though content is not and that's why I want to make it narrower then
the rest of the content, so you I'm going to say 10% margins on this one,
| | 01:31 | whereas, before we had 5% margins on the content.
| | 01:34 | Now we're going to put 5% side margins on the content, now we're going to
have 10% side margins on tea of the day, ok, so that's going to squeeze it
| | 01:43 | down a little bit, that's not so bad. So this point is sort of searching
for some interesting way to bring this down a bit. In the markup we
| | 01:53 | have an h3 tea of the day, followed by an
| | 01:55 | h4, Labrador Tea and there's a paragraph which in
this case has Lorem ipsum text, but one presumes would
| | 02:01 | eventually have icon descriptions of
various teas, part of what tea of the day is.
| | 02:07 | What we need to do here is
| | 02:10 | get those two headings to not take
up so much space and we could
| | 02:16 | do something like just get rid of that
margins. That's certainly a possibility,
| | 02:21 | which you can see here. But what I think will be a little more interesting
would be to put them actually side-by-side, so you have tea of the day,
| | 02:27 | and then you have Labrador Tea, and they sort of get next to
each other. We could float them to do that will actually be more
| | 02:33 | interesting to make them generate in-line boxes, the same as
if they were let's say spans. So we're going to do that, and
| | 02:40 | actually while we're at it, have them have the same font size.
| | 02:45 | Here's what we have now, Tea of the day Labrador Tea.
| | 02:48 | While they are on one line together, they also sort of run together
now, so what we can do at this point on the tea of the day h3, which is
| | 02:56 | the first of the two, the one that actually says tee of the
day, let's give it a right border, that's two pixels and solid,
| | 03:03 | two pixels and solid,
| | 03:05 | a right margin of 1em, a right padding of 1em
| | 03:11 | and the reason we do that is that then there will be 1em of space either
side of that right border that we've just set up and let's color it gray.
| | 03:20 | And now when we flip over and hit Reload,
| | 03:26 | tea of the day is now visually the deemphasized a bit,
| | 03:29 | because of its right hand border, there's a separator between the
two, so we have tea of the day and a vertical separator and then
| | 03:35 | Labrador tea, so it's Tea of the Day,
| | 03:38 | Labrador Tea. Visually speaking, Labrador is a little bit more emphasized.
We used a little bit too much space around that paragraph and
| | 03:45 | what we're just going to do is for that paragraph, say,
| | 03:50 | maybe 0,5em of margin on the top and bottom, instead
of a full em and when we do that and hit Reload
| | 04:00 | that squeezes itself down a little bit.
| | 04:02 | That's pretty good. Now we can take it even further, maybe have no bottom
margin on the paragraph at all, so, instead of 0.5em 0, we say 0.5em 0 0
| | 04:11 | and when we hit Reload, even better.
| | 04:14 | Ok, so now we've taken the tee of the day
| | 04:17 | and turned it into sort of a box which gives it visual
distinction as compared to the rest of the document. So now all we
| | 04:24 | really need to do in order to finish things up is style the
footer and then restore everything so that the screen styles
| | 04:31 | go on the screen and print styles gone on to print,
which is what we will do in the next video.
| | Collapse this transcript |
| Creating a footer| 00:02 | We're going to the end of the print styling,
| | 00:04 | really the last thing that we have to do it the
footer, which at the moment is just some plain text
| | 00:09 | and we'd like to make that look a little nicer.
| | 00:12 | What I have in mind is to have the footer's appearance sort of
visually echo the masthead with the date over on the right side and
| | 00:22 | italicized and a solid border separating it from the rest of the
document, they would just be nice to the sort of echo that in footer,
| | 00:30 | so what we're going to do in our CSS is for the footer, there's
a div with an id of footer, so we'll give it a top border
| | 00:40 | 1px solid and a bottom border, and a top margin to push it away
from the rest of the document, I think that's often important.
| | 00:52 | I link this text italicized and smaller and we also want to align the text
to the right, so if we go back to Firefox and reload, there we have that.
| | 01:08 | The space here between the border
| | 01:10 | and the site design footer text is actually the paragraphs
margin. There is the site design by Dominique Sillett and
| | 01:19 | littleigloo.comp, a site design text that's inside of a paragraph,
and the paragraph, since we haven't done anything to its
| | 01:25 | margins, browsers automatically apply margins to that paragraph.
| | 01:29 | If we want the text to get up close to
that border, then we need to get rid of
| | 01:33 | that margin so we're going to say footer p
| | 01:38 | margin zero, go back and ok, there it is
| | 01:45 | and it might be a little too close actually now that I look
at it, that's maybe a little too snugly so, on the footer
| | 01:51 | let's actually put a top padding of a quarter em,
| | 01:58 | so we have a quarter em of top padding
for the footer, and actually, while I'm at it,
| | 02:03 | I kind of feel like the footer should be deemphasized
a little bit, so let's make its color gray
| | 02:07 | instead of just leaving it at the
default. So if we hit Reload on this,
| | 02:13 | it pushes down and the text color goes to gray and the border
color goes with it because if you recall, we did not specify a
| | 02:20 | color for the top border.
| | 02:23 | And so it picks up the value of color for this particular element
and since we just added to grey, it change the top border to gray.
| | 02:29 | That's again an illustration of why sometimes you
don't want to explicitly define a color for a border,
| | 02:36 | if you would like it to reflect whatever the text color is within
that element, then you just leave it alone with the exception
| | 02:42 | as stated in the previous chapter of table cells, which
Internet Explorer for Windows will just make the table cells
| | 02:48 | be a very color, sort of white and very light gray, if you don't
explicitly set border colors for table cells. But that is just
| | 02:55 | table cells and that's only in Internet Explorer for Windows. So
that pretty much puts us where we want to be in terms of the footer.
| | 03:02 | We could fiddle with it a little bit, or
| | 03:04 | we might decide to deemphasize the
link text, or you know, we might not.
| | 03:09 | I think we're just going to leave it alone because
that way in a printout, the URLs will be there for
| | 03:15 | someone to be able to type into a web browser if they want
to and also the underlining should show up in print and will
| | 03:21 | sort of draw the eye to, oh, hey, here is some URLs.
| | 03:24 | We'll just leave it like that and now
really all we need to do is open up 0906.HTML
| | 03:40 | and change the media types,
| | 03:42 | so that they're actually what they should be. Instead of being tty's
and screen, we're going to take that print style sheet and have it
| | 03:48 | only apply in print and our basic style sheet, which
is meant for screen will apply on screen. We save those,
| | 03:55 | we hit Reload and bingo, all of the screen styles are back, all we
do is we just shut them out of the way throughout this chapter and
| | 04:01 | now if I change the media type and
then change the media type back, here they come.
| | 04:06 | The print styles however, not to worry, they are still around, because
if we preview, we can see that there are print styles and this is
| | 04:12 | what the print out will look like. You can see where the side
margins on the content and on the Tee of the Day box sort of squeeze
| | 04:18 | those down and leads to a fairly straightforward print style.
You could call it professional, I'm sure that there are print
| | 04:25 | designers who could make all sorts of suggestions for improvement.
| | 04:28 | That's always great, because if they do,
| | 04:31 | then you just edit the print style sheet to do what
they want as best as you can, and you're off for the races.
| | 04:36 | There is print styling.
| | Collapse this transcript |
|
|
10. Bringing It All TogetherGetting started| 00:01 | In this chapter we're going to take a slightly different approach to
the approach we've taken in previous chapters. Open up your Exercise
| | 00:08 | Files folder and you open up the 10 together folder. There are
your Exercise files and what you would do is you would load up for
| | 00:15 | example, if you're doing exercise one EX 1001.html into Firefox
| | 00:22 | and that will bring it up in Firefox
and then in the Styles folder, you have
| | 00:33 | ex1001.CSS, this corresponds to exercise one
in chapter 10. Load that up into your editor
| | 00:39 | and then the last bit is that there's this fragments folder
and this contains fragment files that are just small text files
| | 00:47 | that contain fragments of the final style sheet.
| | 00:50 | This is what I'll be using in order to bring styles into
the style sheet. If you wish to do the same you certainly can,
| | 00:57 | otherwise you can do a sort of pause
and type so if I drag this into here
| | 01:03 | then the contents of that text file are added to
my CSS file here. Then we just move on from there.
| | Collapse this transcript |
| Setting global styles| 00:01 | So what we're going to do here in this chapter, throughout this series of
videos is assemble all the pieces to create this design. This is basically
| | 00:08 | there and appoint in terms of where we go here,
but our start point is this, where we have
| | 00:15 | no author styles whatsoever. This is going to go a little bit
differently than the rest of the title that in other chapters, what
| | 00:23 | I've done is I've brought up my editor BBEdit and I've typed in
styles, rather the subject you to all that, what I'm going to do is,
| | 00:29 | throughout this chapter, is take these little text files,
these are little text files and just have fragments of CSS in
| | 00:37 | them and fragments of what we want force final
style sheet, so in each case I'm just going to grab a
| | 00:43 | the appropriate file and drag it into BBEdit
and let go and BBEdit will just add it in and
| | 00:50 | if your editor supports doing this then you can do the same thing with the
fragment files, they're found in your Exercise Files folder, for this chapter.
| | 00:58 | Otherwise if you need to type, you can always hit pause
after one of these and then type in whatever just got added.
| | 01:04 | So we're going to first do the generic
styles, so put generic in quotes,
| | 01:10 | what we mean the generic is styles that sort of apply everywhere, they're
put to everything. So for example here, I'm styling the body element,
| | 01:18 | taking away the margin and padding so that we don't have
the space around the outside of the design, giving the
| | 01:23 | body element a background color and a foreground color
| | 01:25 | and sending the overall font for the page to be small,
which is one of those font size keywords and then take a choice
| | 01:31 | between a list of the ground, which is a very common fonts
on Mac OSX machines, if that's unavailable use Arial, and if
| | 01:38 | that's unavailable use some font
that's sans serif. So, I'm going to save this
| | 01:44 | and hit Reload and you can see that now the
font changed a bit and the background colors have come in and
| | 01:52 | the extra space around the edges of the design have gone away.
| | 01:56 | So we go back to this particular CSS file, the next thing I'm going to
do is just drag in fragment two. So the point with this fragment is to
| | 02:05 | remove a text decoration from a elements, which would be hyperlinks
and actually nonhyperlink a elements, which it's possible to have
| | 02:11 | just not very common, so that the links won't be underlined.
Also in some web browsers, Firefox, notably among them, any
| | 02:19 | image that's inside of an a element gets a border by default
| | 02:23 | that's built into the browser styles. So what we're going to say
here is that any image that is descended from an a element, any
| | 02:30 | image inside of an a element, a hyperlink should have no
border, so border zero. We've given it a border with a euro
| | 02:36 | and actually a border style of none
implicitly and so we save that,
| | 02:41 | go over to Firefox, and if we hit Reload,
the underlining on that border have gone away.
| | 02:46 | Those are again applying throughout the entire document and then the last
think we're going to add here, is we're actually going to change the way margins
| | 02:52 | are done on paragraphs. Because of how margin collapsing works
as discussed in Chapter 7 we don't actually have to have
| | 02:58 | margins on both the top and the bottom of paragraphs, we can
just have margins on the bottom of paragraphs and still have the
| | 03:04 | same separation that they usually do. So what I'm
going to say here 's margin 0 0 1em, so no top margin,
| | 03:11 | no right margin or left margin and a
1em bottom margin and if we hit Reload,
| | 03:17 | there really isn't going to be any change at the moment, but the
advantage here is that if you have a paragraph that follows a heading,
| | 03:23 | such as happens right here with The Legendary Origins of Tea and
then the history of tea and so far, suppose we wanted that
| | 03:29 | paragraph to come right up against the heading so that we had Legendary
Origins of Tea heading in there without any space really between them
| | 03:35 | they would merely start with that first paragraph.
| | 03:38 | Because we've now removed the top margin for paragraphs, all
we have to do is remove the bottom margin from the headings
| | 03:46 | and then we get that nice snuggle effect. I bring this up because designers on occasion really want to do this and there was a time that
| | 03:52 | very difficult to do, but with CSS is very easy. So that sets up our global
styles or generic styles. In the next step we'll start styling the masthead.
| | Collapse this transcript |
| Defining masthead and navbar colors| 00:02 | Building on the state of things from the end of the previous video.
| | 00:06 | We are going to add more styles
to this particular stage of the Javaco.
| | 00:11 | Here, I have ex1002.CSS opened up and we're going to start dragging in
the first fragment for the second exercise. This is where we're going to
| | 00:19 | start the masthead styles. What we have here is we're saying for the
masthead give it a bottom margin and a little bit of top padding . The
| | 00:26 | reason for that is to contain any margins
of elements that might be inside of it,
| | 00:30 | otherwise they would stick out of the top and do strange things and then set
a background color. That's pretty straight forward and if we save that,
| | 00:37 | I'm going to the web browser and reload
and there were some minor changes there.
| | 00:46 | We'll bring in homelink. Now this is the styling of the
a element that links to the homepage of the Javaco site.
| | 00:54 | And that's what surrounds that the Javaco tea image,
that's in the masthead. So with this, we actually want the
| | 01:00 | whole masthead basically to be a link back to the home page,
| | 01:04 | or at least a good little trunk of it, so we're going to take this a element
and set it to be display blocks, so it's going to start generating a block
| | 01:10 | box as though it were a div. A little bit of margin on the top and
the bottom and the sides and some padding, which will, you know,
| | 01:18 | obviously expand the area that's clickable, the padding
and the content are all a sort of a clickable area and
| | 01:24 | then we're going to put a background image into this hyperlink,
| | 01:30 | into this a element that has the idea of home link. This is
a little white curl that is going to go into the bottom right corner
| | 01:38 | and not be repeated at all. So if
we save that and go over to reload
| | 01:43 | the white curl here is actually an
image in the background of the hyperlink
| | 01:49 | that surrounds this Javaco tea image and you can see the
little white glove of magic, which is staying in place
| | 01:57 | even as we move throughout this entire area. This is all just one great
big hyperlink. So, the last thing we're going to do in this exercise is,
| | 02:04 | for the navlinks here, for the navigation links, the
navigation links are in an ordered list and ordered lists by
| | 02:13 | default have margin padding that helps indent the list items and so forth.
So what we're going to do is we're going to remove the margin and just
| | 02:20 | set the padding so there's just a half an em of padding on the top
and bottom, and then 3em of padding on the right and left. That will
| | 02:26 | control the amount that the actual
contents of the ordered list are indented
| | 02:30 | from the left, if it ever got long enough in terms of content
than the right padding, the 3ems of padding on the right
| | 02:36 | will control where the line with rap. We're
not going to run into that problem here,
| | 02:40 | but that's the effect that would have.
| | 02:42 | This is how we set the background color and the foreground color
| | 02:44 | and the once we save that and go back to
Firefox and hit Reload, we get that effect, so
| | 02:50 | at this point we can see that we have the green masthead,
| | 02:53 | and we can see how far that goes and then
there's this ordered lists of navigation links.
| | 02:58 | It has purple background, and so, it also has a white foreground.
| | 03:04 | The links of course, because they are links,
stay blue, they don't change to white.
| | 03:08 | We're going to affect what color they have
and then, underneath that is the today's date,
| | 03:13 | which we're going to, in a later step,
| | 03:14 | pull up so that it sits next to the navigation
links, but this is how far we've come.
| | 03:21 | The next step is to basically create the navigation
bar with the dates on the right-hand side of it.
| | Collapse this transcript |
| Layout of the navlink bar| 00:01 | At this point in the process of bringing the whole design together
or to the point where we need to work on the navigation links
| | 00:07 | and what today's date is and so to
do that I'm going to go over to
| | 00:14 | the exercise ex1003, bring in the first bit
| | 00:18 | which is to set the list items in
the navigation links ordered list
| | 00:24 | to generate an inline box so it
will be displayed inline and then
| | 00:29 | have right padding, and right margin and right border.
| | 00:32 | That will help set up to the separators and the space
around the separators, that we want between these links.
| | 00:39 | This way there will be the link text,
three quarters of an em of padding
| | 00:44 | a one pixel border and then a half
an em of right side margin,
| | 00:49 | a little extra space that gets generated
by the browser to go between the list items,
| | 00:54 | once they've been set to display inline.
This is just something that happens.
| | 00:57 | So it'll be about three quarters of an em of space on either
side of these right borders, which act as separators. So,
| | 01:06 | if we go back to Firefox and hit Reload
| | 01:08 | there's what happens. The reason that the about
us is pushed over is because of that 3em padding
| | 01:14 | that we set for the navlinks
ordered list in the previous video.
| | 01:18 | Now here we have pretty much things laid
out the way we want, except for that date,
| | 01:25 | the July 16, 2006 and also we'd like
to do something about the colors.
| | 01:29 | Here, a link color. Well, there is one
other thing that I should point out.
| | 01:35 | We'll save here and we'll go back.
| | 01:37 | The, the last of the links,
the contact us has this separator
| | 01:42 | and we actually want to get rid of that. So,
| | 01:46 | thanks to the style we just brought in, the navlinks li.last
will have a border right of zero. So this will override this and
| | 01:54 | basically switch off the border for the list item with
the class of last, which happens to be the last one in the
| | 02:00 | list and then the links will be set to
this color, and so when we hit Reload
| | 02:05 | the links change colors and that last border comes off.
| | 02:09 | So now, our last step is to do something
with the, with today's date and for this,
| | 02:17 | were going to right align the text and boldface it
| | 02:21 | but by right aligning it, that will put it all
the way over to the right-hand side of the design.
| | 02:26 | Boldface the text and make in white
in color and then I'm actually going to
| | 02:31 | set the margin top to zero just for a moment
| | 02:34 | and this line height of one is in here actually to
| | 02:37 | make sure that certain rounding problems
don't occur. So if we hit Reload now, you
| | 02:41 | can see that we have the July 16, 2006 all the way over to the right side,
well almost all the way to the right side, except for the right-hand padding
| | 02:49 | and it has no borders. This right padding of
2em is what's keeping this base open right here.
| | 02:57 | And then the last thing that we do is
set the margin top to be -1 and 2/3ems,
| | 03:03 | this is a figure that was arrived at through some
calculation and a tiny bit of experimentation.
| | 03:08 | We set the margin top to be negative and that pulls that
| | 03:12 | paragraph upwards so that it now sits over top of the navlink.
| | 03:17 | So this puts the date right where we want it
| | 03:19 | and pretty much goes our navigation bar
with dates just the way that we like it
| | 03:24 | and that puts us in excellent position to start bringing together
| | 03:29 | the main layout, including creating side by side columns
| | 03:34 | and making sure that everything looks all neat and pretty.
| | Collapse this transcript |
| Using columns| 00:01 | So having a taken care of the
| | 00:04 | masthead and the navigation links, is
time for us to turn our attention to the
| | 00:08 | main area of the layout. The content columns
is what we're going to focus on first.
| | 00:13 | So switching over to the ex1004.css, I'm going
to bring in the first bit of style which is
| | 00:21 | to say the main column styles here.
| | 00:23 | Float that content div left and give it a padding of
| | 00:28 | zero on the top, 20em on the right,
4em on the bottom and 3em on the left.
| | 00:34 | If we go back and hit Reload, ok, there it is.
If we scroll down we can see that there's still
| | 00:40 | the rest of the stuff that will eventually go into the sidebar, but
we've set up our content column so that we get more or less our basics
| | 00:48 | in terms of layout here. Then, the
next step from there, is to start with
| | 00:54 | the stuff inside that content column. So,
| | 00:58 | the h1 for example, which is the about tea history portion,
| | 01:02 | give it some margins, a backgrounds and colors and a font size,
we'll take that backwards actually, the font is 1.5em, which will just
| | 01:09 | set the h1 to be one and a half times the font size of the content div
font size, so that will make it half again as big as the text around it.
| | 01:18 | A white background and a purples blue foreground. Then we have
| | 01:23 | the padding and the margins. The padding will just, you know, give extra
space to the background, but then, with the margin, we're actually
| | 01:29 | taken away the top margin and giving it a one
and a quarter em margin on the bottom. The 33%
| | 01:37 | right margin will shrink down the background area, which is
a visible portion of the element as was seen in the design comp
| | 01:44 | and then with a -2em on the left, we're going
to pull the whole thing over to the left.
| | 01:50 | So that the white area of the h1 actually
| | 01:54 | moves over and just touches the edge of the browser window
| | 01:57 | and then the 2em of side padding
which comes from the padding decoration
| | 02:01 | will push the content, the actual text over so that it overcomes what was
just done, so will pull whole thing 2em to the left with the -2em left margin
| | 02:12 | and then push the content
| | 02:14 | back the same distance, but this time 2em to the right,
| | 02:17 | so that the text will not appear to move when we hit Reload
| | 02:21 | in terms of, well it won't appear to move horizontally, but the
| | 02:25 | background area of the h1 goes all the way over to the edge of
the browser window and then goes most of the way across the
| | 02:33 | content column, but then it stops,
33% right margin, which again was
| | 02:38 | sort of a feature of the design comp, this about tea history
| | 02:41 | had this white bar that was inside, but the white bar
didn't go all the way across the content column, so
| | 02:45 | in this sense we're following the designers whishes. And now,
| | 02:49 | for our last step in this section,
something else that the designer asked for was
| | 02:54 | to have part of the h1 be a different
color, instead of being the bluish
| | 02:59 | they wanted this color instead. So,
there's a b elements inside the h1 that
| | 03:04 | surrounds that bit that's
supposed to change and if we hit Reload,
| | 03:08 | there it is. There's that greenish about tea. Now,
| | 03:13 | if you know anything about HTML and XHTML, you
| | 03:16 | might wonder why there's a b element
here, b elements are presentational, but
| | 03:20 | that's precisely why I did use a b element
for this case. There was the need to have one
| | 03:26 | bit of text in the element be one color and another bit of text be
another color seem like a purely presentational affectation to me.
| | 03:33 | Now there wasn't any real structural reason for it to happen.
| | 03:37 | So in this case, they used the b
element around the about tea portion
| | 03:41 | knowing that in a non CSS browser,
just if it's a really old browser
| | 03:47 | if we were to turn off the styles you can't really
see it because of the size of the text, but
| | 03:51 | that b element would make the text there, potentially bolder
for about tea and yet here we don't have that problem,
| | 04:00 | we're just using it to change the color.
| | 04:03 | This is a case of using a presentational element
like b, for presentational purposes. Now,
| | 04:07 | in discussing with the designer the situation, they
said, well we really want to emphasize the history portion.
| | 04:14 | Then, actually, what would have happen was the history
| | 04:17 | would've been marked with the m element for emphasis, basically
| | 04:20 | we would have reversed the style, the h1 would have
had the green color and the m element would've gotten
| | 04:26 | the purple blue color. These are the sort of structural
| | 04:30 | questions and decisions that you end up having to
make and that don't always have a right answer, but
| | 04:36 | generally they have an answered
that suits a particular person best.
| | 04:40 | So in next step, we'll finish up
with the rest of the content column,
| | 04:45 | and then, after that, we'll move
on to the rest of the document.
| | Collapse this transcript |
| Setting content styles| 00:01 | For this video, we're just going to do a really, a little bit
of cleanup in the content column, The Legendary Origins of Tea
| | 00:08 | heading is going to get a little bit of a spiff up
| | 00:11 | and we'll take that tea kettle image and push it over
to one side and let the rest of the text flow around it.
| | 00:17 | So, into picture size 1005, the ex1005.css
I'm going to add this content h2,
| | 00:26 | give it a little bit of top and bottom
margin, a little bit of bottom padding
| | 00:31 | and then put this solid greenish border across the bottom
| | 00:35 | and for this one, we're actually going to set its font size to
be 1.5em, just like we did with the h1, because in the design comp,
| | 00:42 | both of them were the same text size. If we hit Reload,
| | 00:46 | you can see the difference. Now these don't quite look the
same actually because The Legendary Origins of Tea is mixed
| | 00:50 | case and the about tea history is all in lower case.
| | 00:53 | Legendary Origins of Tea almost looks bigger, but they are the same size,
and that's one of those things that once the design comp was examined
| | 01:01 | very closely, this was something that was discovered. So they've
been said to be the same font size, the same size of text
| | 01:09 | and then just have this sort of separation here
| | 01:12 | and now just the second thing we're
going to do is take that image
| | 01:18 | and float it to the left and give it
some top, right and bottom margins so the
| | 01:25 | text doesn't crowd it. We go over and hit Reload,
| | 01:30 | there it is, it just drops over to the left and
the text flows around it and it's a nice separation.
| | 01:36 | So at this point, having finished up
basically with the content column,
| | 01:39 | we're going to get into the more interesting portion, which
actually, which is the sidebar, which has a number of interesting
| | 01:46 | styling demands that will occupy us for the next few movies.
| | Collapse this transcript |
| Creating the sidebar boxes| 00:01 | Heaving done at this point, roughly half of our design, we're now
going to move on to styling the sidebar, which is actually kind of
| | 00:07 | invisible at the moment, but if we scroll down we
can find it all right here. What we're going to do
| | 00:15 | is pull in the part that makes the sidebar go where it goes.
| | 00:19 | Here we are floating the sidebar to the left and giving it
a certain width and then using the negative margin trick.
| | 00:24 | What we have a negative left margin
that is larger than the width of
| | 00:30 | the floated element. So in this case to a width of 17em and I'll
give it a negative left margin of 18em. If the width had been
| | 00:37 | a 200 pixels, I could've given it a negative left margin of
201 or a negative of 210 pixels or even negative of 200
| | 00:44 | pixels. The goal here is to get the sidebar width to be
mathematically zero, even though it has a width of 17em.
| | 00:51 | The margin is subtracted from that, the side margins just are subtracted
from that to get a sort of a mathematical layout width and so your goal here
| | 00:59 | in order to get this floated sidebar
to sit next to the other one,
| | 01:01 | is to have a layout with a zero or less.
Here is going to be less. When we hit Reload,
| | 01:07 | there it is, it drops in place right
next to the main content column.
| | 01:11 | And it's sitting over top of the 20em right padding in
the content column that we added in a previous video.
| | 01:20 | The next thing to do really is to
set up some background colors quickly.
| | 01:24 | The form, which is the search form,
and all the h3s in the sidebar
| | 01:29 | actually have the same background color,
so use the group selector here to say
| | 01:33 | any form in the sidebar div and also any h3s which are inside of divs,
which are themselves inside of the sidebar div, give these a background color.
| | 01:41 | And so when we hit Reload, there's that background
color. The next bit takes care of the form.
| | 01:47 | You might have noticed that the form
| | 01:49 | background color is very closely sort of
shrink-wrapped to the things in that form.
| | 01:56 | That's because forms by default don't have any padding.
| | 01:58 | On the other hand they do by default
have margin at least in today's browsers.
| | 02:03 | So, we're going to get rid of that margin
| | 02:05 | and we're going to give it a little bit of padding to the form
| | 02:08 | and then if we hit Reload, there you go. The padding
helps provide some space between the content,
| | 02:16 | which is, in this case is the form
element and the average of the background
| | 02:21 | and by removing the margin, then we
don't have to worry about those margins
| | 02:25 | causing strange effects elsewhere.
| | 02:28 | For example pushing the tea of the day two far
away or in the pushing down the entire sidebar column
| | 02:33 | by having the top margin of the form
stake out of the floated sidebar div,
| | 02:39 | which is a one of the things can happen with margin collapsing.
| | 02:42 | Now, there is one more thing, which is that
we have the search box and the search button,
| | 02:47 | the text input box and the search button
| | 02:49 | sitting on basically two different lines because the, by default
| | 02:53 | text input box is white enough that the
search button has to rap to the next line.
| | 02:58 | So, in the markup
| | 03:01 | we're to take a quick look using Firefox as the
source, we can take a look down here and the input
| | 03:10 | has a type of text and it also has a class of text.
I added that for a reason actually, because I
| | 03:14 | knew that I was probably going to have
to style this, at least in some way.
| | 03:18 | CSS does offer a way to simply style,
| | 03:22 | for example text inputs without affecting other kinds
of inputs, like the input button, the submit button,
| | 03:28 | but unfortunately, Internet Explorer for Windows doesn't support
| | 03:31 | this particular bit of CSS. It's what's
called an attribute selector, which we didn't
| | 03:35 | cover anywhere else in this title because of the support problems.
| | 03:40 | What I almost always do, what I'm putting in form elements
is whatever type they are, I give them the same class.
| | 03:46 | Ideally I wouldn't have to do that, but if I'm ever going to
want to style for example, just text inputs or just check boxes,
| | 03:53 | I'm going to need that class in order for whatever I want to do,
| | 03:57 | to take effect in Internet Explorer for Windows, which
| | 04:00 | if you're like me, you have at least a few people
who visit your website using Explorer for Windows.
| | 04:05 | So, what we're going to do here is use that,
| | 04:10 | an element with a class of text, which is the text input,
| | 04:14 | that's inside the form that is inside this sidebar div,
| | 04:18 | give it a width of 9em, which is a figure I arrived at just by
| | 04:23 | trying it out and when we hit Reload, you see that the
| | 04:28 | text simply gets smaller, and there's room
for the search button to go next to it.
| | 04:31 | Styling form elements is kind of
an inexact science, in part because
| | 04:36 | there are certain things that you can do to
form elements and certain things that you can't
| | 04:39 | and certain browsers are more restrictive
than others which are more permissive.
| | 04:44 | Generally, if you can possibly avoid styling a form
element, you want to do so. But in cases where you just-
| | 04:50 | there's no other way around it, then you do things like this,
where you set a width in order to make your text input box smaller,
| | 04:57 | or maybe you put margins on a form element
in order to push it away from other things.
| | 05:02 | The whole subject of forms, form
elements and styling is actually a very
| | 05:07 | sort of complicated an abstract one.
| | 05:09 | So that's another reason why we didn't
really tackle it in this title.
| | 05:14 | Generally speaking, though,
| | 05:15 | there's a limited set of things that you
can do, specially across browser and so,
| | 05:20 | as I say, if you can all avoid styling form
elements you really want to do so, you want to
| | 05:25 | avoid trying to be too cutesy with your form elements, because
| | 05:28 | they are just some things that you can't change,
| | 05:31 | as an example the search button in Safari
| | 05:35 | is not styleble, at least not as of this recording.
| | 05:37 | That's why I say try not to style these form elements.
| | Collapse this transcript |
| Creating the sidebar form| 00:01 | So now we have the sidebar sitting in place on the right
side, where we want it, and we've done some basic styling.
| | 00:07 | Now it's time to start adding the boxes that are part of the design
over here, these are sort of dark grayish boxes that need to be in place.
| | 00:16 | The way to do that is in the sidebar, there are
actually each of the sections of the sidebar
| | 00:21 | that correspond to these boxes, is just enclosed in a div.
| | 00:25 | This makes sense, because div stands for division
and these are divisions of the content in the sidebar.
| | 00:30 | The visual separation of putting them
in boxes, implies the structural separation.
| | 00:35 | They are in separate divs, so
| | 00:38 | we have these divs, we're just going to give them backgrounds
| | 00:40 | of 3A3C2D in this case and foreground, white foregrounds
| | 00:44 | and a little bit of padding around the sides, at least
the sides in the bottom of 1em on the sides in the bottom to
| | 00:50 | push the content away from the edges of the blocks. The one
place where we do want to do that, we do want any top padding
| | 00:56 | because if we did that, then that would push
| | 00:58 | the headings of the divs, which are inside
of divs, away from the top of each div
| | 01:03 | and then we give each one a little bit of top margin in order to make
sure that they sit apart from each other visually, and that will push
| | 01:09 | if there are two divs in a row, which as a matter in fact there are,
| | 01:13 | there's the tea the day and the post archive, this
| | 01:15 | top margin will push them apart from each
other, as you can see if we hit Reload,
| | 01:21 | inside of that, the space in between the two here, that's that recorders
em top margin and then it's actually the same space up here above tea of the day.
| | 01:29 | And then this inset is the 1em padding along
| | 01:35 | the left side in this case and there's
1em padding along the bottom
| | 01:38 | and one along the right and the reason we do have any on
the top is because we don't want to push these titles down,
| | 01:44 | but we did push these titles inward, so
we're going to have to cope with that.
| | 01:49 | And the way that we're going to do that is,
with our h3s, which is what those headings are,
| | 01:55 | I'm going to fiddle with the font size, we're
going to give them negative right and left margins.
| | 02:00 | In addition to some padding, and
we'll get the padding in a moment.
| | 02:03 | So that these h3s have no top and bottom margins
and they have negative 0.8em right and left margins.
| | 02:10 | The reason is 0.8 is because their font
size is 1.25, so 1.25 times 0.8 equals one.
| | 02:17 | So that will
| | 02:18 | be 1.25 times 0.8 equaling 1, means that
they'll be the same size as the 1em padding on the div
| | 02:25 | and in order to make them all a bit taller,
give them a 0.4em top and bottom padding and
| | 02:33 | 0.8em right and left padding, which is to
counteract effectively the negative margins.
| | 02:38 | So, again, the size of the h3 pulled out
to the right and to the left by negative 0.8em
| | 02:44 | and then the padding pushes in the content by
that same distance back inwards. The reason that
| | 02:50 | I used 0.4 padding is because it was half
of 0.8, that was really the whole rational there
| | 02:55 | And then with text-transform lowercase, we make
the text be lowercase. So when we hit Reload,
| | 03:01 | make the text be lowercase. So I'm
going to save this and go over and hit
| | 03:05 | reload and there you have it.
These are now sort of filling out
| | 03:10 | the top part of each of these divs. That's
pretty much it for this particular exercise.
| | 03:16 | After this, we're going to get into dealing with the contents
and individually of tea of the day and the post archive.
| | Collapse this transcript |
| Completing the sidebar| 00:01 | For this video we're going to clean
up the tea of the day content a bit.
| | 00:05 | It's ok as it is, but we can make it
a little bit better and more importantly
| | 00:08 | bring it into line with what the designer has asked to do,
| | 00:12 | so in our ex1008.css, I'm going to add in a
little something for the tea of the day. This will
| | 00:21 | get rid of the margin on the tea of the
day h4, which is the Labrador t heading.
| | 00:26 | Get rid of the margins, except for a 0,5em
| | 00:29 | bottom margin and then some 0,5em top and bottom padding,
| | 00:33 | a solid white one-pixel bottom
border and by saying font-weight normal,
| | 00:38 | we'll remove any boldfacing that might be inherent from
the browser styles, so if we hit Reload, there you go.
| | 00:45 | The lack of margins has caused it to move up closer
and other content around it to move closer to it
| | 00:51 | and bottom padding and bottom margin keep things
from crowding that bottom white border too much.
| | 01:00 | Now here's a little bonus thing for those of you who have come
through to this particular exercise, a pseudo-element selector.
| | 01:08 | Here, inside the tea of the day div,
| | 01:11 | we're going to set things so that the first line of any paragraphs
inside that tea of the day ID div, have a font style of italic.
| | 01:19 | This is a purely presentational
| | 01:21 | thing, but you can do it structurally
here, just by saying p first line.
| | 01:25 | And so if we go back and hit Reload, you'll watch the
first line of text, the Lorem ipsum, dolor sit amet text,
| | 01:32 | hit Reload and it's italicized.
| | 01:34 | Use Cmd plus or minus to change the width here of the sidebar,
| | 01:39 | so that's the first line of text ended between sit and amet, the
| | 01:44 | italicization, would just Lorem
ipsum, dolor sit and then amet at
| | 01:48 | the beginning of the next line, would not be italicized.
| | 01:51 | There's also a first letter, suitor element,
| | 01:54 | which would do about what you would expect,
it would style the first letter of a matched element
| | 01:59 | and then for the image, what we're actually going to
do here is in order to center it, we're going to say
| | 02:07 | the tea of the day image should generate a block box, it should
be display block and has been discussed in previous chapters,
| | 02:13 | any block box that has some sort of a width, whether it's
defined explicitly in the CSS words intrinsic, because the
| | 02:20 | element has an image for its content,
in those cases, block box and a set width,
| | 02:26 | then automatic right and left margins,
as we've done here will center that image.
| | 02:31 | So we have a 2em top margin, which will push it
away from the text above it and no bottom margin
| | 02:37 | and automatic right and left margins on a block box, which means
that the image, after we save that, go over in the image, will center.
| | 02:45 | This is pretty straight forward, I think. The other way to do
centering rather than converting the image to a block box,
| | 02:51 | would've been to make the tea of the day div be text-align center and
then individually set the tea of the day h4 and the tea of the day paragraph
| | 03:00 | to be text align left. In that case we wouldn't have had to
| | 03:04 | set block level display for the image, it just would have been centered,
| | 03:07 | but that's the case of having to set
center alignment on the containing element
| | 03:12 | and then override it for any of the descendent
elements the you don't actually want to center.
| | 03:18 | That's just kind of clumsy, which is why we decided to go with
| | 03:21 | the display block solution that works quite well in all the current
browsers as of this recording, so there's really no reason not to use it.
| | Collapse this transcript |
| Making a table| 00:01 | There is really one more thing to take care of in the sidebar and that's
the post archive calendar. So we're actually going to scroll down to that.
| | 00:08 | After we've done that, we'll take
care of the footer, in the next video.
| | 00:12 | For now we're going to concentrate
on the post archive calendar here and
| | 00:16 | the first thing that we really want to do this make it a little smaller
and yet make the caption, which is the July 2006 bit, a little bit bigger.
| | 00:24 | So the first step in that is to say
post archive table, set the margin on this to be
| | 00:31 | zero on top and bottom and automatic on the right and left.
| | 00:35 | Tables, like images, sort of have an intrinsic width just
because of the way tables are constructed. So giving an automatic
| | 00:40 | right and left margins means that it will be center
and we're going to set its font size to smaller.
| | 00:45 | We go over to the browser and hit Reload. Then we discover that the text has
gotten smaller and the calendar's basically centered. So the next bit is to
| | 00:57 | take care of the caption. Now, here we're also going
to center the caption and we're going to give it a 1em
| | 01:04 | top margin, this will push the entire calendar downwards. We're also going
to make it larger and boldface, so that it stands out a little bit more
| | 01:12 |
and has more of a title field to it and if we hit Reload,
| | 01:17 | there it is, it pushed down because of the 1em top margin and it
centered just like the rest of the calendar and a larger boldface.
| | 01:25 | So having taken that on, really
the next thing to do is to deal with the
| | 01:30 | table cells so that we form a grid.
| | 01:33 | We're turning off the padding on these table cells because we
don't want any extra padding between the borders on the table
| | 01:38 | cells and their contents. Giving them
a border, one pixel solid with this color,
| | 01:43 | and also a background and a foreground color,
| | 01:45 | this will basically give them
a medium gray, it's not a pure gray,
| | 01:49 | but it's sort of a medium gray
with a little hint of blue purple to it
| | 01:54 | a darkish background but an even darker foreground, and then inside each
table cell, the text will be centered, so when we hit Reload, we get that.
| | 02:03 | So now, if you're looking closely foreground on these table cells
| | 02:09 | is pretty close to the background on the divs themselves.
| | 02:12 | They could've been equivalent, but it actually works
better to make the color on the divs a little bit darker
| | 02:18 | than the background of the div that surrounds the table.
| | 02:21 | So that's how we ended up with that
color of gray and then the last thing is to
| | 02:25 | make sure that the links work all right and look all right.
| | 02:28 | So here we're going to make any links
inside of this stable white boldfaced.
| | 02:32 | We're also going to give them block level
display, which will cause them to generate
| | 02:36 | block boxes that will fill completely
the table cells in which they sit.
| | 02:41 | From the user's point of view it makes the entire table so
clickable, that's actually not true. It's just that the a element
| | 02:45 | fills the table cell and the a is clickable, so,
| | 02:48 | you have that and then, when we hover
them, they'll get greenish background color.
| | 02:54 | So hitting reload we'll find out if they've turned white
| | 02:57 | and then if we go and hover over them,
they get greenish backgrounds.
| | 03:04 | So that brings the style of the table together.
All that remains now is to make the footer pretty.
| | Collapse this transcript |
| Creating a footer| 00:02 | So here we are, in the last of our exercise files
and everything looks great, it looks like we've
| | 00:07 | pretty much done everything, it all looks good until we scroll down at the
bottom of the page and realize that the footer needs a little bit of work.
| | 00:15 | So, what we need to do, start styling it.
| | 00:19 | What we're going to do is go over to
1010.css and bring in some footer styles.
| | 00:25 | Now we're going to start up by clearing
the footer below the floated columns.
| | 00:29 | In theory, we don't really need to do that,
| | 00:32 | just go back and look for a second, it's already down below,
| | 00:35 | all the columns have come before it.
| | 00:36 | That's because the content column, remember, is as wide as the browser
window at this point and it's basically filling out the entire browser window
| | 00:44 | and then the sidebar div is sitting right over it,
| | 00:48 | but, just to be safe, let's clear the footer and now we'll
give it a background color and a little bit of padding
| | 00:54 | on top and bottom and also on the
sides, so that when we hit Reload,
| | 00:58 | it all comes together very nicely.
| | 01:00 | This extra space here between the sidebar and the footer
| | 01:05 | is actually caused, if we go back a bit by
| | 01:10 | the bottom margin on the sidebar, which is the taller
of our floats, that's causing that separation.
| | 01:15 | So there's a little bit of weirdness
in terms of the spacing with the footer
| | 01:21 | as compared to the text, that's because
of that bottom 1em margin on the footer.
| | 01:25 | That's why the amount of space here between the
top of the background and the top of the text
| | 01:32 | is, this is smaller than this amount
between the bottom of the text and the bottom
| | 01:36 | of the footers background. That's because
| | 01:39 | there's that 1 1/2em padding up here, but
there's no top margin on the paragraph.
| | 01:43 | they didn't close this site design by Dominique etc.,
etc. On the bottom of the paragraph there is 1em margin
| | 01:49 | and then below that there's the 1 1/2em
of bottom padding on the footer.
| | 01:54 | So if we remove that bottom margin which we did in
the CSS and will now do here by hitting reload, then,
| | 02:00 | the space above and below the text balances out.
| | 02:04 | And then the last thing to do is
to style the links in the footer,
| | 02:08 | so that they are more like what we want. We're going to make them be
| | 02:12 | dark gray in color and then underline them. So that instead of being,
you know, blue or purple, that will just be sort of a slightly lighter
| | 02:22 | color then the text around them and be
underlined, thus indicating their hyperlinked nature.
| | 02:28 | That pretty much takes care of the footer
and it takes care of our design, everything is
| | 02:32 | in place and right were we'd like it to be.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:01 | Well this movie sadly brings us to the end of our time together.
If you enjoyed learning about CSS, and I hope you did,
| | 00:09 | then there are some related lynda.com
titles you should check out.
| | 00:12 | There's the CSS for Designers,
| | 00:15 | featuring the excellent Molly Holzschlag and Andy Clarke and there's also
Learning XHTML if you want to dig back into the markup side of things,
| | 00:25 | and get to know XHTML inside and out. There're also some
| | 00:31 | resources online that you could try.
| | 00:34 | The first one css-discuss.org is actually
| | 00:37 | a website for a mailing list that you could join
if you like getting tons and tons of e-mail
| | 00:42 | and the average is 50 or 60 messages per day. That's why I say
try the wiki if you don't want to set up for that much e-mail.
| | 00:49 | There's a link up at the top of css-discuss.org to
the wiki, which is an interactive online FAQ that
| | 00:57 | stills some of the collective wisdom of the members of
the CSS discuss mailing list, over several years, so it's
| | 01:05 | something like a very large CSS frequently asked questions
lists that has been collectively created by that community.
| | 01:12 | There are these other resources as well, any of which I commend
most highly and so with that I will take my leave. Thank you
| | 01:22 | very much for all of your time and
interest and hopefully we will meet again.
| | Collapse this transcript |
|
|
