IntroductionWelcome| 00:04 | Hi! I am James Williamson, senior author
at lynda.com, and I want to welcome you
| | 00:08 | to CSS: Core Concepts.
| | 00:10 | If you are brand new to CSS or feel
like maybe you have missed some of the
| | 00:14 | important concepts along the way,
then this course is for you.
| | 00:18 | I have designed it to teach the basic
core concepts of CSS that authors will
| | 00:22 | need before moving on to more specific projects.
| | 00:25 | We will start by focusing on the basics
of CSS, such as syntax, learning how to
| | 00:30 | set properties, and exploring the
relationship between style sheets and HTML.
| | 00:35 | From there we'll turn our attention to
properly targeting page content, how to
| | 00:39 | properly prevent and resolve conflicts
between styles, controlling basic site
| | 00:44 | typography, mastering the box
model, and how to properly define color.
| | 00:49 | So grab a refreshing beverage, fire
up your favorite code editor, and let's
| | 00:54 | get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a Premium member of the
lynda.com Online Training Library or if you're
| | 00:05 | watching this tutorial on a disc, you
have access to the exercise files used
| | 00:09 | throughout this title.
| | 00:10 | Exercise files are arranged by chapter
and are located in folders that are named
| | 00:16 | based on the movie number
they represent. Where applicable,
| | 00:19 | they'll also include a finished files
folder where you can compare the finished
| | 00:23 | version of the exercise to your own file.
| | 00:25 | Now I recommend copying the entire
Exercise Files directory to the Desktop, just
| | 00:30 | as I have it here, and then working on
the files from the appropriate folder.
| | 00:34 | I will callout the location of the
exercise files for each movie, and you
| | 00:37 | should see a brief overlay on the
screen that will also tell you where to find
| | 00:41 | those exercise files.
| | 00:43 | Now this course focuses on the core
concepts of CSS and not on any one
| | 00:48 | authoring tool. As such, it simply
doesn't matter which authoring tool you use
| | 00:53 | to write your CSS and HTML.
| | 00:55 | If you're comfortable with an existing
HTML editor, simply continue using that
| | 01:00 | one for this course.
| | 01:01 | Now I am going to be using Aptana Studio
for this course, for a couple of reasons.
| | 01:05 | Now first, it's free.
| | 01:07 | It's very lightweight, and it's going to
allow me to focus solely on the code itself.
| | 01:12 | Now I am going to give you a brief
little tour here of how I am going to set
| | 01:15 | Aptana up, in case you want to use it and
have your workspace look like mine, but
| | 01:20 | in the end, I'm not saying
you need to use this program.
| | 01:22 | You can certainly use whatever
tool you are most comfortable with.
| | 01:26 | So if that's Dreamweaver,
| | 01:27 | if it's an eclipse editor or whatever
it is, feel free to use that instead.
| | 01:31 | I have opened up Aptana, and you
can download that for free from
| | 01:35 | www.aptana.com, and I am going to show
you that site in just a moment when I
| | 01:40 | discuss CSS authoring tools.
| | 01:43 | The first thing I am going to do is
just set up a new project. So I am going
| | 01:45 | to go to New Web Project and I am just
going to go ahead and name it CSS Core Concepts.
| | 01:52 | This is just going to allow me to
access my exercise files a lot easier. And
| | 01:56 | then I am going to browse for the
location out to my Desktop, I am going to find
| | 02:01 | the exercise files folder, and I am
going to go ahead and click Finish.
| | 02:05 | So what this will allow me to do is now
over here on my Projects panel, I have
| | 02:09 | access to all of my exercise files
right here and so I can just open them up
| | 02:13 | with a simple click.
| | 02:14 | Now I am also going to do some things
to make it a little bit easier for you
| | 02:18 | guys at home to read.
| | 02:19 | Right now, this text is pretty small
so I am going to go up to my Preferences
| | 02:24 | and one of things I can do is I can
click on my Aptana Studio preferences and
| | 02:28 | click on the Themes and under Themes, I
can choose whatever theme I want to use.
| | 02:33 | I am just going to use the
default Aptana Studio theme.
| | 02:35 | They have other ones that emulate other
editors, even Dreamweaver if you want to
| | 02:39 | use those, if you are
more comfortable with that,
| | 02:41 | but I am just going to
stick with the default theme.
| | 02:43 | What I am going to do is I am going
to go down to my Font here and click on
| | 02:47 | that and I am just going to chose
something that will be a little bit easier
| | 02:51 | for you guys to read on screen. I am
going to choose Arial, and I am going to up
| | 02:54 | my font size as well.
| | 02:55 | I will go ahead and apply that and
now you guys can see, that's a little bit
| | 03:01 | easier for you all to read on screen.
| | 03:04 | One more thing in the Preferences. Then
I am also going to go to Editors and I
| | 03:07 | am going to make sure Enable word wrap
is checked so that if we have any long
| | 03:11 | strings of code, we have word wrap.
And that's really basically it.
| | 03:15 | From time to time, I may shrink this
pane down a little bit, so that I see more
| | 03:18 | of my code view, but pretty much I am
just going to use Aptana studio the way
| | 03:22 | that it comes out of the box.
| | 03:24 | Now I also recommend installing the
most recent versions--depending on which
| | 03:27 | platform you are on--of Internet
Explorer, Chrome, Firefox, Safari, Opera--
| | 03:33 | really all the modern web browsers.
| | 03:35 | Go ahead and install as many of them as you can.
| | 03:37 | We will be previewing our pages using
different browsers all the way throughout
| | 03:41 | the title, because I really feel like
you should be in the habit of testing your
| | 03:44 | pages with multiple browsers.
| | 03:46 | So that is how you use the
exercise files if you have access to them.
| | 03:50 | Now if you do not have access to the
exercise files for this title, feel free to
| | 03:54 | go ahead and use your own files.
For the most part, the files that we are we
| | 03:57 | going to be using in this
title are fairly simple,
| | 03:59 | so you should be able to
emulate them without too much trouble.
| | Collapse this transcript |
|
|
1. CSS BasicsExploring default styling| 00:00 | So I want to start here by opening an
unstyled page in a browser. So you can go
| | 00:06 | ahead and do this with me.
| | 00:07 | Now although I am using Firefox, feel
free to use your favorite browser. And I'm
| | 00:11 | just going to go up here and open a
file. And I want you to go out to your
| | 00:16 | exercise file, so I am going to go out
to my Desktop/Exercise Files/Chapter_01/
| | 00:20 | 01_01, and I am going to find
this index.htm page in there.
| | 00:27 | So I am going to go ahead and open
that up, and wow, nothing really special
| | 00:33 | going on here at all, or is there?
| | 00:36 | You see, even though it's common to
refer to a page like this as unstyled,
| | 00:42 | that's not exactly accurate.
| | 00:44 | What's actually happening here is
that the browser that you're using is
| | 00:48 | applying its own default style sheet
to the page and that results in the
| | 00:53 | formatting that we are seeing here.
| | 00:54 | So font that's being used, the size of
the text, whether it's bold or italic,
| | 01:00 | the color of the links, the space
between paragraphs and headings--the browser's
| | 01:05 | default styling is controlling all of that.
| | 01:09 | There might be some slight differences
between one browser or another, but for
| | 01:12 | the most part, all desktop browsers will render
elements in ways similar to what you see here.
| | 01:18 | Now browsers can take this usually a
step further as well, because they usually
| | 01:22 | give users the ability to change
certain styling preferences as well.
| | 01:27 | So really quickly I am going to go into
Firefox's Preferences here and show you
| | 01:31 | what I'm talking about.
| | 01:32 | If I go over to the Content tab, notice that
I can choose which default font I want to use,
| | 01:39 | so if you don't feel like using Times,
for example, if I wanted to use something
| | 01:43 | different, like say Arial, I can go
ahead and choose that, and you can see the
| | 01:46 | page goes ahead and changes.
| | 01:48 | I can also go ahead and change
the size of the text as well.
| | 01:52 | If I would like it a little bit larger
to help make it a little bit easier for
| | 01:55 | me to read, I can go ahead and select that.
| | 01:56 | It goes ahead and changes the
default size of the text as well.
| | 02:00 | If I go to Advanced, notice that I can
deselect this check box that says Allow
| | 02:06 | pages to choose their own fonts instead
of my selections above. And if I do that,
| | 02:10 | anything they choose here for fonts--
for proportional or monospace fonts, serif
| | 02:15 | or sans-serif--it's going to override
whatever the browser's default styles are.
| | 02:19 | So as a user, I have a fair amount of
control over how my pages look and feel
| | 02:24 | and act, and that's before I deal with
any of the author's CSS styles.
| | 02:29 | So I am just going to close the
Preferences. So what's the point of me
| | 02:32 | showing you all that?
| | 02:34 | Well, to make sure that you focused on
a very fundamental truth of CSS when
| | 02:38 | you begin writing your styles, and it's really,
really important for you to understand this:
| | 02:43 | as you author your own style sheets,
you're not just defining how you want the
| | 02:47 | page elements to look;
| | 02:48 | you are also going to be overriding
the browser's default styling, so you are
| | 02:53 | going to be overriding all of this.
| | 02:54 | Now if you fail to take these styles
into account or forget what an element's
| | 02:59 | default styling is, you might end up
with some unexpected formatting or some
| | 03:03 | spacing issues that become really hard
to track down, because you start looking
| | 03:08 | for them in your styles and
they are not in your styles at all;
| | 03:10 | they are coming from the default browser styles.
| | 03:13 | In fact, dealing with browser-default
styling has even resulted in its own
| | 03:18 | technique, and it's
something called a CSS reset.
| | 03:21 | A CSS reset is a collection of styles
that zero out the formatting from these
| | 03:26 | browser default style sheets, and they
help to give you a consistent point from
| | 03:31 | which to begin writing your own styles.
| | 03:32 | Now if you want to learn a little bit
more about those, I have a couple of sites
| | 03:35 | for you to take a look at.
| | 03:36 | First Six Revisions has an article. You
can just go to the Six Revisions site
| | 03:40 | and search for this.
| | 03:42 | It's a comprehensive guide to CSS
resets, and it gives you a little bit of
| | 03:46 | background about CSS resets and then
goes over some of the more popular ones.
| | 03:51 | There is another site that I really like.
| | 03:52 | This is cssreset.com.
| | 03:55 | This one gives you a really quick and
concise way to grab some of the code from
| | 04:00 | the more popular CSS resets out there,
as well as some documentation. And
| | 04:05 | there's a lot of information on this
site as well, about what a CSS reset is and
| | 04:10 | when you should use them.
| | 04:11 | And if you want to learn a little bit
more about browser's default style sheets,
| | 04:15 | there's an older, but still incredibly
useful collection of user agent style
| | 04:19 | sheets at Jens O. Meiert's--and I hope I'm
pronouncing these names right--blog. Just go
| | 04:23 | to his blog and search for "User
Agent Style Sheets." And he's got a whole
| | 04:27 | collection of user agent style sheets.
| | 04:30 | Again, these are a little bit old, but
they help give you a really nice idea of
| | 04:34 | what the foundation-level styles
are for most of your user agents.
| | 04:37 | I don't want you to worry
too much about default styles;
| | 04:40 | for the most part, they focus on the
really basic formatting that you're likely
| | 04:44 | to end up overriding anyway in
the course of writing your styles.
| | 04:47 | Just be sure to pay attention to
browser's default styling, and keep them in mind
| | 04:52 | when planning and authoring your own styles.
| | Collapse this transcript |
| CSS authoring tools| 00:00 | Authoring CSS requires
little more than a text editor.
| | 00:04 | Style sheets are really nothing more
than text files with a .css extension, so
| | 00:09 | almost any text-editing tool will suffice.
| | 00:12 | However, coding HTML and CSS can be
time consuming, and syntax errors can be
| | 00:17 | pretty hard to catch on your own.
| | 00:19 | At a minimum, you're going to want to
have a code-editing tool that has line
| | 00:22 | numbers, code-formatting options,
syntax highlighting, and good support for the
| | 00:27 | languages that you're going to be authoring.
| | 00:29 | If you're already authoring HTML,
chances are you won't need to change tools.
| | 00:34 | Almost every HTML editor on the market
also features strong support for CSS, so
| | 00:39 | if you are already using a tool like
Coda, BBEdit, Dreamweaver, or CoffeeCup's
| | 00:44 | HTML editor, you don't need to change.
| | 00:47 | On the other hand, if you're new to web
development and have not picked a tool
| | 00:50 | yet, I recommend trying out several
different types of authoring tools before
| | 00:54 | settling on a favorite.
| | 00:55 | My Web Design Fundamentals and CSS
Fundamentals Courses both have movies that
| | 01:00 | give you an overview of a wide
range of HTML and CSS editors.
| | 01:05 | Try downloading trial versions of a
few of them and experiment with a variety
| | 01:09 | of workflows and feature sets and
you're bound to find one that fits your
| | 01:13 | personal preferences.
| | 01:15 | For this course, I'll be using Aptana Studio.
| | 01:18 | It's free, it's cross-platform, and
it has robust built-in CSS support.
| | 01:22 | I'm also using Aptana because I want
the focus of this course to be on the CSS
| | 01:27 | code itself, not on the
tools designed create it.
| | 01:30 | There are some fantastic tools out
there that will help you create CSS visually
| | 01:35 | or even they help generate the code for you.
| | 01:37 | Those tools are great, but if you
don't understand the underlying code that
| | 01:40 | they're creating, you'll never
really fully understand how styles work.
| | 01:45 | So if you want to use a tool other
than Aptana for this course, feel free.
| | 01:49 | We'll be hand-coding all of our
examples, so any tool that supports writing
| | 01:52 | CSS by hand is going to work just fine.
| | 01:55 | Now if you want to use Aptana,
you can download and install it
| | 01:58 | from www.aptana.com.
| | 02:01 | And if you want your workspace to resemble mine,
| | 02:05 | simply watch the "How to use the
exercise files" movie in the introductory
| | 02:08 | chapter of this title, and I go over
pretty much how I'm going to set the
| | 02:12 | program up for my use.
| | 02:14 | More than anything else, just be sure
that the editing environment that you
| | 02:17 | choose allows you to create
clean, standards-compliant code.
| | 02:22 | After that, it's just a matter of
picking the tool that has the right set of
| | 02:26 | features for the way that you like to work.
| | Collapse this transcript |
| CSS syntax| 00:00 | Usually one of the hardest parts of
learning any new scripting or markup
| | 00:04 | language is mastering the syntax.
| | 00:06 | In the case of CSS, however, the syntax
is remarkably simple, making it one of
| | 00:11 | the easier languages to learn.
| | 00:13 | The CSS is a style sheet language,
which means that it is used to describe the
| | 00:17 | presentation of
structured documents such as HTML.
| | 00:21 | This presentation is defined by using rules
that target specific elements within a document.
| | 00:26 | A collection of those rules is
then considered a style sheet.
| | 00:29 | Let's take a look at a sample formatting rule.
| | 00:32 | Now CSS style are made up of
two parts. The selector here P for
| | 00:37 | paragraph tells the browser which
elements or elements within the document to
| | 00:42 | style, so based on this selector, all
paragraphs within the styled document
| | 00:46 | would be 16 pixels and blue.
| | 00:49 | Now selectors can be really simple,
like the ones that we're seeing here, or
| | 00:53 | extremely complex, depending upon
which group of elements on the page that
| | 00:56 | you're trying to target.
| | 00:58 | By using a comma, for example, you
can group selectors together in order to
| | 01:02 | write more efficient rules, so this
would apply to all paragraphs, list items, and
| | 01:06 | unordered lists on the page.
| | 01:08 | You can also use whitespace or other
combinators to make rules which target
| | 01:11 | more specific elements.
| | 01:12 | So in this case, for example, you'd be
targeting any paragraph inside of a div
| | 01:17 | tag. By adding the, say, adjacent
sibling combinator, we change the meaning of
| | 01:21 | this selector significantly.
| | 01:23 | In this case, the selector would now
only target paragraphs that immediately
| | 01:27 | follow a div element.
| | 01:28 | So as you can imagine, learning the
various combinations of selectors and how to
| | 01:33 | properly target elements on the page is
a huge part of understanding CSS syntax,
| | 01:38 | and we're going to go into those in a
lot more detail a little bit later on.
| | 01:41 | Now the declaration, which is
enclosed in these curly braces, gives the
| | 01:45 | formatting instructions for the style.
| | 01:47 | Here there are two rules: one telling
the browser which size to make the text
| | 01:51 | and then another one that's defining the color.
| | 01:54 | The rules themselves are made up of
two parts: the property and the value.
| | 01:58 | Now, these are separated by colons,
and then a semicolon is used at the end of
| | 02:03 | the rule to tell the browser to stop
evaluating this one and move on to the next one.
| | 02:08 | While this declaration syntax is also
pretty simple, you'll need to learn which
| | 02:12 | properties you can set for each
element, which values are allowed for those
| | 02:15 | properties, and then how to
properly format those values.
| | 02:19 | But for the most part, the use of
whitespace in your rules does not matter.
| | 02:24 | For example, both of the CSS rules
that you can see here would give you the
| | 02:27 | exact same formatting.
| | 02:29 | Now in some cases it does matter.
Within a selector, it often results in
| | 02:34 | determining which elements are targeted,
so you need to be familiar with when
| | 02:38 | whitespace is important and when it's not.
| | 02:41 | Occasionally, you may need to use inline rules.
| | 02:44 | These rules, such as @font-face, @media,
@import, and @page, allow you to group
| | 02:51 | common styles together or group
specific formatting definitions together.
| | 02:55 | And here, for example, you can see an
@media rule being used to group rules
| | 02:59 | together that are specific to a
single media type and screen size.
| | 03:03 | There are also certain syntax rules
such as shorthand notation, pseudo-elements,
| | 03:06 | and pseudo-classes that you'll need to
learn as well and as we go through this
| | 03:10 | title, we're going to discuss
those in a lot more detail.
| | 03:13 | But you can also use comments to your CSS.
| | 03:16 | Comments are useful for organizing
styles, annotating your code for other
| | 03:20 | team members or future authors or
frankly, just helping you remember why a
| | 03:24 | certain selector was used.
| | 03:25 | CSS allows only a single type of comment.
| | 03:29 | You start it with a /* and then at the end
of the comment, you just close it with a */.
| | 03:35 | Now the comments can be used for single
lines or multiple lines, and you can put
| | 03:39 | them almost anywhere within your CSS.
| | 03:41 | Now best practices limit them to
what you see here: before or after rules or
| | 03:46 | directly after individual properties.
| | 03:48 | Now throughout this course we're going
to be focusing on the proper syntax of
| | 03:51 | CSS and how to write rules a
little bit more efficiently.
| | 03:54 | I also highly recommend reading through
the CSS specifications, as well, as they
| | 04:00 | also provide a much deeper look into
why rules are formatted in a specific way.
| | 04:05 | There are a couple places online
that I want you to go take a look at.
| | 04:09 | One is the CSS Current Work page, which
is found at this address, and there you
| | 04:14 | get a nice big snapshot of what's
happening with CSS currently, and also it links
| | 04:18 | to the individual modules and specifications.
| | 04:21 | Also, right now
the standard recommended CSS
| | 04:24 | is the CSS 2.1 specification.
| | 04:28 | You can find that on its own page at
the w3c.org site at w3.org/TR/CSS2.
| | 04:32 | So go through those specifications,
even as we're going through this course, and
| | 04:39 | you're going to get a much deeper
understanding of why the CSS syntax is
| | 04:43 | formatted the way that it is.
| | Collapse this transcript |
| Writing a selector| 00:00 | The first thing we'll do when writing
CSS is to explore writing a selector, and
| | 00:06 | how it can help us target elements on the page.
| | 00:08 | Now, a little bit later on, we're
going to explore the different types of
| | 00:11 | selectors in more detail.
| | 00:12 | For right now, let's just concentrate on
what a selector is and what it allows us to do.
| | 00:19 | So I'm going to go over to my
exercise files, go in the 01_04 folder, and
| | 00:24 | open up selector.htm.
| | 00:28 | So I want to just briefly go over
the structure of the document with you.
| | 00:30 | You're going to notice right off the bat
that inside of the head of the document
| | 00:34 | we have the style tag.
| | 00:36 | You know we're going to go over
embedded styles in more detail a little bit
| | 00:39 | later on, but for now, the style tag allows
us to write CSS directly within this document.
| | 00:45 | In the body of our document we can see
that we have a h1, below that we have
| | 00:48 | a paragraph, and then we have a div
tag in which a h2 and a paragraph are
| | 00:53 | both located, so those are the elements on
the page that we're going need to be targeting.
| | 00:58 | We also have a sample rule already
written for us. All it needs is a selector,
| | 01:02 | and that is what we're going
to go ahead and write right now.
| | 01:05 | So I'm just going to place my cursor
right before the opening curly brace of our
| | 01:09 | CSS rule, and I'm going to type in P.
That is a very simple element selector, and
| | 01:15 | it's going to target all
the paragraphs on the page.
| | 01:18 | So I'm going to save the page, and
I'm going to preview that in a browser.
| | 01:21 | Now depending upon which authoring tool
you're using, you're probably going to
| | 01:24 | have different methods for
previewing within the browser.
| | 01:27 | Some of them you are actually going to
have to go out to the browser and open
| | 01:30 | the file separately; others such
as Aptana Studio and Dreamweaver,
| | 01:34 | they give you an option of previewing from
the browser directly within the application.
| | 01:38 | In Aptana, all I do is go right up
here to this little Play button and I can
| | 01:42 | grab the pulldown menu and I can run
from any browser that I've configured.
| | 01:46 | So I'm going to go ahead and run this
from Chrome, and now I can see that all
| | 01:50 | of the paragraphs on the page,
because of the element selector that we just
| | 01:54 | wrote, are now red.
| | 01:57 | So I want to jump back into Aptana
Studio, and I'm just going to change the
| | 02:01 | selector. So instead of the just
having a paragraph selector, I'm going to
| | 02:06 | type in div, and then a space, so now
div p. This is what's known as a
| | 02:13 | descendent selector, and it's only going to
target paragraphs that are found within a div.
| | 02:16 | So I'm going to go ahead and save this,
go back out to Chrome, refresh the page,
| | 02:21 | and you can see that now instead of
targeting every single paragraph on the
| | 02:26 | page, we've filtered it a little bit,
and we're only targeting the paragraph
| | 02:29 | that's inside of the div tag itself.
| | 02:32 | So I want to go back into our editor, and
we'll make one more change to our selector.
| | 02:36 | I'm just going to go right after the
div p, type in a comma, and then h1.
| | 02:41 | Now, this is what's known as a group
selector, and what it is doing is it's
| | 02:45 | going to target both of these.
| | 02:46 | It'll target all paragraphs inside of a
div tag, as well as all h1s on the page.
| | 02:51 | So again, I'm going to save that, go
back to Chrome, refresh the page, and now
| | 02:56 | you can see that now in addition to
targeting this paragraph, it's also
| | 02:59 | targeting the heading 1 up here as well.
| | 03:01 | Now we're going to learn more about
those selector types, and as we do that,
| | 03:05 | you're going to become a lot more
comfortable targeting specific page elements.
| | 03:08 | Now the real challenge for you as an
author is to make sure that you're writing
| | 03:12 | the most efficient selectors that you can.
| | 03:14 | The more complex the selector gets, the
more work to browser has to do in order
| | 03:18 | to render it properly.
| | 03:20 | By having a thorough understanding of
all the different types of selectors and
| | 03:24 | when they're appropriate to use, you'll
be a lot better prepared when planning
| | 03:27 | and executing your styles.
| | 03:29 | Now although we are going to be
examining selector types in more detail later, I
| | 03:33 | want to mention a very, very helpful resource.
| | 03:35 | And I'm just going to click over
here on my tabs, because I already have
| | 03:37 | this pre-loaded up here.
| | 03:39 | This is the Selectors
Level 3 module from the W3C.
| | 03:43 | Now this is the specification that
describes selectors in more detail.
| | 03:47 | However, if you scroll down to the
Selectors section--and I'm just going to do
| | 03:51 | that as quickly as possible here; here we go--
| | 03:54 | you get a list of all of the different
selector types, and it gives you a nice
| | 03:57 | quick overview of the
selector and what it targets.
| | 04:00 | Now as you're learning selectors a
little bit later on, I would recommend
| | 04:03 | actually having this and referring back
to it, because it's an extremely handy
| | 04:07 | resource to have on hand.
| | Collapse this transcript |
| Setting properties| 00:00 | Writing a selector is really only
half of properly writing a CSS rule.
| | 00:05 | Once you've targeted an element on the
page with a selector, you then need to
| | 00:09 | define the property or properties that you
wish to set to control the style of that element.
| | 00:14 | So let's experiment with setting a
few properties for our page element.
| | 00:17 | So I'm going to go over in our exercise
files to the 01_05 folder and I'm going
| | 00:22 | to open up properties.htm.
| | 00:25 | So again, really basic page here. We can
see that I have some placeholder rules,
| | 00:29 | already written some
selectors there h1, h2, p, div,
| | 00:33 | and if I look at the structure of the
page, it's exactly what we had last time.
| | 00:37 | Same structure: the heading one followed
by a paragraph, then we have a div with
| | 00:40 | a heading two inside of that, and a
paragraph inside of that as well.
| | 00:44 | Okay, so I'm going to go back up to
these embedded rules that we have here, and
| | 00:48 | I'm just going to add some
properties to the existing selectors.
| | 00:50 | Now CSS doesn't care whether you do
it all on one line or multiple lines.
| | 00:55 | I have these set up for multiple
lines and you'll see, in lot of instances
| | 00:59 | tutorials out there, a lot of programs
that write CSS for you, they'll go ahead
| | 01:03 | and do it in multiple lines, and that's
because it's just easier for people to read it.
| | 01:06 | It's easier for you and I to
see exactly what's going on here.
| | 01:09 | But as we'll test in just a moment, CSS
itself and browsers really don't care if
| | 01:13 | it's on one line or multiple lines.
| | 01:15 | So I'm just going to click in the sort
of blank line right here in the h1 rule,
| | 01:19 | and I'm going to type in "font-family:
| | 01:24 | Arial" and then a semicolon.
| | 01:26 | So the syntax of all our
properties is set up like this.
| | 01:30 | The property, font-family, is followed
by a colon and then the value for that,
| | 01:36 | in this case the font Arial, follows that.
| | 01:39 | And then that's followed by a
semicolon that tells it to stop evaluating this
| | 01:42 | line and go on to the next one.
| | 01:44 | Now you can have as many properties
as you need to within a declaration,
| | 01:47 | so I'm going to follow font-family with
font-size and I'm going to need this to be 18 pixels.
| | 01:57 | So when you're typing in a value, you
have to know how that value is formatted.
| | 02:01 | In this case, font-size is if I'm going
to use pixels--I use a px--and that is
| | 02:06 | immediately following the amount I want, so
there's no space between those guys at all.
| | 02:11 | Now I'm going to go ahead and do
the same exact thing for the h2, the
| | 02:14 | paragraph, and the div tag.
| | 02:15 | I'm just going to change
things up slightly here and there.
| | 02:18 | So here I want font-family. You can
see that Aptana Studio is giving me some
| | 02:22 | code-completion hinting.
| | 02:23 | And if chose that and hit Return, it
would go ahead and finish that for me and
| | 02:28 | type the colon in for me.
| | 02:29 | That's extremely helpful.
| | 02:31 | So if your CSS editor that you're using
has that, feel free to go ahead and use it.
| | 02:35 | But I recommend actually typing it out
the first few times so that you're really
| | 02:39 | used to how the syntax works.
| | 02:41 | If you get too used to a program doing
it for you, you don't really understand
| | 02:44 | why the syntax is doing what it's doing and
what a specific character is being used for.
| | 02:49 | All right! So again I'm going to make that be Arial;
| | 02:51 | I'm going to go down to the
next line, just like last time.
| | 02:54 | I'm going to do font-size, and this is
instead of 18 pixels going to 16 pixels,
| | 02:59 | so it's a little bit smaller. And we're going to go
down to the paragraph. In here we're going to do font-family:
| | 03:06 | Arial: font-size: 14 pixels.
| | 03:10 | So similar, but a little bit smaller.
| | 03:12 | Now I'm going to go down to the
div selector, and here I'm going to do
| | 03:14 | something entirely different.
Here I'm going to do background-color.
| | 03:19 | I'm going to type in #ccc, and you can see
again, Aptana Studio is helping me out here.
| | 03:25 | And then for padding, I'm going to do 10 pixels.
| | 03:29 | Now at this point, you might be
saying, wow! background-color: #ccc,
| | 03:33 | what does that mean, padding: 10 pixels?
| | 03:35 | Don't worry about the exact
meanings of all these different items yet.
| | 03:38 | We're going to go into
this in a lot more detail.
| | 03:40 | Right now, we're just focusing on the
syntax of the properties themselves.
| | 03:45 | So I'm going to go ahead and save this,
and this time I'm going to test it in
| | 03:47 | a different browser.
| | 03:48 | I'll test it in Firefox.
| | 03:49 | And we can see that we're getting Arial
as our font that's being used. The size
| | 03:54 | is a little bit different
depending upon what we're looking at.
| | 03:56 | And of course, we have that
background color for the div tag that you're
| | 03:59 | seeing there as well. Excellent!
| | 04:01 | Okay, now I mentioned earlier that syntax-wise
properties don't have to be all on separate lines.
| | 04:06 | Let me show you what I mean. I'm going to go
back into Aptana and if I go back up to my h1, notice that I
| | 04:12 | could just go ahead and
put that all on one line.
| | 04:15 | As a matter of fact, if I wanted to, I
could go ahead and put everything on one
| | 04:19 | line, including the curly braces.
| | 04:22 | I could save this and if I go back out to the
browser and refresh that, no change whatsoever.
| | 04:29 | So the browser itself, or the user
agents, typically do not care whether it's on
| | 04:32 | multiple lines or not.
| | 04:34 | The reason that most syntax is written
on multiple lines, as you see here, it's
| | 04:37 | just a little bit easier to
read this than it is to read this.
| | 04:41 | Now when I am talking about writing
properties for multiple elements, you can see
| | 04:45 | that all the text elements on the page--
the heading 1, the heading 2, paragraph--
| | 04:49 | they're all using Arial.
| | 04:50 | So even though their font sizes are a
little bit different, there is a lot
| | 04:53 | of consistency there.
| | 04:54 | Well, there are several
different ways to write that.
| | 04:56 | For example, if I wanted to--I'm just
going to create a little blank space
| | 05:01 | up here at the top--
| | 05:01 | I could just group all these selectors together.
| | 05:03 | I could say h1, h2, p,
and then font-family: Arial.
| | 05:12 | And then I could just go ahead and
remove Arial from all these individual rules.
| | 05:17 | So I could just go ahead
and remove that font-family.
| | 05:20 | This has everything to do with efficiency.
| | 05:22 | There's really no point in declaring
the same font family over and over again,
| | 05:26 | because what happens if you decide to change it?
| | 05:27 | Okay, now I could save this and I
could preview this in the browser.
| | 05:30 | And again, no change whatsoever.
| | 05:33 | It's exactly the same.
| | 05:35 | But now it's a lot easier for me
to modify this at a future date.
| | 05:38 | So if I decided that I didn't like Arial
anymore and I wanted to use, say, well I
| | 05:42 | don't know, Georgia, I could do that, and
when we preview that in our browser, we
| | 05:47 | can see that the font changes.
| | 05:48 | So rather than having to change that
three or four times, or five or six times, I
| | 05:52 | just changed it on the one rule and it
went ahead and changed it for everybody.
| | 05:56 | Now even this group selector
isn't as efficient as it could be.
| | 05:59 | So we have heading 1, heading 2,
and a paragraph specified here,
| | 06:03 | but what if we wanted every single
element on a page to use this font?
| | 06:07 | Writing a group selector for every
single element on the page would be
| | 06:10 | really, really long.
| | 06:12 | Well, one of the things that I can do is
I can replace the selector with just body.
| | 06:16 | The body tag surrounds
all of our visual elements.
| | 06:20 | So you can see body tag is around all of them.
| | 06:24 | CSS has a guiding property called
inheritance, and we're going to look at
| | 06:27 | inheritance a little bit later on.
| | 06:29 | But what inheritance says basically is
that if a parent element is styled, then
| | 06:33 | those properties can be
inherited by all child elements.
| | 06:36 | So now by putting font-family:
| | 06:38 | Georgia on the body
selector--I'm going to save this--
| | 06:42 | if I go back to my browser and
preview that again, I see no change.
| | 06:47 | But what's really cool now is that
every single element within the page is now
| | 06:51 | going to be Georgia.
| | 06:52 | And if I want to update that, I
can simply update it one time.
| | 06:55 | So really again, it's all about efficiency.
| | 06:58 | At this point, you might be looking
through all of these different properties
| | 07:01 | and the values that we used here and
say to yourself, how in the world am I
| | 07:04 | going to memorize every single property
that there is and then memorize all the
| | 07:08 | acceptable values for each one?
| | 07:10 | It does seem a little overwhelming at first.
| | 07:12 | Don't panic, first off.
| | 07:14 | I'm going to switch over to my browser and
show you something that can help you out.
| | 07:16 | So this is the Full property table.
| | 07:20 | This is Appendix F of the CSS 2.1 specification.
| | 07:23 | You can find it at the w3.org/TR/CSS21/
propidx.html, and you can just go to the
| | 07:33 | 2.1 specification and
find this appendix as well.
| | 07:36 | But as you can see, if I scroll
through these properties, there's really
| | 07:39 | not that many of them.
| | 07:41 | I mean, there is a fair amount, and
they're adding more to it, but on a
| | 07:45 | whole, it's not that many.
| | 07:46 | And to be honest, when you want to
learn more about a property, you can go
| | 07:49 | directly to this page.
| | 07:50 | You can find out what acceptable values it has.
| | 07:53 | You can even click on the property
itself and go read more about that property.
| | 07:56 | So this is a very quick and easy
way to learn not only the properties
| | 08:00 | themselves, but what
their acceptable values are.
| | 08:02 | Now as you get more comfortable
writing your styles, you'll find that your
| | 08:06 | common properties that you use
frequently, those are just going to become
| | 08:09 | second nature to you, resulting in you
spending a lot less time consulting this
| | 08:14 | type of a reference.
| | 08:15 | I'll be honest. I find myself still
occasionally checking the specification for
| | 08:19 | properties if it's a property
that I don't use that often,
| | 08:22 | but for the most part, I'm pretty
comfortable with the available properties and
| | 08:25 | their values, and over time you will be too.
| | 08:29 | Now for the moment, I want to keep
the focus on properties by exploring the
| | 08:33 | units of measurements that
are available to us in CSS,
| | 08:36 | and we're going to go ahead and
tackle that in our next movie.
| | Collapse this transcript |
| Common units of measurement| 00:00 | When setting values for properties, you'll
often need to set what's known as a length.
| | 00:06 | Here I'm back again in the Full
property table of the CSS 2.1 Property Index.
| | 00:11 | I notice that as I look through
some of these properties, I'll notice
| | 00:15 | that often the acceptable value for them
is right here in this little bracket
| | 00:18 | notation known as length.
| | 00:20 | So what's a length?
| | 00:21 | Well, length really is nothing more than
a value like pixels or inches where you
| | 00:25 | have a specific value
followed by the unit of measurement.
| | 00:28 | Now, in your CSS, you'll write the
values like this, with a number followed by an
| | 00:33 | abbreviation for the unit of measurement.
| | 00:35 | Now, note that there is no whitespace
between the value and measurement type.
| | 00:38 | Now occasionally you can get away
with leaving the measurement type off.
| | 00:41 | You'll notice in the second one
from the bottom, for example, 0,
| | 00:44 | so if it's 0, you don't really
need a unit associated with it.
| | 00:47 | There is one specific property, the
last one that you see here, line-height, that
| | 00:51 | allows you to use a multiple.
| | 00:52 | It's the only one that allows you to do
this, which uses only the multiple value
| | 00:55 | itself with no unit association.
| | 00:57 | Now obviously, if you're not familiar
with the units of measurement in CSS and
| | 01:01 | when it's appropriate to use one over
the other, declaring values for properties
| | 01:04 | can get rather confusing.
| | 01:06 | It's easier if you think about units
of measurement in terms of the way that
| | 01:09 | they can be grouped.
| | 01:10 | They can be grouped in one of two values:
| | 01:12 | absolute or relative values--and those
groupings refer to how those values are calculated.
| | 01:17 | So let's take a closer look at them.
| | 01:19 | Now, absolute values, which are sometimes
referred to as fixed values, specify an
| | 01:24 | exact measurement, and they're typically
used when the physical properties of the
| | 01:28 | user agent is already known.
| | 01:29 | If we take a look at the absolute values,
what that means becomes a little clearer.
| | 01:33 | So we have inches, centimeters,
millimeters, points, and picas.
| | 01:37 | So for an output device like a printer
where the physical size of the output is
| | 01:41 | known, these units work just fine.
| | 01:43 | However, for user agents that may have
different sizes or resolutions, rendering
| | 01:47 | intents, or things that might change,
these units aren't exactly optimal.
| | 01:51 | In fact, the CSS specification
instructs user agents that don't explicitly
| | 01:56 | support the unit to approximate the value.
| | 01:59 | So in a lot of ways, if you use
these, you're going to be getting your
| | 02:01 | device's best guess.
| | 02:03 | So these types of units work great for
printing style sheets, but sometimes not
| | 02:07 | so great for screen devices.
| | 02:08 | Now, that leaves us with relative units.
| | 02:11 | Now, these are called relative units
because their value is relative to the
| | 02:15 | length of another property.
| | 02:17 | So they're really, really well suited
for devices like screens where the device
| | 02:21 | size or the resolution are going to be
either be different or could change even
| | 02:25 | in the course of viewing the site.
| | 02:27 | So these units are ems, exes, pixels,
grids, root ems, viewport width, viewport
| | 02:32 | height, viewport minimum, and character.
| | 02:34 | Now, some of these values, I'm guessing
you're probably looking at them for the first time,
| | 02:39 | so I feel the need to point out that a
couple of these units are brand new in
| | 02:42 | CSS3, and they're not fully supported yet.
| | 02:45 | Others are extremely specific, like grids.
| | 02:48 | Grids are new to CSS3 and they're
widely used in East Asian typography.
| | 02:53 | They're referred for the layout
grid used in the CSS3 text module.
| | 02:57 | Other items, like say viewport width,
height, and minimum, they're really cool.
| | 03:01 | They're new in CSS3, and they allow you
to size elements relative to the viewport.
| | 03:05 | That would be the size of the
actual browser window or screen.
| | 03:08 | Unfortunately, they don't have
widespread support yet either, so we won't
| | 03:11 | really be using them.
| | 03:12 | So that leaves us really with
ems, exes, root ems, and pixels.
| | 03:16 | Now, I want to talk about pixels first
because a lot of people think that
| | 03:19 | pixels should be an absolute
value, like inches or points.
| | 03:22 | But the truth is the size of a
pixel is relative to the display of the
| | 03:27 | device that it's shown on.
| | 03:28 | Now, think about it like this.
| | 03:30 | If you go to your monitor and you change
the screen resolution, does the monitor
| | 03:34 | itself physically change sizes? Of course not!
| | 03:36 | So what happens is is
that the pixel changes size.
| | 03:38 | So as you can see here, pixels on a
1024x768 display is going to be a lot larger
| | 03:44 | than a pixel that's shown on a 1400x900.
Keep that in mind when you're using pixels.
| | 03:49 | They're a workhorse.
| | 03:50 | You're going to be using them over and
over again yourself, but keep in mind
| | 03:54 | that 16 pixels is always going to
be 16 pixels, but it won't always be
| | 03:58 | exactly the same size.
| | 04:00 | Ems, exes, and root ems are all fairly similar.
| | 04:03 | If you're a graphic designer,
I'm betting ems look familiar to you.
| | 04:06 | The name does indeed come from
typography, and it roughly means the value of text
| | 04:10 | at its default size.
| | 04:12 | However, the value of an em
changes depending upon where it's used.
| | 04:16 | If it's used to define the size of a
font, then 1 em is equal to the value of
| | 04:21 | its parent element's font size.
| | 04:23 | Here's a good way to think about this.
| | 04:25 | If within the browser, somebody chooses 16
pixels to be the default size of the text,
| | 04:30 | if you're not sizing it anywhere else, that
means that 1 em would equal, say, 16 pixels.
| | 04:35 | What this means is that you could set
one value for the body element and then
| | 04:39 | set all headings and
paragraphs relative to that value.
| | 04:43 | The added beauty of this technique is
that the starting size of the text is up
| | 04:47 | to the device itself.
| | 04:48 | So whether it's a desktop browser or a
mobile device, or even if the user has
| | 04:53 | changed the font size to compensate
for, say, a vision disability, the overall
| | 04:58 | font size will get bigger or smaller,
but the relationship between those
| | 05:00 | elements is going to stay exactly the same.
| | 05:03 | Now, if you're still with me, you
probably remember me saying that the value of
| | 05:07 | an em changes based on where it's used.
| | 05:09 | Let me go into that in a little bit more detail.
| | 05:12 | So if an em value is set outside of
font-size, it's equal to the computed size
| | 05:18 | of the text of that element.
| | 05:19 | I know that seems confusing, so
let's take a look at how this works.
| | 05:22 | So let's say our device
font size is set to 16 pixels.
| | 05:26 | Our heading over here has a font size
of 2 ems, so that would be 32 pixels.
| | 05:29 | That would be the computed font size.
| | 05:32 | Now, the margin-bottom is set to 1 em,
but because the computed font size is 32
| | 05:37 | pixels, the bottom
margin will also be 32 pixels.
| | 05:40 | So it really matters where the em is
used, whether it's used to define the size
| | 05:45 | of the font or outside of that.
| | 05:47 | So you have to remember that, that's
something that you really need to keep in
| | 05:50 | mind, because this can trip you up if
you're not familiar with how this works.
| | 05:54 | So because of that, ems might take a
little while before you become really
| | 05:57 | comfortable at using them, but once you
are, you'll find that they're incredibly
| | 06:00 | flexible unit of measurement
that you're going to use a lot.
| | 06:02 | Now, as for the two remaining
relative values, exes and root ems, they're
| | 06:08 | very similar to ems.
| | 06:09 | Exes are a lot like ems.
They're just based on the x-height of the font.
| | 06:13 | And root ems, I'm really intrigued by these.
| | 06:15 | They're an addition to CSS3 as well.
| | 06:17 | One of the really big problems with
using ems is that they're always relative to
| | 06:20 | their parent, so the more nested
your structure goes down, the more child
| | 06:24 | elements you have, the harder it is
to try to figure out exactly what size
| | 06:27 | something is supposed to be.
| | 06:29 | Now, root ems are, on the other hand,
they always size text relative to the root
| | 06:33 | element, or in most cases the body tag,
| | 06:35 | so they give you a much more consistent
starting point for sizing text and other elements.
| | 06:40 | Now I need to point out that support
for root ems isn't complete yet, but
| | 06:44 | hopefully we'll be able to
start using them in the near future.
| | 06:46 | I want to mention one last unit of
measurement that's not really considered a length.
| | 06:50 | So even though I always consider it a
relative unit, it's not really categorized
| | 06:55 | as a relative or absolute value,
and that would be percentages.
| | 06:58 | Now, percentages are
exactly what you think they are.
| | 07:01 | If you size an element width to 80%,
for example, the computed size will be 80%
| | 07:06 | of its parent element.
| | 07:07 | Text size with percentages calculates the
value based on its parent element as well.
| | 07:12 | Percentages are great for building
things like fluid layouts that react to the
| | 07:16 | size of the screen or the
device on which it's viewed.
| | 07:19 | Keeping track of all the various units
of measurement in CSS can be a little
| | 07:23 | tricky, I will admit.
| | 07:25 | But just like most things in CSS, the
more you use them, the more familiar
| | 07:29 | they're going to become to you.
| | 07:30 | Unless you're dealing with really
specific circumstances, you're most likely
| | 07:35 | really going to use a mixture of
pixels, ems, and percentages for screen
| | 07:38 | designs, and inches, points,
and picas for print design.
| | 07:41 | Now, either way, you should be aware
of what your options are when defining
| | 07:44 | lengths for CSS properties.
| | Collapse this transcript |
| Inline styles| 00:00 | In the next few movies, I want to
explore the relationship between styles and
| | 00:04 | the HTML documents that they control.
| | 00:07 | As authors, we have several options to choose
from, in terms of where we write our styles.
| | 00:13 | Understanding those options and how
they interact with each other is a
| | 00:17 | very important part of writing efficient
styles, and I want to start with inline styles.
| | 00:22 | Inline styles allow you to format
HTML elements directly as an attribute of
| | 00:27 | that element itself,
| | 00:29 | so let's go ahead and try that out.
| | 00:31 | And again, very simple page
structure, the one that we have seen before.
| | 00:35 | We have the headline with a paragraph below it.
| | 00:37 | We have a div tag and inside of
that we have a heading two and now two
| | 00:40 | paragraphs inside that as well.
| | 00:42 | So the first thing I want to do I
want to make sure that all of my elements
| | 00:45 | on the page use Arial.
| | 00:47 | We know that with inheritance, I
could go ahead and apply that to the body
| | 00:50 | selector. And last time we
did this using embedded style;
| | 00:53 | this time we are going to do it with an
inline style, so here is how you do it inline-style.
| | 00:56 | I am going to go to the body tag.
| | 00:58 | I am just going to place my cursor
right after the word body and hit space,
| | 01:03 | because inline styles are
simply attributes of HTML elements.
| | 01:07 | So I am going to use the
style attribute for this.
| | 01:10 | And again, I am using code completion to
help me out here, but to do this you do
| | 01:13 | style=. And then everything within the
style declaration goes inside quotation
| | 01:17 | marks, so make sure you
are inside some quotation marks here.
| | 01:20 | And then you just type in the property
just in the way you would normally within
| | 01:24 | a CSS rule declaration.
| | 01:25 | So here I am just going to
type in font-family: Arial, and then a semicolon.
| | 01:34 | So you can see, the
syntax really hasn't changed.
| | 01:37 | It's just where we are
placing that syntax that changes.
| | 01:40 | Here, we are placing inside of that
attribute. So I am going to save this and
| | 01:44 | this time I want to test it in a
different browser, maybe this time Opera.
| | 01:47 | So we see that all the elements on the
page we are using Arial and our styling
| | 01:51 | is occurring exactly the way that we want it to.
| | 01:54 | Now let's go explore inline
styles in a little bit more detail.
| | 01:57 | Now you can use as many properties as you want.
| | 01:59 | So, for example, I am going to go down
to the next paragraph and I will go ahead
| | 02:01 | and do a style attribute there as well, style=.
| | 02:05 | And what I am going to do here is I am
going to do more that one property. So
| | 02:09 | here I am going to do font-size and
we'll go ahead and make that 14 pixels.
| | 02:14 | So if you want to do multiple
properties, after the semicolon, I am just going
| | 02:17 | to type in a space. I don't need the space here.
| | 02:19 | It just makes a little
bit easier for me to read.
| | 02:21 | And I am just going to
type in color, colon, the word red.
| | 02:26 | And again, I am just making sure that
all of these properties are now within
| | 02:30 | my quotation marks, and then another
semicolon to let it know that I am done with that one.
| | 02:34 | So if I save this and test this, you
can see that now that paragraph is smaller,
| | 02:40 | 14 pixels, and it is also red.
| | 02:43 | Now I am going to go back into Aptana Studio,
and I am just going to add a couple of more.
| | 02:47 | One of the things that you start to
figure out really quickly on in using inline
| | 02:50 | styles is that they're not that efficient.
| | 02:53 | What if we've got a couple of
elements that I want to have the exact
| | 02:56 | same formatting for?
| | 02:57 | So if I go down to this paragraph, for example,
| | 02:59 | I can again do a style attribute, style=,
and inside that I could do font-size of
| | 03:06 | 12 pixels and then font-style: italic.
| | 03:12 | Now again, pay really close
attention to the syntax here.
| | 03:15 | Remember that we have a colon after
the property and the value, and there is
| | 03:19 | semicolon to indicate that we are
done with that property and we are moving
| | 03:22 | on to the next one.
| | 03:23 | So if I want the paragraph below that
to be styled exactly the same way, the
| | 03:27 | easiest way for me to do would just
be copy and paste it, but if I am using
| | 03:30 | inline styles, I still have to do
another style declaration and I have to make
| | 03:35 | it exactly like the one that I just did.
| | 03:38 | So obviously, yes, copying and pasting
will save me a little bit of time, but
| | 03:41 | this is still pretty tedious.
| | 03:43 | So if I save this and preview that
in my browser, I can see that indeed
| | 03:47 | it's shrinking down,
| | 03:48 | it's becoming italic, that's
exactly what I wanted, but as I mentioned
| | 03:51 | before, not that efficient.
| | 03:54 | Honestly, inline styles, these guys are
great for targeting specific content on
| | 03:58 | the page where you want to place it,
| | 03:59 | but I think you can see pretty
quickly how this is going to become almost
| | 04:03 | unmanageable for an entire site.
| | 04:05 | Imagine trying to do this for every
element on the page for an entire site.
| | 04:09 | It would be really
difficult to maintain and update.
| | 04:12 | It would take you long time to write.
| | 04:13 | This is definitely not the
way to go about doing it.
| | 04:15 | Now they are great way to make sure
that the formatting that you want to have
| | 04:19 | is applied, because they tend to almost always
win in the event of a conflict with other styles.
| | 04:24 | So you can write and inline style and
| | 04:26 | you know that that's the
formatting pretty much this is going to get.
| | 04:28 | Now we are going to explore that
concept a little bit more later on as we
| | 04:32 | discuss to resolving conflicts, but to
be honest with you, there is really very
| | 04:36 | little reason to ever use inline styles,
| | 04:39 | and most of the time their use is
really just restricted to instances where older
| | 04:44 | or less robust user agents don't
support other means of applying styles.
| | 04:48 | And that's typical of, say, older email
clients, so you'll typically find inline
| | 04:52 | styles in HTML emails.
| | 04:54 | But for the most part, you're probably
not going to use inline styles all that
| | 04:58 | often, if ever at all.
| | Collapse this transcript |
| Embedded styles| 00:00 | In the last movie, we introduced
inline styles and discussed how they're
| | 00:04 | inefficient for controlling
the formatting of pages in sites.
| | 00:08 | Now another way to author styles is
through the use of embedded styles.
| | 00:12 | Embedded styles allow you to write
styles to control the page content in the
| | 00:16 | head of the page's HTML.
| | 00:19 | Let's give it a try.
| | 00:20 | And the first thing we need to do if we
are going to write embedded styles is to
| | 00:24 | use the style tag in the head of the
document to let the browser or the user
| | 00:30 | agent know that we have some styles.
| | 00:31 | So the first thing I am going to do
is go right up here, so right after the
| | 00:35 | title, but before the closing head tag.
I am going to go ahead and open up a
| | 00:38 | style tag and then Aptana closes the style
tag for me, which is very nice of it, but
| | 00:43 | if your user agent didn't do
that for you, go ahead and do that.
| | 00:46 | I also like creating just a little bit
of room between them so that I have room
| | 00:50 | to create my styles.
| | 00:51 | Now in some older browsers, or in older
units, you might actually see within the
| | 00:55 | style using an attribute like type,
for example, to specify that it's CSS
| | 00:59 | styles or something like that.
| | 01:01 | But with HTML5, the text CSS is assumed
as the type for style tags, so I don't
| | 01:07 | really have to use that anymore.
| | 01:09 | So the first thing I am going to do is
write a selector that is going to control
| | 01:13 | the entire page in terms of
the font family being used.
| | 01:16 | And we will just go ahead and use
the element selector body to do that.
| | 01:20 | So I am going to go ahead and do body and
open up curly brace, and I will hit Return.
| | 01:24 | Now I usually like to do
what you're seeing right here.
| | 01:26 | Now again, Aptana Studio is being very
nice, because as soon as I opened up a
| | 01:30 | curly brace, it went ahead and closed
one for me, but I really do like to build
| | 01:33 | it this way, even if I have do it manually.
| | 01:35 | I call this the skeleton of a
selector, and it's very easy to forget that
| | 01:40 | closing curly brace.
| | 01:41 | So when you do that, your styles
really get a little out of whack.
| | 01:45 | So you want to make sure that you
have the opening and closing braces.
| | 01:48 | And I like to do that at
the very beginning of writing a rule.
| | 01:50 | Okay, now I am just going to do font-
family, and I am just going to do Arial.
| | 01:54 | So again remember, our properties have
a colon after them and a semicolon
| | 01:58 | at the end of that line.
| | 02:00 | Okay, I am going to go down to my
next rule, and to do that, again I am just
| | 02:03 | going to make sure that I am at the
closing curly brace of body--not still
| | 02:06 | inside of it; I have to be
outside of it--and then hit Return.
| | 02:09 | Now I can go down to the next line
and just go ahead and do a new selector.
| | 02:12 | So here I am going to do all
paragraphs, so I am just going to do a P selector.
| | 02:16 | And again I am just going to hit
Return to go down to the next line.
| | 02:20 | Now again I have my opening and closing
curly braces, so if you are not using an
| | 02:22 | editor like Aptana that we
will go ahead and do that for you,
| | 02:25 | make sure you do that.
| | 02:26 | And I am just going to type in font-size:
| | 02:27 | 16 pixels and then on the next line color: red.
| | 02:33 | So these values are probably familiar
to you if you did the previous exercise,
| | 02:36 | because they are almost exactly the same.
| | 02:38 | And next, I'm going to do one more selector,
so I am going to go down below in my paragraph.
| | 02:43 | I am going to do div p. So that's
going to target every paragraph inside of div.
| | 02:48 | This is called a descendent selector.
| | 02:49 | The whitespace there is very
important between the div and the p, and we are
| | 02:54 | going to talk more about
those in our chapter on selectors.
| | 02:56 | Now inside that selector I am
just going to do font-style:
| | 03:01 | italic and then font-size: 14 pixels.
| | 03:07 | If I save this and preview this in
one of my browsers, I can see that I am
| | 03:14 | getting the exact same formatting that we
had in the previous exercise, for the most part.
| | 03:18 | Everything is Arial, I have
got the size in there I want,
| | 03:20 | I have got the color that I am looking
for, and the paragraphs inside the div tag
| | 03:24 | are indeed italic this time around as well.
| | 03:27 | So that's is a lot more efficient than
inline styles, especially in regards to
| | 03:30 | controlling the content of this page.
| | 03:32 | But it's still not as efficient as it could
be in terms of controlling an entire site.
| | 03:36 | It's great for this page, but what
if I want every page in my site to be
| | 03:40 | styled the exact same way?
| | 03:42 | So over here in the 01_08
folder, there's another file.
| | 03:46 | This one is called embedded2.
| | 03:47 | I am going to go ahead and open that
up. And what if I wanted to use the exact
| | 03:51 | same styling on this page?
| | 03:53 | Well, the easiest way for me to do
this is to simply copy everything,
| | 03:58 | including the opening and closing style tags,
and then pasting that into my new embedded2 file.
| | 04:08 | And if I save that and preview that
in the browser, I can see that it looks
| | 04:13 | exactly the same as my first one.
| | 04:15 | So yes, that does work, but imagine
having to do this for, say, a site that
| | 04:19 | has 100 pages, and then what
if you needed to make a change?
| | 04:22 | Let's say I want to change the color of
the text from red to green, so I would
| | 04:25 | come back in my code here, type in green
for the color, but I have to remember to
| | 04:30 | do it for every single page.
| | 04:33 | So that's not that big of a
deal when you only have two pages,
| | 04:37 | but it's a big deal when you have, say,
50 pages or 100 pages or 1,000 pages.
| | 04:42 | So while embedded styles, they do give
us a really powerful and efficient way to
| | 04:47 | target the content of an individual page,
| | 04:49 | they are inefficient as a means of
controlling styles across an entire site.
| | 04:55 | Now for the most part, authors use
embedded styles as a way of writing smaller,
| | 04:59 | targeted styles that are
only meant for a specific page.
| | 05:02 | So if you have one page in your site,
or maybe two pages in your site, that
| | 05:06 | the styling on is very, very unique,
or you need to overwrite something in
| | 05:09 | your global styles,
| | 05:10 | this is a good way to do it.
| | 05:12 | But for site-wide styling, most authors
use external style sheets, which is what
| | 05:16 | we are going to explore in our very next movie.
| | Collapse this transcript |
| Using external style sheets| 00:00 | So far, we've written inline and
embedded styles to format page content.
| | 00:05 | Now, both of these methods are good
for targeting local content, but they're
| | 00:09 | not that efficient in controlling styles
over a large number of pages, or an entire site.
| | 00:15 | For that, we typically
use external style sheets,
| | 00:18 | so let's take a look at how those work.
| | 00:20 | So, I'm going to go over to the
Chapter_01 directory and look in the 01_09
| | 00:24 | folder, and I'm just going to open up all
three of these pages: pages 1, 2, and 3.
| | 00:28 | I'm just going to go
ahead and open those guys up.
| | 00:31 | Whenever you're creating styles for an
entire site, or a section of pages for
| | 00:35 | example, you really need to understand
how the structure of those pages work.
| | 00:40 | So if I go to page 1, for example, I can
see the structure that we've been using
| | 00:44 | in the past couple of exercise files.
| | 00:46 | We have a heading 1, a paragraph.
Below that is a div tag with an h2 and a
| | 00:50 | couple of paragraphs in it.
| | 00:52 | But if I go to page 2, I can see that I
have an h2 here that is not in the other
| | 00:57 | pages, and on page 3, I have a heading
3 in the div tag, which the other two
| | 01:03 | pages don't have as well.
| | 01:04 | So now when I write styles I have to
really consider all of those elements and
| | 01:07 | how they're going to work
together as I write the styles.
| | 01:09 | So that's one of the challenges that
you face in writing styles for an entire
| | 01:14 | site or grouping of pages
rather than just a single page.
| | 01:18 | An external style sheet
is a totally separate file,
| | 01:21 | so I need to go ahead and create that.
| | 01:23 | I'm just going to go up here to File and
choose New, and I'm going to do a new file.
| | 01:27 | So it doesn't matter what program
you're using, whether it's Aptana Studio or
| | 01:31 | some other program, there should be a
way to go ahead and create a new file.
| | 01:35 | Now if it's offering you the option
of creating a new CSS file, just go
| | 01:38 | ahead and choose that.
| | 01:39 | Otherwise it's really just a
text file with a .css extension.
| | 01:42 | So in the 01_09 folder, I'm going to go
ahead and just call this styles.css and
| | 01:49 | go ahead and save the file.
| | 01:51 | So now I have the styles.css file
opened as well, and I'm just going to go up to
| | 01:56 | line number one and write our first selector.
| | 01:58 | So I'm going to write a body selector
and inside that, I'm just going to do
| | 02:03 | font-family, and we're going to make that Arial.
| | 02:08 | So nothing really new here, other
than what we've done before.
| | 02:11 | I'm going to go on the next line,
however, and type in a second property.
| | 02:15 | This time I'm going to do
color, and I'm going to do gray.
| | 02:18 | Really interesting here,
| | 02:20 | I'm using some of the reserved
keywords for colors right off the bat.
| | 02:23 | We have an entire chapter on color a
little bit later in the title, but there's
| | 02:26 | actually a difference between gray
spelled with an A and gray spelled with an E;
| | 02:30 | one is darker than the other.
| | 02:32 | So if I save this file and let's just
say I go back to page 1, for example, and
| | 02:37 | I preview this in one of my browsers, I
see absolutely no formatting whatsoever.
| | 02:41 | Well, that's because currently there
is nothing linking that style.css file to
| | 02:48 | any of these individual files.
| | 02:49 | So that's sort of a two-step process.
| | 02:52 | We have to create our external style
sheet, then we have to link the pages
| | 02:56 | that we want to be controlled by that style
sheet to it, and we do that in the HTML document.
| | 03:01 | We have a couple of ways of doing it.
| | 03:03 | The first way that we're going to
take a look at is using a link tag.
| | 03:06 | So on page number 1, directly after the
title tag but still in the head of my
| | 03:12 | document, I'm going to go
ahead and create a link tag.
| | 03:16 | Now, this link element has a couple of
different attributes that we're going to
| | 03:20 | need to use in order to link
it to an external style sheet.
| | 03:23 | The first one is going to be an href attribute.
| | 03:26 | So we're going to do an href attribute,
and href is really just, where is this
| | 03:29 | file located that we want to link to?
| | 03:31 | And since they're both in same folder,
we're just going to type in styles.css.
| | 03:36 | If this was in a separate directory
like a subdirectory, such as _css or
| | 03:40 | something like that, I have to
make sure that that path was properly
| | 03:44 | written within here;
| | 03:45 | otherwise, it's not going to
know where to find those styles.
| | 03:48 | After that, I'm going to use another
attribute, and this is going to be the type
| | 03:51 | attribute. And for type,
we're going to do text/css.
| | 03:56 | So that's really just the
MIME type for this file.
| | 03:58 | In HTML5, it's not specifically required.
| | 04:01 | I'm just going to place it here for
older legacy devices. And then after that,
| | 04:05 | there's another attribute that we
really do need, and that is the rel, or
| | 04:08 | relationship, attribute, and for that, we have
to describe its relationship as a style sheet.
| | 04:14 | After that, I'm going to make sure I'm
outside of the quotation marks and then
| | 04:17 | just go ahead and close my angle bracket there.
| | 04:20 | So link tags don't need to be closed.
| | 04:23 | There's no closing link tag.
| | 04:24 | If you're using XHTML, you can feel
free to self-close it, but this syntax
| | 04:29 | right here is just fine.
| | 04:30 | I want every single page to be
linked to this external style sheet,
| | 04:33 | so one way to do that would be to go
ahead and copy this. And let's go to page 2
| | 04:39 | and just paste it in.
| | 04:40 | But there is an alternate way of linking
to external style sheets and on page 3,
| | 04:43 | I want to show that to you.
| | 04:45 | So I'm going to save that, go over to
page 3, and now I'm just going to go ahead
| | 04:49 | and do what we did earlier with embedded styles:
| | 04:51 | I'm going to create a style tag.
| | 04:53 | So I have an opening and closing style tag.
| | 04:56 | Inside these opening and closing
style tags, I can use an inline style
| | 05:00 | rule called @import.
| | 05:02 | So if I type in @import and then a
space, I can type in URL, and then I can
| | 05:10 | point that to the page that I want.
In this case, it's going to be styles.css.
| | 05:15 | So the same thing here: I would have
to type in the full path to that page--
| | 05:17 | so if this was on a subdirectory, I'd
have to make sure that that was in there--
| | 05:21 | and then just go ahead and close out that line.
| | 05:25 | If you're going to use @import, this
has to be done above any of the other rules.
| | 05:28 | So if these embedded cells had
additional rules, I'd have to make sure that
| | 05:31 | @import was at the very top of this.
And @import is really interesting because
| | 05:34 | you can use it in a lot of different places:
| | 05:37 | you can use it within a style sheet to
link several style sheets together, sort
| | 05:41 | of daisy-chain them together if you will;
you can use it here within the head of
| | 05:44 | the document, within the style tag.
| | 05:45 | So there are a couple of
different places that you can use that.
| | 05:47 | Save that, preview page number 3, and
for this one, I'll just use Firefox.
| | 05:52 | So there is page 3.
| | 05:54 | There's the styling that we're looking for.
| | 05:55 | We're getting the font, we're getting
the font sizing, we're getting the color
| | 05:58 | gray that we're looking for, and if I go
back and preview the other two pages as
| | 06:02 | well--so let me go in each one
of these and just preview it--
| | 06:10 | I can see that every single one of these
guys is giving me the exact same styling.
| | 06:14 | So those styles are being used
across all three of those pages.
| | 06:18 | So this makes it a lot easier to
update and change and maintain styles
| | 06:23 | across an entire site.
| | 06:24 | Now, before we try that, I
want to do one thing here.
| | 06:27 | I'm going to go back into Aptana Studio,
and I want to talk about using @import
| | 06:32 | just a little bit more.
| | 06:33 | This is not a best practice.
| | 06:35 | @import was great when there were
certain browsers around that didn't
| | 06:38 | understand styles because you could,
say, encase it within an HTML comment, and
| | 06:43 | if the browser or user agent didn't
understand style sheets, it just simply
| | 06:47 | wouldn't import them.
| | 06:49 | It's not as efficient as using the link tag,
and overall, it's just not used as widely.
| | 06:54 | So what I'm going to do is I'm going
to replace this with a link tag instead.
| | 06:58 | So now all three pages are linking
to the style sheet the exact same way.
| | 07:03 | So let's go back into styles.css and
let's continue to add to our existing styles.
| | 07:08 | Now the first thing I'm going to do is,
just below body, I'm going to write a
| | 07:12 | group selector for h1, h2, and h3.
| | 07:14 | So, notice that we have the commas
between each of those: h1, h2, h3.
| | 07:20 | I'm going to go ahead and open and close
my curly brace at the same time, and I'm
| | 07:25 | just going to set their color to black.
| | 07:28 | So I'm going to go ahead and save that
and I'm going to go back to my browser
| | 07:31 | and I'm just going to update my
styles in each of these. Cool! Looking great!
| | 07:38 | Now, one of the things I would like to
do is this heading 2 that's inside of the
| | 07:42 | div tag here, I really would like
that to be maroon instead of black.
| | 07:48 | So going back and modifying my styles,
I'm just going to take the h2, and I'm
| | 07:53 | just going to change its color to maroon.
And I'll just remove the h2 from this selector,
| | 08:01 | so now that's just going to say h1, h3.
So that sounds right.
| | 08:04 | So I'm going to go ahead and save that,
go back out to my browser, and I'm just
| | 08:10 | going to preview those.
| | 08:11 | So now you can see that heading 2
turns maroon, that heading 2 turns maroon,
| | 08:17 | that heading 2 turns maroon,
but there was a problem.
| | 08:20 | If I go back to page 2, I notice that
that one has two heading 2s on it, and
| | 08:25 | this extra heading 2 that the other pages
don't have, I don't want that to be maroon;
| | 08:30 | I want that to be black.
| | 08:31 | I just wanted the heading 2 inside the
div tag to be maroon. And this is what I
| | 08:35 | talked about earlier.
| | 08:36 | It's really important when you write
sort of global, site-wide styles to really
| | 08:41 | understand your page structure,
because we only have three pages here.
| | 08:45 | That's pretty simple, right?
But what if you had 500 pages?
| | 08:48 | You need to understand the structure of
your pages as you write your styles so
| | 08:52 | that little things like that don't
just sort of crop up and surprise you.
| | 08:55 | So, a much more efficient way to write
the selector--I'll go back into my code--
| | 08:59 | would be to just go ahead and say, okay,
h1, h2, h3 all those are black, except
| | 09:06 | for when h2s are found inside of a div.
| | 09:08 | So when rewriting the selector here,
say any h2s inside of a div--this is a
| | 09:12 | descendant selector--
| | 09:14 | I know in order to efficiently write
this, you really have to understand
| | 09:17 | selectors, and we have a whole
chapter on selectors a little later on.
| | 09:20 | So right now just focus on the concept
of this one particular page controlling
| | 09:25 | all the styling on our
site, or these three pages.
| | 09:28 | So if I save this, go back into my
browser and refresh my styles, I can see that
| | 09:34 | now it's doing what I want.
| | 09:35 | Every single page that has the h2
inside of a div, it's maroon, but when the h2
| | 09:39 | is outside of the div tag, it's now black.
| | 09:42 | So understanding the structure of my
pages was crucial in order to have my
| | 09:46 | external styles.css style sheet apply
the formatting the way that I want it to.
| | 09:51 | When we talk about external style sheets,
they are by far the most efficient way
| | 09:56 | to control your sites.
| | 09:57 | And actually, I'm guessing that you're
going to find yourself using them the
| | 10:00 | majority of the time.
| | 10:02 | It is important to keep in mind
though, just as we've talked about here, how
| | 10:07 | changes made to one page often have
unintended consequences because it just sort
| | 10:11 | of effects everybody that has similar
content, and that's why it's so important
| | 10:16 | to write well-structured, consistent HTML.
| | 10:19 | Now, we're going to explore that
relationship in a little bit more detail a
| | 10:21 | little bit later on.
| | 10:22 | For now, just understand that in order
to write effective external style sheets,
| | 10:26 | you're going to need to be familiar with
how your pages are structured and then
| | 10:30 | take the time to properly plan your
styles before you begin to write them.
| | Collapse this transcript |
| Checking for browser support| 00:00 | One of the more frustrating aspects of
working with CSS is having to deal with
| | 00:05 | varying degrees of support for CSS, as
well as rendering inconsistencies from one
| | 00:10 | browser to the next.
| | 00:11 | Now the speed with which browser
versions are being updated and the
| | 00:14 | constantly changing nature of the
CSS specifications make these issues
| | 00:19 | really unavoidable.
| | 00:20 | Now what they mean for you as a
designer is that you'll need to have a
| | 00:24 | strategy for which browsers that you're
supporting, as well as how to deal with
| | 00:28 | those browser inconsistencies, and this is a
site that you need to become familiar with.
| | 00:32 | This is the GlobalStats StatCounter,
and it's a great site for finding out
| | 00:37 | statistics about web usage--
including browser versions--and operating
| | 00:40 | systems. And I'm just going to
scroll down a little bit here and show you
| | 00:43 | what we are looking at.
| | 00:45 | So currently right now I'm looking at
the top five browsers from October 2010 to
| | 00:50 | October 2011. And if I want, I can
look at it by browser, mobile browser,
| | 00:56 | operating system, mobile operating system.
| | 00:59 | I can look at it by region, so if I
want, I can filter that out and just look at
| | 01:03 | it by North America. And I can even
customize the time Period if I want.
| | 01:07 | If I want to look at it for just, say,
the last three months, I could do that
| | 01:12 | and it goes ahead and it gives
me the settings for just the last three
| | 01:15 | months, so I can see if
there is any dramatic changes.
| | 01:18 | So once you understand which browsers
that you are designing for, you'll need to
| | 01:22 | know the level of support that those
browsers have for the properties that
| | 01:25 | you're going to want to use in your CSS.
| | 01:27 | So how do you find that out?
| | 01:29 | The best way is to simply test them
yourself, in the widest range of browsers possible.
| | 01:35 | Ideally, when designing web sites
you want to test it in Safari, Chrome,
| | 01:39 | Firefox, Opera, and
Internet Explorer at a minimum.
| | 01:43 | In many cases, you're going to need
to test across mobile versions of those
| | 01:46 | browsers as CSS support changes over
the course of different browser versions.
| | 01:52 | And web authors can also no
longer ignore mobile devices either.
| | 01:57 | Unfortunately, testing on mobile
devices is a little bit trickier than desktop
| | 02:01 | testing, but there are some online
services out there that can help you see
| | 02:05 | what your site looks like
within the mobile space.
| | 02:07 | Putting this as simple as I can, there's
no substitute for testing your pages on
| | 02:12 | as many browsers and
devices as you possibly can.
| | 02:15 | The reality of course is that
testing across a wide array of devices and
| | 02:19 | browsers isn't always possible.
| | 02:22 | You should work to build as wide a test
suite as you can on your own system, but
| | 02:27 | realistically, you'll often going to
need to just rely on knowing what does and
| | 02:31 | what doesn't work in various browsers.
| | 02:34 | Now thankfully, there are several
sites that can help you get a better
| | 02:37 | understanding of what is
and what isn't supported,
| | 02:39 | so let's go and take a
look at a couple of those.
| | 02:43 | Now the first site I want
to show you is caniuse.com.
| | 02:47 | This is a great site.
| | 02:49 | Now one of the things this allows me to do
is check for various HTML and CSS properties.
| | 02:55 | So if I go to the Show options here--
| | 02:56 | I'm going to just go ahead and turn
off all the categories except for CSS;
| | 02:59 | that'll help us sort of
narrow this down a little bit.
| | 03:01 | And now if I scroll through this, you
can see all these different properties,
| | 03:05 | like CSS inline-block, the CSS 2.1
selectors, the minimum and maximum width and
| | 03:10 | height, fix position, on, and on, and on.
| | 03:13 | It just goes through a
tremendous amount of properties.
| | 03:16 | This site does tend to focus on
CSS3 properties, so really the newer
| | 03:20 | properties, but it gives you a nice
little table of all the different browsers
| | 03:23 | and which versions of those browsers
support it, if they support it, and
| | 03:27 | whether they offer partial support or not.
| | 03:29 | A lot of times you'll have links to
resource pages that talk a little bit more
| | 03:33 | about that property or a little
bit more about the browser's support.
| | 03:37 | You can also look at different versions
of the browsers as well, so you can see
| | 03:40 | sort of a cascading chart to see at
what point support started and whether it
| | 03:44 | was partial support or full support.
| | 03:46 | So this is a really great site.
| | 03:48 | Now another site that you want
to focus on is quirksmode.org.
| | 03:51 | This is PPK's site and one of the
mainstays of this site is the browser
| | 03:57 | compatibility tables. And if I click
on this I get this Compatibility Master
| | 04:01 | Table that allows me to go into things
like CSS 2 or CSS3 and really drill down
| | 04:07 | and see what the support is for specific things.
| | 04:11 | So here you can see all the different
browsers, browser versions that PPKE is
| | 04:15 | checking for support from, and it goes
through items like all these different
| | 04:19 | selectors, pseudo-class selectors, all
these declarations, and it will give you
| | 04:24 | some detailed information about what's
supported, what's not, and maybe even why
| | 04:28 | it's not supported or what goes wrong.
| | 04:30 | So this is definitely a site that you
want to come back to time and time again.
| | 04:34 | Now another site that I really like--and
I'm just going to go ahead and open it up
| | 04:37 | in a new tab because this is a
site I really want to show you guys--is
| | 04:40 | if I go to reference.sitepoint.com/css,
this takes me to sitepoint's
| | 04:48 | CSS reference page.
| | 04:50 | I really like this page because they
make it very easy to find specific things.
| | 04:53 | So, for example, @import that
we were just using in last movie,
| | 04:56 | if I click on that, it gives me more of a
description of that particular rule or property.
| | 05:02 | And then I get this nice sort of
compatibility table down here that tells me
| | 05:06 | whether it is fully supported or
whether there is some bugginess to the
| | 05:09 | implementation, and it will even give me
some feedback on what isn't supported or
| | 05:14 | what the problems are with
that particular rule or property.
| | 05:17 | So this is a reference that you're
probably going to want to spend a good bit of
| | 05:20 | time looking at and exploring.
| | 05:22 | There is also really no better
place to check for support than the
| | 05:26 | browsers themselves.
| | 05:27 | Now Mozilla does just an amazing
job of documenting browser support.
| | 05:31 | For example, check out this page on CSS
support at the Mozilla Developer Network.
| | 05:37 | If I scroll down through here, you can
see every single selector, combinator,
| | 05:41 | pseudo-elements, structural pseudo-
classes--and a lot of these things we're going
| | 05:46 | to go over in just a little bit.
| | 05:47 | But properties, you get a full property
listing, whether it's supported or not,
| | 05:52 | what version it was supported, and
in a little bit we're going to be
| | 05:55 | experimenting with using some of these
vendor prefixes and this is really nice,
| | 06:00 | whether or not you need a vendor
prefix for a specific element about and for
| | 06:03 | which browser version.
| | 06:05 | So this is something that you're
definitely going to want to bookmark this page
| | 06:07 | as a reference, but the overall
Mozilla Developer Network site has tons of
| | 06:12 | fantastic articles about Firefox, web
design, and CSS that you're going to want
| | 06:15 | to read through as well.
| | 06:16 | Now the Safari Developer Library is a
little bit more technical in nature, and it
| | 06:21 | feels more like a technical reference
manual, but this has a wealth of material
| | 06:26 | on it. And I'm looking at the
Supported CSS Properties page.
| | 06:29 | Now, what's really nice about this,
again, is it goes through every single
| | 06:32 | property, whether it's supported or not, when
it was supported, and the syntax for it as well.
| | 06:37 | So this is really, really nice.
| | 06:39 | Chrome doesn't have a site like this,
but since Chrome is a WebKit-based
| | 06:43 | browser, essentially what applies
here also applies to Chrome as well.
| | 06:47 | Now I'm a really big fan of Opera's
Web specifications support page, so I can
| | 06:51 | find this at opera.com/docs/specs.
| | 06:55 | Now this isn't just for CSS, but
obviously that's what we're focusing on.
| | 06:59 | What I like about this is I can look
at the different versions of Opera's
| | 07:03 | Presto rendering engine.
| | 07:04 | So I can target a specific Opera
version based on that rendering engine and
| | 07:09 | once I do that--let's say I go over here,
for example, and go into Presto 2.9
| | 07:13 | which is the most recent version--I can take a
look at support for a lot of different items.
| | 07:18 | Look, for example, at all the
different sections that apply to CSS.
| | 07:22 | We have all the CSS3 modules
broken out into separate sections.
| | 07:26 | We have things like CSS Properties.
| | 07:28 | If I click on that, again I get this
chart of properties, the values that are
| | 07:32 | applicable for it, description of it,
and whether not that property is supported,
| | 07:36 | or whether it has things
like partial support to it.
| | 07:38 | So this page is fantastic--again, definitely
something you're going to want to bookmark.
| | 07:42 | And finally, Microsoft has a great page
for CSS compatibility and Internet Explorer.
| | 07:49 | Again, this is found on
the MSDN Microsoft Network.
| | 07:51 | This page is actually based heavily off
of Mozilla's CSS support page, and you're
| | 07:57 | going to get different properties and
selectors and in which version of Internet
| | 08:00 | Explorer supports it, so at which point
you can start targeting that specific
| | 08:04 | rule for a version of Internet Explorer.
| | 08:08 | Now I'm betting that those are enough
resources to at least get you started.
| | 08:11 | Now I know it may seem a little bit
overwhelming, but don't despair. I mean, for
| | 08:16 | example, I don't go through and read
through every single one of these pages.
| | 08:19 | A more likely scenario is that you're
going to want to use a property you've
| | 08:21 | never used before, so then you sort of
check these sites to see what the current
| | 08:24 | level of support, or which versions
of the browser support something.
| | 08:29 | Maybe a better way to look at this is
that really just reading through the
| | 08:32 | specifications and becoming familiar
with browser support levels by going
| | 08:35 | through some of these pages,
| | 08:37 | it's just simply a part of the process
of learning CSS and if you look at it
| | 08:41 | that way, it's really just one more thing
that you do in order to understand what
| | 08:46 | it is that you're working with.
| | Collapse this transcript |
| Dealing with browser inconsistencies| 00:00 | Although every browser has its own set
of quirks and bugs, you're probably going
| | 00:05 | to spend more time dealing with
Internet Explorer's bugs and specific issues
| | 00:10 | than with any other browser.
| | 00:12 | Now due to Explorer's large user base,
you usually don't have the option
| | 00:16 | of simply ignoring it and hoping
that users will simply use a more
| | 00:20 | standards-compliant browser.
| | 00:21 | I mean, to be honest, Internet Explorer
9 is fairly standards-compliant. It's a
| | 00:26 | really excellent browser, but there are
still a large portion of users out there
| | 00:30 | still using earlier versions,
| | 00:31 | so what this all boils down to is
that you simply have to have a site-wide
| | 00:36 | strategy for dealing with
Internet Explorer's quirks.
| | 00:39 | Before going too deep into
developing a browser strategy, I want you to
| | 00:43 | introduce you to
positioniseverything. You can find this site at
| | 00:46 | positioniseverything.net.
| | 00:48 | Now, this site consists primarily of
older information, but it is still the go-
| | 00:53 | to guide on browser bugs and ways
around those bugs, and it has a primary focus
| | 00:59 | on Internet Explorer.
| | 01:00 | So if you're new to CSS, reading
through these past articles will give you a
| | 01:05 | solid foundation into browser and
standards development over time and how to
| | 01:11 | address browser bugs.
| | 01:12 | While most browser bugs have fixes
that you can use and those are often
| | 01:17 | referred to as hacks,
| | 01:19 | those hacks aren't necessarily a good idea.
| | 01:22 | Often fixing a bug in one version can
actually trigger an error in another version.
| | 01:27 | Now for the most part, they add extra
weight to your code, and they can make
| | 01:31 | maintaining your site difficult,
especially in a team environment where
| | 01:36 | keeping track of when and where hacks
are being used can be really, really
| | 01:39 | difficult. More importantly,
| | 01:41 | they can cause problems with future
versions of browsers as well. Now, if all this
| | 01:46 | seems rather maddening, it's because it is.
| | 01:48 | Learning about and dealing with various
browser-CSS-related issues is one of the
| | 01:54 | most vexing but necessary things
that you're ever going to do as a web
| | 01:57 | designer. And there are various ways of
dealing with Internet-Explorer-specific
| | 02:01 | issues, and I can't recommend strong
enough researching and learning as many
| | 02:05 | cross-browser-compatibility issues as possible.
| | 02:09 | Doing so will help shape and guide your
overall browser-compatibility strategy.
| | 02:13 | In the end the strategy that you use
will depend on the browsers and browser
| | 02:17 | versions that you need to support.
And while I can't say that there is any one
| | 02:22 | perfect strategy to use,
| | 02:23 | I can discuss the ones that I use when
approaching browser inconsistencies. It's
| | 02:28 | the result of many years of dealing
with bugs and my own personal focus on
| | 02:33 | generating clean, maintainable code.
| | 02:36 | First, I try very, very
hard to avoid using hacks.
| | 02:40 | Now, a browser hack usually consists of
a really odd-looking selector or rules
| | 02:45 | written in a way that one browser will
interpret it and render it, while the
| | 02:49 | remaining browsers just ignore
it or even overwrite the hack.
| | 02:52 | Rather than use hacks, I try to avoid design
issues that trigger browser errors altogether.
| | 02:58 | Now to illustrate this,
I want to go back to IE 6.
| | 03:01 | In Internet Explorer 6 if you floated
an element to one direction and also
| | 03:06 | placed a margin on the same side,
IE 6 would double the margin value.
| | 03:11 | While there was a way to solve this,
I chose to simply never apply a margin in
| | 03:16 | the same direction as a float.
| | 03:18 | That way I avoided the invalid
code required to fix it, while never
| | 03:22 | triggering the bug.
| | 03:23 | It's a habit that I still
stubbornly cling to today, even though it is
| | 03:27 | no longer necessary.
| | 03:29 | That means that you have to be
diligent in learning all you can about browser
| | 03:32 | bugs and how they're triggered, so
that you can avoid them when possible.
| | 03:36 | Once you understand the various
browsers and their issues, you'll find that
| | 03:39 | you start designing with them in mind.
| | 03:42 | This may seem limiting, but in reality,
you can do anything you want visually
| | 03:46 | and stay within those browser constraints.
| | 03:49 | Next, if I have to deal with IE-
specific errors, I'll place all Internet-
| | 03:53 | Explorer-specific CSS fixes in separate
files and serve them through conditional
| | 03:58 | comments, as shown here.
| | 04:00 | Now this reduces the weight of extra
markup in my CSS, filters the browser-
| | 04:05 | specific styles so they go directly to
the browser that needs them, and makes
| | 04:09 | it easier to update my code by making
any hacks easy to locate and update.
| | 04:13 | You can even create conditional
comments through specific versions or a range
| | 04:16 | of Internet Explorer.
| | 04:17 | For example, this one is saying if
less than in the Explore 9, so be
| | 04:22 | research IE-specific conditional
comments and how to serve CSS through them.
| | 04:26 | And finally, I've long ago given up on
the notion that my pages are going to
| | 04:30 | look exactly the same in every single browser.
| | 04:33 | As a designer, that may seem
disappointing, but let's be honest. The web is
| | 04:37 | constantly evolving, with additional
devices and browsers being added all the time.
| | 04:42 | Thankfully, most devices have embraced
standards to one degree or another, making
| | 04:47 | our job a little bit easier.
| | 04:48 | By designing along existing web
standards, we can make sure that the widest
| | 04:52 | possible audience can see our content
the way that we intended. By making sure
| | 04:56 | that my design has the flexibility
to still be impactful, regardless of a
| | 05:00 | minor rendering issue here or there,
| | 05:02 | I make sure that that page
actually works in a wider array of clients.
| | 05:06 | I'm not claiming that this strategy
is the best, but I found it to be very
| | 05:09 | effective for my own sites.
| | 05:12 | I encourage you to do as much research
as you can into browser differences and
| | 05:15 | rendering issues. Based on what you learn,
who your target audience is, and the
| | 05:20 | requirements of your content,
| | 05:22 | you're going to develop a strategy
that works for you and does the best
| | 05:26 | possible job of ensuring
consistent user experience.
| | Collapse this transcript |
|
|
2. Targeting Page ContentStructuring HTML correctly| 00:00 | One of the biggest mistakes I see new
web designers make is focusing a lot of
| | 00:04 | effort into learning CSS without focusing
on writing clean, semantic, consistent HTML.
| | 00:11 | HTML defines the structure of your
page and without a logical consistent
| | 00:15 | structure, writing
efficient CSS would be impossible.
| | 00:19 | Before we get too far into how to use
selectors to target page content, I want
| | 00:23 | to take a moment to discuss a few
best practices when authoring HTML.
| | 00:27 | First, focus on the semantics.
| | 00:30 | Make sure that the tag that you're
using is appropriate for the content inside
| | 00:34 | of it and that there isn't another
element that expresses the content in a
| | 00:37 | more meaningful way.
| | 00:38 | For example, if you're coding an
author in a book review, use the blockquote
| | 00:42 | element, not the paragraph.
| | 00:44 | By using the correct element, your
content will be easier for user agents to
| | 00:47 | understand and easier for you to style.
| | 00:50 | Second, be consistent with how you
structure your content throughout your site.
| | 00:55 | Let's say that you have sections of
content that promotes specific products that
| | 00:59 | will appear on several pages within your sites.
| | 01:02 | In this example, you can see that the
content region is structured in three
| | 01:05 | different ways on each of
the pages that it occurs on.
| | 01:09 | While it may look the same in the
browser, and you can certainly style each
| | 01:12 | one of these to look exactly the same, you
wouldn't be able to style it as efficiently.
| | 01:17 | Creating standards for how content
should be structured and sticking with those
| | 01:22 | standards throughout your site creates
content they can be better understood by
| | 01:26 | user agents and can be styled
consistently with fewer styles.
| | 01:30 | Finally, simplify your code where you can.
| | 01:33 | Now I'm not about using non-semantic
code for styling purposes from time to
| | 01:37 | time, but avoid adding any unnecessary
markup to your pages, especially just
| | 01:42 | for styling purposes.
| | 01:44 | Too often I've seen elements wrapped
in multiple div tags just to achieve a
| | 01:48 | desired visual effect that could have
been achieved without the added structure.
| | 01:52 | I usually approach coding my sites with
just the structure and content in mind.
| | 01:56 | While that might give passing
consideration to the visual design of the page,
| | 02:00 | I'm more concerned with properly
structuring my code and representing the
| | 02:04 | content than I am with how
the content is going to look.
| | 02:07 | Now I've found that this allows me to
create lean, standards-compliant pages
| | 02:12 | without extraneous markup.
| | 02:14 | Now at first glance it may seem that
this approach limits what you can do
| | 02:17 | visually, but I've found in
fact it to be just the opposite.
| | 02:21 | When you have a lean page structure,
it's much easier to write efficient styles
| | 02:25 | that still style the page the way you want to.
| | 02:27 | Now as I mentioned, you might
occasionally need to tweak the code for your
| | 02:31 | design, but the more I use this approach,
the less tweaking I find that I need to do.
| | 02:36 | Just keep in mind when coding your HTML
that there is a direct relationship
| | 02:39 | between the structure of your
page and the structure of your CSS.
| | 02:44 | Without clean, consistent HTML, it's
very hard to create efficient styles to
| | 02:48 | control your sites' presentation.
| | Collapse this transcript |
| Element selectors| 00:00 | For the remainder of this chapter,
I want to focus on selectors.
| | 00:03 | Now as I mentioned before, selectors
allow us to target elements on the page,
| | 00:08 | and we have a lot of
selectors available to us through CSS.
| | 00:11 | We are going to explore the majority of
these selectors individually in just a
| | 00:14 | moment, but for this movie, I want to
start with perhaps the most basic selector,
| | 00:19 | and that is the element selector.
| | 00:20 | Now the element selector allows you to
target content on the page based on the
| | 00:25 | element that contains it.
| | 00:26 | It's an extremely powerful selector, but as
we're going to see, it's also a very broad one.
| | 00:31 | So I have the element-selector.htm file open,
| | 00:34 | and I can find this in the Chapter
2/02_02 folder in our exercise files.
| | 00:41 | This is an HTML5 document,
| | 00:42 | so one of the things that I have here
is I have a conditional comment: if less
| | 00:46 | than IE 9, and I point out to Remy Sharp's
html5shiv, which is hosted by Google code.
| | 00:52 | The only thing this really does is it
helps older versions of Internet Explorer
| | 00:56 | display those particular HTML5 elements.
| | 00:58 | So that's really why it's there.
| | 00:59 | You will see it consistently throughout
the site. It has nothing to do with our CSS,
| | 01:03 | and I don't really need it unless I
was going to test this in an earlier
| | 01:05 | versions of Internet Explorer.
| | 01:06 | Now after that, I have got a section
of embedded styles where we are going to
| | 01:11 | write the majority of our code. All
of our exercise files will be done,
| | 01:14 | the majority of the time locally, sometimes
we use external styles, but it's really
| | 01:17 | just about writing the styles more
than it is where they are located at this point.
| | 01:21 | And I notice that I have a couple of
styles already in the style sheet.
| | 01:24 | Essentially, I am taking some of the
HTML5 elements, making sure they are
| | 01:27 | displayed properly, and then I am also
formatting one of the elements on the
| | 01:31 | page, the aside, so that it appears
at a certain width, has a border around
| | 01:34 | it, and has a little bit of padding inside
of it, just to sort of set that area apart.
| | 01:38 | So that's really all those styles are doing.
| | 01:40 | And then the styles what we are going to
add are right under this comment that
| | 01:43 | says /*add styles here*/.
| | 01:44 | Here the page structure itself is really simple.
| | 01:47 | We have a heading 1, followed by a couple
of paragraphs, then a heading 2, another
| | 01:51 | paragraph, and then here is our aside.
And if you haven't worked with HTML5 yet,
| | 01:55 | an aside is very much like a sidebar.
| | 01:56 | It's just sort of related content on the page.
| | 01:58 | We have the heading 2 inside
that with a paragraph inside of it.
| | 02:01 | It's a very simple structure.
| | 02:02 | Okay, so let's go ahead and
start writing some styles.
| | 02:05 | I am going to right up to this
area that says "add styles here,"
| | 02:08 | and the first element selector I am
going to write is body. So when you write
| | 02:11 | an element selector, the easiest way
to do this is just look at the tag that
| | 02:14 | you want to target.
| | 02:15 | So here there is my body tag.
| | 02:17 | And I just write that selector the exact
same way without the brackets around it.
| | 02:21 | And that is really all an element selector is.
| | 02:23 | So I am going to open up my curly
braces and inside that I am going to
| | 02:27 | declare font-family: Arial.
| | 02:30 | So again, notice the colon and the
semicolon after the colon between the property
| | 02:34 | and the value and the semicolon after the value.
| | 02:36 | And then one more, font-size, and I
am going to make that 90%. So I'm
| | 02:42 | telling it to be a little bit smaller than
the default font size for the browser or device.
| | 02:46 | Next, I am going to go through and
create a couple more element selectors. So
| | 02:50 | after body, I'm going to hit Return.
| | 02:52 | Again, make sure that you're outside
of those curly brace when you do this;
| | 02:54 | you don't want to be still inside of that.
| | 02:55 | I am going to type in h1, and I am just
going to go ahead and do font-family:
| | 03:02 | Georgia--so we are changing that up a
little bit--and I am going to do font-size,
| | 03:09 | 1.8em, and font-weight, normal.
| | 03:13 | So those are the h1s. Now if I wanted to target my h2s,
again, very simple to do, just h2, without the
| | 03:20 | angle brackets around it.
| | 03:21 | And for this one we will do
something similar: font-family:
| | 03:26 | Georgia. font-size will be a little different.
| | 03:29 | That will be 1.4 ems, and font-
weight is going to be normal.
| | 03:33 | Feel free to play around
with some of these settings.
| | 03:36 | If you want to test of some these
properties and what they are capable of, go
| | 03:39 | ahead and type in different values
and see what happen formatting-wise.
| | 03:41 | Finally, all the paragraphs, I am
going to target them using a P element
| | 03:45 | selector, so just switch P for the
paragraph tag, and font-size there
| | 03:49 | is going to be 1em, color is going to be brown.
| | 03:55 | And I am going to go ahead and save
that, and I am going to preview that in
| | 03:57 | one of my browsers.
| | 03:58 | When I do that I can see
my headings are in Georgia.
| | 04:01 | The rest of my page is in Arial.
| | 04:04 | All of my paragraphs are brown, and my
headings are slightly different size,
| | 04:08 | depending upon which heading I am looking at.
| | 04:11 | This illustrates a couple of
points about element selectors.
| | 04:13 | Number one, they are very easy to use. Number two,
they does have some limitations. Now take this page.
| | 04:19 | What if we wanted the paragraph down
here inside of the aside to have a center
| | 04:24 | text alignment or be different color or size?
| | 04:27 | Well, there is no way to do that
by just using element selectors.
| | 04:31 | Element selectors are
extremely global in nature,
| | 04:34 | meaning they are going to accord every
single instance of that element on the page.
| | 04:39 | So they are best used for applying
styles that need to be consistent across all
| | 04:42 | pages, or for applying sort of initial
baseline formatting that can then be
| | 04:48 | overwritten as needed
with more specific selectors.
| | Collapse this transcript |
| Class selectors| 00:00 | In this movie, I want to talk about a
more precise way to target elements on the
| | 00:04 | page and that's through the use of class selectors.
| | 00:07 | Class selectors allow you to target
any element on the page that has the
| | 00:11 | same class attribute.
| | 00:13 | Let's take a look at the
syntax and how it works.
| | 00:15 | So I have the class-selector.htm file
open from the Chapter_02/02_03 folder.
| | 00:22 | So, if we take a look at the structure of the
page, it's very similar to what we had last time,
| | 00:27 | only this time instead of one
aside, notice that we have two asides.
| | 00:33 | So if I preview this on my page, I can
see that we have some default styling, and
| | 00:38 | I can see that both of those asides
have this sort of black border around it.
| | 00:42 | And maybe I have a situation coming up
where I wanted the border color for each
| | 00:46 | of the asides to be a little bit
different. Well, using element selectors, like
| | 00:50 | we did in the last movie,
there's no real way to do that,
| | 00:52 | so let's take a look at how
classes will help us do that.
| | 00:56 | So I am back in my code, and the
first thing I want to do is apply a class
| | 01:00 | attribute because class selectors and
class attributes work sort of hand in hand.
| | 01:04 | So right after the first aside tag,
inside the actual opening tag, I am going
| | 01:08 | to go ahead and apply a class attribute,
and I want that class attribute to be aside1.
| | 01:13 | And then for the second one, I am going
to go down and type in a class attribute
| | 01:19 | of aside2, but you probably saw that coming.
| | 01:22 | Now not very descriptive, not very
semantic, but for what we're doing in this
| | 01:27 | exercise, we just want to make sure
we use those two class attributes.
| | 01:31 | So now that it I have those class
attributes on my page, I can target them
| | 01:35 | with a class selector.
| | 01:37 | So I am going to scroll up to my
styles and just in this little section right
| | 01:41 | here where it says, "add styles here," I
am going to add a couple of selectors to
| | 01:45 | allow me to do just that.
| | 01:46 | Now whenever you are writing a class
selector, unlike an element selector where
| | 01:49 | you would just write in, say, the
word aside1, it doesn't work that way;
| | 01:54 | you have to let the browser know that
you are wanting to target a class on the
| | 01:57 | page and you do that by
typing in first a period.
| | 02:01 | So you type in a period
before the name of the class,
| | 02:04 | so that's how we identify classes.
| | 02:06 | In this case, we have the aside1, which
Aptana tried to help me out with, but
| | 02:11 | I sort of ignored it.
| | 02:12 | And inside of the declaration for
aside1, I am going to type in "border:
| | 02:18 | 1px" for one pixel space, "solid" so that we
want a solid border, space "green," the
| | 02:26 | green color. We are going to do the same thing for
our second aside, so ".aside2 border:
| | 02:34 | 1px solid" and again we are just
going to change the color, "red."
| | 02:39 | So if I save this, I go back into my
browser, refresh this, you can see that now
| | 02:44 | one aside has a green border,
the second aside has a red border.
| | 02:49 | Now this is very exciting
and for most graphic designers,
| | 02:51 | they are like cool, cool, cool!
| | 02:52 | I can finally target things the
way that I want to on the page,
| | 02:55 | and then they just start
using class selectors a lot.
| | 02:57 | Class selectors are not always the most
efficient way to do something, and let me
| | 03:01 | demonstrate that by going back to our code.
| | 03:03 | So, let's say we want to target some of
our headings a little bit differently.
| | 03:06 | So I'm going to scroll back down again into
the structure of the page itself, and the
| | 03:11 | first heading, h1, here, I am just
going to go ahead and give it a class="blueHeading".
| | 03:14 | I am going to do the same thing for
the h2, so I am just going to give it a
| | 03:20 | class of blueHeading.
| | 03:22 | Now, what this tells us is that when we
have a class attribute, we can apply it
| | 03:26 | as many times on the page as we want.
| | 03:28 | So if you need to use it one time, that's fine;
| | 03:30 | if you need to use it fifty times
on the page, that's fine too.
| | 03:32 | I am going to go down to the h2 here
that's inside my first aside and I am going
| | 03:37 | to go ahead and give that
a class of greenHeading,
| | 03:42 | and then I am going to go down to the
second h2, which in the second aside, and I
| | 03:46 | am going to go ahead and
give that a class of redHeading.
| | 03:49 | I bet you can see where all
this is heading--no pun intended.
| | 03:52 | I am going to go back up to my styles and
now I am going to write selectors for this.
| | 03:56 | So remember, when we write a class
selector, we start with a period, so
| | 03:59 | .blueHeading. And indeed I am just going
to change its color to blue, so we are
| | 04:05 | just going to use a keyword there.
And I will go down and do greenHeading and
| | 04:11 | then change its color to green, or
set its color to green I should say.
| | 04:16 | And I'll do redHeading, set its color to red.
| | 04:21 | I am going to save that and let me
go back my browser, refresh it,
| | 04:29 | and now my headings are the colors that I want:
| | 04:30 | blue for the first two and then
green and red for the second two.
| | 04:35 | Now, looking at this code, you might say,
well, okay, so what's wrong with that?
| | 04:39 | Well, think about this
from a maintenance standpoint.
| | 04:42 | If every time you want to change something,
or apply a styling, you go crazy with classes--
| | 04:48 | and actually Jeffrey Zeldman coined a
term for this; he called it classitis.
| | 04:50 | Do you know what classitis is?
Classes all over the place.
| | 04:54 | And really, we are not supposed to
be using class attributes unless they
| | 04:57 | actually mean something.
| | 04:58 | Unfortunately, none of
these really mean anything.
| | 05:01 | blueHeading on the surface
doesn't describe this heading.
| | 05:04 | It doesn't tell us anything about the heading,
| | 05:06 | in terms of its content; it just tells us
what the heading is supposed to look like.
| | 05:09 | aside1 and aside2,
| | 05:11 | they don't tell us anything
about these aside elements;
| | 05:13 | they just tell us this is the
first aside, this is the second aside.
| | 05:16 | So semantically, our classes
aren't all that great right now.
| | 05:20 | So instead of rushing to use classes,
you need to really carefully consider how
| | 05:24 | to best utilize them.
| | 05:25 | Now I have seen designers really too
often rely on them for almost every single
| | 05:30 | styling of elements on the page, and
that's the wrong way to do it, because if
| | 05:35 | you use too many class attributes, it
can be really inefficient in terms of
| | 05:38 | going back and modifying things. Imagine
having go through your entire site and
| | 05:41 | find every instance of greenHeading
and change that to say yellowHeading.
| | 05:45 | That would be really, really inefficient.
| | 05:47 | So, in a moment I am going to discuss
the strategy behind using classes and
| | 05:53 | class selectors in a little bit more detail.
| | 05:55 | but before we get to talking about
strategy, we have to talk about one more
| | 05:59 | selector type and that's the ID
selector, and we are going to do that in
| | 06:02 | our next movie.
| | Collapse this transcript |
| ID selectors| 00:00 | ID selectors work in much the
same way as class selectors, in that
| | 00:05 | they allow us to target any element on
the page with a specific ID attribute.
| | 00:10 | Now there are a few slight differences
between the selectors that you need to be aware of,
| | 00:14 | so let's take a closer look at ID selectors.
| | 00:16 | And you can do that by opening up the
id-selector.htm, which you can find in
| | 00:21 | the 02_04 folder in the
exercise files Chapter_02 folder.
| | 00:28 | So essentially, looking at this page, the
structure is pretty much exactly the same.
| | 00:32 | Now we have stripped off any those
classes that we had on our earlier elements.
| | 00:36 | We just want to give some IDs.
| | 00:37 | Now IDs, again, are just like classes in
terms of the fact that they are an attribute.
| | 00:42 | So if I go to our first aside right here,
for example, and I type in id=, I can
| | 00:48 | just go ahead and give it any value that I want.
| | 00:49 | In this case, I am going to call it aside1.
| | 00:52 | So we are using the same names that we
used before, only this time instead of a
| | 00:55 | class attribute, it's an ID attribute.
| | 00:57 | The same thing for the second aside,
I am going to give it an id="aside2."
| | 01:04 | So, so far, not much difference;
| | 01:06 | I am just using the ID attribute
instead of a class attribute. But as you write
| | 01:10 | the selector for them, the
syntax is a tad bit different.
| | 01:14 | So when I go back up to this little area where I am
going to add my styles right here on line 37,
| | 01:18 | to write an ID selector, you first start with
the pound symbol, also known as the octothorpe.
| | 01:24 | And then I can go ahead and follow
that with the name of the attribute that I
| | 01:29 | want to use, in this case aside1.
| | 01:32 | In this case, I am going to go ahead
and just apply a different background
| | 01:36 | to each one of these. I am just going to do
background and I want to say beige.
| | 01:40 | That's a good color.
| | 01:41 | Now Aptana is trying--and you may have
noticed this in an earlier movie too--
| | 01:44 | it's trying to save me from myself,
essentially throwing up a little code error here.
| | 01:48 | And if I hover over that, it will even
try to tell me that hey, this color value
| | 01:52 | is not a defined property. Well, it is.
| | 01:54 | In the Color Level 3
specification it certainly is.
| | 01:56 | It is also part of the SVG
specification, and so because of that, it's been
| | 01:59 | supported by browsers for years and years
and years, so you can use it without fear.
| | 02:03 | That's nice of Aptana to
tell me that, but not a big deal.
| | 02:06 | Right now, on the next line I am going
to do the same thing, #aside2, and again
| | 02:11 | here I am going to do
background, and we will do tan.
| | 02:15 | So we get beige and tan,
two very exciting colors.
| | 02:18 | So again, notice that the pound
symbol identifies this is an ID and if we go
| | 02:22 | down to our page, we can find the
associated attribute. And if I save this and
| | 02:28 | preview this in one of my browsers,
I can see that I have tan and brown
| | 02:34 | backgrounds for my asides respectively.
| | 02:36 | Okay so what else is
different in terms of classes and IDs?
| | 02:40 | Well, for IDs I can only use
this aside1 value one time per page,
| | 02:45 | so IDs must be unique.
| | 02:47 | So before where we were able to use the
blueHeading class multiple times, here I
| | 02:52 | could use this particular ID only once.
| | 02:54 | So you can have multiple IDs per page,
just not the same IDs, so it has to be unique.
| | 02:59 | Now in terms of CSS, that means that in
the event that a class and ID selector
| | 03:03 | conflict with each other, the ID
selector's styling will be used in favor of the
| | 03:08 | class because it's more specific.
| | 03:10 | At first glance, using class and ID
selectors might seem simple, but there's a
| | 03:14 | fair amount of thought that should
go into using them before you actually
| | 03:18 | execute them in your code,
| | 03:20 | so in our next movie, I am going to
go a little deeper into the strategies
| | 03:24 | behind using both of those selector types.
| | Collapse this transcript |
| Using classes and IDs| 00:00 | One of the biggest mistakes I see new
web designers make is thinking of classes
| | 00:04 | and IDs as simply a means
of styling page content.
| | 00:09 | While classes and ID selectors
certainly allow us to do that, it is not the
| | 00:13 | primary purpose of those attributes.
| | 00:16 | Class and ID attributes exists to
help give your content more meaning.
| | 00:20 | Take a look at the page that I have opened here.
| | 00:22 | I'm using HTML5, and while HTML5
helps extend the meaning of our code with
| | 00:27 | elements like header, article, and
footer, it still might not be as
| | 00:31 | descriptive as you'd like it to be.
| | 00:33 | In many cases, HTML simply lacks a
corresponding tag to the type of content
| | 00:38 | you wish to identify.
| | 00:40 | For example, throughout our code we
have several artists who we referenced, but
| | 00:44 | we have no way of identifying them
as artists through existing HTML tags.
| | 00:49 | So when you have cases like that,
class and ID attributes can help you extend
| | 00:54 | the meaning of your code.
| | 00:56 | Now, if you approach using classes and
IDs in that manner, your page structure
| | 01:00 | will be more meaningful and
its content much easier to style.
| | 01:04 | This is probably easier to
illustrate by seeing it in action,
| | 01:07 | so let's go ahead and take a look
at using IDs and classes properly.
| | 01:11 | I've got the considerations.htm file
opened, and this can be found in the
| | 01:16 | Chapter_02 folder, 02_05.
| | 01:20 | So the first thing I want to do is just
kind of go through some of the existing
| | 01:24 | code and see if there's any existing
class and ID attributes that need to be
| | 01:28 | maybe a little bit more descriptive.
| | 01:30 | So as I scroll through, I can see
really the only thing that we have in here
| | 01:33 | right now in terms of classes and IDs
are the classes that we have around all of
| | 01:38 | the dates in this list.
| | 01:40 | Obviously I want to style them as bold
because I've created a class that says bold.
| | 01:46 | The thing is, that doesn't really mean anything.
| | 01:48 | We know what it means in terms of how
we want the text to look, but in terms of
| | 01:52 | conveying the meaning of the content of
that tag, it doesn't do a thing for us.
| | 01:57 | So we can make this a lot more meaningful
by changing the class attribute bold to date.
| | 02:03 | That means something.
| | 02:05 | So now if somebody is perusing this
code, whether it's machine or human
| | 02:10 | readable, the word date actually
imparts meaning in terms of what is inside the
| | 02:15 | contents of the span tag.
| | 02:17 | Now obviously, if I do that, I have to
scroll up and change the corresponding
| | 02:21 | class selector as well,
| | 02:23 | so I'm going to change that from .bold to .date.
| | 02:27 | Now, in terms of how this
functions, it won't change at all.
| | 02:30 | It will look exactly the same.
| | 02:31 | It will style exactly the same, but
now instead, it actually has semantic
| | 02:35 | meaning to it, instead of just this
presentational meaning that it had before. Okay.
| | 02:40 | So now I want to take a look at maybe
extending the meaning of the content on
| | 02:44 | the page, and the first thing I want
to do is go through and identify the
| | 02:48 | elements that would benefit from an ID.
| | 02:51 | Now, the decision to use an ID or not
is often a really tough one to make.
| | 02:55 | A lot of people use IDs because
JavaScript allows us to target elements on the
| | 02:59 | page that have an ID and then do
something like style it, change the content, or
| | 03:04 | modify it in some way, or
attach some type of behavior to it.
| | 03:06 | So that's one reason to use IDs.
| | 03:08 | But really to me, the deciding factors
to whether you should use an ID or not is
| | 03:12 | is that content unique and
does it need to be identified?
| | 03:16 | If we take a look at our page, for
example, we start off with the header element.
| | 03:18 | Now, in HTML5, you can use
as many headers as you like.
| | 03:22 | They can be inside of articles.
| | 03:23 | They can be inside of sections.
| | 03:25 | You can really place
them anywhere that you want.
| | 03:27 | This is the main header on the page.
| | 03:29 | So I want to go ahead and identify as
such, and the easiest way to do that is
| | 03:33 | to simply add an ID attribute.
| | 03:35 | So inside the first header tag, I'm
going to type in ID, and the ID that I'm
| | 03:40 | going to give this is pageHeader,
| | 03:42 | so a meaningful ID attribute to
identify exactly what that element is.
| | 03:47 | For article, I notice that the
content of this article are the Latest News,
| | 03:50 | so the article, I'm going to go ahead
and give it an ID as well, and I'm going
| | 03:54 | to just give that an ID of news.
| | 03:56 | As I go down the page, I can see
some of the other sort of top-level
| | 03:59 | structural elements.
| | 04:00 | I have an aside and inside the
aside, I see that that is focusing on
| | 04:04 | the Featured Artist,
| | 04:05 | so I'm going to reflect that in an ID as well.
| | 04:07 | So id=featuredArtist.
| | 04:10 | Notice that for IDs you're
going to use a single word;
| | 04:13 | you don't want to use multiple words.
Same thing for classes. And I'm just using
| | 04:16 | CamelCase naming here.
| | 04:17 | So lowercase first word and then every
other word after that is going to be uppercase.
| | 04:20 | Then finally, for footer, I'm just
going to give it an ID of pageFooter,
| | 04:27 | and then save my file.
| | 04:28 | So now I've identified some of the main
regions on the page using an ID, and it
| | 04:33 | makes it a little bit easier to see what type
of content those regions are going to focus on.
| | 04:38 | Now occasionally you're going to want
to extend the meaning and an ID won't be
| | 04:41 | the appropriate element.
| | 04:43 | Let's take, for example, all the
artists that are named in our page.
| | 04:46 | So here we have Toby Malina.
| | 04:48 | Here we have Jeff Layton, Shea Hansen,
and finally Simon Allardice is mentioned a
| | 04:55 | couple of times as well.
| | 04:57 | So this content is content that is
mentioned several times on the page, and it's
| | 05:02 | mentioned in several different ways.
| | 05:03 | For example, here the artist name
is the only thing that's inside this
| | 05:07 | element, whereas every other
instance the artist name is just part of the
| | 05:11 | content of an element.
| | 05:13 | It's in those instances that a class is perfect.
| | 05:15 | Remember, you can use a
class more than once on a page,
| | 05:18 | so unlike an ID where I can only have
one element on the page with the ID of
| | 05:22 | featuredArtist, I can have multiple
elements on the page with a class of artist,
| | 05:27 | So that's exactly what we're going to do.
| | 05:29 | So I'm going to highlight
the text Toby Malina here.
| | 05:31 | Now, I'm going to let
Aptana Studio help me here.
| | 05:34 | Aptana Studio has a keyboard
shortcut, Shift+Ctrl+W, that allows me to wrap
| | 05:38 | highlighted code with a tag.
| | 05:40 | It would be just as easy for me to type
in an opening span tag on the front of
| | 05:44 | this, then a closing span tag on the back.
| | 05:46 | I'm just going to save
myself a little bit of time.
| | 05:48 | If your code editor has that type of
functionality, feel free to take advantage of it.
| | 05:52 | So what I'm going to do is I'm just
going to go ahead and wrap each of
| | 05:54 | these with a span tag.
| | 05:56 | So I've done it for Toby Malina.
| | 05:58 | I'm going to do it here for Jeff Layton,
just going to wrap them in a span tag.
| | 06:02 | Span tags essentially have no meaning
on their own, but they allow you to sort
| | 06:05 | of identify inline content, and
that's why I'm using them here.
| | 06:08 | Now, I don't need to use them everywhere.
| | 06:11 | Here, for instance, Simon Allardice is
the only content inside this heading, so I
| | 06:15 | really don't need to
surround that with a span tag.
| | 06:16 | I'm going to go ahead and do
that here as well. Excellent!
| | 06:19 | Okay, so now, I'm going to go
in and just apply my class.
| | 06:22 | And yes, I could have done that same time.
| | 06:24 | I just want to make sure that we're focusing
on the actual application of the class itself.
| | 06:27 | So I'm just going to go ahead and
say class=artist, and I want to do that
| | 06:31 | for each one of these.
| | 06:31 | So for Jeff Layton, it's
a class of artist as well.
| | 06:36 | Same thing for Shea Hansen.
| | 06:41 | Here is where we see one of the
great things about class attributes:
| | 06:44 | they can be applied to any tag.
| | 06:45 | So here for the h2, for example, I'm
going to go ahead and give it a class of
| | 06:48 | artist and then finish that
up by applying it to the span tag.
| | 06:52 | So it doesn't really matter what
type of element you place it on;
| | 06:55 | you can go ahead and apply
that class anywhere that you want.
| | 06:57 | So now, we've extended the
meaning in our code considerably.
| | 07:02 | We now have all of our sections
identified in terms of what the content of
| | 07:05 | that section is, and then we have all of
our artists and dates identified by classes.
| | 07:11 | So even if you were just sort of reading
through this code, you would know a lot
| | 07:15 | more about the content, and it
also makes the code a little bit more
| | 07:18 | machine readable too, because scripts
can be created to go through and apply
| | 07:22 | different formatting or different
behaviors for copying content based on these
| | 07:27 | different class and ID attributes.
| | 07:28 | So notice that we haven't
even talked about styling.
| | 07:30 | So the most important thing here is
extending the meaning of our code so that
| | 07:34 | the content has more semantic meaning.
| | 07:37 | Now, that also means that we are now able
to style it a little bit easier as well.
| | 07:42 | So if I scroll back up into my styles,
I could begin to add to the styles that
| | 07:47 | we already have on the page.
| | 07:49 | Now, the first thing I'm going to do
is I'm going to style my artist styles,
| | 07:52 | so I'm just going to go
up and below the date rule,
| | 07:54 | I'm just going to type in .artist.
| | 07:56 | And here, I'm just going to do a font-
weight of bold, so we're going to identify
| | 08:01 | all artists visually by bolding the text.
| | 08:04 | I'm going to do a font-style of italics,
| | 08:08 | so we're also going to italicize it, and then
for color, I'm going to go ahead and do navy.
| | 08:13 | Then we'll go ahead and save that.
| | 08:14 | Now, I'm going to follow this up with
some of the ID selectors, and I'm just
| | 08:19 | going to style some of my page regions visually.
| | 08:21 | And again, because we've extended the
meaning of our page regions through use of
| | 08:26 | IDs, that makes it a lot easier for us to do.
| | 08:28 | So I'm going to go right below the
artist selector that we just wrote, and I'm
| | 08:32 | going to go ahead and do pageHeader first.
| | 08:36 | So notice that again IDs start with the
pound symbol, so #pageHeader, no space there.
| | 08:42 | And we're just going to do
some really simple styling here.
| | 08:44 | We're going to give it a background of
gray, a color of white, so that will be
| | 08:50 | the text color, and a padding of 15 pixels.
| | 08:56 | After pageHeader, we'll go ahead and
pick up featuredArtist, and we'll style
| | 09:01 | that one with a width of 300 pixels,
a padding of 15 pixels as well, and finally,
| | 09:09 | a background of tan.
| | 09:11 | So we'll save that, preview that in
my browser, and there is our styling.
| | 09:16 | Now, it's doubtful that this page is
going to win any design awards, but
| | 09:20 | the point here is that you should
think really, really carefully about the
| | 09:24 | relationship between semantics and style
before you start to use classes and IDs.
| | 09:29 | Try to limit the use of class and
ID attributes, for the most part, to
| | 09:33 | instances where additional meaning is either
required or simply desired by you as an author.
| | 09:39 | Now, I have to admit, I do find myself
occasionally adding an arbitrary class
| | 09:43 | attribute for styling purposes, but
the majority of the time, I'm only adding
| | 09:47 | class attributes when adding
additional meaning is necessary.
| | 09:51 | You also want to make sure that if you
do add meaning through classes and IDs
| | 09:54 | that you're consistent in how they're
used throughout the site. Establishing
| | 09:58 | those rules early on as you plan your
site will help you create well-structured
| | 10:02 | sites and in turn, make your
styles a lot easier to write.
| | Collapse this transcript |
| Element-specific selectors| 00:00 | In many cases, CSS allows us to
tweak our syntax slightly to achieve more
| | 00:05 | focused targeting goals.
| | 00:07 | When writing class and ID selectors
you can also make them element-specific,
| | 00:12 | meaning they will only apply when
those attributes are applied to a
| | 00:16 | specific element type.
| | 00:18 | To maybe make more sense if that,
I have got a page here opened in the browser,
| | 00:22 | and this is the element-specific.htm,
which is found in the 02_06/Chapter_02
| | 00:29 | directory, and it's exactly what we had
in our last lesson for the most part.
| | 00:34 | We have all of these artists targeted
with a class attribute of artist, and
| | 00:39 | then they are being styled
with a class selector of artist.
| | 00:42 | But maybe we don't want them all styled
exactly the same. For example, the name
| | 00:46 | of the artists here in the headline
probably shouldn't look exactly the same
| | 00:50 | way it does in the body copy everywhere,
but right now that artist selector is
| | 00:55 | applying to the entire page.
| | 00:57 | So let's go take a look at how we can
maybe modify the selector a little bit
| | 01:00 | and make it more specific.
| | 01:02 | So now in my code editor here, Aptana Studio,
I have the element-specific file open again.
| | 01:07 | Remember that it is in the 02_06
directory. And I just wanted to scroll down
| | 01:13 | into my styles, and here I can see the artist
style that we created in the last exercise.
| | 01:19 | So what I am going to do is I am going
to create another one directly underneath
| | 01:22 | this, and here I want to use what's
known as an element-specific selector.
| | 01:26 | So I can say h2.artist. All right!
| | 01:31 | So I am just going to open up
my curly braces really quick,
| | 01:34 | and before I add any styling to this, I
want to talk about this a little bit,
| | 01:37 | so the syntax of it.
| | 01:38 | So in this case, this selector is
saying apply to any element, doesn't matter
| | 01:43 | which type of element it is, but any
element that has the class artist applied to it.
| | 01:49 | This selector, on the other
hand, is being much more specific.
| | 01:52 | It's saying I only want you to add
this formatting if you find an h2 with the
| | 01:57 | class artist applied to it.
| | 01:59 | So notice that syntax-wise there is no
space between the h2 and the class selector--
| | 02:03 | they are just joined together--and the
element that you are targeting comes first.
| | 02:08 | Let's see if this works. So inside this selector,
I am going to type in font-style, and I want to make that normal.
| | 02:15 | Underneath that, I am going to change
color to black, and I am going to use a
| | 02:21 | formatting property that we are going
to play around with a little bit more
| | 02:24 | later on called font-variant, and I'm
going to make that small-caps. And that's a
| | 02:30 | dash between the small and caps, so
small-caps, so font-variant: small-caps.
| | 02:37 | Okay, let's try this out.
| | 02:37 | So I am going to save this
and preview this in my browser.
| | 02:43 | Now you can see that it didn't affect
the styling of the other elements at all,
| | 02:47 | but only when the h2 had the class
applied to it do I get the text, no not
| | 02:53 | italicized, using small-caps,
and the color is now black,
| | 02:57 | so this is exactly what I want.
| | 02:59 | Now element-specific selectors can
be used for classes and IDs as well.
| | 03:03 | If I go back into my code, if I wanted
to, I could go to featuredArtist, and I
| | 03:09 | notice that
featuredArtist is currently on aside.
| | 03:13 | But even though it can only be used once
per page, maybe on one page there will
| | 03:17 | be an article about the featured artist
and in that sense, you'll be using the
| | 03:20 | ID featuredArtist on articles instead of
an aside, and maybe they will need to be
| | 03:24 | formatted differently.
| | 03:26 | So, in order to make sure that this
formatting is only used for asides, I can
| | 03:29 | come over right back up to my
styles and I can do the exact same thing.
| | 03:33 | I can go in and just say aside#
featuredArtist. And once again notice that
| | 03:38 | there is no space between the element that
I am targeting and the ID or class selector;
| | 03:43 | they are just joined, just like that.
| | 03:45 | If I save this and test it, I can see
that there's no change to the formatting
| | 03:51 | whatsoever, and that's because it
is in aside that is targeting it.
| | 03:55 | Now if I changed it to article, the
selector is no longer going to work. The
| | 04:00 | styling goes away because on this
page, it's an aside and not an article.
| | 04:05 | So these element-specific selectors
give you an incredibly powerful way to
| | 04:08 | target very specific elements on the page.
| | 04:10 | Now one thing that you should keep
in mind, however: these selectors do
| | 04:13 | require a little bit more processing work from
the browser in order to target these elements,
| | 04:18 | so you should really limit their
use to times when they are the most
| | 04:22 | efficient selector available.
| | 04:23 | So don't just write a class or ID
element-specific selector because the
| | 04:28 | conditions for it exist on a page;
limit its use to when it's the best
| | 04:32 | selector for the job.
| | Collapse this transcript |
| The universal selector| 00:00 | The universal selector is one that is
often overlooked as people learn CSS.
| | 00:06 | It's one of the most basic and most powerful
selectors available to you, yet few people use it.
| | 00:11 | Now there is of course a reason for
that, so let's examine what the universal
| | 00:15 | selector is and why people tend to avoid it.
| | 00:18 | So I have the universal.htm
file open in the 02_07 folder.
| | 00:24 | And the easiest thing to do with the universal
selector to experiment with it is just to try it.
| | 00:28 | So it's called the universal selector
because it affects every element on the page.
| | 00:33 | And I am just going to go right here to line
number 11, right below the add styling here, and
| | 00:37 | I am just going to write a rule
that uses the universal selector.
| | 00:40 | The universal selector is basically the asterisk.
| | 00:43 | It's kind of the wildcard character, if
you will, and that means everything, every
| | 00:48 | element on the page.
| | 00:49 | So if I go ahead and open up my curly
braces, I am just going to set a color
| | 00:53 | here. So I am just going to say
color, and I will just use blue.
| | 00:56 | So if I save this and preview this in
one of my browsers, I can see that every
| | 01:03 | single thing on the page is now blue,
so boom, one shot, you get everything.
| | 01:09 | Now a lot of people sort of confuse
this with inheritance, and let me show you
| | 01:15 | the big difference for this.
| | 01:16 | We will talk about inheritance a
little bit more later on, but inheritance
| | 01:21 | basically says that if you apply a
property to a parent tag, if it's a property
| | 01:26 | that the child can inherit, it
will. Let me show you what I mean.
| | 01:29 | So if I go over here and I change
universal selector to body--remember body is
| | 01:33 | our main parent element here for everything--
| | 01:36 | if I save this and preview that in
the browser, I see no styling change.
| | 01:41 | So they act exactly the
same, or do they? Let's find out.
| | 01:45 | I am going to go back into my code, and I
notice that in the content here I have
| | 01:49 | several sections of content.
| | 01:51 | So if I wanted each of these sections to
look a little bit different, one of the
| | 01:55 | things I could do is come up and say,
okay, in this section, or in any section, I
| | 02:00 | want the color to be red.
| | 02:02 | It's a very simple element selector there.
| | 02:04 | Now if I save this, I can preview this
in my browser. I can see that now my
| | 02:10 | section is overwriting body because it's a
child style that's overriding the parent style.
| | 02:16 | That's kind of how inheritance works.
| | 02:18 | Parent styles inherent, then child
styles are allowed to overwrite them.
| | 02:21 | However, I want to show you a really
big difference between inheritance and
| | 02:25 | the universal selector.
| | 02:27 | So I am back in my code and I am
going to change the body selector back to
| | 02:31 | that universal selector.
| | 02:32 | Now if I save n this and test it, wow!
All of a sudden, that section
| | 02:38 | content where the color is told to be red is
being overwritten. Okay, so what is happening there?
| | 02:44 | Well, essentially the universal selector
applies to every single element on the page,
| | 02:51 | so all paragraphs, headings, unordered
lists, sections aside, articles. Then I
| | 02:57 | am going to go back into the code here.
| | 02:59 | So because each of those sections has
child elements inside of it--a paragraph
| | 03:03 | here or a paragraph here--the universal
selector is going through each one of
| | 03:07 | these and saying you are blue,
you are blue, you are blue.
| | 03:10 | So even though this section says, no, I'd
like to be red, the universal selector is
| | 03:13 | countering that out.
| | 03:14 | Now it can be put to good effect, so,
for example, I could come in here and get
| | 03:20 | rid of the color, and I
could say margin: 0 padding: 0.
| | 03:25 | Now you may have remembered earlier
on and we talked bout how browsers have
| | 03:29 | their own default margins and padding and
things like that for elements on the page.
| | 03:33 | A lot of times you want to try to get
rid of those so that then you can go
| | 03:36 | ahead and add your own margins and
padding for elements and not worry about
| | 03:40 | the browser's default.
| | 03:41 | So if I save this and test it,
you can see that it does just that.
| | 03:46 | We now no longer have any spacing
between the elements on the page.
| | 03:50 | They are all just budded up right
against each other, and we can now go in and
| | 03:54 | rewrite that on our own margins
and paddings and that sort of thing.
| | 03:58 | There is a downside of this, however.
| | 04:01 | I've seen the universal selector used
like this for what we call a CSS reset, so
| | 04:05 | this is essentially just
a very simple CSS reset.
| | 04:09 | Remember from earlier, CSS resets
just sort of strip out all that default
| | 04:12 | margins and padding.
| | 04:14 | But the problem with the universal
selector is again, remember, it applies to
| | 04:18 | every single element. That can include
form elements, like buttons, and input, text
| | 04:25 | fields, and checkboxes, and radio buttons.
| | 04:27 | And in some browsers, stripping out
those sorts of default margins and paddings
| | 04:32 | without adding them back can cause
some really, really bad styling issues.
| | 04:36 | And if you don't know that those
elements sort of need that default margins and
| | 04:40 | paddings, a lot times you sort
of forget to put it back in there.
| | 04:43 | So the universal selector is sort of a
scorched earth selector, so you
| | 04:48 | should really use caution when using it.
| | 04:51 | And I am going to be honest with you.
| | 04:52 | I've never used the universal
selector in any of my styles ever.
| | 04:57 | I just have never really needed it.
| | 04:59 | A little later on we are going to learn
about what we call descendent selectors,
| | 05:03 | which involves combining selectors
together for more precise targeting. And in
| | 05:07 | those cases, I've seen a few people
use the universal selector to target a
| | 05:11 | really complex range of selectors,
to say, like, go inside of a div and
| | 05:16 | everything inside that that's
also part of the section, do this.
| | 05:19 | So you can sort of combine it with
other selectors to do that, but to be
| | 05:23 | honest with you, I've never had a situation
arise that I couldn't style that another way.
| | 05:28 | Really, it's just another selector,
| | 05:30 | and whether you use it or
not is entirely up to you.
| | 05:34 | You just want to be sure that you
understand the effect it's going to have on
| | 05:37 | every single element within your
site before you decide to use it.
| | Collapse this transcript |
| Grouping selectors| 00:00 | Often you'll find that several
different elements on the page require the
| | 00:04 | exact same styling.
| | 00:06 | Now while you can create multiple
selectors to do this, it's much more efficient
| | 00:11 | to group selectors together.
| | 00:13 | Now in some of our past exercise files,
we've done element grouping without
| | 00:16 | really talking too much about the syntax,
| | 00:19 | so in this movie I just want to take
a brief moment to discuss the syntax of
| | 00:22 | grouping selectors together and some
of the benefits that we get from them.
| | 00:25 | So I've got the grouping.htm file
open, and you can find this in the 02_08
| | 00:31 | folder. And scrolling through my code,
| | 00:34 | it doesn't take long to figure out that
I've got some inefficient styles here.
| | 00:38 | You can see, for example, that all of
these selectors, aside, article, section,
| | 00:43 | header, all I'm really doing is telling
them to display as block-level elements.
| | 00:48 | And that's really designed to tell non-
conforming user agents know what to do
| | 00:51 | with these new HTML5 tags.
| | 00:53 | So it doesn't make a whole lot of sense
to have a separate rule doing this for
| | 00:56 | each one of those elements when I
could just sort of group them together.
| | 00:59 | So what I am going to do is, right
after aside, I am just going to type in a
| | 01:03 | comma and add article,
section, header, footer, nav.
| | 01:12 | And that's going to allow me to take each one
of these selectors below it and get rid of it.
| | 01:18 | And look at all the space that I am
saving in my CSS now; it's much more efficient.
| | 01:23 | So to group a selector
together, here's all you need to do.
| | 01:26 | You just use a comma.
| | 01:27 | Now the amount of
whitespace doesn't really matter.
| | 01:30 | You could have whitespace
between both of them or not.
| | 01:33 | That's still going to work.
| | 01:34 | It doesn't really matter.
| | 01:35 | So really it's just personal preferences.
| | 01:37 | It's whichever you think is
a little bit more readable.
| | 01:40 | Also notice that I can use
as many selectors as I want.
| | 01:42 | I am not limited to grouping
just one or two selectors together.
| | 01:45 | I can throw three, four, five, six;
| | 01:48 | It doesn't really matter.
| | 01:49 | In this case, also these
are all element selectors.
| | 01:52 | You are not limited to just element selectors.
| | 01:55 | Any type of selector you have
you can group with other selectors.
| | 01:59 | So later on when we learned about
descendant selectors and nth-child selectors
| | 02:03 | and all sorts of crazy selector types,
| | 02:05 | you can group all of those as well.
| | 02:07 | Now in this case we're just saving a
little bit of space, but group selectors
| | 02:12 | can also help make your content be
a little bit more manageable too.
| | 02:15 | Let me show you what I mean.
| | 02:16 | If I scroll down, I can see
again we just have some h1s and h2s.
| | 02:21 | The h2s are inside the asides down here,
although there is a subheading down here that's not.
| | 02:27 | But what if I wanted the h1s' and
the h2s' formatting to be very similar?
| | 02:31 | Maybe the only thing different, for
example, is maybe I just want h1s to be red.
| | 02:36 | So they are not exactly the same.
| | 02:38 | The h1 has a color that's going to be
different than the h2 selectors, but they
| | 02:42 | are very, very similar.
| | 02:44 | Well, in this case, I can sort of use
grouping to help me make my styles a
| | 02:48 | little bit more manageable
but not replace everything.
| | 02:51 | Let me show you what I mean.
| | 02:52 | So after the h1 rule, I am going
to create another rule with a group
| | 02:55 | selector that says h1, h2.
| | 02:58 | So this is perfectly acceptable.
| | 02:59 | I can have as many of these in a row as I want,
| | 03:02 | and anything that's in here, if it
conflicts, will overwrite this one due to the
| | 03:06 | cascade, and we'll talk about
that a little bit later on as well.
| | 03:09 | So here for h1, h2 I am just going
to do font-family, and we'll do Georgia.
| | 03:15 | Below that we are going to do font-
size, and we'll make that 1.4em, so they are
| | 03:20 | going to be the same size, and then
finally we will take font-weight and we
| | 03:25 | will make that normal.
| | 03:26 | So most of the time headings are bold.
| | 03:28 | We are going to tell
these headings, don't be bold.
| | 03:30 | So essentially h1s and h2s are going
to look exactly the same except for the
| | 03:35 | fact that h1s will be red.
| | 03:36 | So if I save this, test
this in one of my browsers,
| | 03:40 | I can see that it's doing just that.
| | 03:42 | The headings are all the
same size. They are not bold.
| | 03:44 | But the h2s are all black,
where the heading one is red.
| | 03:48 | This means that if I want to
make any change to this formatting,
| | 03:51 | so, for example, if I go back into my
code and let's say I decide that I also
| | 03:56 | want them to be italicized,
| | 03:58 | So I could come in and say font-style:
| | 04:01 | italic, save that, refresh it, and
now they're all italicized as well.
| | 04:08 | So I didn't have to do that. If all my
h1 styling was in one selector and my h2
| | 04:12 | is in another, I would then have to
make that change in two separate selectors.
| | 04:15 | Now I only have to make it in one.
So, I can take those minor differences and
| | 04:19 | split them out in their own selectors
and sort of group all of the things that
| | 04:23 | are going to be the same to put them
in one centralized location that I can go
| | 04:27 | ahead and update just once.
| | 04:29 | So as a web designer, you want to try to
write the most efficient styles as possible.
| | 04:34 | That's really what you are going for.
| | 04:35 | So knowing how and when to group
selectors together can be a really big part of
| | 04:41 | writing those efficient styles.
| | 04:43 | Just be sure to carefully plan out your
styles so that you're only using group
| | 04:46 | selectors when they are appropriate.
| | Collapse this transcript |
| Descendent selectors| 00:00 | If you're limited to only using element,
class, and ID selectors, chances are
| | 00:06 | your CSS would not be very efficient
and that you'd be limited in terms of what
| | 00:11 | you can achieve with your styling.
| | 00:13 | Well, thankfully, there are many other
powerful types of selectors, and some of
| | 00:16 | which we'll explore in just a moment,
but perhaps the most powerful targeting
| | 00:20 | ability CSS gives us is the ability to
combine selectors together in what is
| | 00:26 | known as descendent selectors.
| | 00:29 | By using descendent selectors we can
more precisely target content based on the
| | 00:34 | relationship between
nested tags and their parents.
| | 00:37 | And I want to illustrate this for you.
| | 00:39 | I have descendent.htm opened, and
you can find this file in the 02_09
| | 00:44 | directory. And before we take a look at the code,
I want to just preview this in the browser,
| | 00:49 | so I'm just going to go ahead and
preview this in one of our browsers. And you
| | 00:51 | can see a lot of styling has already
been done for us before we begin to style
| | 00:56 | ourselves, but there are some
styling goals that I want to achieve.
| | 01:00 | First off, I want the site's main
heading, which is this, to look visually very
| | 01:04 | different from any other heading on the page.
| | 01:07 | I also want the subheadings in the
article to look a little bit different, and I
| | 01:11 | am going to limit them to looking that
way--maybe a certain color--only when
| | 01:15 | they're within an article, in case the
page content becomes a little bit more
| | 01:19 | complex or it's used someplace else.
| | 01:21 | I want the headings in the asides,
these two headings, to be similar in their
| | 01:28 | styling to let you know that they're
with an aside, but I want them also to be
| | 01:32 | unique within their own aside.
| | 01:33 | So I have to target them based on
which aside they're inside of. And then
| | 01:38 | finally, I want the body copy here
inside this aside to be a little bit
| | 01:43 | smaller, in terms of line spacing, and have some
margins to adjust it inside the article itself.
| | 01:50 | So those are some pretty big styling
goals, and using just everyday normal
| | 01:55 | element class and ID selectors,
| | 01:57 | we really wouldn't be able to
do this without adding a lot of
| | 02:00 | non-semantic markup to our page.
| | 02:02 | So let's take a look at how
descendent selectors can allow us to do this in a
| | 02:05 | really, really simple way.
| | 02:06 | Okay, so going back into the code, I'm
just going to scroll down a little bit.
| | 02:11 | And in order to use the descendent
selector, you really have to understand the
| | 02:13 | structure of your page.
| | 02:15 | I can see that the site's main heading is
inside the header element, and it's an h1.
| | 02:20 | I can see the article has an h1 inside of
it as well, and its subheading is an h2.
| | 02:25 | So anytime I see a subheading within the
article, it's going to be the h2 inside
| | 02:30 | of this article tag.
| | 02:33 | For my asides, remember, I have two of those.
| | 02:35 | One of them has a class of upcoming, so
it's upcoming events, and then another
| | 02:40 | one has specials, which is the sort of
identifying in the monthly specials.
| | 02:44 | Again, the paragraphs can be found
inside those asides, and we can identify the
| | 02:49 | aside itself by the class that's applied to it.
| | 02:52 | Okay, so now that we know all of those
sort of structural rules around these
| | 02:56 | elements, we can write selectors
to target them a little bit easier.
| | 03:01 | So I'm going to go up to my styles, and I
can see that the formatting has already
| | 03:05 | been written for us.
| | 03:06 | So rather than focusing on all of
the different formatting options, those
| | 03:10 | have already been written. The only thing
we need to do is write the proper selectors.
| | 03:15 | Okay, so what I'm going to do is right
here on line 60 I'm going to write a
| | 03:20 | selector that targets the h1
tag found within the header.
| | 03:24 | Now you might be used to reading from
left to right, but browsers actually read
| | 03:28 | these selectors from right to left.
| | 03:30 | So let me show you what I mean.
| | 03:31 | I'm going to type in header, so I'm
looking inside of header tag, and then do a
| | 03:35 | space and then do h1.
| | 03:36 | So that is a descendent selector.
The whitespace matters.
| | 03:40 | This is saying find every single h1
that you can find inside of a header.
| | 03:46 | Then if I go down a little bit, I can
also say article h2, and that is
| | 03:53 | saying target every h2 that
you find inside of an article,
| | 03:57 | so it's very descriptive, very specific.
| | 03:59 | So you're not limited to
combining only element selectors;
| | 04:02 | you can combine any selector types you want.
| | 04:05 | So I can also say .upcoming, so
remember, that's the class upcoming, h2.
| | 04:12 | So I'm saying hey, find any heading 2
that's inside of an element with the class
| | 04:18 | upcoming applied to it.
| | 04:19 | I can do the same thing right down
here for our next word down here that says
| | 04:23 | .specials h2. And you can see why it's
so important that you know the structure
| | 04:28 | of your code before you
start writing these selectors.
| | 04:30 | And finally, you're also
not limited to only doing two;
| | 04:34 | you can string as many together as you need.
| | 04:36 | So I could say article aside p.
Now it's going to say any paragraph
| | 04:45 | inside of an aside element which is
then found inside of an article element.
| | 04:49 | So that's getting really, really specific.
| | 04:52 | So I am going to go ahead and save
this, and I am going to go back to my
| | 04:55 | browser and preview that.
| | 04:58 | Okay, so here is all my formatting.
| | 05:00 | Notice that the site's main heading
now looks totally different than all the
| | 05:04 | other headings on the page.
| | 05:05 | Our subheadings inside the article
have changed color and they only change
| | 05:09 | color within the article.
| | 05:11 | And our headings inside of our asides
are similar except for the background
| | 05:16 | color. So they do look the same, but
they do identify also that they belong to
| | 05:20 | different asides within there.
| | 05:21 | And then finally, our paragraphs are
a tad bit smaller in terms of the line
| | 05:25 | height, and we've got those
margins that we talked about as well.
| | 05:28 | Now, you we also want to focus on
writing very efficient descendent selectors.
| | 05:31 | So if I go back in my code, I can see
that yes, this is targeting any paragraph
| | 05:36 | inside of an aside which is inside of
an article, but every single time you
| | 05:39 | combine another selector to this,
again you're adding to the overhead of what
| | 05:44 | the browser has to do in order to process this.
| | 05:47 | So if I remove article and just leave
it as aside p and save that and go
| | 05:52 | back to my browser, then I
don't see any change in the formatting
| | 05:56 | whatsoever, no change.
| | 05:57 | Whereas before I sort of had three of
those elements combined into a single
| | 06:01 | selector, two would do.
| | 06:03 | So you want to make sure that you're
using the most effective and efficient
| | 06:06 | descendent selector possible.
| | 06:08 | There's another thing that I want to
point out here before we move on to our
| | 06:11 | next movie, and that is what you're
looking at is you're not looking at just the
| | 06:16 | paragraphs that's
immediately inside of an aside;
| | 06:19 | you're looking at any
paragraph inside of an aside.
| | 06:22 | It doesn't matter how many
elements are between them.
| | 06:24 | So you could have an aside with a
header or a footer or a section inside of it
| | 06:30 | and then a div inside of that and
then a paragraph inside of that and this
| | 06:34 | selector would still work.
| | 06:35 | Don't take this one space by saying
only paragraphs that are immediately
| | 06:39 | inside of an aside.
| | 06:40 | That's any paragraph inside of an aside.
| | 06:43 | If you feel comfortable with this and
you want to play around with it a little
| | 06:45 | bit, why don't you come up with a few
more styling goals and see if you can
| | 06:49 | create the appropriate descendent
selector to target those specific elements?
| | 06:54 | You should practice using descendent
selectors as often as you can, as you're
| | 06:58 | going to be using them over and over
and over again in your styles, and again,
| | 07:02 | you're going to see them over and over
and over again just within this course.
| | 07:05 | When using them, just remember to try to
keep them as small as possible, in terms
| | 07:09 | of the amount selectors
you're combining together.
| | 07:11 | Be mindful of styling conflicts that
they might create with nested elements.
| | 07:15 | We're going to focus on that a little
bit more in the chapter on conflicting
| | 07:18 | styles. And be sure to carefully study
your page structure when planning your
| | 07:23 | styles--that's really, really important.
| | 07:25 | Understanding how content is
structured is going to help you decide when
| | 07:29 | descendent selectors are the best choice.
| | Collapse this transcript |
| Child selectors| 00:00 | Child selectors are very similar to
descendent selectors in that they take
| | 00:04 | advantage of the parent-to-child
relationship when targeting elements on the page.
| | 00:09 | Unlike descendent selectors, however,
they don't apply to all descendents of
| | 00:14 | that parent element,
| | 00:15 | only the elements that are the
direct children of the parent.
| | 00:18 | Now I know that sounds like splitting
here, so let's take a closer look at what
| | 00:21 | that means as we explore
the syntax of child selectors.
| | 00:25 | So here I have the child.htm file
open, and you find that in the Chapter 02
| | 00:30 | folder, 02_10. And I am just going to
preview this in the browser after we talk
| | 00:35 | about the structure for a second.
| | 00:37 | So if I scroll down into the actual
HTML itself, you can see that it's very
| | 00:42 | similar to the file that we just worked with.
| | 00:43 | Here we have a header with an h1 side of it.
| | 00:45 | We have an article with some
paragraphs and an h2. We have those two asides,
| | 00:51 | and both of them have class attributes for
upcoming and specials, and they have h2s as well.
| | 00:56 | Well, it's the h2s inside the asides that I
really want to talk about for a moment here.
| | 01:01 | Notice that both of these asides are
also located inside of this parent article
| | 01:06 | tag, so they are part of that.
| | 01:08 | So when we go up to our
styles and we can see that we have
| | 01:11 | this article h2.
| | 01:13 | Well, if I preview that in my browser,
I can see that the h2 within
| | 01:18 | the articles is getting the styling, but
the h2s inside the asides are as well.
| | 01:24 | Remember, descendent selectors don't care how
deep into the structure of the page they go;
| | 01:29 | they are going to target
any h2 inside that article.
| | 01:33 | So child selectors can help us limit
the styling to h2s that are only direct
| | 01:37 | children of the article.
| | 01:38 | Let's see how that works.
| | 01:40 | So I am going to go back into Aptana
studio, and I am just going to modify our
| | 01:43 | article h2 selector here by using
what's known as a child combinator.
| | 01:48 | We do that by using the
greater than symbol, and that's it.
| | 01:52 | That's all we have to do.
| | 01:54 | So the greater than symbol
is called a child combinator.
| | 01:56 | Whitespace does not matter.
| | 01:58 | I could go ahead and write the syntax like this, where
| | 02:01 | we have no whitespace, or I could add
whitespace on either side, if that makes
| | 02:05 | it more readable for you.
It doesn't really matter.
| | 02:07 | In this case, whitespace
doesn't matter one way or the other.
| | 02:10 | So what this is saying is it's
saying that hey, go find any h2 that is a
| | 02:14 | direct child of article, meaning just
inside of it and not nested in another
| | 02:19 | element deeper within.
| | 02:20 | So if I save this and I go back and
preview this in our browser again--so let me
| | 02:26 | just go ahead and refresh this page--
you can see that the h2 inside of the
| | 02:30 | article that's immediately inside of
it still has that styling, but now these
| | 02:34 | h2s inside the asides don't have
that styling anymore. So, really cool!
| | 02:39 | Let's go take a look at some of the
other ways that we can use child selectors.
| | 02:43 | So if I scroll down into the HTML, I
can see that we have a few lists down
| | 02:46 | here in the asides.
| | 02:48 | So they are mainly unordered lists, but
inside of them, they have ordered lists
| | 02:54 | sort of nested in them.
| | 02:55 | So we have one here, and then we have one
here that pretty much has the same structure:
| | 03:00 | an unordered or bulleted list
with an ordered list inside of it.
| | 03:04 | Okay, so I am going to scroll up just a
little bit here inside my styles again
| | 03:08 | and right after my last style,
| | 03:09 | I am going to write a new
selector that is ol > li.
| | 03:14 | So I like to say greater than, but
really, you should just remind yourself it's
| | 03:17 | the child combinator.
| | 03:19 | That's weird syntax, but that
is exactly what it is. So ol > li.
| | 03:24 | Okay, so let's go ahead
and add some styling to this.
| | 03:27 | I am just going to say font-style:
| | 03:29 | italic, and for color, we are going to do red.
| | 03:32 | So I am going to go ahead and save that.
And if I preview this in my browser and
| | 03:37 | scroll down to these lists, I can
see that it's applying to both of those
| | 03:42 | lists, because both of them have those list
items directly inside of an ordered list, or in ol.
| | 03:49 | So right there it's going
to apply to both of them.
| | 03:51 | Well, these child selectors can be
combined, just like any other selector, into a
| | 03:57 | descendent selector.
| | 03:58 | You can remember those from the previous movie.
| | 04:00 | We just used the whitespace to say, hey,
any one of this instance inside of an element.
| | 04:04 | So let's go ahead and refine this
selector a little bit by making it part of a
| | 04:09 | larger overall descendent selector.
| | 04:11 | So if I limit this, if I say, hey,
aside ol, child combinator, li,
| | 04:16 | I know that looks really confusing, but
this is one selector and this is one selector.
| | 04:22 | If it helps you remember that a little
bit more, you can remove the whitespacing
| | 04:25 | from there and maybe that looks
a little bit more descriptive.
| | 04:29 | Essentially what this selector is
saying is hey, any list item that's found
| | 04:32 | immediately inside of an ordered list,
which is also found inside of an aside,
| | 04:37 | that's who I want to target.
| | 04:38 | So this is incredibly specific.
| | 04:40 | So again, if I save this, go back out
to my browser and refresh it, you'll
| | 04:45 | notice that now only the ordered list
inside the aside is being targeted, and
| | 04:50 | the one outside of it is not.
| | 04:53 | So child selectors are really, really cool.
| | 04:55 | You're probably not going to use
them as much as descendent selectors.
| | 04:58 | It is, however, nice to know that
you have the option of limiting style
| | 05:02 | application to only the direct
children of an element when you need it.
| | Collapse this transcript |
| Adjacent selectors | 00:00 | Adjacent selectors allow you to target
elements based on which elements follow
| | 00:05 | one another in your code.
| | 00:07 | Essentially, adjacent selectors let
you style in an element based on which
| | 00:10 | element comes before it in the document,
providing that both of those elements
| | 00:14 | are inside the same parent.
| | 00:15 | Does that sound confusing?
| | 00:17 | Well, it's really not, once you try it out.
| | 00:19 | So let's go ahead and open
up the adjacent.htm file.
| | 00:23 | You can find that in the 02_11
folder, in the Chapter 2 directory.
| | 00:28 | And I just want to check this in the browser
before we get into writing the CSS for this,
| | 00:32 | so let me switch over to my browser. And
what we have is we have a couple of headlines.
| | 00:37 | This is a heading 1 followed by another
heading 1 which is inside of an article,
| | 00:41 | so the rest of the text is inside
of an article tag. And we have some
| | 00:44 | paragraphs after that,
| | 00:45 | we have some subheadings with paragraphs,
another subheadings with some paragraphs.
| | 00:49 | So what I'd like to do here is to
adjust the spacing between the headings and
| | 00:53 | the paragraphs wherever they're found.
| | 00:55 | I'd also like the initial paragraph
after each subheading to be italicized, just
| | 01:00 | for stylistic purposes.
| | 01:01 | Now this can be very hard to do with
traditional selectors. Even descendent
| | 01:05 | selectors would make this difficult,
and I would probably have to employ some
| | 01:09 | type of class attribute, which would
mean that I'd have to go through all the
| | 01:12 | code and apply a class of the first
paragraph after every single heading.
| | 01:17 | Well, the good news here is that
adjacent selectors allow us to do this without
| | 01:21 | using class or ID attributes.
| | 01:22 | So I'm going to go back to my code, and
I just want to scroll up a little bit
| | 01:26 | till I get into my styles.
| | 01:27 | There are quite a few styles already in
the document, and that's just sort of to
| | 01:30 | handle the default styling that we have.
| | 01:33 | So right here in the *add styles here*
section around line 69, that's where I'm
| | 01:36 | going to add my styles.
| | 01:38 | So adjacent selectors are a lot like
child selectors in the fact that they have
| | 01:42 | a combinator that they use.
| | 01:44 | If you remember from the last movie,
the child combinator is the greater than
| | 01:47 | sign, so adjacent selectors use the plus symbol.
| | 01:50 | So here I'm just going to type in
h2 + p, so that's in the adjacent combinator.
| | 01:57 | And again, whitespace here is
immaterial, so I could write the selector like
| | 02:01 | this, or I could write the selector like that.
| | 02:04 | It's whichever one you're most
comfortable with, whichever one is easier for you
| | 02:08 | to read; both of them will work just fine.
| | 02:10 | All right, so I'm going to go ahead and
open up my curly braces, and inside that
| | 02:14 | I'm just going to do some really basic styling.
| | 02:15 | I'm going to do margin-top.
| | 02:18 | So I'm going to increase the space
above the paragraph by .6ems, so that's .6em
| | 02:25 | and then a semicolon, and then
I'm going to do font-style: italic.
| | 02:31 | And I know for several of these
exercises in this chapter where we're
| | 02:34 | focusing on selectors
| | 02:35 | I'm setting properties and I'm not really
talking about those properties that much.
| | 02:39 | If that's frustrating to you,
please don't get frustrated;
| | 02:41 | we're going to have some chapters
that'll follow this where we get into
| | 02:44 | properties like margins, and font-style,
font-family, typography, things like that.
| | 02:50 | So we will be focusing on those
properties just a little bit later on.
| | 02:53 | Right now, our focus is on targeting.
| | 02:55 | Okay, so going back to this selector,
this basically says find every single
| | 02:59 | paragraph that immediately follows
an h2 if they're in the same parent.
| | 03:05 | So in this case, here's our article tag
that's what our parent element, and if I
| | 03:09 | scroll down, I can find a heading 2 with
the paragraph directly following it so
| | 03:14 | it would target this paragraph
and then any paragraph like that.
| | 03:17 | So I'm going to save this, go back to my
browser, and refresh my page, and you can
| | 03:21 | see, if I scroll down a little bit, it
targeted each of the paragraphs that come
| | 03:25 | directly after a heading 2.
| | 03:27 | We've got our extra space above
it and we have the italicized text.
| | 03:31 | Now one of the things this allows me to
do, just like in normal typography on a
| | 03:36 | page, if I want my subheadings and
paragraphs a little bit closer together to
| | 03:40 | sort of indicate that this section
belongs together and have a greater amount of
| | 03:44 | space above that, this type of
selector makes that a lot easier to do.
| | 03:49 | Now you'll notice that it didn't target
the paragraph that came directly after
| | 03:52 | the h1, and that's because we
were very specific in the saying h2.
| | 03:57 | Now we can group from these selectors
together. So if I go back into my code
| | 04:00 | and go back up to the
selector that we just wrote,
| | 04:04 | it's just as simple for me to say
h1 + p, and that's how we're going to
| | 04:09 | group these together.
| | 04:10 | I can't get really group them together here.
| | 04:13 | So if I try to do this syntax--h1, h2
+ p--that would target every single h1.
| | 04:19 | If I try to do something like this,
where I was saying h1 + h2 + p, that's not
| | 04:26 | going to work either, because that's
basically saying target a paragraph when it
| | 04:30 | comes immediately after an h2
which comes immediately after an h1.
| | 04:33 | So in order to target both instances,
I've got to say h1 + p, so I'm just
| | 04:39 | grouping those together.
| | 04:40 | So again, I'm going to save this, go
back out to my browser and test it, and
| | 04:44 | you'll notice that it's
targeting that paragraph as well.
| | 04:47 | So these adjacent selectors, they're
extremely handy, and they can save you a
| | 04:51 | tremendous amount of time when you're
targeting elements based on when they are
| | 04:56 | found with specific siblings.
| | 04:59 | Now this is particularly useful when
dealing with the interior styling of
| | 05:02 | consistently structured elements.
| | 05:04 | For example, let's say you had a
complex block quote or a pull quote or
| | 05:08 | something like that that you'd
pulled out and it's always going to be
| | 05:10 | structured the same.
| | 05:11 | These adjacent selectors are really
handy at targeting the sort of similar
| | 05:15 | structures and styling them the way
you want to in a very complex fashion.
| | 05:18 | That's one of the things I really love about it:
| | 05:20 | it allows you to style these
elements without using unnecessary class
| | 05:23 | attributes. And if you can really plan
out when to use them, I think you will
| | 05:27 | find them extremely helpful.
| | Collapse this transcript |
| Attribute selectors| 00:00 | Attribute selectors are one
of my favorite selector types.
| | 00:04 | They allow you to target elements
based on the elements' attributes and the
| | 00:08 | values of those attributes.
| | 00:10 | While class and ID selectors allow
styling based on a single attribute type,
| | 00:15 | attribute selectors allow you to use
any attribute you wish, and the syntax
| | 00:19 | is flexible enough to allow you to target
styling based on a number of different factors.
| | 00:24 | So let's go ahead and take a look at this
extremely powerful capability that CSS gives us.
| | 00:29 | I have the attribute-selectors.htm open,
and you can find this in the 02_12 folder.
| | 00:36 | Now I'm going to go over the
structure of our page really quickly.
| | 00:40 | It's a very, very small, short, little
page, but there's a lot going on here that
| | 00:44 | I want to talk about before we
start targeting these elements.
| | 00:46 | So we start off with an unordered list
and inside that, we have individual list
| | 00:52 | items which then contain links.
| | 00:54 | Now it's the links that I
want to really pay attention to.
| | 00:56 | Notice the links all have href
attributes, resource attributes, which tells
| | 01:01 | the browser where it needs to go, or where the
content that it's looking for is located at.
| | 01:05 | And I also have a title attribute that
adds to the accessibility of the links
| | 01:09 | and basically describes what's
going on with the links themselves.
| | 01:13 | Notice that one of them is an external link.
| | 01:15 | It goes out to a site called lynda.com--
I think you've probably heard of it--and
| | 01:20 | the title says visit lynda.com.
| | 01:23 | The second one is a local link, so it
would be linking in the same folder, and
| | 01:26 | it's called about.htm, so it's just
linking to another page, and the title of
| | 01:30 | this one is visit about us.
| | 01:32 | And then finally we have a link to a document.
| | 01:34 | In this case, it would go into a
directory called _docs/plan.pdf, and the title
| | 01:40 | of this one is download our annual report.
| | 01:42 | So maybe that's a link to an
external resource that you might want people
| | 01:45 | to download and use.
| | 01:46 | Now, below this unordered list, we
have some paragraphs, and we have classes
| | 01:52 | applied to those paragraphs. And if
you've never seen this before, this is a way
| | 01:56 | to apply multiple classes to an element.
| | 01:59 | You just add whitespace between them and
you can apply as many classes as you want.
| | 02:03 | So our first paragraph has three
classes applied to it: red, blue, and green;
| | 02:07 | our second paragraph just has red and
green; the third paragraph has red and
| | 02:11 | blue applied to it; and then the fourth
paragraph only has the class red applied to it.
| | 02:15 | So class selectors, we've used those before.
| | 02:18 | We know what those can do for us, and we
know that we could target those elements
| | 02:21 | with class selectors, but we can't
really filter or target them based on how
| | 02:25 | many or which of those are applied to it.
| | 02:28 | So we're going to see how attribute
selectors can allow us to do that as well.
| | 02:31 | So I'm going to go right up to my
formatting, about line 26, where I'm going to
| | 02:35 | start adding my attribute selectors.
| | 02:36 | I'm just going to create a blank line
there, and I'll just start off with the
| | 02:40 | most basic attribute selector you can
use, and that syntax merely targets the
| | 02:45 | presence of an attribute,
| | 02:46 | so let's see how we do that.
| | 02:48 | So I'm going to type in a, so I'm
targeting all of our links, and then for the
| | 02:51 | attribute you use brackets.
| | 02:53 | So I'm just going to go ahead and do
an opening and closing left and right
| | 02:57 | bracket, and then inside those
I'm going to type in the word title.
| | 03:02 | So what this is going to do for me is
it's going to go down to all of my links
| | 03:05 | and it's going to look for which of
them have a title attribute applied to it,
| | 03:09 | and in this case they all have one applied.
| | 03:11 | So then I'm going to go ahead and open
up our curly brace, and inside that I'm
| | 03:15 | going to do some very simple formatting here.
| | 03:16 | I'm just going to type in color: red.
| | 03:19 | So I'm going to save that, and I'll
preview it in one of my browsers, and I
| | 03:24 | notice that all of the links
go ahead and get that styling.
| | 03:27 | The reason this happens is because
every single one of them has this title. So
| | 03:32 | if I were to change this one for just a
moment and then go back and refresh, you
| | 03:38 | can see that it loses that targeting,
and it loses that targeting because it no
| | 03:43 | longer has that title attribute.
| | 03:44 | Okay, well I need that title attribute,
so I'm going to undo that and save it again.
| | 03:49 | Now that's the most basic attribute
selector you can use, and it just basically
| | 03:53 | looks for the attribute.
If it finds it, it applies the styling.
| | 03:56 | It doesn't matter what the value is.
| | 03:58 | Well, one of the really cool things
about attribute selectors is that you can
| | 04:01 | also check for specific values if you'd like.
| | 04:04 | So I can get a lot more specific with this.
| | 04:06 | I'm going to go right back into that selector
and after title, I'm going to type in equals.
| | 04:11 | Now, we'll just go ahead and
target the one we deleted a second ago.
| | 04:14 | In quotation marks, I'm going
to type in visit lynda.com.
| | 04:19 | Now it's really important that you
type the case-sensitive spelling. Anything
| | 04:23 | inside the quotation marks you have to get
it exactly the same way it is on the page.
| | 04:28 | So if I save that, test it in my browser,
I can see that now the styling only
| | 04:35 | applies to the first link because
it's the only one that has that explicit
| | 04:39 | title attribute value.
| | 04:41 | Now we can also further modify our
attribute selectors to deal with not only the
| | 04:46 | contents of an attribute, but match
different patterns of that content as well.
| | 04:51 | I'm going to just below this selector, and
I'm going to start targeting our paragraph.
| | 04:56 | So I'm going to type in p. Once again,
I'm going to open and close one of those
| | 05:00 | left and right brackets, and I'm just
going to type in class="red," so nothing
| | 05:05 | really new in terms of what we're doing here.
| | 05:07 | I'm going to go ahead and open up my
curly braces, and I'm just going to apply
| | 05:11 | the same styling, color: red.
| | 05:13 | So I'll save this and refresh my
browser, and I notice that only the last
| | 05:20 | paragraph is targeted.
| | 05:22 | Now you may have had this
thought while looking at the code: hey!
| | 05:25 | How is this different than a class selector?
| | 05:27 | How is that different than just
saying p.red? Well, it's not.
| | 05:31 | It's exactly the same actually.
| | 05:33 | So that's one of the
interesting things about this.
| | 05:35 | In many ways that's a lot like a class
selector; however, it only targeted the
| | 05:41 | last paragraph, and that's
because this value must match exactly.
| | 05:46 | When I go down into my code, I can see that
this is the only one indeed that just has red.
| | 05:53 | Well, what if I wanted to target
every single one of these that has the red
| | 05:57 | class applied to it, even though these have
multiple classes applied to it? How do I do that?
| | 06:02 | Well, again, one of the nice things
about attribute selectors is that they allow
| | 06:06 | us to match patterns as well.
| | 06:08 | So here is what I want you to do.
| | 06:10 | Go right back up here and just before the
equal sign, I want you to type in a tilde.
| | 06:14 | Now if you've never used a tilde before,
hold the Shift key down and just press
| | 06:18 | the key, normally on left of the
number one character, and that's your tilde.
| | 06:22 | So this ~=, this is a pattern matching,
and it basically says go ahead and look
| | 06:29 | for a whitespace-separated
list that includes this word.
| | 06:33 | So, it's specifically looking for
those whitespace characters in between
| | 06:37 | words, so it's looking for any instance of an
attribute where multiple values might be used.
| | 06:43 | So if I save this, go back into my
browser and test it, now I see all of those
| | 06:49 | paragraphs get that styling because
each one of them has that red as one of the
| | 06:54 | single values in the class attribute.
| | 06:57 | So again, the tilde allows
us to go ahead and say, hey!
| | 07:00 | Anytime this attribute, as well as
any other attributes, are applied to it,
| | 07:04 | go ahead and style it.
| | 07:05 | Now there is other pattern
matching that we can do as well.
| | 07:08 | Let's revisit our link selector and
kind of play around with those a little bit.
| | 07:11 | I'm going to go back up to my link
tag, and I'm going to change the title
| | 07:15 | attribute to href, so now we're
looking at the href attribute. And right
| | 07:20 | before the equals sign
I'm a type in a caret character.
| | 07:24 | So, that caret character just above
the six, this says go ahead and match any
| | 07:28 | string that begins with a certain value.
And in this case, I'm going to change
| | 07:33 | visit lynda.com to http://.
| | 07:37 | So now what this is doing is it's saying, hey!
| | 07:39 | Find any href attribute--which would be this--
that begins with this literal string.
| | 07:46 | So in essence, this is a way to target
any external link, because when you do an
| | 07:50 | absolute link, you're going to
be using http, more than likely.
| | 07:53 | Of course, you could also group it with
https if you're using external secured links.
| | 07:59 | So if I go ahead and save this and
refresh my browser, I can see that once
| | 08:03 | again, the styling is only applied to
the top link, because that is the only
| | 08:06 | absolute or external link that we're using.
| | 08:09 | Now there is more matching
that we can do here as well.
| | 08:11 | The same way that this targets the
beginning of a string, if instead of the
| | 08:15 | caret, you used the dollar sign--and again,
note that whenever we do these things
| | 08:19 | there is no whitespace in here whatsoever.
| | 08:22 | But when we use the dollar sign, instead of
looking at the beginning of a string,
| | 08:26 | we're looking at the end of the string.
And in this case, I'm going to go ahead
| | 08:30 | and change this to PDF.
| | 08:33 | So now it would look through all your
links and find any links that ended with
| | 08:37 | PDF, which would be in this case
resource links, and if I save that and test it,
| | 08:44 | notice that again we are
targeting the PDF download link.
| | 08:49 | In the last two cases we've done
matching for the beginning of a literal string
| | 08:53 | and the end of a literal string. What if
you want to just test for the existence
| | 08:58 | of a word within a literal string?
| | 09:00 | Well, you can do that one as well.
| | 09:02 | So if I highlight in this case and
change my attribute to looking for title
| | 09:06 | again and now instead of the care or the dollar
sign I use the asterisk or the wildcard symbol,
| | 09:12 | so it's title*= and I'm just going to
type in in quotation marks the word visit.
| | 09:19 | So now what that's going to do is
it's going to look through any title
| | 09:22 | attribute of the link and it's going
to find any literal string that has the
| | 09:26 | value visit inside of it.
| | 09:28 | And in this case we can see that these
two links have visit inside of it, so
| | 09:32 | we're anticipating that it will target those.
| | 09:34 | So if I save this and test it,
indeed it targets those first two links.
| | 09:40 | Now it's not looking for that word
visit in any one certain location in
| | 09:44 | the literal string;
| | 09:45 | it's looking for it anywhere.
| | 09:46 | So if I go back into my code and I
take the word visit and say please visit
| | 09:54 | about us and save it, you can see the
styling still works because the word visit
| | 09:59 | is located somewhere within that title.
| | 10:02 | Now you might be wondering okay,
what's the difference between this and this,
| | 10:07 | because aren't both of them sort of
matching that word wherever it's found?
| | 10:11 | It is, but in the case of the tilde
it's looking for that attribute value in a
| | 10:15 | series of whitespace-separated attributes.
| | 10:18 | For example, when you apply a class and
use whitespace, it doesn't look at that
| | 10:22 | as a literal string;
| | 10:23 | it looks that as multiple values being
applied. Whereas within the title this
| | 10:28 | whitespace is just seen as
part of a larger literal string.
| | 10:32 | So the star, or the wildcard character,
targets literal string values, whereas the
| | 10:37 | tilde targets full attribute values
that are just separated through whitespace.
| | 10:41 | It sounds like a minor
difference, but it's really not.
| | 10:43 | It actually a pretty large difference.
| | 10:45 | Now you can use this to create
all kinds of really cool formulas.
| | 10:49 | For example, if I go back up to this
title and change it to href, notice one of
| | 10:54 | the things that I can do here is I can
change visit to _docs, and that would
| | 10:59 | look for any link that's looking
for a resource within the docs folder.
| | 11:04 | So that could be a Word document, a PDF,
an Excel document, anything, it would
| | 11:08 | all match. And if I save this and test
it, I can see that indeed the styling is
| | 11:12 | only applied to that particular resource.
| | 11:15 | So there's a lot that we can do with
attribute selectors, and you've got all
| | 11:18 | those different variations or
formulations of the attribute selectors that
| | 11:23 | allows you to target really, really
specific instances, and you could do all
| | 11:27 | sorts of really cool things.
| | 11:28 | You could, for example, add an icon to
all external links to let people know
| | 11:32 | that clicking on them will
take you outside of the site.
| | 11:35 | You could add a PDF icon for every PDF
that you're asking somebody to download,
| | 11:39 | and they could sort of visualize which links
are going to allow them to download a file.
| | 11:43 | So there is all manner of things that
you can do to it, and that's not even all
| | 11:47 | of the different
variations on attribute selectors.
| | 11:49 | It's really close. I think it's
certainly enough to give you an idea of just
| | 11:52 | how powerful these selectors are.
| | 11:55 | Now support for attribute selectors
isn't that great in some of the older
| | 11:58 | browsers, especially when you get
down to some of the substring matching
| | 12:02 | versions; some of the really basic
ones were supported a good while ago, but
| | 12:05 | some of the substring matching ones, the
support for them is still relatively new.
| | 12:09 | So if you're going to use them, make
sure you test your pages thoroughly in all
| | 12:14 | the browsers that you're
targeting before committing to them.
| | 12:17 | I also recommend checking out the
Selectors Level 3 Specification, which you can
| | 12:22 | find here at w3.org/TR/selectors.
| | 12:26 | It has a whole section on attribute selectors.
| | 12:29 | It's a great way to learn a little
bit more about those pattern-matching
| | 12:32 | attribute selectors that we have just covered,
| | 12:34 | take a look at some of the ones that
we didn't get to cover, and it's a great
| | 12:38 | reference for you to use when you're
writing these attribute selectors for
| | 12:42 | your own sites.
| | Collapse this transcript |
| Pseudo-class selectors| 00:00 | So far, we have discussed how you can use
selectors to target elements on the page.
| | 00:05 | All the selectors we've used up to this
point rely on something called the DOM,
| | 00:09 | or the Document Object Model.
| | 00:12 | The DOM is simply a structural
representation of all the elements on the page.
| | 00:16 | Most of the time it's referred to as a
tree, as you can traverse up and down the
| | 00:21 | tree to retrieve elements or the contents.
| | 00:24 | That's basically what a
browser does with your selectors.
| | 00:27 | You're instructing it to traverse the
DOM and targets the elements that it finds
| | 00:31 | that match your criteria.
| | 00:33 | Most of the time that's all you
really need, but there are times when you're
| | 00:37 | going to need the target elements that
either exist outside of the DOM or target,
| | 00:41 | say, the current state of an element.
| | 00:43 | In many cases, elements can change
based on user input, or other factors: links
| | 00:48 | can be hovered over, buttons can
be clicked and checkboxes checked.
| | 00:52 | So what do we do then?
| | 00:53 | Well, then, we can turn
to pseudo-class selectors.
| | 00:56 | Pseudo-class selectors allow us to
target elements that lie outside of the DOM,
| | 01:01 | perhaps based on current state or
elements that are too specific to be targeted
| | 01:06 | with the simple selectors that we've been using.
| | 01:08 | Now before we get into using
pseudo-class selectors, I want to take a moment to
| | 01:12 | give you a brief overview of the
different types, since we won't be covering all
| | 01:16 | pseudo-class selectors in this course.
| | 01:18 | Pseudo-class selectors consist of a
colon followed by the selector itself.
| | 01:23 | They are usually preceded by the
element that you wish to target, based on its
| | 01:27 | state, and can be combined with
other simple selectors as well.
| | 01:31 | Here you see a pseudo-class selector
that targets a link when the link is being
| | 01:35 | hovered over by the user, and also an
example of a pseudo-class selector being
| | 01:39 | used in a descendent selector--so in
this case, a link that's being hovered over
| | 01:43 | inside of an unordered list.
| | 01:45 | The hover pseudo-class selector
that you see here belongs to a group of
| | 01:49 | pseudo-class selectors known as dynamic.
| | 01:52 | Dynamic pseudo-class selectors target
elements based on something other than
| | 01:56 | attributes, content, or element type.
| | 02:00 | Usually this refers to something that
can change over time or something that's
| | 02:04 | based on user interaction.
| | 02:06 | We will take a closer look at these
types in just a moment as we style links
| | 02:10 | based on the current link state.
| | 02:13 | There's also another group of pseudo-
class selectors known as UI element state
| | 02:18 | pseudo-class selectors.
| | 02:19 | That's kind of a mouthful.
| | 02:20 | Well, these can be used to target user
interface elements based on whether or
| | 02:24 | not the element is enabled.
| | 02:27 | This group of selectors is relatively
new and support really isn't widespread
| | 02:31 | at the current time.
| | 02:33 | However, with the continuing rise of
online applications, these styles will
| | 02:37 | continue to grow in importance as
implementations in browsers and other
| | 02:41 | user agents are refined.
| | 02:43 | I recommend reading through the
specification to learn a little more about them.
| | 02:47 | Now the structural pseudo-class
selectors allow you to target elements based on
| | 02:52 | very specialized information within the
DOM that simple selectors like classes,
| | 02:57 | IDs, and elements don't allow you to access.
| | 02:59 | For example, the nth-child selector.
| | 03:02 | Now this one allows you to target
elements based on the pattern that they fit
| | 03:06 | into, regarding their sibling elements.
| | 03:10 | Using selectors like these, you can
target elements based on whether or not they
| | 03:14 | are the odd- or even-numbered children,
whether they are the first or last child
| | 03:19 | of a parent element, and in more patterns.
| | 03:21 | And we are going to explore those
in more detail in just a moment.
| | 03:24 | Now, a couple pseudo-class
selectors really don't fit into any one category.
| | 03:28 | Those selectors like target and
language give you even more specialized
| | 03:32 | targeting capabilities.
| | 03:34 | As always, I recommend reading the
specification carefully regarding
| | 03:37 | pseudo-class selectors and
studying what is and what is not currently
| | 03:41 | supported within browsers.
| | 03:43 | Now in most sites, you'll be using
pseudo-class selectors a good bit, so making
| | 03:47 | sure you have a firm grasp on how
they work is critical to your ability to
| | 03:51 | author efficient styles.
| | Collapse this transcript |
| Dynamic pseudo-class selectors| 00:00 | In this movie, I want to take a closer
look at pseudo-class selectors, starting
| | 00:04 | with the most common pseudo-class
selectors, the dynamic group of pseudo-class
| | 00:08 | selectors that allows us to style
links and link states, and the target
| | 00:13 | pseudo-class selector.
| | 00:15 | So I have the pseudo-class.htm file open
from the 02_14 folder, and again there is
| | 00:22 | not a lot going on here in this page.
| | 00:24 | Let's just take a quick look at the code.
| | 00:26 | We have an unordered list with four
links into it: one's going to a page called
| | 00:31 | products, about us, contact us, and sign up!
| | 00:33 | None of these pages really
exist except for the products page.
| | 00:36 | We don't have to open it, but it is
going to allow us to check out the
| | 00:39 | whole visited link thing.
| | 00:40 | And we have another paragraph that has a
link inside of it, and this one doesn't
| | 00:44 | have an href attribute. It just has an id.
| | 00:46 | So this would be more of an
anchor link that allows us to link to
| | 00:50 | certain section of a page.
| | 00:51 | That's a pretty common technique. And we
have a pseudo-class selector that allows
| | 00:55 | us to target those elements as well.
| | 00:57 | So let's go ahead and get into writing
our styles. And the first thing I want
| | 01:00 | to do is I'm going to scroll up, because
I've got a rule here that doesn't have
| | 01:03 | a selector and this is going to be sort of
our basic default link styling if you will.
| | 01:08 | So I'm just going to go right up there
and add the very simple element selector
| | 01:13 | a, so that I'll target any link on the page.
| | 01:15 | I want to save that, and I'm just going
to preview that in one of my browsers.
| | 01:20 | And when I do that, I can see that
it's targeting all of our links, even this
| | 01:24 | sort of anchor target element that we
don't really want to have that styling.
| | 01:29 | So right now these guys all have the styling.
| | 01:30 | They're looking nice.
| | 01:31 | It looks more like a menu, but I don't
want this to have that styling at all.
| | 01:35 | Well, one of the things that you can
do--I'm just going to jump back into
| | 01:37 | my code real quick--
| | 01:38 | well one of the things that you can do
is you can use a pseudo-class selector
| | 01:42 | to limit it to just actual active links.
| | 01:45 | So I'm going to type in after the a:--
so there is our pseudo-class--link.
| | 01:50 | Now very important here for the syntax,
there is no whitespace between these.
| | 01:54 | So normally there is a lot of
combinators where I've told you hey, spacing
| | 01:58 | doesn't really matter;
| | 01:59 | it does matter in this case.
| | 02:00 | So we want to make sure that
there is no whitespace there.
| | 02:03 | Now what does this do?
| | 02:04 | Well, link basically says hey, make
sure you're targeting any actual links on
| | 02:08 | the page, and by link it means that
any link that has an href attribute.
| | 02:14 | You'll note that the
anchor link down here does not.
| | 02:17 | So if I save this and preview this in my
browser again--I'm just going to refresh this--
| | 02:23 | you can see that now this anchor link
down here is not getting that styling
| | 02:27 | anymore, but these links that have the
href attribute are still getting that styling.
| | 02:32 | Let's take a look at some of the other
pseudo-class selectors that we can use.
| | 02:35 | So directly underneath that one, in this
little add styles here area, I'm going
| | 02:39 | to create another pseudo-class selector
with a, so a:visited, and I'm just going
| | 02:46 | to go ahead and change its color to black.
| | 02:51 | Now we're going to go ahead and style
these and then I'm going to talk about
| | 02:53 | these link pseudo-class selectors,
because there are a couple of things that you
| | 02:57 | need to know about them that are very important.
| | 02:59 | Next, when I am done, I'm going to
go to a and then hover, and we'll go ahead
| | 03:03 | and give that one a background of
orange. And then after that, we're going to do
| | 03:10 | a:active, and for that one we're
going to give it a background of green.
| | 03:17 | So let's talk about these really quickly.
| | 03:20 | So basically if you learn nothing
more about pseudo-class selectors over the
| | 03:24 | course of learning CSS, I guarantee
that you'll at least learn these four: link,
| | 03:29 | visited, hover, and active.
| | 03:31 | Obviously they refer to link states:
link referring to any link with an href
| | 03:34 | attribute; visited referring to any
link that the user of the page has already
| | 03:38 | visited; hover, any link that's being
actively hovered over; and the active link
| | 03:43 | is a link that is either in focus
or is currently being clicked on.
| | 03:46 | Now the order in which you
write these is very important.
| | 03:49 | As a matter of fact, some people
have come up with a mnemonic device of
| | 03:52 | love-hate, so LVHA for link, visited,
hover, and active, and that's the order that
| | 03:59 | you want those in if you're
going to write them separately.
| | 04:01 | For example, if you put visited
after hover then the visited styling will
| | 04:06 | overwrite the hover styling.
| | 04:08 | So you want to make sure they're in
that order if you're going to use them.
| | 04:10 | A lot of people group these together.
| | 04:12 | They'll group the link and the visited
styles together, and the hover and the
| | 04:15 | active styles together if
they want those to be the same.
| | 04:18 | Now one thing about visited styles as
well: browsers, over the last couple of
| | 04:22 | years, realized that there was a
little bit of a security leak with visited
| | 04:27 | links, that browsers and sites could
detect where a user has been and what the user
| | 04:31 | has been doing through the visited
link state, so they hide a lot of that now
| | 04:35 | from the active user.
| | 04:36 | About the only thing that you can
still do with visited link styling without
| | 04:39 | getting into the browser's
behavior itself is styling the color.
| | 04:43 | That's about the only
attribute that's left to us.
| | 04:45 | So I'm going to go ahead and save
this and go back into my browser and just
| | 04:50 | refresh the page, or preview it, either way.
| | 04:53 | And now I noticed that when I hover
over the links I get that orange background
| | 04:57 | color--that's for my hover styling.
| | 04:59 | If I click on a link, you'll notice
if I click and hold the mouse down, it
| | 05:02 | just becomes green.
| | 05:03 | Let's say I visit a page and I clicked
on the Products page on purpose, because
| | 05:07 | that one is actually in the folder.
And now if I hit the Back button, notice
| | 05:11 | that it's getting that visited styling
so that black text is there because of
| | 05:15 | the visited styling.
| | 05:17 | So, all of those are working.
| | 05:18 | We get green when we're clicking on
link, and then if we've visited the link, we
| | 05:23 | get black, and we're
getting orange for the hover.
| | 05:26 | Now in a lot of menus you don't want
to do this, where you're actually showing
| | 05:29 | the visited styling.
| | 05:30 | That's why a lot of people will go
ahead and group the visited styling along
| | 05:34 | with the link styling, so
that nothing really changes.
| | 05:37 | In some cases, it's okay to just leave it off.
| | 05:39 | There really isn't a default visited
style, except for browsers have a default
| | 05:44 | visited color of purple.
| | 05:45 | You've probably seen that where you've
clicked on a link, gone back, and then
| | 05:48 | underlined blue text changes to purple.
| | 05:50 | So a lot of people will group visited
and link styles together just to prevent
| | 05:54 | that purple from showing up.
| | 05:55 | Okay, there's one more pseudo-class
selector that I want to take a look at, and
| | 05:59 | it's target. And it can be a little hard to
demonstrate exactly how and why this works,
| | 06:02 | so let's take a look at it.
| | 06:03 | I'm going to go back into our code and
just below the a:active, I'm going to
| | 06:09 | create one more selector. I'm going to
type in a:target, and for that styling,
| | 06:15 | I'm just going to change the color to red.
| | 06:17 | All right! Now I'm going to save this.
And target is a very, very specific type of selector,
| | 06:23 | so if I preview this again in the
browser and refresh my page, you can
| | 06:28 | see nothing happens.
| | 06:29 | I'm not getting that red styling,
although I am getting a hover styling, which is
| | 06:32 | nice, but that's really all I'm getting.
| | 06:35 | Okay, so target has more to do with the
URL than it does the actual page itself.
| | 06:40 | You may have done this before where
you've had an ability to click and jump
| | 06:44 | further down the page, or maybe even
click on an external link and take you to a
| | 06:48 | certain section of the page.
| | 06:50 | That's typically using the sort of
anchor link. And in the URL, the URL has given
| | 06:55 | a specific target or a specific focus.
| | 06:57 | We do that in a URL query
string by using the pound symbol.
| | 07:00 | So, after pseudo-class.htm in my
address bar up here, if I type in #target,
| | 07:06 | that's targeting any element on the
page with an id of target. And if I hit
| | 07:10 | Return, you can see that now the word
target is now getting that red styling
| | 07:15 | because it is now the target of the URL.
| | 07:18 | And just so that you're not confused
with that name, the ID could be anything.
| | 07:23 | So if I come back in here and I change
the ID to section1 and save that and if
| | 07:30 | I go back to my browser and change
this to section1, you'll notice that we
| | 07:36 | still get the styling.
| | 07:37 | So it's really more about matching
that ID value than the word target.
| | 07:41 | I don't want you to get confused by that.
| | 07:42 | Now over the course of writing
your styles, you're going to use these
| | 07:45 | pseudo-class selectors a lot--
maybe not the target one so much, but
| | 07:49 | definitely the links.
| | 07:50 | The links pseudo-class selectors alone
will probably find themselves in almost
| | 07:54 | every single style sheet you write.
| | 07:55 | Now because of this, it's really
important for you to become familiar with their
| | 07:59 | syntax and the range of states
and behaviors that you can target.
| | 08:03 | They are also adding pseudo-class
selectors to the specification all the time,
| | 08:07 | especially with HTML5 adoption leads to
more and more web and mobile applications
| | 08:11 | being built within that sort of HTML,
CSS, JavaScript, stack of technologies
| | 08:16 | that everybody is using.
| | 08:17 | So be sure to read through the pseudo-
class selectors section of the Selections
| | 08:21 | Level 3 Specification and keep up to
date with its changes and the changes that
| | 08:26 | are being made to browser implementation.
| | Collapse this transcript |
| Structural pseudo-class selectors| 00:00 | In addition to dynamic pseudo-
class selectors, you have structural
| | 00:04 | pseudo-class selectors that allow
you to target elements based on more
| | 00:08 | complex patterns within the DOM.
| | 00:11 | Now what this means is that you can
target elements based on conditions like
| | 00:14 | whether or not they are the first
child of an element, whether they are the
| | 00:17 | only child of it, and other factors. So let's
take a closer look at some of those selectors.
| | 00:22 | And before we get into the code of this,
I just want to show you the page that
| | 00:25 | we are going to be targeting.
| | 00:26 | So I am going to switch over to my
browser, and here I can see that it's a
| | 00:30 | little bit more complex of a
page than what we've been using.
| | 00:32 | It looks a lot like one we were using
in one of the previous exercises, however,
| | 00:36 | where we were targeting the first
paragraph after heading, for example, and
| | 00:39 | we're going to sort of
extend what we're doing there.
| | 00:42 | So we still have those styling needs.
| | 00:44 | We are going to be styling some of
those headlines, some of the main text that
| | 00:46 | comes directly after them. And one of the
things I really want to do is I want to
| | 00:50 | indicate the beginning of
each section by using this line.
| | 00:54 | But not all of the subheadings are the
beginning of a section, so I need some
| | 00:58 | way of sort of filtering those out.
| | 01:00 | And that's one of the things I really
like about the structural pseudo-class
| | 01:03 | selectors: they allow me to do this
really complex targeting without using any
| | 01:07 | class attributes, so I am a big fan of that.
| | 01:09 | All right, I am going to jump back
into my code, and just again to sort of
| | 01:12 | reinforce what we were talking about, we
have an article and inside that article
| | 01:16 | we have multiple sections. The
first section is followed immediately by an
| | 01:20 | h1, but every other section after
that has an h2 that begins the section.
| | 01:26 | Now, one of the sections has multiple
h2s in it. So if we go to this one, for
| | 01:30 | example, we have a beginning h2, and
then we have another h2 that's still inside
| | 01:34 | the section, but it's not the
first heading of the section.
| | 01:37 | And then at the very bottom of this, we
have a paragraph that happens to be the
| | 01:41 | only element of the section.
| | 01:43 | Okay, so now that we know kind of how
the page is structured and kind of some of
| | 01:47 | the things what we want to target,
let's go back up and see how structural
| | 01:50 | pseudo-class selectors can help us do that.
| | 01:52 | Okay, so the first thing I
want to do is target these spans.
| | 01:56 | You'll notice that each of the
initial paragraphs in a section have part of
| | 02:00 | their first paragraph wrapped in a
span tag, and this is going to allow me
| | 02:03 | to sort of do some really customized
styling to the first paragraph of every section.
| | 02:08 | So I am going to right up to where it
says add styles here, and inside that I am
| | 02:12 | going to type in span and then a
colon, because remember every pseudo-class
| | 02:17 | selector uses that colon as part of the
syntax with no space, and then I am just
| | 02:21 | going to type in first-child.
| | 02:25 | So I am going to open up my brackets.
| | 02:27 | And essentially what first-child is is
it's saying hey, find every span in
| | 02:32 | the document and if it's the first
child of its parent element, go ahead and
| | 02:35 | give it this styling.
| | 02:36 | So it won't apply to every single span,
just when that span happens to be the
| | 02:40 | first child of its parent element.
| | 02:42 | So what I am going to do here is I am
going to say font-size 1.3ems, font-weight,
| | 02:52 | and that's going to be bold,
and color is going to be maroon.
| | 02:57 | Okay, so I am going to go ahead and save that.
| | 03:00 | I am going to go back into my browser,
refresh the page, and you can see that
| | 03:04 | all of those initial paragraphs, the
text that I have surrounded with the span
| | 03:08 | tag because it's the first child of
its parent paragraph, goes ahead and gets
| | 03:12 | that styling. Cool!
| | 03:13 | Now back in my code, I want to address the
problem that I was having with those subheadings.
| | 03:18 | I only want the subheadings to have a
border underneath it if they're the first
| | 03:23 | subheading in a section--and I don't
want every subheading, just the first one--
| | 03:26 | because that indicates sort of
the beginning of the section.
| | 03:29 | So what I am going to do is I am going
to go ahead and write the selector for
| | 03:32 | this just below the span.
| | 03:34 | I am going to type in h2:first-of-
type and open up my curly braces.
| | 03:43 | So what this is doing is it's saying,
hey, go ahead and take a look at h2s.
| | 03:48 | I'll find all the h2s, and then look
and see when they are inside of another
| | 03:52 | element, inside of a parent element.
| | 03:53 | When they are the first h2 within
that parent element, style them.
| | 03:58 | So it'll ignore every single one after it.
| | 03:59 | It's just first of type.
| | 04:01 | So I am going to scroll up a little
bit into my existing styles, and I can see
| | 04:04 | that all the h2s have this
border-bottom property applied to it.
| | 04:07 | I am going to cut that property out--so
I am just using Command+X or Ctrl+X to
| | 04:11 | do that--and then if I scroll back down
to that selector, I can just paste that
| | 04:16 | styling right in the selector.
| | 04:18 | I don't have to write that over again.
| | 04:19 | So I am going to save that, and now if I
preview this and refresh my page, I can
| | 04:25 | see as I scroll down, the first
subheading in this section is getting the border,
| | 04:29 | but the second subheading is not.
| | 04:32 | That's allowing me to target that
very complex pattern without using class
| | 04:36 | attributes or class
selectors, so that's really nice.
| | 04:39 | Now I should point out that typically
if you see a first-child, there is also
| | 04:43 | a last-child option.
| | 04:45 | If you see a first-of-type,
there is also a last-of-type option.
| | 04:48 | You know you can match those also
if they are the last element within a
| | 04:52 | parent element as well.
| | 04:53 | Now let's go down and do one more
structural pseudo-class selector.
| | 04:56 | I just want the h2. I am going to do p:only-child,
and I am going to go ahead and just do some
| | 05:04 | really basic styling here.
| | 05:05 | I am just going to do font-style:
italic; text-align: center.
| | 05:13 | I am going to save that and now if I
go back into my browser and refresh this
| | 05:18 | page, when I scroll down, I can see right
here where this paragraph says, "I am the
| | 05:23 | only element within this section,"
it goes ahead and gets that styling.
| | 05:26 | Now there are some variations on this as well.
| | 05:28 | This p:only-child is basically saying
that hey, whenever you find a paragraph
| | 05:32 | and that paragraph is the only child inside
of a parent, go ahead and give it that styling.
| | 05:36 | There is also only of type, so you
could basically say that hey, when I'm the only
| | 05:40 | paragraph inside of a parent element
style me like this. But in terms of only-child,
| | 05:44 | you're targeting it only when
it's the only child within that.
| | 05:47 | So the thing I like about these is
that you can use these structural
| | 05:51 | pseudo-class selectors to achieve far
more complex targeting than we could ever
| | 05:55 | do with simple selectors. Like I said
earlier, in many cases it's going to save
| | 06:00 | you from having to resort to using non-
semantic classes to mainly go in and
| | 06:04 | target those elements where you
just want to add some visual styling.
| | 06:07 | Now I do feel like I should point out
here that not all pseudo-class selectors
| | 06:11 | are supported evenly across browsers,
and especially browser versions, so older
| | 06:15 | ones don't have as widespread support
for some of these really specific ones.
| | 06:19 | So be sure to go ahead and check for
browser compatibility before you begin using them.
| | 06:24 | Now there are also a few other structural
pseudo-class selectors that I didn't cover here.
| | 06:28 | One of them specifically is called nth-
child, and we're going to talk about that
| | 06:33 | in its own movie, because there's so
much that you can do with nth-child.
| | 06:36 | But be sure to read through the
Selectors Level 3 Specification and explore all
| | 06:41 | of the structural pseudo-class
selectors that you have available to you.
| | Collapse this transcript |
| Nth-child selectors| 00:00 | Of all the structural pseudo-class
selectors, the most complex of them are the
| | 00:04 | nth-child pseudo-class selectors.
| | 00:07 | Nth-child selectors allow us to target
elements based on patterns that describe
| | 00:12 | which elements within a
parent that you should target.
| | 00:15 | Now we have four flavors of
nth-child selector available to us.
| | 00:19 | There is nth-child, nth of type,
nth last child and last of type.
| | 00:25 | Now the syntax of these selectors can
seem a little odd the first time you see it.
| | 00:29 | In fact, I've pulled up the Selectors
Level 3 specification for you to take a
| | 00:34 | quick look at this, and you can see
here are a couple of examples of the
| | 00:39 | nth-child syntax, and this is the symbol syntax.
| | 00:41 | So the first time you see this,
it can be a little overwhelming.
| | 00:44 | It looks like you're doing math.
| | 00:45 | You've got this weird stuff
going on here. But don't panic.
| | 00:48 | It's actually pretty easy syntax.
| | 00:50 | The only difference with nth-child and
some of the others syntax that we are
| | 00:53 | using is that you have the sort of
argument that you can pass values into and
| | 00:58 | that describes the pattern
that is going to be targeted.
| | 01:01 | It makes a lot more sense once you
start working with it a little bit,
| | 01:04 | so we are going to jump into our
exercise files and start working with
| | 01:08 | the nth-child selector.
| | 01:09 | Okay, so here I've opened up the
nth-child.htm, and you can find that in
| | 01:13 | the 02_16 directory.
| | 01:17 | Now, very simple page structure.
| | 01:19 | We just have an ordered list on the
page and inside that ordered list
| | 01:23 | there are twenty items, all list items, and
we are going to use nth-child selectors
| | 01:28 | to target some of those list items.
| | 01:30 | Now we have some default styling.
| | 01:32 | We just have sort of a beige background
color for these and if I were to preview
| | 01:35 | this in my browser, you can kind
of see what we have going on here.
| | 01:39 | We just have beige backgrounds
for each of these list items.
| | 01:44 | So what I am going to do is in the
styles of my document, just below the
| | 01:48 | existing li style, I am going to
write a very simple nth-child selector.
| | 01:51 | I am going type in li:--so
again it is a pseudo-class selector,
| | 01:57 | li:--nth-child and then immediately
after nth-child no spacing; I have to open
| | 02:04 | up a parentheses. And what I am going to do
here is I am just going to type in the number 2.
| | 02:09 | So I am passing in the number 2.
| | 02:12 | After that, I am going to open up my
brackets and I am just going to type in background: tan.
| | 02:17 | Okay, Aptana doesn't like tan, but I
assure you, that color is supported by browsers.
| | 02:23 | So, again what we've got going on
here is we are saying, hey, nth-child, go
| | 02:26 | through the pattern and match it, and we
are just passing the number 2, and that's
| | 02:30 | going to tell it to target the
second element within that pattern.
| | 02:33 | So I am going to go ahead
and preview that in my browser.
| | 02:37 | So let me just refresh that, and you
can see that indeed it goes ahead and
| | 02:40 | targets the second item with that styling.
| | 02:43 | So when you pass a single number in
that, it's just going to count down
| | 02:46 | through the items in the parent
element, and it's going to target the one
| | 02:49 | you're looking for.
| | 02:50 | Now I want to point out
something very important about this.
| | 02:53 | We are going to be using ordered lists
for this example, and the ordered list is
| | 02:58 | typically, in terms of children, it's
going to just have list item children, but
| | 03:02 | occasionally you're going to have
repeating structures that have additional
| | 03:05 | elements inside of it.
| | 03:06 | That's very important for you to know
that even though we are targeting list
| | 03:10 | items, it's looking through every single
child when it does this, not just list items.
| | 03:16 | So for example, if I said p here,
instead of a paragraph--this is bad syntax,
| | 03:20 | so just bear with me for a second here;
| | 03:22 | I am just illustrating the concept.
| | 03:24 | Now if I save this and preview that in my
browser, it no longer gets that styling.
| | 03:31 | It no longer gets that styling because
the second item inside the ordered list is
| | 03:35 | no longer a list item,
so it has to match that.
| | 03:38 | So that's one of the really important things.
| | 03:40 | It's not just counting the list items;
it's counting every element.
| | 03:44 | Now that that's out of the way,
let's take a look at how we could maybe
| | 03:47 | modify this a little bit.
| | 03:48 | I am going to change the 2 from 2 to 2n.
Now this n is a grouping element.
| | 03:56 | What this does is it says, instead of
just targeting the second element, target
| | 04:01 | every second element.
| | 04:02 | So it creates a sort of repeating pattern
where it's grouping every second element.
| | 04:06 | So I am going to save that and test
that in my browser, and hey, look at that:
| | 04:13 | Now every second element is targeting.
And how easy is that now to do alternating
| | 04:18 | colors and tables and lists like
this, whereas before you had to either use
| | 04:22 | JavaScript or you can do a lot of
manual class application with nth-child
| | 04:26 | that's just really, really simple.
| | 04:29 | Now in addition to having this sort of
grouping, we do have keywords that we could use.
| | 04:33 | So I could say, for example, I could say odd.
| | 04:36 | Save that, test it, and now notice
that every odd list item is getting that.
| | 04:42 | I could also go ahead and type in even.
| | 04:44 | It's another keyword I can use.
| | 04:45 | And when I type in even, I would
get the result that we had before.
| | 04:49 | So we had the odd and even
keyword, and we have groupings as well.
| | 04:53 | Now in addition to being able to group
things together, we also have what we call an offset.
| | 04:57 | So if I type in 2n--
remember, that's what we just had--
| | 05:00 | so this is going to get every second.
| | 05:01 | Well, I can also do an offset.
| | 05:03 | I can do +1. Now let me talk
about what this offset is.
| | 05:07 | This offset changes where
you begin within the count.
| | 05:10 | We always start counting at 1, but
when you do an offset, it basically says
| | 05:15 | okay, grab every second
one, beginning with this one.
| | 05:19 | So if I save this and test it, notice
that that's just another way of doing
| | 05:24 | every odd one, because it's saying
start to count at 1, which is the first item,
| | 05:27 | and then do every second one.
| | 05:28 | So now we are getting all their odds.
| | 05:30 | So that's what the offset allows us to do.
| | 05:32 | It requires a little bit of thinking,
but let's say we wanted to start with the
| | 05:37 | fifth element and then grab
every fifth element after that.
| | 05:41 | So to grab every fifth element, we
would make sure our grouping says 5n and
| | 05:46 | then to start at the fifth element, we want to
make sure that we started at number 5, so 5n+5.
| | 05:51 | So if I save this and test it, you
can see it does exactly that for us.
| | 05:56 | It starts at number 5 and then it
gives us every fifth element after that.
| | 06:00 | So really, once you know what these
items within the selector are doing, it
| | 06:04 | becomes pretty easy to target
exactly what you're looking for.
| | 06:08 | Now in addition to the sort of simple
formatting that we can do here, we can
| | 06:12 | also use negative values, and negative
values really dramatically change how this works.
| | 06:19 | So let's take a look at that.
| | 06:20 | I am going to change this grouping.
| | 06:21 | Instead of 5, I am going to change it to -2,
and then I am going to start with a count of 8.
| | 06:27 | So what a negative number on the
grouping does for us is instead of counting up
| | 06:31 | the way it's done where you go every second,
| | 06:33 | it's going to start wherever its count
is and then it's going to go backwards.
| | 06:36 | So instead of going down the list,
it's going to go up the list.
| | 06:39 | By starting at number 8 it's going to
go to the eighth item in the list, and
| | 06:43 | then it's going to select every
second one going backwards up the list.
| | 06:46 | Let's check that out.
| | 06:47 | So if I save this, preview this again,
you can see what I am talking about.
| | 06:51 | It starts at number eight, and then it
targets every second one after that until
| | 06:55 | it sort of runs out of it.
| | 06:56 | So instead of counting down the list,
the negative values cause it to count up.
| | 07:00 | Now when you use a negative value for
the offset, really strange things happen.
| | 07:04 | Let me show you what I mean.
| | 07:05 | So if I change my grouping to 5n, we
know that's going to be every fifth element.
| | 07:11 | So if I do an offset. Instead of +1,
I do -1, let's see what that does.
| | 07:15 | So I am going to save this, preview
this, and I can see that instead of every
| | 07:19 | fifth element, now it's starting at number 4,
and then I am getting every fifth element.
| | 07:22 | So what's it doing there?
| | 07:24 | Well, remember what that offset count does.
| | 07:26 | If I had started, say, at number 5.
By doing -1, essentially what it's doing for me
| | 07:32 | is it's just shifting everything up by 1.
| | 07:36 | So whereas before, it would grab 5 and
10, now it's shifting everything sort
| | 07:41 | of up, if you will, in the count and I am
starting at 4, but I am still spacing everything by 5.
| | 07:47 | So if we change that to 2, it does
exactly what you'd expect: it just shifts up.
| | 07:54 | So what if it started at 5, but it shifts up.
| | 07:57 | These are fairly simple child selectors.
| | 07:59 | Let's take a look at how we can
make them a little bit more complex.
| | 08:02 | I am going to do a comment, so
that's /*, and then I am just going to do
| | 08:05 | simple nth-child. And then at the end of
this selector I'm going to do a */ and that ends the comment.
| | 08:15 | Now below that, I am going to type in /*
complex nth child and then a */ to end that comment.
| | 08:25 | So again /* starts a comment, */ ends it.
| | 08:29 | So now let's take a look at a
very complex nth-child selector.
| | 08:33 | One of the things that you can do with
nth-child selectors is you can kind of
| | 08:36 | daisy-chain them together, and in sort of
stringing these together you can target
| | 08:41 | these very complex contiguous patterns.
| | 08:43 | Let me show you what I mean.
| | 08:44 | Let's type in li:nth-child(1n+6).
All right, let's start about what this would do.
| | 08:55 | This is going to select every single
element, every grouping of 1, and it's
| | 08:59 | going have an offset of 6.
| | 09:00 | So that would start with the sixth
element and then it would just select
| | 09:03 | every one there after that.
| | 09:04 | Well, I can also group this, or daisy-
chain it if you will, or combine it, with
| | 09:09 | another nth-child selector.
| | 09:11 | So immediately after that, I am
going to type in :nth-last-child.
| | 09:19 | Now we haven't used this one yet.
| | 09:20 | So anything pass nth-child, like last-
child, that's going to say go to the bottom
| | 09:24 | of the list and start counting
from the bottom of the list up.
| | 09:27 | Nth-child starts at the top
of the list and counts down.
| | 09:30 | So here we are going to say 1n+6.
So we are doing the same thing.
| | 09:35 | Now I am going to step outside of
this and just go ahead and apply some
| | 09:39 | basic formatting to that.
| | 09:40 | I am going to do the same thing, background: tan.
| | 09:44 | Now, let's talk about what this
is going to do before we check it.
| | 09:47 | We know that this is going to start at
the sixth element and then just select
| | 09:51 | every one after that.
| | 09:52 | We know that this one is going to start
from the sixth element at the end of our
| | 09:58 | list, because again, this
is an offset for last-child.
| | 10:01 | So the last-child would be the very
last one, so if we do an offset by 6,
| | 10:04 | that's counting up sixth element from the end,
and it's going to select every element and up.
| | 10:10 | So essentially what's going to happen is
these guys are going to meet the middle.
| | 10:12 | This is going to select all except for
the first five elements and all except
| | 10:16 | for the last five elements.
Let's check it out.
| | 10:18 | So I am going to save this and go
back to my browser and preview that.
| | 10:22 | And you can see it's doing
exactly what we said it would do.
| | 10:25 | It's going up to item number 6 and
selecting every one from that point forward.
| | 10:29 | The nth-last-child is going to item
15, which is the sixth offset, and going up.
| | 10:33 | So those two are meeting, and they're
just sort of excluding the first five and
| | 10:37 | excluding the last five.
| | 10:39 | Now what if you wanted to go the
opposite way with that and select only the
| | 10:43 | first five and only the last five?
| | 10:46 | Well, you can only daisy-chain, or sort
of combine, these selectors like this when
| | 10:50 | you have a contiguous selection.
| | 10:51 | If your selection is noncontiguous,
the only way that you can really do that
| | 10:55 | is by grouping them.
| | 10:56 | So let's see how we would do that.
| | 10:57 | So I am going to go back to this selector,
and I am going to change this to say -1+5.
| | 11:04 | Now remember what that would do.
| | 11:06 | That would go to the fifth item and then because
the grouping is negative -1, it would count up.
| | 11:10 | So it would go the fifth item and it
would select every item up to the first one.
| | 11:14 | Now instead of being able to combine these
together, I am going to have to do a grouping.
| | 11:17 | So I am going to have to do, li: nth-last-child
and I am going to do the same thing here, -1n+5.
| | 11:25 | Again, what is this going to do?
| | 11:27 | Because it's using last child, it's
going to start at the very bottom.
| | 11:31 | It's going to go up by five.
| | 11:32 | So it's going to select fifth from
the bottom and then because it's using a
| | 11:35 | negative, instead of counting up the list
towards the earlier ones, it's going to
| | 11:39 | go down the list towards the last one.
| | 11:41 | So we are going to go ahead and save
that, preview that in our browser, and we
| | 11:46 | get the styling that we were
expecting: first five and last five.
| | 11:50 | Now look I know that that is a lot
to take in if you've never worked with
| | 11:54 | nth-child selectors and I don't want
you to feel really upset if you don't get
| | 11:58 | how the syntax works right off the bat.
| | 12:01 | I really recommend using the exercise
file that we've got here just as means of
| | 12:05 | practicing, writing nth-child selectors.
Sort of come up with these patterns in your
| | 12:08 | mind and say using these
selectors, how do I do that?
| | 12:11 | You experiment with different values,
experiment with different grouping
| | 12:14 | selectors, experiment with negative
values, and over time all this is going to
| | 12:19 | become a lot clearer to you.
| | 12:20 | The more you work with these selectors,
the more comfortable you're going to be
| | 12:23 | writing them and writing them in the
most efficient manner that you can for that
| | 12:27 | particular situation.
| | 12:29 | Now these selectors can be a little bit complex.
| | 12:31 | As I mentioned before, there are
actually multiple types of nth-child selectors.
| | 12:34 | There are those four that we talked about.
| | 12:36 | So be patient as you learn them, and
don't rely on them until you feel like you
| | 12:39 | have a really firm grasp of exactly
which elements the selector will target.
| | 12:44 | Again, for more information, be sure to
go to the Selectors Level 3 Specification
| | 12:48 | and look for the nth-
child pseudo-class selectors.
| | 12:51 | They have a lot of examples here of syntax
and a lot of extra information about it.
| | 12:56 | So you can learn a lot just by going
here as well and using the file that we
| | 13:00 | just used to practice using
some of these different formulas.
| | 13:03 | Have fun using them.
| | 13:04 | They're really powerful, really cool
selectors that once you get the hang of, you
| | 13:08 | will be using a lot.
| | Collapse this transcript |
| Pseudo-element selectors| 00:00 | Pseudo-elements are similar to pseudo-
classes in many ways, as they allow you to
| | 00:05 | access content beyond the
normal capabilities of the DOM.
| | 00:08 | For example, using pseudo-element
selectors, you could target the first line or
| | 00:13 | first letter of an element.
| | 00:14 | Pseudo-element selectors also allow us to
create what is known as generated content,
| | 00:20 | that is, actually place content on
the page that is not contained in the
| | 00:24 | structure of the document.
| | 00:25 | Now let's take a closer look.
| | 00:26 | I have the pseudo-element.htm file
opened from the 02_17 folder, and the first
| | 00:33 | thing I want to do is just take a look
at this in a browser, just so we can see
| | 00:38 | what the page structure looks like.
| | 00:39 | And you can see that it's very
similar to what we have been doing.
| | 00:42 | We have h1 with a couple of paragraphs
underneath that, and then we have another
| | 00:46 | paragraph with a link in it down here
that's linking to an outside article.
| | 00:49 | If I go back in my code, just to review
the structure, inside our main article
| | 00:55 | we have one section.
| | 00:57 | Inside that section, we have a h1,
followed by two paragraphs, and then we have a
| | 01:02 | second section inside that article that
just contains a paragraph with a link to
| | 01:07 | that outside article.
| | 01:09 | So the first thing I want to do is
style our paragraphs so that the first line
| | 01:12 | of the paragraphs has some unique
styling, and also create a drop cap.
| | 01:17 | Now in the past, if you wanted to do
that, we had to use a lot of extraneous
| | 01:20 | markup--a lot of span tags, a lot
of class attributes, a lot of a class
| | 01:24 | styles--but through the use of pseudo-
element selectors, we don't have a resort
| | 01:27 | to those anymore, and we can do that
sort of really specific targeting without
| | 01:31 | any additional markup.
| | 01:32 | I am going to go right up to my
styles and inside my styles, we are going to
| | 01:36 | write our first pseudo-element selector.
| | 01:38 | So here I am just going to p::first-line, open
up a curly brace. And before we add our properties, I want
| | 01:49 | to talk about the syntax.
| | 01:50 | Now, Aptana is trying to tell me, no, no,
you can't do that, and the reason that
| | 01:54 | it's giving me an error on that
particular line is because the syntax.
| | 01:57 | It's these two colons right here.
| | 01:58 | So let's talk about that.
| | 02:00 | So pseudo-elements have been around for
a while, and in the CSS 2.1 specification,
| | 02:05 | syntax-wise were no
different than pseudo-class selectors.
| | 02:08 | So it is perfectly acceptable
to write them just like that.
| | 02:13 | In the CSS Level 3 Module the syntax of
the double colon has been added, and it's
| | 02:19 | really just to sort of
differentiate a pseudo-element selector from a
| | 02:22 | pseudo-class selector.
| | 02:25 | So which one should you use?
| | 02:27 | Well, the CSS3 syntax is the syntax
that the W3C would like you to use going
| | 02:31 | forward, but one of the problems with
it is that older browsers, specifically
| | 02:36 | browsers like Internet Explorer
8, don't recognize this syntax.
| | 02:40 | So if you want to make sure that
older browsers can process and render this
| | 02:45 | correctly, you might just
want to use the single colon.
| | 02:47 | Now I am just going to, in this title,
use the dual colon because that's sort
| | 02:51 | of the accepted syntax in CSS3, but when
you're testing it in your pages, if the
| | 02:56 | pseudo-element selectors don't target
correctly, if they don't render properly,
| | 03:00 | one of the first things that you can do
is go remove that extra colon and see if
| | 03:03 | that works in the
browsers that you're targeting.
| | 03:06 | So I am just going to go ahead and
give this some formatting instructions.
| | 03:09 | I am going to type in font-family, and
we will just do Georgia. And then on the
| | 03:15 | next line we will do font-
style, and we will do italic.
| | 03:20 | So I am going to save this.
| | 03:22 | I am going to go back out to my browser,
refresh the page, and I can see that
| | 03:26 | sure enough, the first line, we have a
different font and the text is italicized. Excellent!
| | 03:32 | So now I'm going to go about creating a drop
cap, so I am going to go back into my
| | 03:36 | code, and this time I am going to use
the pseudo-element selector first letter.
| | 03:41 | So on the next line I am going to do
p::first-letter, and inside that, what we
| | 03:48 | are going to do is we'll do font-size.
| | 03:50 | We will crank the font-size up
a little bit, so we will 3ems.
| | 03:55 | On the next line we will continue to
do font-family as Georgia, although we
| | 03:59 | really don't need to, because the
previous selector is doing that for us.
| | 04:03 | I guess this is just what I call being thorough.
We are going to do a float to the left.
| | 04:08 | We haven't talked about the float property yet.
| | 04:09 | We are really going to discuss that in
another title, the CSS page layout title
| | 04:14 | a little bit more, but it will come into
play when we talk about the box model a
| | 04:17 | little bit later on this title as well.
| | 04:19 | And then we are going to do padding.
| | 04:21 | This is a syntax that we are
going to study a little bit later on.
| | 04:24 | So right now just do 10px 5px 0 0, and
that's shorthand notation that allows us to
| | 04:34 | differentiate padding on all of
the four sides of the element itself.
| | 04:39 | So, if I save this and once again go
back out to my browser and refresh this,
| | 04:44 | you can see there is our drop cap.
| | 04:45 | We are getting the size that we need.
| | 04:48 | We are getting the
spacing around it that we want.
| | 04:50 | There is one thing going on here, though.
| | 04:52 | This is occurring for every single
paragraph in my document--probably not what
| | 04:57 | I am going for, specifically
not down here in this link.
| | 04:59 | What I would really want to happen is
really only the first paragraph within
| | 05:03 | this section is what I want affected.
| | 05:05 | Now there is a couple of different ways
to do this. One of the easiest ways is
| | 05:09 | just use one of the
combinators that we used earlier.
| | 05:12 | So what we are going to do is go back to
my code, and on each of these I am going
| | 05:16 | to use the adjacent combinator with the h1.
| | 05:18 | So I am going to h1+p and do the same
thing here, h1+p. So that's going to limit
| | 05:25 | these pseudo-element selectors to only
when the paragraph immediately follows an h1.
| | 05:30 | So if I save this, preview this again in
the browser, you can see it only occurs
| | 05:34 | to the top paragraph,
| | 05:35 | so we are limiting the
formatting to exactly where we want it.
| | 05:40 | Before we write the styles for this, I want
to flip over to the CSS 2.1 specification.
| | 05:45 | You can find this at w3.org/TR/CSS2.
This is our generated content.
| | 05:52 | I've browsed through the TOC and found the
content property, and it's actually in a
| | 05:57 | section called The :before
and :after pseudo-elements.
| | 05:59 | Now this is what we are
going to use in just a moment.
| | 06:02 | So what generated content allows us to do
is to create content to place on the page.
| | 06:07 | Now there are a couple of things
that you need to know about this.
| | 06:10 | You can use :before and :after, and
what it'll do is it'll take the generated
| | 06:13 | content that you created and place it
either before the element that you're
| | 06:17 | targeting or after the
element that you're targeting.
| | 06:20 | The second thing that you need to
know about it is that this content is not
| | 06:24 | observable by the Document Object Model,
meaning that it does not show up in the
| | 06:29 | Document Object Model's tree.
| | 06:31 | Scripting cannot find it. It cannot access it.
| | 06:34 | It can't apply any behaviors
to it or modify it in anyway.
| | 06:37 | The only time that this shows up is
visually on the page as the CSS is being processed.
| | 06:44 | In order to work with :before and
:after, you use a property called content.
| | 06:50 | If I scroll down a little bit, I can see
what is available to us in content.
| | 06:55 | We can do string, which is we just pass
in whatever literal value we want to
| | 06:59 | show up on the page that's a string of text.
| | 07:01 | We have URI, which essentially is
an external resource like an image.
| | 07:06 | So if you wanted an icon to show up
before or after content, you could point it
| | 07:10 | towards the image that you
wanted to show up. We have counters.
| | 07:13 | Counters are a great way of
generating content for chapters, and you could
| | 07:17 | say chapter 1, chapter 2, chapter 3, and
the counter would keep track of that for you.
| | 07:20 | We also have open and close quotes.
| | 07:23 | So if you were using block quotes, for
example, you could place an open quote on
| | 07:28 | one end of it and a
close quote on the other end.
| | 07:30 | We also have this really cool little feature
that we are going to use here in just a
| | 07:33 | moment called attribute.
| | 07:35 | You can go into the element that you're
targeting, find an attribute value, and
| | 07:39 | then actually display that attribute value on
the page, either before or after the element.
| | 07:44 | Let's go into our code and
experiment with doing that.
| | 07:47 | I am going to switch back to my page
preview so that when we come back to my
| | 07:50 | browser all I'd to do is refresh
this to see our generated content.
| | 07:53 | So I am going to go back to our code,
and I am just going to go down, and we are
| | 07:58 | going to talk about the
element that we are going to target.
| | 08:00 | So we are going to target this link
right here, where it says Article reference.
| | 08:05 | So I am going to generate some
content either before or after that.
| | 08:08 | The first thing we will do is we will just
generate the literal string so you can see
| | 08:11 | what that looks like.
| | 08:12 | Then we are going to take advantage of
the fact that you can also grab content
| | 08:16 | out of one of the
attributes and display that as well.
| | 08:18 | I am going to go back up my styles
and just below the h1 + p::first-letter
| | 08:22 | style, I am going to type in a::after.
| | 08:28 | Now once again this is the same syntax.
| | 08:30 | You can either do the single or
dual colon, it's totally up to you.
| | 08:34 | Open that up, and then what we are going to
do is we are going to do the content property.
| | 08:38 | Inside the content property, what I
am going to do is quotation marks.
| | 08:42 | So the quotation marks means that I
am going to pass a literal string.
| | 08:46 | It means that this content really doesn't
have any value that needs to be evaluated;
| | 08:49 | it's just a series of characters.
| | 08:51 | So if you want whitespace, you have to
add whitespace within the quotation marks.
| | 08:55 | So I am going to do whitespace, or
just a space, and then in parentheses I am
| | 09:00 | going to type in outside link.
| | 09:04 | Go ahead and add a semicolon to
the end of that and save it.
| | 09:07 | So I am going to go back to my browser
and refresh it, and you can see exactly
| | 09:12 | what's going on here.
| | 09:13 | It places that content outside the
link and because I did a little bit of
| | 09:17 | whitespace, I've got space between
article reference and outside link.
| | 09:20 | Now you're not limited to
just displaying the content;
| | 09:23 | you can also format the
generated content within the same rule.
| | 09:26 | So, if I go back to my generated rule, I
could do color, do something like #666,
| | 09:32 | which is a gray, and you
can even do the font-size.
| | 09:35 | So I can do font-size and make it a
little bit smaller. I can do .9ems.
| | 09:41 | Now if I save and test this, you can
see that now our outside link is formatted
| | 09:45 | a little bit differently from the rest
of the link, and that content is being
| | 09:49 | generated and formatted and put into place.
| | 09:52 | Now as I mentioned before, there are other
things that you can do with generated content.
| | 09:55 | So I could go ahead and bring in
an image from outside of the file.
| | 09:59 | I could also go ahead and take a look
inside of an attribute and then put that
| | 10:03 | attribute value out there,
and that is extremely useful.
| | 10:06 | I use this mostly in print style sheets,
but I am going to show you how this
| | 10:09 | works here on our page on our screen style sheet.
| | 10:12 | So I am going to go back into my code
and I am going to change this a little bit.
| | 10:15 | I am going to change content, and I am
going to do a little bit of concatenation.
| | 10:19 | Before I do the concatenation, I
want to show you what this looks
| | 10:22 | like beforehand, okay.
| | 10:23 | So I am just going to do content and I am
just going to do attributes, so attr(href).
| | 10:32 | So, what it's saying is, it's saying,
hey, go into this link, find the href
| | 10:36 | attribute, and whatever the value of
that is, go ahead and place on the page.
| | 10:39 | If I save this and test it, it goes
ahead and places the link, which is lynda.com,
| | 10:45 | right there on the page.
| | 10:46 | Now I can also concatenate this
together with other literal string values.
| | 10:51 | So if I wanted to, right before this attribute,
I could type in quotation marks, space, left bracket,
| | 10:59 | and close my quotation marks, and then a space.
| | 11:04 | And then after the href, I could do the same thing.
| | 11:06 | I could do quotation mark, closing right bracket,
and then another quotation mark.
| | 11:11 | What this is going to do is it's going
to view this as a literal string that
| | 11:14 | it needs to put on the page, followed
by the attribute itself, followed by
| | 11:19 | another closing bracket.
| | 11:21 | If I save this and preview it, you can
see that now I have sort of added those
| | 11:26 | brackets to either side.
| | 11:28 | What's really nice about this is that
the link is still there if I want to
| | 11:31 | click on it, and it goes to the
proper page, but also, visually, I am being
| | 11:35 | displayed the link itself.
| | 11:36 | Again, you can see why this is
particularly helpful for print
| | 11:39 | style sheets, because in a print
style sheet you don't want the link to
| | 11:43 | look like it's clickable;
| | 11:44 | you just want to print it out.
But doing this would allow the person on the
| | 11:48 | printed page to at least see the link
and be able type that in if they wanted to.
| | 11:51 | Pseudo-elements, just like pseudo-
classes, they give another set of really
| | 11:56 | powerful options when targeting our
content, and they really extend our
| | 12:01 | capabilities through the
use of generated content.
| | 12:04 | If you read through the Selectors
Level 3 specification, which I have been
| | 12:07 | recommending in almost every single
movie in this chapter, you'll see that
| | 12:10 | generated content is mentioned, but just
in passing, it really refers you to the
| | 12:14 | CSS 2.1 specification on generated content.
| | 12:18 | You want to read up more on that by
going to the CSS 2.1 specification.
| | 12:23 | browsers haven't implemented pseudo-
elements consistently across the board;
| | 12:27 | especially remember what I said about the
syntax of using the dual or single colons.
| | 12:31 | Just like with anything else,
make sure that you check your browser
| | 12:34 | implementations and test it
inside target browsers carefully before
| | 12:38 | committing to using them.
| | Collapse this transcript |
| Targeting page content: Lab| 00:00 | So now it's time to put what you've
learned about selectors into practice by
| | 00:04 | tackling our first lab.
| | 00:06 | Now I've prepped a few pages of my fictitious
desolve.org site that I want you to work on.
| | 00:12 | Unlike the other exercises that we've
completed so far, this is a true lab, so
| | 00:18 | while I'm going to tell you what your goals
are, I'm not going to tell you how to do it.
| | 00:23 | In this lab, we're going to focus on
properly targeting elements and writing efficient selectors.
| | 00:29 | So the first thing I want you to do is
go to the 02_18 folder and open up the
| | 00:35 | contact.htm, galleries.htm, index.htm,
philadelphia.htm, and inside the _css
| | 00:46 | directory, the main.css.
| | 00:49 | Now we've been working with these
really simple files throughout all of our
| | 00:52 | exercises as we concentrate on the concepts.
| | 00:55 | This is more of an applied lab,
so this is more of a finished site.
| | 00:59 | I just want to preview this for you so
you can see kind of what you're going
| | 01:02 | to be working with.
| | 01:03 | So I'm just going to the index page
and open this up in one of my browsers.
| | 01:07 | So here is our site, and
it's only partially styled.
| | 01:12 | Some of the styles are finished;
some of the styles are not.
| | 01:15 | Your goals are going to be targeting
specific elements within this site.
| | 01:20 | This is the index page, but we
also have a page for contact.
| | 01:24 | That's the contact page that we saw earlier.
| | 01:26 | We have our galleries page where we have
all these different galleries, and then
| | 01:30 | we have one individual gallery
page, and that would be Philadelphia.
| | 01:34 | So the styles that you write are
actually going to be targeting things on all
| | 01:37 | four of these pages.
| | 01:38 | If I go back into the structure of the
code, each one of these pages has a link
| | 01:45 | to the main.css file.
| | 01:48 | So whereas in most of our exercises
we've been adding the styles locally to the
| | 01:52 | pages, in this one you're going to be
adding your styles to the main.css file.
| | 01:58 | All the pages are
structured in a very similar manner.
| | 02:01 | Inside the body tag we have a
header that has our pageHeader.
| | 02:06 | Following that, we have a nav, which has
the main navigation for the page. Notice
| | 02:11 | the IDs of these sections as well.
| | 02:14 | We have a section of our content.
| | 02:16 | On the index page we have a banner
that we don't have on other pages.
| | 02:21 | Inside this content section,
we typically have an article.
| | 02:24 | The article's ID reflects the page
that's on in the content that is inside of it.
| | 02:30 | And inside that we also have some
individual sections, depending upon the pages
| | 02:34 | that you're looking at.
| | 02:36 | In this case, I have two
sections with the class of news.
| | 02:40 | Below our article, we have an
aside, which serves as our sidebar.
| | 02:44 | The aside is made up of a couple of
elements. One of those is another nav.
| | 02:49 | This is the nav with the ID of archives.
| | 02:52 | Underneath that we have a couple of sections.
| | 02:55 | These are our contest sections.
| | 02:57 | The first one is this month's
contest and the second one is the previous
| | 03:01 | contest, but notice that they both
have the class of contest applied to them.
| | 03:05 | And then finally we have our page
footer that has that ID pageFooter.
| | 03:11 | So that's how our HTML is organized.
| | 03:13 | It's different depending upon which page
you're on, but the overall structure is
| | 03:16 | pretty much the same.
| | 03:17 | If I go over to the main.css,
this is a really large style sheet.
| | 03:21 | It's actually an average-sized
style sheet to be quite honest with you.
| | 03:25 | At the very top of it I have a color
guide to help us when we are choosing
| | 03:29 | colors a little bit later on,
| | 03:31 | and then the styles are
organized by regions and by style type.
| | 03:35 | So global styles, the type of
formatting that goes everywhere, comes first.
| | 03:40 | After that, I have a
section on basic layout styles.
| | 03:43 | After that, I have a section on
content region styles, and even those content
| | 03:48 | region styles are organized by regions,
so headers get its own region, the nav
| | 03:52 | styles have their own
region, that sort of thing.
| | 03:55 | The most of the time you would go
in and you would work within the
| | 03:58 | appropriate section.
| | 03:59 | Just to make this initial lab a little
bit easier on you, I have actually grouped
| | 04:03 | the selectors that we
need down towards the bottom.
| | 04:06 | If you're in the CSS file with me,
go ahead and scroll all the way down
| | 04:10 | towards the bottom of it.
| | 04:11 | We're going to go down to about line 618.
On line 618 I have the Add lab selectors here.
| | 04:19 | I'm not going to ask you
to do any of the formatting.
| | 04:21 | We haven't gone over enough
properties yet for you to really tackle
| | 04:24 | the formatting options.
| | 04:26 | What I'm interested in, and what our focus
was for this chapter was on writing selectors.
| | 04:32 | Your goal is going to be targeting the
appropriate elements on the page using
| | 04:37 | the appropriate selector.
| | 04:38 | So I want to go over each one of
these needs one by one and show you what
| | 04:42 | they are going to style.
| | 04:43 | The first one I want you to do is
write a selector that targets every link
| | 04:48 | element throughout the entire site.
| | 04:51 | On our pages we have different links.
| | 04:53 | We have them in different places.
| | 04:54 | Some of them would be within the body copy,
some of them are within the navigation.
| | 04:58 | I want you to write a very generic
selector that targets every single link all
| | 05:02 | the way throughout the site.
| | 05:04 | The second selector that I want you to
write is write a selector that targets
| | 05:08 | the copyright paragraph in the footer.
| | 05:10 | Now when you start getting into
things like this, you're going to have to be
| | 05:13 | really familiar with the structure of
the page, and I know that one of the
| | 05:17 | hardest things to do is to go into
somebody else's page that they created and
| | 05:21 | sort of sift through the way that they
structured it, because it's almost always
| | 05:25 | different than the way that you structured it.
| | 05:27 | But what this does is it reinforces
the fact that if you don't know the
| | 05:31 | structure of the page you
cannot write a selector for it.
| | 05:35 | So you need to go back into the HTML,
find those elements, such as the footer,
| | 05:40 | and as this selector is asking us to
do, write a selector that targets the
| | 05:44 | copyright paragraph in the footer.
| | 05:46 | That would cause you to go back to that
footer, look in the footer and find the
| | 05:49 | copyright paragraph, and then figure
out how to target this independently of
| | 05:54 | anything else on the page.
| | 05:57 | You'll need to do the same thing for
the next one, which is asking you to write
| | 06:00 | a selector that targets the dates inside
the upcoming dates list on the index page.
| | 06:06 | You can find that in the index page.
And if I scroll up into my main section, I
| | 06:12 | have these news, and here are
the upcoming dates right there.
| | 06:16 | Sometimes it's helpful to preview that
in the browser because it becomes very
| | 06:20 | easy to see at that point,
and it would be these dates.
| | 06:25 | So that's what you're targeting there.
| | 06:28 | Next, you want to write a selector that
changes the background of every second list
| | 06:33 | item in the unordered list that forms
the archived gallery menu in the sidebar.
| | 06:38 | So again, on each page you'll find the
same structure where we have this aside
| | 06:43 | and we have a navigation in
there that has this list in it.
| | 06:47 | You're going to target it so that
every second list item uses this background.
| | 06:53 | Next, you'll need to write a
selector that changes the color of the
| | 06:56 | main navigation links.
| | 06:58 | The main navigation links
are these links right up here.
| | 07:02 | So what you're going to need to do is
write a selector that changes the color as
| | 07:06 | users hover over those links.
| | 07:09 | And again, it's going to target only
the main navigation links, none of the
| | 07:12 | other links on the page.
| | 07:13 | We also need to write a selector that
targets the search input text box in the
| | 07:18 | footer, and make sure that it will only
target the search input form element.
| | 07:22 | So again, you can go back down to the footer,
| | 07:25 | you can take a look at the search input
form element, and then try to figure out
| | 07:30 | how to target only that
particular element on the page.
| | 07:34 | And then we're going to write a
selector that will add the usage text you see
| | 07:37 | here at the end of the photos gallery.
| | 07:39 | So the photos gallery is
in the Philadelphia page.
| | 07:42 | If you scroll down, you'll find that we
have a div with a class of photos. Inside
| | 07:47 | that we have all of our images.
| | 07:50 | You'll need to write a selector here
that will add this content to the end of
| | 07:53 | that photos gallery, so after it.
| | 07:56 | Now that you know what your goals are,
go back, carefully study the structure of
| | 08:00 | HTML, and try to write the
most efficient selector possible.
| | 08:06 | You should be able to accomplish every single
one of these without modifying the HTML at all,
| | 08:10 | so you shouldn't have to apply any
extra classes, any IDs, or modify the code at
| | 08:15 | all; you should be able to target
them just the way the code is right now.
| | 08:19 | One of the most challenging things
about writing CSS is that there is almost
| | 08:23 | always more than one way to
accomplish what you're trying to do.
| | 08:27 | So don't worry too much about
matching the exact selectors that I used
| | 08:31 | to complete the lab;
| | 08:32 | I want you to concentrate instead on
writing a selector that correctly targets
| | 08:36 | the elements on the page without
affecting the styling of other elements.
| | 08:40 | So as you test it, make sure the
other elements aren't being affected.
| | 08:44 | I also want you to focus on
targeting these elements with the most
| | 08:47 | simple selector possible.
| | 08:49 | Now once you're finished, go ahead
and check out the solutions movie that
| | 08:52 | follows this one to compare your work to mine.
| | Collapse this transcript |
| Targeting page content: Solution| 00:00 | I hope you enjoyed working on our first lab.
| | 00:03 | Now even though it may have seemed like
it, my goal wasn't to try to frustrate you.
| | 00:07 | Rather, I wanted to test how well you'd
learned the various selector types we
| | 00:12 | covered in the previous chapter and
when it's appropriate to use them.
| | 00:16 | So in this movie I want to show you the
solutions that I came up with for the lab.
| | 00:20 | Now if you got stuck doing the lab,
feel free to use this movie as a way of
| | 00:24 | jogging your memory or
reinforcing what we covered.
| | 00:27 | If you're finished with the lab, use this
movie to compare your answers with mine.
| | 00:32 | Now keep in mind that there are several
different variations for each selector
| | 00:36 | that would work within the style sheet.
| | 00:38 | Just because your solution might be
different from mine doesn't mean it's wrong.
| | 00:43 | As I go over to the selectors I wrote
the lab, I'll discuss why I made the
| | 00:47 | choices I did, and you can compare those
reasons with your own to determine which
| | 00:52 | selector you feel is the most efficient.
| | 00:55 | Just to kind of preview the finished
look of the site, I am going to go out to
| | 00:59 | the browser, and here I
have the finished file opened.
| | 01:01 | So you can see it looks a lot
better. The links aren't underlined.
| | 01:05 | I'm getting the hover color that I was wanting.
| | 01:08 | If I scroll down, I can see that
I've got the alternating colors that I
| | 01:11 | wanted here in my menu.
| | 01:13 | I've got the links styling I
wanted throughout the site.
| | 01:16 | My dates are bold the way that I wanted them.
| | 01:19 | If I scroll down, I can see that the
copyright paragraph is where I want it to
| | 01:22 | be. The search field is the size that I want it.
| | 01:25 | And if I go to my Philadelphia page,
if I scroll below the gallery, I can see
| | 01:32 | that the credit text has been added to the
page exactly the way that I wanted it to.
| | 01:37 | So let's take a look at the
selectors that allowed me to do all of that.
| | 01:40 | So I'm going to go over to the main.css,
and I'm going to scroll down to about line
| | 01:44 | 622 or so where we were
supposed to add our lab selector.
| | 01:48 | So let's just go through them one by one.
| | 01:50 | Now the first selector, which was
this one, where we supposed to write a
| | 01:53 | selector that targets every link
element, that one is pretty simple.
| | 01:56 | To target every single link on the page,
we just used the correct element selector--
| | 02:01 | in this case an a. To be honest, there
really is not a better way to do that
| | 02:06 | than with just a very simple element selector.
| | 02:09 | Now our next goal was to write a
selector that targets the copyright
| | 02:13 | paragraph in the footer.
| | 02:14 | If we look at the structure of this page and
we go down into the footer, we can see that
| | 02:19 | that copyright notice is actually in
a paragraph with the class of notice,
| | 02:25 | and that's perfect.
| | 02:26 | So if I go back in the CSS, I can see that I
used the class selector .notice to target that.
| | 02:32 | I could've used a descendant selector
there, but that class attribute is just too
| | 02:37 | good of a styling hook to ignore.
| | 02:39 | So I just used a simple class selector,
and now I don't have to worry about the
| | 02:43 | styling affecting any other elements.
| | 02:45 | Now for the selector that targets the
dates inside the upcoming dates list,
| | 02:50 | if I look at this list on the index
page, again remember we have an unordered
| | 02:55 | list that these are appearing in and
then the dates are surrounded by span tags.
| | 03:00 | So the way that I did this was I used
the child combinator to say when any span
| | 03:07 | is a direct child of list item.
| | 03:09 | If I had to guess, I'm guessing
that most of you probably just used a
| | 03:14 | descendent selector, am I right?
| | 03:16 | And if you did it targeted it just fine.
| | 03:19 | So there's nothing wrong with using that,
so why did I use this child selector?
| | 03:23 | Well, really the only reason I used it
was to deal with the possibility that
| | 03:27 | maybe other lists somewhere within the
site later on might be more complex, or I
| | 03:32 | might use nested lists
inside of it that also have spans.
| | 03:36 | So this is going to limit the styling to
only spans that are the direct children
| | 03:40 | of the list item, but I also might
be being a little too specific here.
| | 03:43 | So if you used the
descendent selector, that's fine.
| | 03:46 | There's nothing wrong with it.
| | 03:48 | Now, the next one was kind of tricky.
| | 03:51 | There is no class attribute applied to
this alternating links within our list.
| | 03:56 | So really the only solution
that we had available to us was the
| | 03:59 | nth-child selector.
| | 04:01 | Now you may have written this a
slightly different way than me.
| | 04:04 | You may have come in and
instead of even, used 2n.
| | 04:07 | That would work just fine.
| | 04:09 | I like the even keyword, but if you
wanted to use one of the groupings, that's
| | 04:14 | perfectly fine as well.
| | 04:15 | Notice, however, how I filtered it
so that it applied to the right place.
| | 04:20 | I said li:nth children inside of a nav,
which is also inside of the aside.
| | 04:25 | Now there's another way
that I could have done that.
| | 04:27 | If I go back to the index and I look at
the section, you can see that this nav
| | 04:32 | has an id of archives.
| | 04:34 | So I also you could have used that.
| | 04:36 | I could come in and just said
# archives, and that would've worked just as well.
| | 04:42 | And maybe some of you might have done that.
| | 04:45 | To be honest with you, I do try to
avoid using IDs in my selector when possible
| | 04:49 | just because they add so much weight in
terms of specificity, which we're going
| | 04:53 | to talk about in the next chapter.
| | 04:54 | But if you used that, it worked just fine.
| | 04:56 | There was nothing wrong with it,
and that would have been a perfectly
| | 04:59 | acceptable solution.
| | 05:00 | Now the next thing I needed to do is
write a selector that changed the color of
| | 05:03 | the main navigation links.
| | 05:05 | Now here when I look at the styling
hooks I had available to me there,
| | 05:09 | if I go up to this particular nav, I can
see that again I has an id of main nav.
| | 05:13 | Then we have an unordered list and
the links are all inside list items.
| | 05:17 | There really isn't a lot there other
than this id to filter that particular list.
| | 05:23 | So when I go back to my main.css,
I can see that exactly what I used.
| | 05:27 | I used the a:hover pseudo-class, but I
used the descendent selector to target
| | 05:32 | that only when those links are
found within the main nav region.
| | 05:36 | You may have done
something very similar to that.
| | 05:37 | Otherwise, it would have
targeted every single link on the page.
| | 05:40 | Now if I scroll down a little bit
further, I was tasked to write a selector that
| | 05:44 | targets the search input text box.
| | 05:46 | Now there are a lot of different ways
that you could have done this one, and
| | 05:49 | chances are you may not have ended
up with the same solution that I did.
| | 05:53 | I used an attribute selector
| | 05:54 | because one of the things I noticed
about that particular search field--
| | 05:58 | let me scroll down and show you what I mean--
is that the input type is equal to search.
| | 06:04 | Now if I go to the contact page and
I were to look through all these form
| | 06:08 | elements, there is not a single one of
those form elements who has a type of
| | 06:13 | anything other than URL, email, text,
that sort of thing. No searches.
| | 06:17 | So I'm very safe here to use an
attribute selector that basically says hey,
| | 06:22 | anytime you find an input that has a
type of search, I want you to make this
| | 06:27 | wide, because it's the only
search field in the entire site.
| | 06:30 | Again, you could have done that a
different way using a certain type of
| | 06:33 | descendent selector.
| | 06:34 | If you did that, that's fine.
| | 06:36 | That was just my solution for it.
| | 06:38 | Then finally I had to write a selector
that will add the usage text to the end
| | 06:42 | of the photos gallery.
| | 06:43 | Now I am guessing because of the fact
that we have this content property, it's a
| | 06:47 | dead giveaway for you guys that we're
probably going to be using either the
| | 06:50 | before and after, and since we wanted
it at the end of the photos, the after is
| | 06:55 | the obvious choice. What I'm curious
about is how many of you guys tried
| | 06:59 | something different than photos?
| | 07:01 | Now if I go back to this page and I
look at this section where my galleries are,
| | 07:06 | I can see that they're in a
div with the class of photos.
| | 07:09 | You could have also targeted the article.
| | 07:11 | That would've been fine, because it
would have placed it so directly after the
| | 07:14 | article, which would still have been
right before the archives, which are floating
| | 07:18 | on the inside the page.
| | 07:19 | So it'd have shown up
probably in exactly the same place.
| | 07:22 | But since this div is the more
immediate semantic element that is the photos
| | 07:27 | gallery, that's the one I chose to target.
| | 07:29 | So I did .photos::after
and then the selector itself.
| | 07:34 | So those are my solutions.
| | 07:35 | Now, how are yours compare to this?
| | 07:37 | Now if your styles are working
properly, then you succeeded, even if our
| | 07:41 | selectors don't match exactly.
| | 07:43 | Don't get too caught up in that.
| | 07:45 | Just make sure that you take some
time to think about why you chose the
| | 07:48 | selectors that you did and to think
about whether or not they were the best
| | 07:53 | option available to you, because as
always, as an author of CSS, that's your goal.
| | Collapse this transcript |
|
|
3. Resolving ConflictsWhat happens when styles conflict?| 00:00 | Unless every page you create only
holds a single paragraph, you are eventually
| | 00:05 | going to have to deal with
styles that conflict with one another.
| | 00:09 | Anytime you have multiple rules
that target the same element you have
| | 00:13 | conflicting styles, and now on the
surface it would seem like this would be
| | 00:16 | pretty easy to avoid:
| | 00:18 | just don't write rules that
target the same element, right?
| | 00:21 | Well, the truth is that as your pages get
more complex, it's impossible to avoid it.
| | 00:26 | In fact, there are going to be times
when you want styles to conflict with one
| | 00:30 | another, as a way of writing
styles of little bit more efficiently.
| | 00:33 | So in this chapter we're going to
explore why style conflict, what happens when
| | 00:37 | they do, and then how avoid conflicts
that you don't want and how to use them
| | 00:42 | correctly when you do.
| | 00:44 | I want to start by just looking at
the exactly what happens when styles do
| | 00:48 | conflict with one another.
| | 00:49 | So I've got the conflicts.htm file from
03_01 folder, and that is in the Chapter
| | 00:56 | 3 directory. And I have a
really simple page structure.
| | 01:00 | You can see in the HTML we just have an
article with a couple paragraphs in it
| | 01:04 | and then a subheading
and a paragraph below that.
| | 01:06 | So, very simple stuff. Okay.
| | 01:09 | So I'm going to go into the section
where we're adding our styles and I'm just
| | 01:12 | going to write a selector for my paragraph.
| | 01:14 | So I'm going to do P and inside of that,
I'm going to do font-size. Let's do 1em.
| | 01:22 | For color I'm going to choose white, and
then for background I'm going to choose tan.
| | 01:28 | I'm going to save that and
preview this in a browser.
| | 01:32 | When I do that I can see there is a
styling that I asked for. We have a tan
| | 01:36 | background, white text
happening to all of our paragraphs. Okay.
| | 01:40 | What happens, however, if I go
in and write a conflicting rule?
| | 01:43 | So just below that I'm going to
right another paragraph selector.
| | 01:46 | Now obviously this is
sort of an extreme example.
| | 01:48 | I doubt that you would have very many
instances where you have one paragraphs
| | 01:52 | selector followed by another one,
but just play along with me here.
| | 01:55 | So here I'm going to do font-size:
| | 01:56 | 1.2 em; color, I'm going to do black;
and then padding, I'm going to 10 pixels.
| | 02:06 | So if I save this and go back to
my browser and refresh, I can see
| | 02:12 | what's happening here. Okay.
| | 02:14 | So the text size increased. It turned black.
| | 02:17 | I'm getting some padding so that
the edge of the text isn't right up
| | 02:20 | against the edge the element, but
the color changed from white to black.
| | 02:23 | So what happens when styles
conflict with one another?
| | 02:27 | Well, where they disagree with each other,
in this case, the last one applied wins,
| | 02:32 | so this formatting is
applied over this formatting.
| | 02:36 | Color is black instead of white.
| | 02:38 | But since there was no conflict with
background and there is no conflict with
| | 02:42 | padding, those are added
and they become cumulative.
| | 02:45 | So sometimes when styles conflict
with one another they don't always
| | 02:49 | overwrite each other;
| | 02:50 | sometimes they create these cumulative styles.
| | 02:52 | In other cases they do override each
other and you see the selector that
| | 02:57 | wins the conflicts,
you see that styling being applied.
| | 03:00 | There is not always easy
to catch conflicting styles.
| | 03:03 | Let me show you what I mean.
| | 03:04 | If I scroll up, in the body
selector here, we have a font-size of 90%.
| | 03:10 | So actually both of these paragraph
selectors are conflicting with that body selector.
| | 03:15 | How many of you guys caught that?
| | 03:17 | They're not always easy to detect and
especially when you're styles get more
| | 03:21 | complex and your pages become more complex.
| | 03:24 | So now we know at least two
things about conflicting styles.
| | 03:27 | When the properties conflict, the
properties of one rule will replace the other.
| | 03:33 | If they don't conflict with one another,
the properties are added and the rules
| | 03:37 | are cumulative, leaving you
with a mixture of the two rules.
| | 03:41 | So what we need to learn now is what
determines which properties are used in the
| | 03:45 | event of a conflict?
| | 03:47 | Well, that's driven by three principles:
the cascade, inheritance, and specificity.
| | 03:53 | We're going to explore all three of
those concepts individually, starting with
| | 03:57 | the cascade in our next movie.
| | Collapse this transcript |
| Understanding the cascade| 00:00 | How important is it that
you understand the cascade?
| | 00:03 | Well, considering that it's in
the name of cascading style sheets,
| | 00:06 | yeah, I'd say it's pretty important.
| | 00:08 | Now I've read a lot of articles on the
cascade and seen it described in a lot of
| | 00:13 | different ways, but when it really comes
down to it, the cascade can be summed up
| | 00:18 | in one simple sentence:
the last rule applied wins.
| | 00:23 | Styles, you see, are applied in the order
that they are found, and in the event of
| | 00:27 | a conflict, the style that
comes last is the one that's used.
| | 00:31 | Now like many things, it's not quite as
simple as it sounds, so let's check it out,
| | 00:35 | and I want to do that by opening up
cascade.htm and cascade.css, which you can
| | 00:40 | find in the 03_02 folder.
| | 00:44 | All right, if I look at this page
structure of the HTML file, you don't get
| | 00:48 | much simpler than that.
| | 00:49 | I just have a paragraph down there
that says, "I require styling," which we're
| | 00:53 | going to endeavor to do for it.
| | 00:55 | The reason that the page structure is so
simple is that I really want to focus on
| | 00:59 | the cascade itself, so I don't want
to you get caught up in any structured
| | 01:02 | elements or nested elements and
wondering if they're having any type of effect;
| | 01:06 | I want to just to focus only cascade itself.
| | 01:08 | Okay, now the first thing I'm going to
do is link to this external style sheet,
| | 01:12 | so just above the style tag,
I'm going to open up a link tag.
| | 01:17 | I'm going to give it an href attribute
of cascade.css, so that's pointing to
| | 01:24 | this file right here, and they are in
the same directory so I don't need to give
| | 01:27 | a path; I can just point right to that.
| | 01:29 | I'm going to give it a
relationship of stylesheet.
| | 01:33 | I'm going to go ahead and
set its type to text/css.
| | 01:38 | Again, that's not necessary in HTML5,
but I'm just doing it to be thorough.
| | 01:41 | Okay, so there we go.
| | 01:42 | That is now linking to
that external style sheet.
| | 01:45 | If I save this, I can flip over to the
style sheet and I can go ahead and write a
| | 01:49 | selector for my paragraph.
| | 01:51 | So I'm just going to open up a new
selector, use the p element selector, and I am
| | 01:55 | going to choose the color of red.
| | 01:57 | So I'm going to save that.
| | 01:58 | If I go back to cascade now and preview
that in one of my browsers, indeed our
| | 02:04 | text is red, exactly as we wanted it to be.
| | 02:08 | So if I come back into my HTML file, I
notice also that I do have some embedded
| | 02:13 | styles, some local styles right here.
And if I go down into that section and add
| | 02:18 | another paragraph selector here
and I choose, say, color: blue,
| | 02:24 | if I save that and preview that in the
browser, when we refresh that I can see
| | 02:30 | that now the styling is blue.
| | 02:31 | Remember what we said, last styled applies wins.
| | 02:35 | Now a lot of people use this to their advantage.
| | 02:37 | They'll have a lot of styles
in an external style sheet.
| | 02:40 | They'll need to just change one thing
on one local page, and they'll do this:
| | 02:44 | they'll go ahead and create local
styles using a style tag, and then they'll
| | 02:47 | overwrite that external style with
just a simple selector that they know it's
| | 02:51 | going to conflict with the external
style, and they'll keep that local.
| | 02:55 | So you'll read occasionally that embedded
styles always overwrite external styles.
| | 02:59 | Well, it's not entirely true.
| | 03:01 | Remember what I said earlier: the last
style applied wins and styles are applied
| | 03:06 | in the order that they're found.
| | 03:07 | So where you put the link tag to the
external style sheet and where you place
| | 03:12 | the embed styles matters.
| | 03:14 | So if I take this external style sheet
and I cut it and then I paste it below
| | 03:21 | my embedded styles, if I save this and
test it again, you can see the styling
| | 03:26 | is right back to red and that is
because the styles are applied in the order
| | 03:30 | that they're found.
| | 03:31 | So as it goes down the page, it
applies this style, and then it applies any
| | 03:34 | styles that it finds
within here, which is this style.
| | 03:39 | So it doesn't really matter, in terms
of whether it's an external or embedded
| | 03:43 | style; what matters is where
it's found within the code.
| | 03:47 | So if you use this type of a strategy
where you have local styles and you have
| | 03:51 | external styles that you're using as well,
| | 03:53 | you want to make sure that those
external styles, the link for them at least, is
| | 03:57 | located above your
embedded styles, just like this.
| | 04:01 | Okay, now I could keep styling things.
Certainly if I added another paragraph
| | 04:05 | selector underneath this one, the one
on the bottom would win out in the event
| | 04:09 | of any type of conflict,
| | 04:11 | but what about inline styles?
| | 04:13 | So if I go down to the actual paragraph
itself and inside that I type in style=,
| | 04:20 | and then inside that, let's do color:
green, so this is an inline style.
| | 04:25 | We've already written one of these so
far in the title, but just to refresh your
| | 04:28 | memory on the syntax, we use the style
attribute, and then we set that value
| | 04:33 | using quotation marks, and inside the
quotation marks you just go ahead and write
| | 04:37 | your properties as you would normally.
| | 04:39 | You have the property and the value
separated by the colon and then a semicolon,
| | 04:42 | and you could keep stringing
properties along if you wanted them.
| | 04:45 | Okay, so this is an inline style.
| | 04:47 | If I save this and test it,
I can see that now it wins.
| | 04:51 | Remember, the last rule applied wins.
So this rule is applied first. Go down the
| | 04:56 | page and parse it, then apply this one.
| | 04:58 | I go down the page and parse it
and then finally apply this one.
| | 05:02 | Now inline styles are a little
different because they also have several other
| | 05:05 | things they take into account:
specificity, which we'll talk about in just a
| | 05:08 | moment, and inheritance, which we're going
to talk about in just a moment as well.
| | 05:11 | But inline styles almost always
win in the event of a conflict.
| | 05:16 | So it's really important to
understand the cascading nature of styles,
| | 05:20 | especially when you're
planning styles for larger sites.
| | 05:23 | Again, if you have any type of a
mixture of internal and embedded styles, or
| | 05:27 | even duplicate styles within the same
style sheet, the cascade is definitely
| | 05:30 | going to come into play.
| | 05:31 | Once you understand that browsers are
going to apply those styles in the order
| | 05:35 | that they are found, it makes it a lot
easier to start planning styles that can
| | 05:39 | avoid unnecessary conflicts and take
advantage of the cascade to overwrite
| | 05:44 | styles where you
actually want to overwrite them.
| | Collapse this transcript |
| Using inheritance| 00:00 | In addition to the cascade, another
concept that comes into play when resolving
| | 00:04 | conflicts is inheritance.
| | 00:06 | Many CSS properties will inherit,
that is, if you apply the property to a
| | 00:10 | parent element, all the elements inside of it
will have that property applied to it as well.
| | 00:16 | Now that not only makes sense,
it can save you, as an author, a
| | 00:19 | tremendous amount of time.
| | 00:21 | If you wanted to use Arial for example,
you could simply apply the font-family
| | 00:25 | property of Ariel to the body element, and let
every element inside the body tag inherit it.
| | 00:31 | Of course, there comes a time when you're
going to want child elements to have formatting
| | 00:35 | that differs from their parent. So in
the event of a conflict, child element
| | 00:39 | styles will overwrite parent element styles.
| | 00:43 | All right, let's try that out.
| | 00:45 | I have the inheritance.htm file open
from the 03_03 folder, and just to look at
| | 00:53 | the structure of the page really
quickly here, it's very simple. Within the
| | 00:56 | body we've got a section element,
inside that we have a paragraph that also has a
| | 01:01 | strong tag inside of it.
| | 01:02 | And then directly following that, we have
an aside, with another paragraph, and a
| | 01:07 | nested strong tag inside of that.
So a simple structure,
| | 01:09 | but we do have some nested elements on
the page as well. One of the easiest ways to
| | 01:13 | visualize inheritance is to apply
styles to a parent tag and let them
| | 01:18 | inherit down, so we're going to go ahead and do that
with our first rule, so I'm just going to click right here,
| | 01:25 | inside the style tag where I have the add
styles here, and we'll write our first selector,
| | 01:30 | and we're going to do a selector for the body
tag. And inside that I'm just going to type in
| | 01:34 | font-family, we'll go ahead and do
Georgia, just like we talked about earlier.
| | 01:40 | And I'll do font-size, let's say 120%, and
just below that we'll do a color, and we'll
| | 01:49 | just go ahead and make it green. So I'm going to go ahead
and save this, and then I'm just going to preview this
| | 01:54 | in one of my browsers. And as you can
see, all the elements on the page are
| | 02:01 | green, they're Georgia, and they're
a little bit larger than the default font
| | 02:05 | setting because we set the size of the
text to 120%. Just so we clearly see that
| | 02:12 | every single element on the page is
inheriting this, not just the stuff that's on
| | 02:16 | the page right now, I'm going to go back into my
code, and inside the section just above
| | 02:22 | the paragraph, I'm not going to add another element,
I'm just going to add some text. I'm going to type in,
| | 02:27 | I'm just text within the section.
| | 02:34 | We don't need add another element, I'm just going
to add some text right there within the section,
| | 02:38 | save this, and when I go back to
my browser, and refresh the page,
| | 02:43 | you can see the text shows up, and it has
exactly the same formatting as all the
| | 02:47 | other text on the page,
| | 02:48 | even though it wasn't there originally,
and even though it's not inside of a
| | 02:51 | paragraph. It's inheriting the same
styling as all the other elements on the page.
| | 02:55 | So that demonstrates for us
| | 02:57 | the ways that styling applied to a
parent tag is inherited by all of the
| | 03:01 | nested elements inside of it.
| | 03:03 | But what about having child elements
overwrite that parent styling? Let's go ahead
| | 03:08 | and experiment with that.
| | 03:09 | So I'm going to go back into my code and I'm just
going to change this text here a little bit.
| | 03:13 | Number one, I'm going to replace that with an h1
tag, and inside the h1 tag I'm going to type in,
| | 03:19 | This is a test of inheritance. I'm going to go ahead
and save that, and again, I'm going to switch back
| | 03:28 | over to my browser and
refresh the content again.
| | 03:33 | Now, everything looks the same for the
most part. I mean it's green and it is Georgia,
| | 03:38 | but there's one thing very different and I think
it jumps right out at you, it's the size of
| | 03:42 | the text. The size is much different.
| | 03:45 | Now, we didn't explicitly set a size for the h1
did we? So how in the world is the h1
| | 03:50 | actually larger than everybody else,
| | 03:51 | when we clearly told the body tag to
be 120% and we're expecting that font
| | 03:55 | size to inherit every other element on the page?
| | 03:59 | Well, there's a little something going on here. Now
remember, we talked about this a little bit earlier,
| | 04:04 | all browsers have default style sheets
| | 04:06 | that have set formatting rules
inside of them, and one of those formatting
| | 04:10 | rules for each of the elements
on the page, is a font size.
| | 04:13 | So even though we said 120%,
| | 04:16 | what's happening here is that the h1,
and for that matter the paragraphs as well,
| | 04:21 | their value is overriding the body's
font size setting. Although that's not
| | 04:28 | entirely accurate either. It's
not really overwriting it.
| | 04:31 | It's more of a cumulative effect, and
let me show you what I mean by that. I'm going
| | 04:34 | to go back to the code, just below the body tag,
I'm going to go ahead and do a selector for the sections.
| | 04:42 | So remember, the section element is sort of
that top section, the one just below that is
| | 04:45 | an aside. So here, I'm going to type in
font-size, and let's go ahead and make that
| | 04:53 | 1.4ems, and color is going to be red.
So we're going to go ahead and save this,
| | 05:01 | go back to my browser and refresh it.
| | 05:04 | That is a huge change, so what's
happening here? Well, first off, we're seeing red.
| | 05:10 | What's happening there, of course, is
that the elements inside of the section, all
| | 05:14 | of those elements, the paragraph and the
heading, they're inheriting red from section.
| | 05:18 | Sections red is actually overriding the
parent body tags green, but what about size?
| | 05:24 | I'm going to go back to my code for just a moment here.
So what we're doing here is, we're using an em,
| | 05:28 | which is a relative unit of
measurement. What it basically means is,
| | 05:32 | I want it to be 1.4 times the size of
something. So here's what's happening, in
| | 05:38 | the body tag we're telling our font
size to be 120%.
| | 05:41 | So it's telling the browser, or whatever
device this is being rendered on,
| | 05:45 | take all of your text and make it about
120% bigger than it would normally be.
| | 05:49 | So your headings will still be larger
than paragraphs, they'll just be 120% larger
| | 05:54 | than they would have been originally,
paragraph default size will be 120%
| | 05:57 | of what it would've been. So now
what section is doing is, section is saying
| | 06:02 | hey, take that computed value,
whatever it may be, and multiply it by 1.4
| | 06:06 | times what it was, and make
it that much larger.
| | 06:10 | So that's one of the interesting things
about inheritance. Most of the time it's
| | 06:14 | a simple overwrite. Properties are either
being inherited or they're being overwritten.
| | 06:18 | But in some instances, especially when
you're using relative units of measurement,
| | 06:22 | the effect will be cumulative, so that
does occur as well. Finally, if I go in,
| | 06:27 | and just below section I write
another selector, and this time
| | 06:30 | just for my paragraphs, so p. I'm just going
to do color, and we're going to do blue for that.
| | 06:36 | Now let's think about this before we test this.
I'm going to go ahead and save this, but let's
| | 06:39 | think about this for a moment.
| | 06:40 | So, body is telling everybody to be green,
so all elements on the page are going to be green.
| | 06:45 | Section is saying okay, but everybody
inside me I want red, and paragrahps are saying,
| | 06:50 | no no no no, I want to be blue.
| | 06:52 | So, if we go back over to our browser and
refresh it, we can see exactly what happens.
| | 06:59 | The heading remains red because again,
it's inheriting that from the section.
| | 07:03 | Each of the paragraphs however, is
now blue, and there's nothing on the page
| | 07:07 | that's green, because everything else
is getting a value either from a child
| | 07:11 | element or inheriting it from an element
that's a little bit closer to the source. Before
| | 07:15 | we wrap up, there's one more thing I wanted to
point out. You may have noticed that the strong
| | 07:19 | tags -- I didn't really talk about
them a whole lot, but they're bold right?
| | 07:21 | And that's because their default
value of font-weight is overriding the normal
| | 07:27 | value of the paragraph because again,
it is a child element. On the surface
| | 07:31 | inheritance is an easy concept
to understand, however,
| | 07:34 | when you consider the complexity of most
sites, along with having to account for
| | 07:39 | user agents default styling,
| | 07:41 | it's not always easy to keep up with
all the different sources that an element
| | 07:45 | can receive styling from. That's one of the
reasons why it's so important to keep
| | 07:49 | your styles organized as you plan and
write them. You know, inheritance also gives us an
| | 07:54 | easy way to write really efficient
styles. We simply write the most basic
| | 07:58 | global styles on parent elements, and then
overwrite them using inheritance when you
| | 08:02 | need nested elements to be formatted
differently. Now this prevents you from having
| | 08:06 | to write multiple rules for
every child element, and makes updating
| | 08:10 | content much easier. You know, as with any
technique, mastering inheritance takes a little
| | 08:15 | bit of time, so as you start out, be
very mindful of how parent and child
| | 08:19 | styles are affecting each other, and
over time, using inheritance will just become
| | 08:24 | second nature.
| | Collapse this transcript |
| Selector specificity| 00:00 | Most of the time the cascade, or inheritance,
can be counted on to resolve styling conflicts;
| | 00:06 | however, there is a third concept,
specificity, that can come into play as well.
| | 00:11 | Now understanding it is critical, as
the majority of the time when authors have
| | 00:15 | styling errors that they just can't
quite figure out due to conflicts,
| | 00:19 | specificity is usually the culprit.
| | 00:21 | Now the specificity of a selector
is just that--how specific is it?
| | 00:26 | In the event of a conflict between
two selectors that inheritance can't
| | 00:30 | solve, the specificity of the selector is
used to determine which selector has precedence.
| | 00:36 | Okay, so how is it calculated?
| | 00:38 | Well, all simple selectors
are weighted with a value.
| | 00:41 | IDs are worth 100, classes are worth
10, and element selectors are worth 1.
| | 00:45 | So in this chart, the first selector
here, body, has 1 element selector.
| | 00:49 | Its specificity would be 1.
| | 00:50 | #mainContent is an ID selector.
Its specificity would be 100. .quote,
| | 00:56 | that's a class selector.
| | 00:58 | Its specificity would be 10. A seemingly
complex descendent selector, div p, would
| | 01:03 | actually only have a specificity of 2,
because it has 2 elements in it, and then
| | 01:07 | #sidebar p that has 1 ID, 1
element, specificity of 101.
| | 01:13 | So, once you get the
hang of this, once you know,
| | 01:15 | okay, IDs are 100,
classes are 10, elements are 1,
| | 01:18 | it's a little easier to calculate.
| | 01:21 | But let's go ahead and try it out ourselves.
| | 01:24 | So here I am in specificity.htm, and you
can find this in the 03_04 folder. Again,
| | 01:31 | very simple page structure. If I scroll
down, I can see that I have a section with
| | 01:35 | an ID of mainContent.
| | 01:37 | Inside of that there is just a single
paragraph, and inside of that there is a strong tag.
| | 01:43 | Okay, so what I want to do is go over to
my selectors, and I am just going to add
| | 01:48 | another paragraph selector
right below the first one.
| | 01:51 | That seems kind of weird, I know, but I am
going to change the color of this to blue.
| | 01:55 | Now, knowing what we know about the
cascade, we realize that all the paragraphs
| | 01:59 | on this page would be blue rather than red,
because blue comes after it, right? Well, not always.
| | 02:07 | If I go up to the first selector and I
change that, when I say #mainContent--
| | 02:14 | remember that's the ID of the section
that this paragraph is contained in, so
| | 02:19 | you are saying any paragraph inside of
an element with an ID of mainContent.
| | 02:22 | Now if I save this and test this in my
browser, I can see that the color it's
| | 02:28 | using is red instead of blue.
| | 02:30 | So if I go back to this, the cascade
doesn't appear to always be right, does it,
| | 02:34 | because this should be the last
rule that's applied, but it's not.
| | 02:38 | This one is because this
selector is much more specific.
| | 02:41 | We have 101 versus 1. The 101 always wins.
| | 02:47 | I am going to go back down to my code,
and I am going to change the paragraph
| | 02:49 | element by adding a class attribute to
it, so I am going to say class green.
| | 02:54 | You can probably guess
where we are going to go with this.
| | 02:57 | Down below, in my first paragraph selector,
I am going to type in .green, so we are
| | 03:01 | writing a class selector for that.
And I am just going to say color: green.
| | 03:05 | I am going to save this, preview it
in my browser, and nothing happens.
| | 03:11 | This is typically where designers just
go crazy because they are like, okay, I
| | 03:15 | wrote a class selector, I applied the
class attribute to my element, and I'm not
| | 03:21 | getting the styling.
It's not working. Why is that?
| | 03:23 | Well, it's not working because there
is a selector elsewhere with a higher
| | 03:28 | degree of specificity than the
one that you're trying to use.
| | 03:32 | This has a specificity of 10.
| | 03:34 | Remember this one has a specificity of 101.
| | 03:38 | Now this is one of the reasons why a
lot of people avoid using ID selectors.
| | 03:42 | They are so specific that once you
write them they are very hard to overwrite.
| | 03:46 | I don't think they are a
problem. I still use them.
| | 03:49 | I just have to make sure that my styles
are organized in such a fashion that I'm
| | 03:52 | not surprised by those at any one point.
| | 03:55 | What I am going to do now is go down to
my strong tag, I am going to remove the
| | 03:59 | class from the paragraph tag, and I am
going to apply the exact same class to
| | 04:05 | the strong tag. And when I save this
and preview it in my browser, I can see
| | 04:10 | that the text that's nested within the strong
tag does indeed get that styling, so why is that?
| | 04:15 | So in this case we know that green only
has a specificity of 10, which shouldn't
| | 04:21 | override this, right, because
that has a specificity of 101.
| | 04:25 | Okay, so here's where
things get a little complex.
| | 04:28 | So specificity works just fine
until inheritance is involved.
| | 04:32 | Remember, this strong text is
nested inside of this section.
| | 04:38 | So we learned from inheritance that
yes, those properties like color will
| | 04:41 | inherit, but if a child element has a
style that differs or conflicts with the
| | 04:48 | parent styles, the child styles always win.
| | 04:50 | So in this case we are seeing
inheritance and not specificity.
| | 04:53 | So you have to be pretty sure of when one's
going to occur versus the other of course.
| | 04:58 | Now if I go down in my CSS
and I do strong and say color:
| | 05:05 | purple, for example, and save that, now
when I preview this, it's not purple; it
| | 05:12 | remains green--and again
here specificity is the reason.
| | 05:15 | Green, specificity of 10,
strong specificity of 1, green wins.
| | 05:21 | Now if I come here and make this
a little bit more specific and say
| | 05:24 | strong.green, so that is now an
element-specific class selector,
| | 05:29 | this now has a specificity of 11, the
10 for the class, the one for the element,
| | 05:34 | which is going to be higher than the 10 here.
| | 05:37 | So if I save this and
preview it, now I get the purple.
| | 05:42 | So there are a couple things to
remember here. Number one, you always have to
| | 05:45 | keep track of how specific a rule is
to know if you need to make something a
| | 05:49 | little bit more specific to overwrite something.
| | 05:51 | You want to try to keep your
specificity of your rules as low as possible.
| | 05:55 | They are easier to parse that way
and they are also a lot easier to
| | 05:58 | overwrite later on.
| | 05:59 | And the other thing is, semantic naming matters.
| | 06:03 | We named this class green and yet
the color that's displaying is purple.
| | 06:06 | So that specific class
really doesn't mean anything.
| | 06:10 | We won't want to name that something
that's a little bit more descriptive.
| | 06:13 | So if you're new to CSS, keeping
track of all the rules around cascade,
| | 06:18 | inheritance, and
specificity can be a little tricky.
| | 06:21 | I totally understand that.
| | 06:23 | However, I cannot stress to you
enough how critical these skills are to
| | 06:28 | writing your CSS properly.
| | 06:30 | As your pages and your styles become
more complex, being able to track down and
| | 06:34 | solve conflicts will become an
increasingly important skill--trust me on that.
| | 06:39 | Also, having a thorough understanding
of these rules will allow you to plan and
| | 06:44 | write CSS that avoids
these conflicts altogether.
| | 06:47 | The styles will be a lot more easy to
maintain, and your styles will use the most
| | 06:52 | efficient rule structure possible.
| | Collapse this transcript |
| The !important declaration| 00:00 | In addition to the cascade,
inheritance, and specificity, there is one more
| | 00:05 | CSS technique that can be used to
resolve conflicts, and that is the
| | 00:10 | important declaration.
| | 00:12 | I like to call the important
declaration the WMD of CSS.
| | 00:18 | It doesn't matter what else is going
on in your styles, in the event of a
| | 00:21 | conflict, the important
declaration wins, end of story.
| | 00:25 | In fact, the only thing that can
override an important declaration is another
| | 00:30 | more specific important declaration, or some type
of user-controlled style sheet. Let's try it out.
| | 00:37 | I have the important.htm file open here.
| | 00:40 | You can find this in the 03_05 folder.
| | 00:44 | Again, very simple. We have a section
of an ID of main content, a paragraph with
| | 00:49 | the strong tag inside of it, so really,
you know basically the same thing we had
| | 00:52 | in the previous movie.
| | 00:54 | I want to go back up to our styles
here and after the existing paragraph
| | 00:57 | selector, I'm going to type in mainContent p,
and here we're just going to get a new color, green.
| | 01:06 | Obviously, the paragraph was going to
be red, but we know since this paragraph
| | 01:09 | is inside of an ID with main content
and we know that the selector is much more
| | 01:13 | specific plus its placed in the cascade,
| | 01:16 | we know pretty what's going to happen
here. If we preview this in a browser,
| | 01:20 | yes, indeed we get green text.
| | 01:22 | Okay, so nothing new there.
| | 01:25 | I want to go down, however, into the
actual code itself, and I'm going to
| | 01:29 | apply an inline style here, so style equals, and
inside that I'm just going to new color purple.
| | 01:36 | So again save this, preview this, and
exactly what we expected to happen.
| | 01:40 | So we have got inheritance, we
have got the cascade, we have got the
| | 01:44 | inline styles going on here, and all of them
are behaving exactly the way we expected them to.
| | 01:49 | But remember, there is one rule
to rule them all, and that is the
| | 01:53 | important declaration.
| | 01:54 | If I go back up to my very first paragraph
selector and after the property value red--
| | 02:00 | now I'm going to do this inside of
the semicolon, but leave a little bit to
| | 02:04 | whitespace between the property value and this--
| | 02:06 | I'm going to type in an
exclamation point and the word important.
| | 02:12 | So the exclamation point means
you're serious, so hey, this is important.
| | 02:15 | And that's really what this is saying:
| | 02:16 | this is saying hey, this is the most
important thing in the world regarding this property.
| | 02:22 | So you need to overwrite everybody
else. So if I save this and once again
| | 02:27 | preview it, it goes right back to being red.
| | 02:30 | So irregardless of the cascade,
irregardless of specificity, irregardless of the
| | 02:35 | inline style, the important declaration
wins, and it will win every single time.
| | 02:41 | Of course this is an
extremely useful tool to have.
| | 02:45 | I really want to caution you about using this.
| | 02:48 | Too many times, designers that are new
to CSS and when they run into a styling
| | 02:52 | conflict that they just can't seem
to solve with their complex site,
| | 02:55 | they will just throw the important
declaration out there, knowing that it's going
| | 02:58 | to apply the desired styling and solve
any of the other conflicts, so they just
| | 03:03 | kind of start doing that as a regular thing.
| | 03:05 | Now the problem with this is that
pretty soon you're styling becomes littered
| | 03:09 | with important declarations that
makes your styles an absolute nightmare to
| | 03:14 | maintain, and it's almost impossible for
anybody following you and editing your
| | 03:18 | code to track down any of those styling
conflict, because you have those things
| | 03:21 | overwriting everything else.
| | 03:22 | I would even almost go as far as to
recommend that you not even use it or
| | 03:26 | that if you do use it, you think of
it as like kind of a last resort.
| | 03:29 | Now I'll be honest, in all of the years
that I've styled sites with CSS I have
| | 03:33 | never used it, not one time.
| | 03:35 | I have always found that there's
always another way to solve conflicts.
| | 03:38 | Now, I'm not saying that you should never use
it, just that I personally have never had to.
| | 03:44 | In some cases, such as like a user-
interface-widget styling that you want to make
| | 03:48 | sure it never gets overwritten and
those user interface widgets might travel
| | 03:51 | from site to site, I would say
it's very acceptable to use it.
| | 03:54 | I'm just saying that make sure you
have a valid reason for using it and that
| | 03:59 | you have documented its use in your CSS,
so that it doesn't come back to haunt
| | 04:03 | you later on.
| | Collapse this transcript |
| Reducing conflicts through planning| 00:00 | Before we move on to our lab for this
chapter, I want to take a brief moment and
| | 00:04 | talk about a few techniques that you
can use to help reduce styling conflicts
| | 00:08 | when planning your styles.
| | 00:10 | Now as I mentioned earlier,
understanding the cascade, inheritance, and
| | 00:13 | specificity are crucial to avoiding conflicts.
| | 00:16 | They can also be put to good use in
creating styles that are easy to maintain
| | 00:20 | and reduce the amount of
code necessary for your styles.
| | 00:24 | First, avoid using local
styles whenever possible.
| | 00:27 | While it's true that embedded styles
give you an easy way to override the global
| | 00:31 | side-wide styling found in
external style sheets,
| | 00:34 | you're also going to add on a layer of
unnecessary complexity to your sites.
| | 00:39 | When updating or modifying your styles,
you have to remember each and every page
| | 00:44 | that has embedded local styles.
| | 00:46 | Once the size of your site starts to
grow, this can become a very tedious task
| | 00:51 | if you have a lot of embedded styles.
| | 00:53 | It's also very easy to miss embedded
styles, especially if you work in a team
| | 00:57 | environment or are editing someone else's site.
| | 01:00 | I'm not saying I don't use them; just
to make sure that you carefully consider
| | 01:04 | how the local styles fit
into your overall site strategy.
| | 01:07 | Second, avoid using inline styles altogether.
| | 01:11 | There's simply no compelling reason to
use them, unless you're targeting a user
| | 01:16 | agent like an email client that
doesn't support other styling methods.
| | 01:20 | They're almost impossible to detect,
they can cause styling conflicts that make
| | 01:25 | you want to pull your hair out, and
they are a maintenance nightmare.
| | 01:28 | Next before you begin writing styles,
develop a strategy for rule specificity
| | 01:33 | before you begin to write your styles.
| | 01:35 | Now what I mean by that is that you
don't want to mix in selectors that make
| | 01:39 | heavy use of IDs in one section with
selectors that use no IDs or just classes later on.
| | 01:45 | This creates an imbalance in
selectors that can be difficult to overcome.
| | 01:50 | Unlike some designers, I have
no qualms about using ID selectors in my
| | 01:54 | styles. I use them all the time.
| | 01:56 | However, they're so specific that I have
to really think about how I'm going to
| | 02:00 | use them before I begin to write my styles.
| | 02:03 | Overusing them can create a style
sheet that becomes difficult to add styling
| | 02:07 | to later on as the
existing rules are so specific.
| | 02:11 | A good rule of thumb is this:
| | 02:13 | if you begin to find that you're
consistently writing descendent selectors
| | 02:17 | that use more than two selectors combined
together, you've got a problem with your styles.
| | 02:22 | At that point, maybe take a step
back and think about how you can reduce the
| | 02:26 | specificity of your rules and still
achieve the styling that you're looking for.
| | 02:30 | Also, take advantage of inheritance.
| | 02:33 | If you carefully consider the page
structure and your styling goals before
| | 02:36 | writing your styles, you should be able
to identify formatting requirements that
| | 02:40 | are consistent across pages and elements.
| | 02:42 | These styles can be written as global styles on
parent elements and inherited by their children.
| | 02:48 | For you as an author, it means that
there are fewer styles for you to write
| | 02:52 | and editing those styles requires you
to only make changes to a single rule,
| | 02:56 | not multiple rules.
| | 02:57 | Now more than anything else, try to think
about how your styles will relate to each other.
| | 03:03 | The biggest mistake I see new designers
make when writing CSS is to go through a
| | 03:08 | page and style each element
individually without thinking about how those
| | 03:12 | elements relate to each other.
| | 03:14 | This approach leads to bloated
style sheets, conflicting styles, and
| | 03:17 | unorganized styles that are just
difficult to maintain and update.
| | 03:21 | By thinking of your site and your styles
as a whole before authoring them, you'll
| | 03:26 | have a better idea of how those styles
should be organized and how you can write
| | 03:30 | them more efficiently.
| | Collapse this transcript |
| Resolving conflicts: Lab| 00:00 | So now that we've taken a look at all
the different concepts involving style
| | 00:04 | conflicts, it's time for
our resolving conflicts lab.
| | 00:08 | Now in this lab I want to test your
ability to resolve the conflicts through
| | 00:12 | using the cascade, inheritance, and
specificity. Just like the previous lab, there
| | 00:17 | are several different ways that
you could accomplish our goals,
| | 00:20 | so while concentrating on how to
solve the problems, be sure to think about
| | 00:25 | how the solutions are coming up with works
within the overall structure of the site's styles.
| | 00:30 | You want to make sure you're also doing
it in the most efficient way possible.
| | 00:34 | So from the 03_07 directory, I have the
galleries.htm file opened and the main.CSS
| | 00:41 | opened that's located in the
_CSS folder in the same directory.
| | 00:46 | Okay, it's the same site that we worked
at in our last lab. If I preview this in
| | 00:50 | a browser, you can see this time we're just
kind of playing around with the galleries page.
| | 00:55 | There are some things going
on here that I want to change.
| | 00:57 | I am not happy with the paragraph
styling over here. The styling here is
| | 01:01 | obviously wrong. We're having some styling
conflicts here within the headers of this page.
| | 01:06 | So there are some things that we need
to clean up and that we need to change
| | 01:10 | based on some style
conflicts that are occurring.
| | 01:12 | Okay, I'm going to go back into our
code. Again it's very helpful if you
| | 01:17 | review the structure of the page. We
have at the very top a page header with
| | 01:21 | an ID of page header.
| | 01:22 | We have a nav with an ID of main nav.
| | 01:25 | That's followed by a section called content.
| | 01:27 | In this case, the article that follows
directly inside of section has an ID of galleries.
| | 01:32 | We have interior sections with
their own classes applied to them.
| | 01:36 | After the article, we have the aside,
which is our sidebar. It has its own nav
| | 01:40 | inside of it, a couple of sections
inside of that, and then finally our footer.
| | 01:45 | So be aware of that structure.
Review that structure as you're reviewing
| | 01:49 | the goals for this lab.
| | 01:50 | Now I'm going to switch over to
main.css, and one of the biggest changes in
| | 01:54 | this lab compared to the previous lab
is that in the previous you went ahead
| | 01:58 | and wrote all your selector in sort of one
location, right down at the bottom of the page.
| | 02:02 | But if I scroll down to the bottom of
these styles, I find that although we have
| | 02:06 | some instructions down here,
| | 02:08 | this is not the locations that
these selectors will need to be.
| | 02:12 | You're going to need to find out
where in the selectors, where in the styles
| | 02:16 | themselves, the rules that you're about
to write are going to be written. Some
| | 02:20 | might need to be embedded styles, some
might be in this external style sheet,
| | 02:24 | some might need to be inline styles.
| | 02:27 | If you paid attention to last movie
where I talked about structure, you might
| | 02:30 | know what my opinion of using embedded
styles and inline styles are relating to
| | 02:35 | an entire site, but that might be your decision.
| | 02:37 | So what I want you to do is we're
going to go through these one by one, but
| | 02:41 | really you're going to have to
understand the structure of our styles as well.
| | 02:45 | So take some time. Go through our
styles. Take a look at how they're organized.
| | 02:50 | You know again we have our global styles at top.
| | 02:52 | They are followed by our basic layout styles.
| | 02:56 | Those are followed by constant region
styles. And if you take a look at these
| | 03:00 | content regions, you know the header
cells show up first. Then we have our
| | 03:03 | navigation styles. Those are
followed by our banner styles.
| | 03:08 | These are actually more or less in the
same order of structure that you'll find
| | 03:11 | the page in, and I do that on purpose.
Number one it makes them easier to find,
| | 03:15 | and number two, in terms of the
cascade, they really help make sure that the
| | 03:19 | styles that you're writing are applied
after elements that have come before it.
| | 03:23 | Okay, so you have to determine exactly
where to place these selectors or which
| | 03:28 | selectors to modify.
| | 03:29 | Let's go take a look at what we have to write.
| | 03:31 | So the first thing that I want you to
do is, these properties, and you can copy
| | 03:36 | and paste these properties and put
them inside of the selector that you
| | 03:40 | write, but these properties need to
be applied to every element on the page
| | 03:44 | as their default styling.
| | 03:47 | So you want to make sure that those
properties are applied to every single
| | 03:51 | element on the page just
as their default styles.
| | 03:54 | That's not the saying they
might not be overwritten later on.
| | 03:56 | I just want them to start
out as the default styles.
| | 04:00 | The second task is to browse up to line
244--we will do that in just a moment--and
| | 04:04 | view the article styles section.
| | 04:06 | These selectors are conflicting with the
page-specific main content styles below
| | 04:12 | them and preventing some of the
formatting from those rules from being applied.
| | 04:17 | Modify the selectors in this
section to resolve this conflict.
| | 04:20 | So if I go up to line 244, I can
see that here are my article styles.
| | 04:25 | So I have a whole section of article
styles, and then below them I have these
| | 04:29 | page-specific styles.
| | 04:31 | Now we're on the galleries page, so
that's really what you should probably be
| | 04:34 | paying attention to, but what is
happening is these selectors, which are
| | 04:38 | supposed to be sort more global, are
actually overriding these selectors, which
| | 04:42 | are page-specific and should be
overriding the generic article styles when
| | 04:47 | they're applicable.
| | 04:48 | So that's not happening right now.
| | 04:50 | You'll need to figure out why that's not
happening, and you'll need to modify the
| | 04:53 | selectors in order to make that happen.
| | 04:57 | For the third one, we've got some
properties down here that need to be included
| | 05:00 | in a rule that targets the
heading 2s on the gallery page only.
| | 05:05 | So remember what we said about area-
specific styles, these page-specific styles.
| | 05:09 | So here we have some selectors that
are targeting individual page content.
| | 05:14 | You need to take a look at the
structure of the selectors and figure out how to
| | 05:17 | structure your own selector to make
sure that these properties are only being
| | 05:21 | applied to heading 2s on the gallery page.
| | 05:25 | And then finally, we need to take these
properties and write a rule that changes
| | 05:30 | the paragraph formatting for
the text in the page sidebar.
| | 05:34 | Now remember, the page sidebar is that aside.
We'll go and take a look at that in just a moment.
| | 05:38 | You should be careful to make sure the
rule is written so that it overwrites
| | 05:41 | previous paragraph styling and limits
the styling to the contest sections.
| | 05:48 | So within our sidebar we have our
archive galleries, and then we have our
| | 05:52 | contest sections. There's two of those.
| | 05:55 | We want to make sure that these
properties only write those paragraphs in those
| | 05:59 | contest sections, and you can go up and
find those aside styles around line 509.
| | 06:06 | Okay, so that's what your goals are.
| | 06:09 | Now, I'll admit that this lab is a
little bit tougher than our last one, and
| | 06:13 | that's mainly because you're going to
have to go in, analyze, and write new styles
| | 06:18 | in a style sheet that you
didn't write or organize yourself.
| | 06:21 | Now this could be quite a challenge, I
totally understand that, but I'll be
| | 06:25 | honest with you, it's not an
uncommon task in the world of web design,
| | 06:28 | so this is actually really good practice.
| | 06:30 | Be sure to pay special attention to
page structure and how these styles
| | 06:34 | are organized as well.
| | 06:35 | By going through the page structure
carefully, you're going to have a better idea
| | 06:39 | of how to solve the problems I've given you.
| | 06:42 | Okay, there you go. Have fun!
| | Collapse this transcript |
| Resolving conflicts: Solution| 00:00 | Welcome back! Now in this movie I want to check your
solutions to our resolving conflicts lab
| | 00:05 | with my finished files.
| | 00:06 | Now again, remember in CSS there are often
multiple valid solutions, so don't assume
| | 00:11 | that if your solutions don't match mine
that they are incorrect. In those instances
| | 00:15 | compare why you made the decisions to
structure the selector the way that you did
| | 00:19 | with my own rationale and
decide which one you prefer.
| | 00:22 | So to go over these files, I'm
looking in the 03_07 finished_files folder.
| | 00:28 | I have the galleries.htm opened up, and
I have the main.css open from the _CSS file.
| | 00:34 | Now I just want to preview this in my
browser so I can kind of see what our
| | 00:38 | finish files looks like.
| | 00:39 | Okay so our styling here is correct now.
| | 00:41 | We've got the proper styling here.
We've got the proper styling in our headlines.
| | 00:44 | The dates are showing up the way we
want them to. Over here in the paragraphs
| | 00:48 | in the sidebar, they're sized
the way that we want them to.
| | 00:51 | So everything is looking pretty good.
| | 00:53 | All right, so I'm going to go back into
my code and I'm going to talk about the
| | 00:57 | solutions that I came up with.
| | 00:59 | So I'm going to go to the main.css, and
I'm going to start with our first task,
| | 01:04 | which was applying global default styling.
| | 01:06 | I'm going to go down to line 72, and
I can see that I took all of those
| | 01:09 | properties that we needed and I placed
them inside of just a generic everyday
| | 01:14 | body element tag selector.
| | 01:16 | It's a smart choice, because applying
this styling to the body element means
| | 01:19 | that it's inherited by everybody
on the page that can inherit it.
| | 01:22 | It's also a basic rule, so it's easy for
interior rules to override it if they need to.
| | 01:27 | It's also towards the top of my code, the
top of my styles, so it's applied first
| | 01:31 | and then any of the other selectors
below it that need to override it can also
| | 01:35 | do that through the cascade.
| | 01:36 | So there's a lot of thought that went
into where it is located and then the
| | 01:39 | selector that we are actually using there.
| | 01:41 | The second task we were given
was to deal with the conflicting styles
| | 01:46 | down around line 244.
| | 01:47 | We had the articles section styles
conflicting with the page-specific styles.
| | 01:51 | Now I'm going to scroll down
and show you what I did there.
| | 01:55 | Okay, so around 244, in this case
around 253 or so, are my article styles.
| | 02:01 | And before, you may have remembered that
we had the #content ID selector as
| | 02:09 | part of these as well.
| | 02:10 | Well, that is way too specific.
Remember IDs are 100, so each of these had
| | 02:15 | specificities of 102, 103--very, very high.
| | 02:19 | So it was very difficult for these
page-specific styles that come after it to overwrite them.
| | 02:25 | So there are a couple of different
ways that you could have solved this.
| | 02:28 | One is that you could have made these
selectors here more specific, but since
| | 02:33 | they already use ID selectors, adding
another layer of ID selectors to them and
| | 02:37 | making them even more specific than
this was probably not the right choice.
| | 02:40 | In this case, the right choice was to go
in and reduce the specificity of these
| | 02:45 | selectors, allowing them to now be
overwritten by these more specific selectors.
| | 02:50 | Now if I scroll down a little bit more,
here is a rule that I wrote to target
| | 02:55 | just the heading 2s inside the galleries page.
| | 02:58 | Now there are also a couple of
different ways that you could have solved this.
| | 03:01 | Number one, you could've gone over to
the galleries.htm and you could've written
| | 03:04 | an embedded style for that page.
| | 03:06 | Some of you may have done that.
That was not wrong solution.
| | 03:09 | That works just fine. It would have worked okay.
| | 03:12 | It would've overwritten any type of
rule here that would have targeted the
| | 03:16 | galleries h2 as well.
| | 03:18 | But I'm of the mind if I don't have to
use the embedded style, I don't want to;
| | 03:23 | I want to avoid that.
| | 03:24 | So using the same type of rationale
that these other selectors are using, I
| | 03:29 | combined the h2 selector with the
galleries ID--notice that I use the descendent
| | 03:34 | selector with the space between them--
and that way I'm only targeting the h2
| | 03:38 | that's inside of that galleries
region, which is only going to occur on the
| | 03:43 | galleries page, and you can see that
right there, article ID galleries. Perfect.
| | 03:48 | Now the last thing that we needed to
do was to target the paragraphs in the
| | 03:53 | sidebar, and I wanted to limit the
styling to the paragraphs that were in
| | 03:57 | the contest region.
| | 03:58 | So if I scroll down to about line 567,
so where did I place this?
| | 04:04 | I placed this rule inside the aside
styles regions. That's really where it
| | 04:09 | belongs and I just took it almost
all the way down, you know, towards the
| | 04:12 | bottom of those rules.
| | 04:14 | Now the selector that I wrote is a p
element selector that's used in a descendent
| | 04:19 | selector with the .contest.
| | 04:21 | If you looked over the structure of
these, you'll notice that each of these
| | 04:25 | sections has a class of contest applied to it.
| | 04:29 | Yes, there are other ways to do this.
| | 04:30 | I could've done aside, space,
p; that would work just fine.
| | 04:34 | There are other selectors that would
worked as well. But I like using the class
| | 04:37 | selector here because it really
refines the fact that this should only be
| | 04:41 | applied when it's on those contest sections.
| | 04:45 | So it was specific enough;
| | 04:47 | it is in the right place, in terms of
organization within the style sheet; and it
| | 04:51 | targets exactly the element
that I'm looking for. Excellent!
| | 04:54 | Now there are a lot of different
solutions for how you could've done that,
| | 04:56 | so if you did it a little bit
differently than I did, don't feel that it's wrong.
| | 05:00 | Again, just compare your logic with
mine and see which one you like best.
| | 05:04 | Now honestly, the absolute best way to
reduce the amount of conflicts in your
| | 05:07 | styles is through planning and organization.
| | 05:11 | By knowing how your site is going to
structured and developing a strategy for
| | 05:15 | organizing styles based on that structure,
| | 05:18 | you can eliminate many of the
conflicts before they even happen.
| | Collapse this transcript |
|
|
4. Basic Text FormattingSetting a font family| 00:00 | Now that we've talked about how to
target content on the page and how to resolve
| | 00:04 | any conflicts that might arise.
| | 00:07 | I want to move on to focus on the
properties that we can set for CSS rules and I
| | 00:12 | want to start by focusing in
this chapter on typography.
| | 00:16 | Basic text formatting is a natural
place to start when discussing CSS
| | 00:20 | properties, because typography is such an
immediate need for beginning web designers.
| | 00:25 | I want to start by going over the
syntax for choosing font-families.
| | 00:30 | So I have the font-family.htm file open
here and you can find that in 04_01 folder.
| | 00:37 | Very basic page structure. Again we
have our article tag inside the body tag,
| | 00:42 | inside of that we have a headline
and just a couple of paragraphs.
| | 00:46 | So what I want to do,
| | 00:48 | is I want to go up to the body rule
that's one of the places where we've been
| | 00:52 | sort of setting font-families in the
past and you may have remembered doing this
| | 00:57 | in some of previous exercises, I'm
just going to create a new property, I'm
| | 01:01 | going to use the font dash family property,
font-family and I'm just going to ahead
| | 01:07 | and pass the font name Arial.
| | 01:09 | So you'll notice we don't need any
quotation marks there, the font doesn't need
| | 01:13 | to be capitalizes it is case-
sensitive and it must be spelled correctly.
| | 01:17 | So when I save this and if I test it
one of my browsers, I can see that I am
| | 01:23 | giving Arial as the font-family.
| | 01:25 | Now, I'm not embedding Arial in the page.
| | 01:28 | What's happening is the web browser is
requesting from the client machine the
| | 01:32 | font Arial, its saying hey
do you have Arial installed.
| | 01:35 | Well, one of the problems with using
these types of system fonts is that we are
| | 01:40 | relying on the client machine.
| | 01:42 | So in this case if the page we're being
previewed on a system that maybe didn't
| | 01:47 | have Arial installed what would happen
is the browser would just go ahead and
| | 01:51 | use its default font whatever
that might be to display the page.
| | 01:55 | What happens if the default font is a
lot different than Arial? What happen if
| | 01:59 | it's Times New Roman or Times? The
page is going to look entirely different?
| | 02:03 | So there are few things that we can do
when we are defining our font-families
| | 02:06 | the sort of combat this fallback procedure.
| | 02:08 | So I'm going to go back to my code and
right after Arial, inside the semicolon,
| | 02:13 | I'm going to type in comma Helvetica.
I'll save that and if I preview this in my
| | 02:20 | browser I'll notice no change and I
notice no change because we'll Helvetica is
| | 02:25 | installed on the system, but Arial is as well.
| | 02:28 | So this is what's known as a font
stack and you can have as many fonts
| | 02:32 | listed here as you want.
| | 02:34 | What's going to happen is that the
browsers is going to request from the
| | 02:36 | client machines this font first, if it finds
it, it will display the page using that font.
| | 02:42 | If it's not installed it will fall
back to the next font in the stack, so you
| | 02:47 | can just keep adding as many
to the stack as you'd like.
| | 02:50 | Usually at the end of the stack you're
going to pass a generic font-family that
| | 02:54 | is basically the same as the fonts
you're requesting, so at the end of this
| | 02:57 | stack if I type in comma sans-serif, I'm
asking for whatever the devices default
| | 03:06 | or generic sans-serif font might be.
| | 03:08 | So in the case that Arial or Helvetica wasn't
installed I would at least get a sans-serif font.
| | 03:14 | In this case if I saved it and tested
it, again I'm not going to notice any
| | 03:18 | change, because Arial is already installed.
| | 03:21 | Well let see this fallback actually working.
| | 03:24 | So I'm going to go ahead and remove
this font stack and add another one, I'm
| | 03:28 | just going to enter NoFont, Georgia,
serif. I'm going to go ahead and save that
| | 03:37 | and if I test this in my browser, I notice I
get Georgia, because no font is not a font.
| | 03:43 | So it was the first font that
the browser request for my system,
| | 03:47 | the system said I have no idea what
font that is I don't have it, so went ahead
| | 03:50 | and used Georgia instead.
| | 03:53 | Even if you were to have two of them
fail on you, so I went NoFont, NotAFont,
| | 03:59 | serif, if I saved this and tested it,
| | 04:03 | notice that I'm not getting Georgia anymore,
but I am giving the default serif font.
| | 04:08 | So serif and sans-serif are part of the
generic font families all systems have a
| | 04:13 | font that's dedicated to be the generic
sans-serif or generic serif font. Let's
| | 04:19 | take a look at what those fonts might be.
| | 04:21 | Now this fonts are always going to
change based on the operating system that
| | 04:23 | you're using, what fonts
are installed on the machine,
| | 04:26 | whatever those preferences are. So as
you're testing this with me, I would
| | 04:30 | expect that you're going to
see different results than I am.
| | 04:33 | So don't be surprised by that.
| | 04:35 | Remember, you're basically getting the
default font that set for that sort of
| | 04:38 | generic font-family.
| | 04:40 | Two are the generic font families we've are
talked about serif and sans-serif, but
| | 04:45 | there are few more out there that I
want to talk about. One is monospace.
| | 04:49 | So if I just do a font stack with
nobody else in front of it, I just name
| | 04:52 | the generic font face,
| | 04:53 | if I save this then I get what if the
default monospace font might be in this
| | 04:59 | case looks like it is Courier.
| | 05:01 | I could also request to little-
known ones and that is cursive,
| | 05:06 | so if I go ahead and save that and
test that in my browser, I get this lovely
| | 05:11 | font here, that's very nice.
| | 05:13 | And we also have in place of cursive, you
could use fantasy and it's probably my favorite.
| | 05:19 | Now I'm going to save this and test it,
and I get oh, Papyrus, well yes that's the
| | 05:24 | first thing that comes in
my mind when I think fantasy.
| | 05:26 | Now if you're using a PC, you might
even have in a comic-sans here which is
| | 05:29 | even little bit more ironic.
| | 05:31 | Let's go back to our font stack and
what I want to do now is to do sort of a
| | 05:36 | longer font stack using Georgia.
| | 05:38 | I'm going to type in Georgia,
Times, Times New Roman, serif.
| | 05:47 | So you can string as many fonts
together as you want, there is no limit to
| | 05:53 | them and typically you want to
stick to two or three fonts, four fonts
| | 05:57 | probably at the most.
| | 05:58 | Now there is a little bit of a problem
with the syntax that I've written here.
| | 06:02 | Times New Roman is one single font, but the
problem is there are white spaces in its name.
| | 06:08 | Whenever you have a font that has
multiple words in its name, it's best to go
| | 06:13 | ahead and pass that in as a literal string.
| | 06:15 | So I'm going to want to go ahead and
encase Times New Roman in quotation marks.
| | 06:20 | So if I save this, test in my browser
now I'm getting Georgia again, perfect.
| | 06:26 | Now overall other than some of these
little things you have to remember like
| | 06:30 | quotation marks around any fonts
that has more than one word in it.
| | 06:33 | The syntax is pretty easy to master it
making declaring a font family one of the
| | 06:37 | easier things that you'll ever do in CSS
and that's a good thing, because you're
| | 06:41 | going to be doing it a lot.
| | 06:42 | Now if you want to get a little bit
more information about system fonts and
| | 06:46 | building really high-quality font stacks,
I'm going to recommend a web site to
| | 06:50 | you and that is code styles font
stack builder. You can find it here at
| | 06:54 | codestyle.org, you can just search
their web site for built better CSS font
| | 06:58 | stack then it'll take you here.
| | 07:00 | Here you'll find a lot of information
on the installation base of specific
| | 07:04 | fonts, so you know which fonts are
most widely installed and then some of the
| | 07:07 | recommended font stacks
that can help you get started.
| | Collapse this transcript |
| Using @font-face| 00:00 | Now that we have discussed the syntax
behind defining a font family and using a
| | 00:04 | font stack, I want to talk about Web fonts.
| | 00:08 | Web fonts allow designers to use the
in-line @font-face rule to define an
| | 00:13 | external font as a font
family to use within the page.
| | 00:17 | The font referenced is an external
resource that the browser then request
| | 00:21 | and uses on the page.
| | 00:23 | This means that designers can now use
any font they wish, providing they have the
| | 00:26 | proper license to use the font
and access to the font itself.
| | 00:31 | The way that we defined fonts in the
last movie where we just defined a regular
| | 00:35 | font family stack, that relies on the
client machine to have the fonts installed.
| | 00:40 | This technique @font-face essentially
allows you to use any fonts that you have
| | 00:44 | reference to, the browser will
request the font and then display it.
| | 00:48 | Let's take a closer look at how this works.
| | 00:52 | I have the web-fonts.htm
file open from 04_02 directory.
| | 00:59 | What I want you to do is at the very
top of your style declarations, above any
| | 01:04 | of the other rules, we're
just going to do a comment.
| | 01:06 | So I am going to do /* and I am just going to type in @
| | 01:09 | font-face rule declarations and then
*/ to close the comment out
| | 01:18 | (/*@font-face rule declarations */).
| | 01:19 | And just leave myself a little bit of space.
| | 01:22 | So the way that this works is we are
using @font-face rule to basically group
| | 01:27 | all these external resources together and
say this is what we are going to name the font.
| | 01:31 | Then later on in our styles, we reference
that font name in our normal font stacks
| | 01:36 | and that's the resource that it uses.
| | 01:38 | The actual declaration @
font-face is a little complex.
| | 01:42 | So in order to make life a little bit
easier for you, you'll find in the 04_02
| | 01:47 | folder, a folder called assets.
| | 01:49 | I am going to open that up and inside
that I am going to open up syntax.txt.
| | 01:53 | So this is just a text file that
already has the syntax written inside of it.
| | 01:58 | It's going to save us a little bit of
typing and this is going to make it a
| | 02:00 | little bit easier for us to go through
the syntax in terms of how this works.
| | 02:04 | So what I am going to do is I
am going to copy the very first
| | 02:07 | @font-face declaration.
| | 02:09 | You will notice I need the first line,
including the curly braces, the opening
| | 02:12 | curly brace and then the
closing curly brace as well.
| | 02:15 | So I am going to go ahead and highlight
all of that and copy it and then in Web
| | 02:19 | fonts in that sort of clear space that
I created here, I am going to paste it.
| | 02:22 | So let's go over a little bit
of what the syntax is doing.
| | 02:26 | I am not going to go over line by
line because there is a lot there.
| | 02:30 | But one of the first thing that we do
is we declare a font-family name for this
| | 02:34 | and this is essentially us telling the
browser hey, whenever I use this name of
| | 02:39 | this font, I want you to go
grab this font and use it.
| | 02:43 | We are giving multiple locations for
this font to our browsers and that's
| | 02:49 | because it's still very new in terms
of its implementation, and different
| | 02:53 | browsers require different types of font.
| | 02:56 | So you have to supply it with
several different resources.
| | 03:00 | Now those fonts themselves, currently I
have them located in the _fonts directory.
| | 03:06 | I am going to open that up and you can
see here all these different font types,
| | 03:10 | there is the Cantarell font.
| | 03:12 | Now we are going to be using in
this lesson Cantarell, which was an Open
| | 03:16 | Source font that is free to
distribute and it was created by the very
| | 03:19 | talented Dave Crossland.
| | 03:21 | Be sure to read more about the
Cantarell font, it's really nice.
| | 03:25 | But you have to have access to these resources.
| | 03:27 | Now there are several different ways
that you can have access to those resources
| | 03:30 | and I am going to talk to you about
them towards the end of the movie.
| | 03:32 | So just so, you know, when it points to
those fonts that where it's pointing to.
| | 03:37 | The next thing we do is at the very
end of this, where we have requested all
| | 03:41 | these resources that we need in order
to make this work and all the various
| | 03:44 | browsers, we then basically declare,
and this is optional what font-weight we
| | 03:50 | want applied when this font is applied.
| | 03:53 | Often times there are several
different fonts within a font-family.
| | 03:57 | There might be Cantarell Bold,
Cantarell Heavier, Cantarell Lighter, Cantarell
| | 04:01 | Regular and we get to
choose what we want to use.
| | 04:04 | So I'm saying that when font-weight
is applied as normal and font-style is
| | 04:08 | normal I want to use Cantarell-Regular.
| | 04:11 | That's essentially what I am doing here.
| | 04:13 | So now the next thing I want
to do is I want to use the font.
| | 04:16 | In order to use it, I have to go down
to where I might have some additional
| | 04:20 | font-family declarations and
I am going to replace those.
| | 04:22 | So I am going to replace the font stack
that we have got currently going on in
| | 04:26 | the body tag and I am going to replace
that with Cantarell, and the spelling and
| | 04:31 | capitalization matters here, Arial, and
the reason I am using sans-serif font
| | 04:36 | there as a fallback is because
Cantarell is sans-serif itself, and then
| | 04:41 | Helvetica, sans-serif.
| | 04:44 | So other than the initial @font-face
declaration and the use of a nonstandard
| | 04:50 | font with in the font stack, the font
stacks are really kind of exactly the same
| | 04:54 | as we had them for.
| | 04:55 | I am going to save this, and then I
want to test this in one of my browsers and
| | 05:00 | when I do that I can see that I am
using Cantarell. How cool is that?
| | 05:04 | I am going to go back into my page and I
want to go back to that syntax.txt file.
| | 05:11 | You may have noticed that this was not
the only declaration in this file, we
| | 05:15 | have several different declarations.
| | 05:17 | We have three more in fact.
| | 05:18 | I am going to go ahead and copy all
three of those and then over in our
| | 05:23 | webfonts.htm just below my initial font-
face declaration I am going to paste them.
| | 05:29 | Now it's very important that these
font-face declaration's show up at the
| | 05:32 | very top of your code.
| | 05:34 | You want to make these available
anywhere in your styles, and if you have the
| | 05:39 | font-face declaration little bit
further down, they might not be available.
| | 05:42 | All right, so what's going on? I mean
all of these are using the exact same
| | 05:45 | font-family name, but you will notice
this one is Oblique, this one is Bold and
| | 05:51 | this was BoldOblique.
| | 05:52 | I am also saying okay, use Oblique
when the font-style is Italic and the
| | 05:58 | font-weight is normal.
| | 05:59 | Use Bold when the font-weight is
normal but the font-size is Italic and use
| | 06:03 | BoldOblique when both the font-weight
is Bold and the font-size is Italic.
| | 06:08 | The order that you place these matters.
| | 06:10 | Most of the time you want to go
Normal, Italic, Bold, BoldItalic.
| | 06:15 | If you don't do that a lot of browsers
sort of have a little bug that shows up.
| | 06:20 | The next thing I am going to do is I
am going test this, so I am going to go
| | 06:23 | down in my Styles and right after my
body selector, I am just going to write
| | 06:26 | a selector for all of my links that goes ahead
and applies the font style of Italic to that.
| | 06:33 | So now I am going to Save this and test it,
make sure enough my links are now Italicized.
| | 06:40 | They are actually using the oblique
version of the font, they are not going
| | 06:44 | ahead and skewing those
characters within the browser.
| | 06:48 | I want you to consider this a very
brief introduction into how web fonts work.
| | 06:53 | There's a lot more to consider before
you start using web fonts in your project,
| | 06:56 | not the least of which is ensuring
that you got a proper license to use the
| | 06:59 | fonts you want for your site.
| | 07:01 | Just because you have a font on your hard
drive doesn't mean you can use it on your web site.
| | 07:04 | You have to be very familiar with
the terms and license to do that.
| | 07:09 | Now I want to give you a couple of resources
that can help you learn more about Web fonts.
| | 07:14 | So let me switch over to my Chrome
browser and here is fontspring.com this is one
| | 07:20 | of the foundry sites that actually
offers hosting for web fonts and they have
| | 07:25 | got an article written back in
February for The New Bulletproof @ Font-Face
| | 07:29 | Syntax and this is the syntax that is
being used most widely by the designers
| | 07:34 | and implementers right now.
| | 07:36 | I will say that the syntax has continued
to evolve over the last couple of years
| | 07:40 | and I wouldn't be surprised if we see
it change a little bit more but if you're
| | 07:43 | looking to have this syntax sort of
walk through and explained to you why it's
| | 07:47 | done a certain way, why certain things
are omitted or added this is definitely
| | 07:51 | the article to read, and it's got a
bunch of updates and comments in it that can
| | 07:55 | help you out as well.
| | 07:57 | Another site that you definitely want to
bookmark and go to is fontsquirrel.com.
| | 08:02 | The lovely thing about this site is that
it offers a tone of free fonts that you
| | 08:06 | can use commercially or
privately in your Web sites.
| | 08:09 | Not only does it offer the fonts,
but it also offers you what it calls
| | 08:13 | @font-face kits, this will give you a
download that includes all of the fonts,
| | 08:19 | the fonts-license and CSS with all of
the syntax already written in it using
| | 08:25 | the new bulletproof syntax.
| | 08:27 | So this really is just an amazing
resource if you are a designer that wants to
| | 08:31 | start using web fonts.
| | 08:33 | Now if you use these fonts you have
to host them on your own web site.
| | 08:37 | You may not want to do that and they're
a lot of hosting services out there now
| | 08:42 | such as type kit, fonts.com.
| | 08:45 | Google actually has a free hosting
service, the Google fonts API that you might
| | 08:49 | want to research, where you can go and
have another service host those fonts for
| | 08:53 | you so that you are not
hosting them on your own site.
| | 08:56 | Now finally, if you want to learn more
about web fonts, I would recommend my
| | 09:00 | Web Fonts First Look course where I go
into the syntax in detail, I talk about
| | 09:05 | some of the hosting companies out
there, some of the options and what your
| | 09:09 | responsibility as a designer is in terms of
using and utilizing web fonts on your own page.
| | 09:14 | So be sure to go give that look
after you finish with this title.
| | Collapse this transcript |
| Setting font size| 00:00 | To control the size of your fonts
you'll use the aptly named font size property.
| | 00:05 | You know for the most part
controlling the size of text is pretty
| | 00:09 | straight forward, but there are some
things to consider when deciding on which
| | 00:12 | unit of measurement to use.
| | 00:13 | So I want to take a look at not only the
property but those considerations as well.
| | 00:17 | Let's go ahead and open up the font-size.htm
and you can find that in the 04_03 folder.
| | 00:26 | Pretty basic page, kind of somewhat
what we've been using before, we have an
| | 00:30 | article with a heading and a couple
paragraphs inside of it and not much else
| | 00:33 | going on. And then we have some basic generic
styles going on up in the head of the document.
| | 00:38 | So I want to focus on the heading and
the paragraph first and take a look at
| | 00:42 | using the font-size property.
| | 00:44 | I am just going to create a new rule
for heading one and inside that I want to
| | 00:48 | use font-size and I want to
set that to a value 24 pixels.
| | 00:56 | I will do the same thing for my paragraph.
| | 00:59 | I will create a paragraph rule, and we will do
font-size, and let's take that to 16 pixels.
| | 01:06 | So if I Save this and I preview this
in one of my browsers, there is my text
| | 01:12 | sized exactly the way that I wanted it to.
| | 01:16 | Right now, it's using the sort of
absolute value of pixels, but there are a lot
| | 01:21 | of different units of
measurement that you can use for this.
| | 01:23 | So if I go back to my code, one of the first
things I want to explore is using keywords.
| | 01:28 | So there are reserve keywords for font-
size and it starts all the way down at
| | 01:33 | xx-small, it goes all the way up to xx large.
| | 01:36 | So if I am on h1 I could do xx-large
for heading one, and for paragraphs
| | 01:42 | we will do xx-small.
| | 01:45 | So if I Save this, go back to my
page and preview that, you can see the
| | 01:50 | relationship that I have got here now,
very large heading, very small text sizing.
| | 01:55 | This goes all the way from x-large to x-
small, then we have large and small and
| | 02:07 | then finally we just have
medium in terms of reserve keywords.
| | 02:12 | You can see they are exactly the same size,
we just have our heading Bold at the moment.
| | 02:17 | So essentially we have xx small, x small,
small, medium large, x large and xx large.
| | 02:23 | There are 7 reserved keywords and if
you are one of those people that can
| | 02:27 | remember all the way back to using the
font tag in the early days of HTML, we
| | 02:32 | had a font-size property, that we
could set a number between one and seven.
| | 02:36 | There's a little bit of correspondence
between those keywords and sort of those
| | 02:40 | reserved size for fonts.
| | 02:42 | Essentially, the specification recommends a
scaling factor from one keyword to another.
| | 02:47 | So it's really up to the user agents
to determine what size to make these.
| | 02:51 | So don't expect them to be the same
size in every single browser, if you start
| | 02:55 | using those keywords.
| | 02:57 | Okay I want to take a look, we have
used some absolute values and we have used
| | 03:01 | some reserve keywords.
| | 03:02 | I want to take a look at using
relative units of measurement.
| | 03:06 | Now we all know browsers have
default style sheets that apply.
| | 03:09 | So the h1 and the paragraph elements,
those already have a default size that is
| | 03:15 | set within the browser.
| | 03:16 | Any time I use this
property I am overriding that.
| | 03:18 | Well the default size that they have
within the browsers is using a relative
| | 03:22 | unit of measurement like ems.
| | 03:24 | I want to take a look at how ems work.
| | 03:26 | So if I go to my font-size for my
heading and I say 1.8em and for paragraph I
| | 03:31 | say 1em, if I save this and preview this
on my browser again, I get the sort of
| | 03:37 | relationship between my text.
| | 03:39 | My heading is a good bit larger 1.8
times what my paragraph would be because my
| | 03:44 | paragraph is at 1em.
| | 03:45 | 1em is essentially telling the user
agent, okay, just give me whatever your
| | 03:50 | default font size may be.
| | 03:51 | 1.8em is the headings way of saying,
well give me slightly larger than that.
| | 03:56 | Give me 1.8 times what that would be.
| | 03:59 | So that value is going to be calculated.
| | 04:01 | Now the value is calculated based on
the parent element wherever the font size
| | 04:05 | of the parent element may be.
| | 04:06 | Since we don't have a font-size set on
body, what our header and paragraph are
| | 04:11 | doing is, they are just going after
the user agent and saying, okay, I didn't
| | 04:14 | see any font-sizes set
what are your default sizes?
| | 04:16 | Now we can change that, if I go into
the body, for example, and I choose to
| | 04:21 | apply a font-size here, I
have a couple of options.
| | 04:24 | One, I could use a relative unit of measurement.
| | 04:26 | Now if I did that, let's say I do something
like 2em and I save this and I preview it.
| | 04:33 | We still have the same relationship
but man, it is a lot bigger right.
| | 04:36 | Well the reason that this happens with
the body when it uses the relative unit
| | 04:40 | of measurement, it is first going out
to the user agent and it's saying what's
| | 04:44 | your default font size?
| | 04:46 | For most browsers, the default font
size is initially set to 16 pixels unless
| | 04:51 | the user changes it that's
pretty much where it sits.
| | 04:54 | So as a designer you can use that size as
more of a baseline for sizing your text.
| | 05:00 | So 2em is basically saying okay
the default font-size is 36 pixels.
| | 05:05 | That 36 pixels is being passed down to
our paragraph, and then the heading is
| | 05:10 | getting 1.8 times that.
| | 05:13 | Maybe a better way to look at working
with body is to use percentages instead.
| | 05:18 | So if I come into body and I use say 120
% and I save and I test that and that's
| | 05:25 | essentially again asking the user agent,
hey, give me whatever your default font
| | 05:29 | size is, give me 120% of that.
| | 05:33 | That also means that if I lower that
and I go to say 90%, Save that, everything
| | 05:38 | sort of scales down.
| | 05:40 | This is the beauty of using ems.
| | 05:42 | Whether it's the user scaling things
up or down or whether it's in this case
| | 05:46 | the body tags scaling things up or
down, the relationship between these two
| | 05:50 | elements remains the same.
| | 05:53 | That means that whether you're looking
at this on a mobile device or looking at
| | 05:56 | it on a desktop browser the
relationship between those two elements size wise
| | 06:01 | is exactly the same.
| | 06:02 | Now I mentioned that users have
just as much control over this.
| | 06:07 | So if I get rid of the font-size on the
body and Save this, and I go back to my
| | 06:12 | browser again, it's giving the default
font-size from the user agent itself.
| | 06:17 | If I go into my Preferences and I go
into the content tab notice that I have a
| | 06:22 | default font and I have a default
size and that is indeed set to 16 pixels.
| | 06:26 | Well if I'm having a hard time reading
the page, I might go in and change that
| | 06:31 | default, so if I grab this and I go up
to say 20 pixels, notice that the fonts
| | 06:36 | on the page immediately change and
scale up a little bit to represent that. If I
| | 06:41 | go down and size it scales
down accordingly as well.
| | 06:46 | So that's one of the other great
things about using a relative unit of
| | 06:49 | measurement like ems if the user has
their user agent set to a larger or smaller
| | 06:54 | size based on their personal preferences
while the size of the text might change
| | 06:59 | the relationship between the elements won't.
| | 07:02 | So again, font-size property pretty
easy to use, no really weird syntax going
| | 07:07 | on there but when developing a sizing
strategy for your site you need to think
| | 07:13 | about whether you want to use a
absolute size like those pixels or use relative
| | 07:17 | units of measurement like we are using
here to establish relationships between
| | 07:21 | the elements while letting the body
selector or the device itself define that
| | 07:26 | baseline font-size.
| | 07:28 | There isn't really one answer for
that it's all going to depend upon the
| | 07:32 | specific goals of each project.
| | Collapse this transcript |
| Font style and font weight| 00:00 | Now that we've taken a look at declaring
font families and font sizes, I want to
| | 00:05 | take a moment to talk about
font style and font weight.
| | 00:09 | You may know that better as bold and
italic, but it's typically what the
| | 00:13 | font-style and font-weight
property allow us to do.
| | 00:17 | Although just like everything else in CSS,
there are a few details that you need
| | 00:20 | to know about these.
| | 00:21 | So I've opened up the font-weight.htm file
and you can find that in the 04_04 folder.
| | 00:29 | Again, not a whole lot going on
here in terms of structure either.
| | 00:32 | We have a heading 1 followed by a
paragraph followed by heading 2 followed
| | 00:36 | by another paragraph and inside
this last paragraph, we have some text
| | 00:40 | inside of the span tag that we're
going to use as it says to practice
| | 00:43 | italicizing the text.
| | 00:45 | Now here is what I want to do.
| | 00:47 | I want to initially go down and just
create a brand new rule right here for the
| | 00:51 | span tag and inside that, we're
going to use the property, font-style:
| | 00:58 | Now font-style has a couple of different
keywords that you can use and Aptana is
| | 01:03 | being very nice because it's
actually showing you those formats.
| | 01:05 | So that's really nice.
| | 01:07 | Inherit basically is a keyword that
you can use a lot on several properties
| | 01:11 | and if you use inherit, it's
basically saying hey, go out to the parent
| | 01:14 | element, find out what its value is
and inherit that. And that's very common
| | 01:19 | on almost all properties.
| | 01:20 | So really, the keywords we're
focusing on are italic, normal, and oblique.
| | 01:24 | Italic is saying use the italic version
of this font if you have one, normal is
| | 01:29 | saying don't italicize this text and
then oblique is saying I want you to use
| | 01:33 | the oblique version of the font.
| | 01:36 | Now there is a little bit of a
difference between oblique and italic.
| | 01:39 | Oblique is basically telling the
browser to skew the text by certain amount and
| | 01:43 | it's very helpful for when there
is no italic version of the font.
| | 01:47 | Italic is saying hey, I would prefer
you, instead of skewing the text, I'd
| | 01:52 | prefer you go out and actually use the
italic or oblique version of the font.
| | 01:57 | That's why you're going to see almost 90
% of the time people using italic when
| | 02:01 | they want to italicize their text
so that is what we're going to do.
| | 02:05 | So we're going to say italic, we're
going to save that, and I'm just going to go
| | 02:08 | ahead and preview that in one of my
browsers. And indeed I can see you right
| | 02:13 | here, inside the span tag,
the text is indeed italicized.
| | 02:17 | You know there is not really a lot
going on with font-style but font-weight has
| | 02:23 | a few more options that we
need to take a closer look at.
| | 02:26 | So I'm going to go back into my code and
what I'm going to do is I'm going to go
| | 02:29 | up to this h2 selector.
| | 02:31 | This is going to be targeting this
heading 2 right down here and just below
| | 02:35 | that, I'm going to type in font-weight.
| | 02:40 | Now the values that I have for font-
weight and Aptana is kind of helping me out
| | 02:44 | here, notice that I do have some numeric
values and they go from 100 all the way
| | 02:49 | up to 900 and that's actually what's
considered to be, it's called the darkness
| | 02:53 | value of the font, which is kind of
weird, but essentially, it is the boldness
| | 02:57 | of the font going from 100, which
would be the lightest, all the way to 900
| | 03:02 | which would be the
boldest or darkest, if you will.
| | 03:04 | But we also have some keywords here too.
| | 03:07 | We have bold, bolder, lighter, normal
and of course, inherit, which is pretty
| | 03:13 | much around all the time.
| | 03:14 | Most of the time when you see this,
you're just going to see somebody come in
| | 03:17 | and say bold or normal.
| | 03:19 | So if I say bold and I test this, I
don't really see any change because heading
| | 03:24 | 2s are by there default bold.
| | 03:26 | So if I come in and said and say no, no,
no I want normal and if I save and test
| | 03:31 | this, I can see that now that
heading 2 is no longer bolded.
| | 03:36 | Now you might be wondering
about some of those other values.
| | 03:40 | Remember we had bolder, we had lighter.
| | 03:43 | In a lot of cases, you'll have a font
that has several different versions of
| | 03:47 | that font and some might have a light
version of it or regular version or bold
| | 03:51 | version or even a bolder or
black version of the font.
| | 03:54 | So in that case, if you have several
different families of the font within that,
| | 03:58 | those values can sort of help you utilize that.
| | 04:01 | Let me show you what I mean.
| | 04:02 | I'm going to go into my heading 2 here and
I'm going to change the font family for this.
| | 04:09 | What I'm going to do is I'm going to use
a font that I know is installed on this
| | 04:12 | system and that I know has multiple
families and this is installed on most Macs.
| | 04:16 | So if you're on a Mac with me, you can use this.
| | 04:18 | If you're on a PC or if you're on some
other system, I would recommend going out
| | 04:22 | to your fonts wherever they're
installed, looking through them, and finding a
| | 04:26 | font family that has a light version, a
regular version maybe even a medium and
| | 04:31 | a bold version so that you can
try this along with us. All right.
| | 04:35 | So what I'm going to do is I'm just
going to declare the font, Avenir LT STD
| | 04:46 | So let's go ahead and choose that.
| | 04:48 | That's a font that has several
different families, some of them are light,
| | 04:51 | some of them are bold, and we're
going to sort of compare the different
| | 04:55 | weights against each other.
| | 04:57 | So if I come in and I say lighter and
I save this page and let's test this in
| | 05:02 | a browser. And when I do that, I can
see that I'm using a very light version
| | 05:08 | of the Avenir font.
| | 05:09 | If I chose normal and saved it and
refreshed it, you can see that that gains a
| | 05:16 | little bit of weight that's the
regular version of it and if I say bolder and
| | 05:21 | save that, I get a much
bolder darker version of that.
| | 05:26 | Now this works just the same way.
| | 05:28 | If I say bold, for example, and save
this and test it, you can see no real
| | 05:32 | change to the weight, but it works
the same way for these numeric values.
| | 05:37 | So anything from about, say, 100 to 400,
I mean you'd have to have a really,
| | 05:41 | really complex font for
100, 200, 300, 400 to work.
| | 05:45 | You're really usually looking at three
variants if you have them and anything
| | 05:49 | from, say, 100 to almost 400 is
going to give you that lighter version.
| | 05:53 | Anything in the 400-600 range is going
to give you the medium or regular version
| | 05:57 | and anything at 700 above is
typically going to give you the bold version.
| | 06:00 | So if I say font-weight:
| | 06:01 | 100 and save that, you can see that it's
going to go back to that lighter version.
| | 06:07 | If I come up and say font-weight, say,
400 and save and test that, it's going to
| | 06:11 | give me the medium version and if I
come up and say 700 all the way up to 900
| | 06:16 | and save and test that, it's
going to give me the bold version.
| | 06:20 | So the numeric values can work for
you when you have a font family that has
| | 06:24 | those different variants of the font itself.
| | 06:28 | That means that the font that you're
controlling has a lot to do with the
| | 06:31 | capabilities of font weight and even
font style because if the file does
| | 06:36 | not have an italic version, it's going to
oblique the font for you within the browser.
| | 06:40 | So those two properties are really,
really straight forward but remember that you
| | 06:44 | can gain even greater control over
what you can do with them if you know the
| | 06:48 | properties of the font
family that you're working with.
| | Collapse this transcript |
| Transforming text| 00:00 | You can't always control how text
is entered or formatted on your site.
| | 00:05 | When working with a content management system
| | 00:08 | for example, text might be coming in
from a database with very little control
| | 00:12 | over who enters the text, or
how it's originally typed in.
| | 00:15 | You know imagine, for example, a
scenario where every item in the list was
| | 00:19 | supposed to be capitalized,
| | 00:21 | but the author just
didn't enter the text that way.
| | 00:24 | You know, rather than edit
the text in the database,
| | 00:26 | you can simply use the Text Transform
property to capitalize the text the correct way.
| | 00:32 | Using Text Transform,
| | 00:34 | you can control the case of any
element on the page, so let's do that.
| | 00:39 | So I have the transform.htm page opened
and you can find that in the 04_05 folder.
| | 00:46 | So very briefly, let me go
through the structure of the page.
| | 00:49 | If I scroll down, I can see that
inside of our article I have a headline that
| | 00:53 | says Transforming Text, a bit of
foreshadowing here, I notice that none of these
| | 00:57 | words are capitalized.
| | 00:59 | Inside that I have a paragraph that
talks a little bit about the Text Transform
| | 01:03 | property but we've got some texture in this.
| | 01:05 | For example, I want all of this to be uppercase.
| | 01:09 | This on the other hand should be
lowercase. So we're going to add a little bit
| | 01:13 | of additional structure to that in just
a moment in order to make that happen.
| | 01:17 | But let's first introduce the Text
Transform property by working with our heading 1.
| | 01:22 | So I'm going to go right up here to the
heading 1 style and I'm going to use the
| | 01:28 | text-transform. So a lot of the
properties we've been using so far are a
| | 01:34 | font-something, in this
case it's text-transform.
| | 01:39 | And our values, again, Aptana
has been nice to show me this.
| | 01:42 | We have capitalized inherit, which you
know again just sort of generic keyword.
| | 01:46 | We have lowercase, none, which would
undo any transformation that you've done in
| | 01:52 | a previous style, and upper case.
| | 01:53 | So let's take a look at what those will
do for us. So I'm just going to do Text
| | 01:56 | Transform:capitalize;
| | 01:59 | So I'm going to go ahead and save that,
test this in one of my browsers and sure
| | 02:05 | enough that headline is now capitalized
even though the text in the page isn't.
| | 02:10 | All right, now I'm going to go back
down into my code and I'm just going to use
| | 02:15 | some span tags here.
| | 02:16 | I am going to take this text so as,
for example, I want all this to be upper
| | 02:19 | case and I'm going to wrap this in a span tag.
| | 02:23 | I'm going to do the same thing with the
word THIS, so I'm going to highlight the
| | 02:27 | word 'THIS' and I'm going to go ahead
and wrap that in a span tag as well.
| | 02:32 | So I'm going to save this and I'm going
to go up to my selectors here, and I'm
| | 02:38 | just going to go ahead and create a
couple of classes to help us out here.
| | 02:41 | So the first class selector I'm going
to do is upper, and I'm going to go ahead
| | 02:46 | and give it the Text Transform property.
| | 02:50 | And as you can imagine, I'm going to go
ahead and give it uppercase as the value.
| | 02:54 | And then I'm going to create
one called lower, text-transform:
| | 03:01 | lowercase, here we go.
| | 03:03 | So I'm going to save that and now the
only thing I really I have to do is go
| | 03:06 | down to the span tags, in the first
span tag, I'm going to go ahead and do a
| | 03:10 | class of upper, and then in the second
span tag, I'm just going to go ahead and
| | 03:16 | apply the class of lower.
| | 03:17 | So I'm going to go ahead and save
that, go back to my browser and refresh
| | 03:22 | the page and sure enough, I want this
to be all uppercase, it's indeed now
| | 03:26 | in all uppercase, and the word THIS which
was in all caps now just is in lowercase.
| | 03:33 | So the Text Transform, is incredibly
easy to use, it gives you a fair amount
| | 03:38 | of power over the case of your text.
| | 03:40 | Do remember though that the changes that
you're making here are just visual changes.
| | 03:45 | The change is only made within the
browser, that means that the actual content
| | 03:49 | in the page does remain in its
original case, that's important to remember if
| | 03:53 | you're working with text that's ever
being exported or being syndicated in
| | 03:57 | some way or another.
| | Collapse this transcript |
| Using text variants| 00:00 | If you're a graphic designer you're
probably used to having an amazing amount of
| | 00:04 | control over typography. Especially if
you take advantage of the capabilities of
| | 00:08 | most open type fonts.
| | 00:10 | Sadly, the full-range of features like
ligatures, ordinals, and other alternate
| | 00:15 | characters aren't available to us through CSS.
| | 00:18 | Now the W3C is putting the finishing
touches on open type support and browsers
| | 00:23 | are starting to implement it, so it
shouldn't be very long before we enjoy more
| | 00:27 | control over our typography, and in the
meantime, there are some properties that
| | 00:31 | extend what we can do in terms
of using alternate characters.
| | 00:36 | One of those, the font-variant
property, allows us to specify the use of
| | 00:41 | small-cap, so let's go
ahead and experiment with that.
| | 00:43 | We can open up the variant.htm file.
| | 00:46 | This is found in the 04_06 directory.
| | 00:49 | And if I scroll down I can see that I
have again some very simple page structure
| | 00:53 | here. The headline that says font-variant,
and inside of that I have a paragraph
| | 00:57 | that sort of describes how this works.
| | 01:00 | So I'm going to go back up to my h1
rule and underneath the font-size, I'm just
| | 01:04 | going to type in font-variant:
| | 01:10 | And there are a couple of values
that I can use for this, really just two
| | 01:14 | keywords that you can use.
| | 01:15 | Normal, which is going to overwrite any
small-caps usage that you might have on
| | 01:19 | another rule that's being applied to
this one as well, or you can use small-caps
| | 01:25 | and that's what I'm going to do here.
| | 01:26 | So I'm going to do small-caps; save this,
and I want to preview this in one of
| | 01:31 | my browsers, and when I do
that there are my small-caps.
| | 01:37 | Now it doesn't look great and a lot
of this depends upon the font that
| | 01:41 | you're going to use.
| | 01:42 | For example, if I go back in and change
my font-family here, just really quickly
| | 01:47 | I'm going to just change it to Georgia,
save this and test it again, you can see
| | 01:52 | that I get quite a
different look and feel from that.
| | 01:56 | I think it is the term but there's
really not a lot of variation to the
| | 01:59 | font-variant property.
| | 02:01 | Now it can be a very handy technique to
have around in certain situations, but
| | 02:05 | like any formatting option that uses
alternate characters, you want to be sure
| | 02:09 | to test it in as many browsers as you
can, to make sure that the font that
| | 02:14 | you're using and the size of the text
is giving you the quality that you need.
| | 02:19 | In terms of font-variant, if the font
itself doesn't include a small-caps
| | 02:24 | variant, the small-caps property may not
often look as good as you'd like it to.
| | 02:29 | Since in those instances the browser
goes ahead and just scales the font down,
| | 02:33 | so sometimes there's some variations
and boldness of the letters that you want
| | 02:37 | to account for as well.
| | 02:38 | So if you're going to use font-variant,
my advice to you is just use it with
| | 02:42 | a little bit of caution, experiment
with it, and make sure that the formatting
| | 02:45 | looks the way that you want
it to, before you commit to it.
| | Collapse this transcript |
| Text decoration options| 00:00 | CSS allows us to apply
decorative effects to our text through the
| | 00:05 | text-decoration property.
| | 00:07 | While you'll probably use this property
to remove default underline styling from
| | 00:11 | text the majority of the time,
| | 00:13 | you can add other useful and sometimes
not so useful decorations to your text as
| | 00:18 | well, so let's check out our options.
| | 00:21 | Here I have the decoration.htm file open.
| | 00:24 | You can find that in the 04_07 directory.
| | 00:28 | And you can see exactly what I have
going on here in the structure of the
| | 00:31 | page, after a heading in the paragraph,
I have an unordered list and inside
| | 00:36 | that unordered list I have several list items,
one of them includes a link to lynda.com.
| | 00:41 | We have a couple of list items with
classes applied with all the different
| | 00:46 | text-decoration properties that we can use,
underline, over-line, line, and blink.
| | 00:51 | I'm just going to preview this in my
browser, so that you can see it before the
| | 00:54 | styling is applied to it.
| | 00:56 | So here is my default styling of a
link, and in this case it's underscored and
| | 01:01 | purple because we've already visited
this link, or at least I have, and then we
| | 01:04 | have just sort of this generic formatted text.
| | 01:07 | So I'm going to go up to my styles
here and we're just going to write a
| | 01:11 | couple of selectors.
| | 01:12 | So the first selector I'm going to
write, it's going to target this link.
| | 01:14 | I'm going to type in li a, so li<
space>a, that's targeting any link tag
| | 01:19 | inside of the list item.
| | 01:21 | And I'm just going to use the text-
decoration property, and the values that I
| | 01:28 | can use, you can see them right there,
blink, inherit, which is again sort of a
| | 01:32 | generic one, line-through,
none, over-line or underline.
| | 01:35 | I don't want the other underline property
showing up, so I'm just going to type in none.
| | 01:40 | Now a lot of times, if you're going to
style a link and you're going to remove
| | 01:44 | that default underline styling, maybe
you don't like it for whatever reason, one
| | 01:47 | of the things that's quite common to
do is to go ahead and at least apply a
| | 01:51 | different color or different
background or something like that to it.
| | 01:54 | Make it standout so that people
know that hey, you can click on this.
| | 01:58 | So if I save this and preview it,
you'll notice that now the text is no longer
| | 02:03 | underlined and now it is red,
because I asked it to be red.
| | 02:08 | Let's go through some of our other
properties. You'll notice that in the actual
| | 02:12 | structure of the page I have
these classes applied to it,
| | 02:14 | so we are going to take
advantage of those classes.
| | 02:17 | The first-class we're going to do is
underline, and I'm going to go ahead and
| | 02:23 | apply text-decoration to that
and we will just do underline;
| | 02:29 | I'll save that, preview it, and sure
enough Underline me is now underlined.
| | 02:34 | Now there is a danger in using that and
I think anybody that even thinks about
| | 02:39 | usability in a passing phase would
realize that most users are going to want to
| | 02:44 | click this and go to a different page,
because we are so conditioned to see
| | 02:47 | underline text as links, so be very careful
about underlining text that is not a link.
| | 02:52 | You might be sending the
wrong signal to your users.
| | 02:55 | I am going to go down to the next line
in my styles and we're just going to do
| | 03:01 | .overline { and here we're going to
do a text-decoration of over-line.
| | 03:08 | So I'm going to save this and test it,
and indeed we get the Overline above that
| | 03:15 | so that can be useful for
specific formatting options.
| | 03:18 | I've never used it, but that doesn't mean
that you won't find a great use for that.
| | 03:22 | And then I'm going to go down to next
line and just do .line, and on that one
| | 03:28 | I'm going to do a text-decoration of
line-through, and this is one that
| | 03:35 | actually find very useful.
| | 03:36 | I am going to test this one, I can see
that that basically gives you a strike
| | 03:39 | through, so a lot of times if are doing
changes to a file, maybe a Wiki page or
| | 03:44 | something like that, you can use this
text-decoration property to show text
| | 03:47 | that's been modified or text that no
longer applies to a specific instance, so I
| | 03:52 | really do like that one.
| | 03:54 | The last one, yes, I saved the
best for last, just for you guys.
| | 03:57 | I'm going to go down to the next
line and type in blink and then
| | 04:01 | text-decoration, you got it, blink.
| | 04:08 | And if I preview this, it blinks.
| | 04:12 | The text-decoration property does
remain a very valuable formatting tool,
| | 04:17 | especially when formatting marked up
text or controlling link formatting, which
| | 04:21 | is probably which you'll typically
use it for 80% to 90% of the time.
| | Collapse this transcript |
| Setting text color| 00:00 | Although it's not technically a text
formatting property, setting the color
| | 00:04 | of text is usually pretty high up on the list
of things that designers want to do with it.
| | 00:09 | So I want to take a moment to
talk about setting color here.
| | 00:14 | In CSS, you apply color
using two main properties.
| | 00:18 | The Background property that allows you
to control the content behind an element
| | 00:23 | and the Color property, which some
people refer to as foreground color to avoid
| | 00:28 | any sort of confusion
with the background property.
| | 00:30 | We're going to take a quick look at
applying color to text in this movie and
| | 00:34 | then go deeper into your options when
applying color in a separate chapter a
| | 00:38 | little bit later on.
| | 00:41 | So I have the font-color.htm file open
and if I scroll down into my content I
| | 00:48 | can see that I've got a paragraph here,
and then I've got a couple of headings.
| | 00:51 | Two headings just below that, one has a
class of foreground, the other one has a
| | 00:55 | class of background, so those are the
elements that we're going to apply with
| | 00:59 | these color options too.
| | 01:00 | So I'm just going to go right up to
my styles, and just below where it
| | 01:04 | says, /*add styles here*/
| | 01:05 | I'm going to type in .foreground, so
I'm going to use that class selector, and
| | 01:11 | inside that I'm just going to
go ahead and set color to red.
| | 01:14 | Now we've been doing this all
through out the title, so you're probably
| | 01:18 | very used to doing this.
| | 01:19 | This is the color property and it
basically controls the color of the content of
| | 01:25 | the element, so not the
background, but the content color itself.
| | 01:28 | We're using a defined keyword like red, but
there are many other things that we can do.
| | 01:33 | We can use hexadecimal notation, we can
use RGB values, we can use HSL values.
| | 01:39 | So we have some options here, we're
going to explore those options a little bit
| | 01:42 | later on when we have our chapter
on color here in just a little bit.
| | 01:47 | For the background selector, I'm going
to go ahead and do something a little
| | 01:50 | bit different here.
| | 01:51 | We're going to do background and
then inside that I'm going to use the
| | 01:55 | background-color property, background-color,
and I'm going to use maroon for that value.
| | 02:02 | So again, I'm just using one
of the reserved keywords here.
| | 02:04 | Now I'm going to set a foreground color
here as well, so you can mix these together.
| | 02:09 | So I'm going to say color for
foreground here, and we're just going to do white
| | 02:13 | and then just to make sure that the text
isn't butting up right against the edge
| | 02:17 | of the element, I'm going to
give it a little bit of padding.
| | 02:20 | We'll talk more about padding in our
controlling element sizing chapter in just a little bit.
| | 02:24 | We'll go ahead and save that, and I'm
just going to test that in one of my
| | 02:28 | browsers, and indeed, I get
exactly what I was wanting.
| | 02:33 | So red for the foreground color here,
and then I'm using maroon for the
| | 02:36 | background color of this element,
you'll notice the big difference between
| | 02:40 | backgrounds and foregrounds, and here
I'm using white for the foreground color
| | 02:45 | on this element as well.
| | 02:46 | Of course, there are tremendous amount
of options regarding setting color that I
| | 02:51 | haven't even covered yet.
| | 02:52 | So a little bit later on we're going to
talk about hexadecimal notation, how to
| | 02:56 | use RGB and HSL values, and even how
to use transparency when defining color.
| | Collapse this transcript |
| Writing font shorthand notation| 00:00 | Some of the syntax options in
CSS don't really give you any
| | 00:04 | additional functionality.
| | 00:06 | They are just designed to save you time.
| | 00:08 | Shorthand notations are designed to do
just that, save you time when writing
| | 00:13 | what would otherwise, be
multiple property declarations.
| | 00:17 | Now essentially, the font
shorthand notation allows us to define
| | 00:20 | font-families, font-size, font-
style, font-weight, font-variant and
| | 00:26 | line-height, all in one property.
| | 00:29 | It is a real timesaver.
| | 00:31 | But as with any shorthand notation, you
need to be aware of the syntax to avoid
| | 00:35 | any unintentional styling.
| | 00:38 | So I have the shorthand.htm
file open from the 04_09 folder.
| | 00:44 | And I am just going to preview that
in the browser so you can kind of see
| | 00:47 | what's going on here.
| | 00:49 | So we have a couple of headings, we
have some lists that list all of the
| | 00:52 | properties that we can set
with the font shorthand notation.
| | 00:56 | We have a couple of headlines here and
we have another list that shows some of
| | 01:00 | the optional keywords that we can set
by using font shorthand notation as well.
| | 01:04 | We are going to experiment
with that in just a moment.
| | 01:07 | So I want to go back up into my styles
and I want to focus on the body selector.
| | 01:13 | Now currently in the body selector, we
are using three separate font properties
| | 01:18 | to define some of our values for text.
| | 01:20 | We are using the font-family,
font-size and line-height.
| | 01:24 | And we haven't talked
about line-height a lot yet.
| | 01:26 | We are going to examine that
property in just a little bit,
| | 01:29 | but line-height basically just controls
the spacing of the lines of text in your
| | 01:33 | files, like your paragraph and thing like that.
| | 01:35 | So what I am going to do is I am going
to remove the -family and just use font.
| | 01:39 | So whenever we are doing the font
shorthand notation, that's how we define it,
| | 01:43 | just font and then a colon.
| | 01:46 | Now after that, we need to start
declaring some explicit values and we typically
| | 01:50 | need to do these explicit values in order.
| | 01:53 | So I am going to type in
normal space normal space normal.
| | 02:00 | Now what are those?
| | 02:01 | Well, this would be font-weight,
font-style and font-variant.
| | 02:07 | After that, I'm going to
have the size of the text.
| | 02:11 | So in this case we are going to
use 100%, so I am going to use 100%.
| | 02:13 | Now notice that I'm not using
commas to separate these guys at all.
| | 02:18 | I've used them here in the
fonts tag, but nowhere else.
| | 02:21 | Everywhere else I just need spaces between them.
| | 02:23 | Now we have a line-height of 1.5 and
the way that we do line-height in the font
| | 02:28 | shorthand notation is pretty interesting.
| | 02:30 | Right after the 100%, right after the
font size, whatever that may be, you can
| | 02:34 | do a / and then pass the value in 1.5.
| | 02:39 | Notice there is no space, between this
at all, no white space, it's all sort of
| | 02:43 | one unit there, and then we follow
that with the font stack that we want.
| | 02:48 | And you have to do them in that order.
| | 02:50 | So I am going to go ahead and get rid of
those two properties that we don't need any more.
| | 02:54 | I am going to save this and
preview this in my browser.
| | 03:00 | And absolutely nothing changed.
| | 03:01 | That's because we are passing the exact
same values that we passed before, the
| | 03:05 | only difference is, we are doing it
with one line or one property now, rather
| | 03:09 | than three or four properties.
| | 03:11 | Now you might be wondering about these.
| | 03:13 | Do we have to pass in the values;
| | 03:15 | normally it's not, because that's not really
saving me a whole lot of time. No you don't.
| | 03:19 | You can use the extremely stripped-down
version of the font shorthand notation.
| | 03:24 | Let me show you the absolute
minimalist version you could possibly use.
| | 03:28 | I am going to remove all those normals,
and then I am going to remove the
| | 03:33 | line-height declaration.
| | 03:34 | Whenever you do for font shorthand notation,
you have to pass in atleast two things.
| | 03:39 | That would be the size of the
font and the family of the font.
| | 03:42 | And they need to be done in that
order, size first, family second.
| | 03:46 | If I save this and test the page, the only
change I am going to notice is the line-height.
| | 03:53 | Everything else stays the same.
| | 03:55 | So I can go back in and add
that line-height back in if I want.
| | 03:57 | 1.5, save, test. Okay,
| | 04:02 | Same thing we had before,
| | 04:03 | We just don't have all
those normals on the front end.
| | 04:06 | Leaving those off can sometimes
cause unintended consequences.
| | 04:11 | Essentially, if you leave off any of
those values, what happens is that normal
| | 04:16 | is passed as a default value, 9 out of 10 times;
| | 04:21 | that's not going to cause you a problem.
| | 04:23 | But every now and then, it will.
| | 04:24 | So I want to take a closer look at how
this could maybe cause you some issues.
| | 04:29 | I am going to go right back down into
my styles, just a little bit further down
| | 04:33 | into this little section where
it's asking me to add some styles.
| | 04:36 | And I want to add a shorthand class,
so I am just going to call it shorthand,
| | 04:42 | and inside that I am going to do font 1.2ems
space Arial comma Helvetica comma
| | 04:51 | sans-serif, so we'll do
our font stack right there.
| | 04:56 | And that's going to be my shorthand notation.
| | 04:58 | Because we are not declaring font-weight,
font-style or font-variant, the value
| | 05:01 | normal is going to be passed
for every single one of those.
| | 05:06 | So if I go down to say one of our
headings down here, for example, for headings
| | 05:12 | the default font-weight is bold.
| | 05:13 | If I go in and apply that class, and
I just go ahead and apply the class of
| | 05:18 | shorthand, save this file and test it,
notice what happens to my heading.
| | 05:26 | It is no longer bold.
| | 05:28 | It's not bold anymore because the
shorthand notation is passing normal as the
| | 05:35 | value for font-weight.
| | 05:36 | It's doing that automatically, and if
I'm not paying attention, I can have that
| | 05:40 | value be inherited or overwrite
values that I wanted in other instances.
| | 05:45 | So you have to be very careful
when using this sort of minimalist
| | 05:48 | strip-down version.
| | 05:49 | Now if you do want to pass one of those
values, you don't have to pass all three of them.
| | 05:53 | I could come back into this font
shorthand notation and just type in bold.
| | 05:57 | I can just pass whichever one I want, so
I could say, small caps for font-variant.
| | 06:01 | I could say italic for font-style,
or I can say bold for font-weight.
| | 06:05 | So if I save this and preview this back
in my browser, you can see that now our
| | 06:10 | heading is back to being bold again, perfect.
| | 06:14 | Now if you go down into the bottom of
your code here into this bottom list,
| | 06:18 | you can see that it talks about
keywords that can also be passed in using the
| | 06:22 | font shorthand notation.
| | 06:24 | Now these optional keywords are
basically asking the user agent to use whatever
| | 06:29 | font and whatever formatting they use
for these particular items on the page.
| | 06:35 | They are caption, so if there's a
specific formatting for caption that a browser
| | 06:39 | or user agent has, an icon, menu,
message-box, small-caption and status-bar.
| | 06:44 | Now I have read a few articles here
and then where people have said, well, I
| | 06:48 | don't' know why you would ever use those?
| | 06:50 | Frankly they are very useful, because
if you have a widget that you're creating
| | 06:54 | for an application or a web page, and
you are unsure of what the sort of native
| | 06:59 | styling is on that particular OS or
that particular user agent, you can use
| | 07:04 | these optional keywords and you are
going to get the same formatting, let say
| | 07:08 | the status-bar would get in the
browser or the icon would get in the browser.
| | 07:12 | So let's go ahead and try those.
| | 07:13 | You will notice that we
have a class called keyword.
| | 07:16 | I am going to go right up here and I
am going to create that keyword class,
| | 07:22 | and I am just going to use the font
shorthand notation, and let's just go
| | 07:24 | through some of these.
| | 07:25 | I am just going to try icon first.
| | 07:27 | So I am going to save that and
preview it, and you can see we have got a
| | 07:33 | slightly different
formatting that's going on here.
| | 07:34 | It's using a sans serif font,
| | 07:36 | the font-size is a lot smaller.
| | 07:37 | Let's try menu next.
| | 07:39 | Feel free to try all of them.
| | 07:41 | So I will try menu, and we will test
that, little bit larger, but pretty much
| | 07:45 | the same font, may be the last
one we will try is this status-bar.
| | 07:49 | So status-bar and all the browsers pretty
much have a status-bar, so we will try that.
| | 07:53 | And that's a lot smaller,
| | 07:55 | we are getting the same formatting
that you would get in the status-bar of
| | 07:58 | the browser as well.
| | 07:59 | So the optional keywords, you
probably won't use them a lot, but in case of
| | 08:04 | building any type of user interface
widgets or applications, you might find them
| | 08:08 | really handy to have around.
| | 08:10 | The font shorthand notation
can save you a lot of time.
| | 08:13 | But I really don't want you to lose
sight of the fact, that it can pass
| | 08:17 | unintended formatting values to
elements if you're not careful with it.
| | 08:21 | There are some shorthand notations,
like margins and padding that we will
| | 08:24 | look at a little bit later that I use almost
all of the time that I type this properties in.
| | 08:28 | But with the font shorthand notation, I
only use it if I'm extremely confident
| | 08:34 | that the rule that I'm passing in is
not to overwrite the formatting of other
| | 08:38 | elements on the page or pass
default styling that I don't want.
| | 08:42 | Either way, when you use it, make sure
that you test it thoroughly to make sure
| | 08:46 | that you're getting the
formatting that you expect.
| | Collapse this transcript |
| Controlling text alignment| 00:00 | To control text alignment with CSS, we
use the text align property, with which
| | 00:05 | we are limited to using one
of four alignment options.
| | 00:09 | So I have the alignment.htm file open here.
| | 00:12 | And I am just going to
preview this in a browser.
| | 00:14 | I can see that there's a lot different
going on than in one of our normal pages.
| | 00:19 | I have got this bright yellow background.
| | 00:21 | I have got the words Text alignment,
and then we just have some paragraphs of
| | 00:25 | text, although, the paragraphs of text do kind
of describe what we are going to be doing here.
| | 00:29 | We have got left alignment that we
are going to be experiment with, right
| | 00:31 | alignment, center alignment, justify,
and then towards the end of the exercise,
| | 00:35 | we are also going to take a look at one
of the more experimental properties that
| | 00:38 | is currently being implemented by
browsers, and that is giving us the ability to
| | 00:42 | control hyphenation.
| | 00:43 | So let's go back in to our code and
see what we can do in regards to that.
| | 00:47 | So if I scroll down into my text, I can
see that these paragraphs have classes
| | 00:53 | applied to them; left, right, center,
justify, and as you can imagine,
| | 00:56 | we're going to go ahead and write text
alignment properties based on those classes.
| | 01:01 | So right up there where it says, add
styles here, we are just going to go ahead
| | 01:04 | and do .left, so that's our class
selector for this, and for that I am going to
| | 01:09 | choose text-align left, so
this is not a font-property.
| | 01:14 | This is a text-align property so test-align.
| | 01:14 | Now left alignment is the default of
most user agents out there, so most of
| | 01:21 | the time unless you are trying to overwrite
text alignment has already been applied,
| | 01:25 | you probably won't need to do that.
| | 01:26 | We are going to go ahead and do right,
and we will do text-align right, after
| | 01:32 | that we will do the class selector of center.
| | 01:35 | And here we will do text-align center,
and then at the bottom we will do, justify.
| | 01:40 | Now as I write these selectors, I am
taking a lot of syntax for granted, since
| | 01:44 | we have been working so
much within this title already.
| | 01:47 | Just remember, you always have to do
your opening and closing curly braces,
| | 01:51 | remember class selectors have their
period in front of it, so don't forget those
| | 01:55 | syntax lessons that we focused on,
little bit earlier in the title.
| | 01:58 | So here we are just going
to do text-align: justify.
| | 02:01 | So those are our keywords that
we can use with text alignment.
| | 02:04 | If I save this, go back to my browser
and test it, you can see that we have Left
| | 02:09 | alignment here, Right alignment here,
Center alignment, and Justified text.
| | 02:14 | And that's really about it.
| | 02:15 | We don't have a lot of extra control
over our text alignment, although changes
| | 02:19 | are being made to this CSS
specification that should give us greater control
| | 02:22 | over our text alignment,
specifically, justified text.
| | 02:26 | Really quickly, let's go
take a look at hyphenation.
| | 02:29 | So I am go back to my code and I am
just going to go ahead, and move up to the
| | 02:34 | paragraphs selector.
| | 02:35 | I'll do this to all paragraphs,
because we are just going to turn hyphenation
| | 02:37 | on for the whole thing, and here I am going to
type in hyphens and then use the auto keyword.
| | 02:44 | So we do hyphens, we have several
keywords that we can use, and I am just going
| | 02:47 | to take you into the specification,
to take a closer look at those.
| | 02:51 | So I am going to go to the
CSS Text Level 3 specification.
| | 02:54 | You can find this at w3.org/TR/css3/text
and I am just going to scroll down and
| | 03:03 | find hyphenation, and notice that the
only properties or the only keywords that
| | 03:07 | we have are none, manual and auto.
| | 03:10 | None is basically the default,
manual uses words that are only broken at
| | 03:14 | line breaks, where there are
characters inside the word that suggests line
| | 03:18 | break opportunities.
| | 03:19 | For example, a hyphen character.
| | 03:21 | And then auto is up to basically the
user agent to determine where appropriate
| | 03:26 | hyphenation points are.
| | 03:28 | Okay, so we use auto, so we want
the user agent to determine what
| | 03:31 | those breakpoints are.
| | 03:32 | Now I want to point out
something to you as well here.
| | 03:35 | Our body selector has a width of 40%,
so that means that if I go back to text
| | 03:40 | alignment and refresh that, I don't see
any hyphens right now, but if I resize
| | 03:45 | this window, again, I'm
getting absolutely no hyphens.
| | 03:50 | Oh it's broken, it doesn't work.
| | 03:51 | Well, this is the life of using
experimental CSS properties, properties that
| | 03:57 | haven't been fully
implemented across browsers yet.
| | 04:00 | Most browsers when they start to
implement properties like this will actually
| | 04:04 | implement it using a vendor prefix first.
| | 04:06 | So I am going to go back to my code here.
| | 04:08 | Now the reason that they do this
with the vendor prefixes, is so that if
| | 04:12 | something significantly changes within
the specification, it doesn't break any
| | 04:16 | of your code that's written with default.
| | 04:18 | Once the implementation is sort of
solidified and agreed upon, we will go ahead
| | 04:23 | and remove the vendor prefix, no harm,
no foul for using this vendor prefixes,
| | 04:27 | so as a designer, it's sort of gives
you the ability to sort of experiment with
| | 04:30 | this properties before
they become fully implemented.
| | 04:33 | Okay, above this hyphens' property I
am going to type in -moz, so that's the
| | 04:38 | vendor prefix for Mozilla, so -moz-hyphens:
and then I am also going to give that
| | 04:44 | an auto and then for Webkit I am going
to type in -webkit-hyphens:auto; and for
| | 04:51 | Opera, I am going to do -
o-hyphens and then auto.
| | 04:55 | Now, not every one of these is
supported, as a matter of fact, I don't think
| | 04:59 | Opera supports hyphens yet.
| | 05:00 | But Mozilla, I know that it does, so
that if I save this and go back in the
| | 05:04 | Firefox and refresh my page, now I am
getting some hyphens look at that. Check it out.
| | 05:09 | And as I resize my page, my
hyphens change, because the user agent is
| | 05:14 | determining where the text should be hyphenated.
| | 05:17 | So that's really cool.
| | 05:18 | Let's see if it works in
some of the other browsers.
| | 05:20 | If I go to Opera, for example, no,
no hyphenation in Opera yet, oh well,
| | 05:26 | it's coming I am sure.
| | 05:27 | And if I go to say Chrome, and try
that, no, no hyphenation there either.
| | 05:35 | So such is the life of dealing
with experimental properties.
| | 05:39 | But it's kind of fun to play
with and you can go check those out.
| | 05:42 | So make sure you visit all of the sites,
the Mozilla developer network site, the
| | 05:45 | Opera site, the Safari developer
site, to see kind of where those
| | 05:49 | implementations are in the scheme of things.
| | 05:52 | Also, I really recommend going back
to the CSS Text Level 3 specification,
| | 05:56 | because there's more than just
hyphenation coming down in the pipe.
| | 05:59 | We will notice that we
have got text wrapping coming,
| | 06:02 | of course, we have some additional
alignment justification options coming, so
| | 06:06 | you can sort of get a roadmap for the
type of typographic control that we are
| | 06:09 | going to have over our text alignment
by going to this specification and sort
| | 06:13 | of reading through it.
| | 06:14 | So again, alignment, pretty simple
pretty cut and dried, we do have some
| | 06:18 | capabilities coming down the pipe.
| | 06:20 | Remember to use those vendor
prefixes if you're working with any of those
| | 06:24 | experimental properties, and if you
do decide to use those, just understand
| | 06:28 | that for the moment, browser support
is kind of spotty, so don't expect it to
| | 06:31 | work everywhere.
| | Collapse this transcript |
| Letter and word spacing| 00:00 | To control the spacing between
letters and words in CSS, we use the letter
| | 00:04 | spacing and word spacing
properties respectively.
| | 00:08 | Now those of you familiar with print
design will recognize letter spacing as
| | 00:12 | tracking, which essentially means adding an
equal amount of space between letter pairs.
| | 00:16 | Now true kerning through CSS still
eludes us at the moment, but as we'll
| | 00:21 | discuss at the end of this lesson, it
shouldn't be much longer until those
| | 00:24 | capabilities are added as well.
| | 00:26 | So for this example, we're going to
be using spacing.htm which you can find
| | 00:31 | in the 04_11 folder.
| | 00:34 | And just real briefly I'm going to
look at structure of this to tell you a
| | 00:37 | little bit about what
we're going to be doing here.
| | 00:39 | We've got a very simple structure to
the page, but we have couple of headings
| | 00:42 | that I want you to pay close attention to.
| | 00:45 | We have one h2 with a class of letter,
another h2 with a class of word, and
| | 00:49 | we're going to use these to
practice letter spacing and word spacing.
| | 00:52 | We also have a class with render applied
to it, h2 class of speed applied to it,
| | 00:58 | and a paragraph with a
class of render applied to it.
| | 01:01 | And that's going to allow us take a
little closer look at another property
| | 01:04 | that's really not directly tied to
word spacing or letter spacing, but it can
| | 01:08 | help achieve optimal
spacing in your text. Okay.
| | 01:12 | So let's jump in by taking
a look at letter spacing.
| | 01:14 | So we're going to target again
this h2 right here with the class of
| | 01:17 | letter applied to it.
| | 01:18 | So I'm going to go up to where
I'm supposed to add my styles.
| | 01:21 | I'm going to type-in .letter and
we're just going to go ahead and
| | 01:25 | add letter-spacing.
| | 01:29 | And we can use any value we want, we'll
start off with something really kind of
| | 01:32 | wacky, maybe 25 pixels, that's a lot.
| | 01:34 | I'm going to go ahead and save that and I'm
going to go ahead and preview that in a Browser.
| | 01:39 | And you can see that has added a lot of
letter spacing or a lot of tracking if
| | 01:44 | you will to that particular heading.
| | 01:46 | Now I can come in and modify that a little bit.
| | 01:48 | A lot of times in something like
letter spacing, a little goes a long way.
| | 01:52 | So I'm going to reduce that down to 5
pixels and save it and then test that again.
| | 01:57 | And now you can see that as opposed to
the other headlines, it's spaced out a
| | 02:01 | little bit, looks nice, it might even
be just a little bit too much tracking,
| | 02:04 | but you can modify this anyway that you want.
| | 02:06 | You can even use negative values, so I
could come in here and say like -1, but I
| | 02:11 | really wanted to tighten my letter spacing up.
| | 02:14 | And you can see it really,
really tightens those guys up.
| | 02:17 | And you can even go a little bit
further with this to create kind of a special
| | 02:22 | effect where the letters
are running in together.
| | 02:25 | And actually these days using CSS
transitions, I could transition from that
| | 02:29 | property and actually
animate those letters coming out.
| | 02:31 | So that's pretty cool.
| | 02:32 | I'm going to take that back to a
positive 5 pixel value and now let's go down to
| | 02:37 | our next h2 which has a class of word
applied to that and let's use that class
| | 02:42 | selector word to practice using word spacing.
| | 02:45 | So again, word-spacing, so
very easy to remember those guys.
| | 02:49 | Here again, we'll just start off with
something like 15 pixels maybe, we'll save
| | 02:53 | that and test it and we can see that now
word spacing again is getting this sort
| | 02:57 | of extra spacing between the words.
| | 03:00 | You can use pixels, you can use ems,
you can use percentages, you can use
| | 03:03 | whatever you'd like.
| | 03:04 | So if I wanted to do 1em there, I could save
that and it'll extend it just a little bit more.
| | 03:09 | You can also use point ems, so if I
said 0.2ems, for example, and save that,
| | 03:14 | it's just going to increase the word
spacing a little bit but not a lot.
| | 03:18 | So those values are pretty cut and dried
and pretty basic in terms of what you can do.
| | 03:22 | You can extend the spacing
between the letters, you can extend the
| | 03:25 | spacing between the words.
| | 03:26 | But unlike true kerning, you're not
to going to go in there and sort of
| | 03:29 | manipulate letter pairs.
| | 03:31 | Now there is a property that we have
available to us right now that can help
| | 03:35 | optimize the spacing between our letter pairs.
| | 03:37 | And it's actually not even a CSS property.
| | 03:40 | One of the properties in the SVG
specification, and that would be the text
| | 03:44 | rendering property, has been adopted
by almost all the browsers as a way to
| | 03:48 | control the rendering of
the text within the Browser.
| | 03:52 | Now SVG is a vector graphics
specification, and this was really designed to
| | 03:57 | control the rendering of vector
text within the Browser space.
| | 04:01 | But that property has become so widespread
you can pretty much use it anywhere. All right,
| | 04:05 | so we're going to go ahead and
practice with this property a little bit.
| | 04:08 | I can see that I have an h2 with a class
of render, I have an h2 with a class of
| | 04:13 | speed, and I have a
paragraph with a class of render.
| | 04:16 | These two classes are going to
basically deal with a couple of the values of
| | 04:20 | this text render property.
| | 04:22 | Let's write the selector for it
and I'll show you want I mean.
| | 04:24 | So I'm going to go up just below my
last class selector which is word and the
| | 04:29 | first thing I'm going to do to these
heading 2s is I want to make them a little
| | 04:31 | bit larger because the bigger the text
is, the easier it is to see kind of what
| | 04:35 | the Browser is doing here.
| | 04:36 | So I'm going to type-in h2.render, h2.
speed, and then again, we're just going to
| | 04:43 | make this text a little bit larger.
| | 04:44 | So font-size 60 pixels.
| | 04:49 | And then we're going to take the
margins down to 0 so that they butt right up
| | 04:52 | against each other, we can
really compare them well.
| | 04:54 | So if I save this and again preview
this in the Browser, you can see, those
| | 04:59 | two, now we can really sort of compare
exactly what's going on with both of those headings.
| | 05:03 | Okay.
| | 05:04 | So on the next line below that I'm going
to use the .render, so just any element
| | 05:08 | with render applied to it.
| | 05:09 | And that is where I'm going to
use this text rendering property.
| | 05:13 | So if you look for it in CSS
Specification, you won't find it.
| | 05:15 | It's in the SVG
Specification, so text-rendering.
| | 05:20 | And there are several
values that we can use for this.
| | 05:22 | We can use keywords Auto,
Optimize Speed, Optimize Legibility, or
| | 05:27 | Geometric Precision.
| | 05:29 | It's the Optimize Speed and Optimize
Legibility that we're really concerned with.
| | 05:32 | Optimize Speed basically says, okay, go
ahead and render those characters with
| | 05:37 | speed being foremost in your mind.
| | 05:39 | So don't worry about the quality
of the characters, don't worry about
| | 05:41 | the spacing of them.
| | 05:42 | Just go ahead and get them
rendered as quickly as you can.
| | 05:44 | Optimize Legibility on the other hand
tells the Browser or the user agent, hey,
| | 05:48 | really take some time, take a look at
this text, figure out what the optimize
| | 05:52 | rendering for this is in terms of
character spacing, in terms of the rendering
| | 05:56 | of the characters
themselves, take your time on it.
| | 05:58 | So for render here, we're going to go
ahead and optimizeLegibility, which is bad
| | 06:05 | news for me because I'm terrible at
this, but there is our text-rendering:
| | 06:06 | optimizeLegibility.
| | 06:07 | All right, now we're going to follow
that with the class of speed and here we're
| | 06:14 | going to change the text-
rendering to optimizeSpeed;
| | 06:16 | Once again, we're using CamelCase
naming here where we have uppercase second
| | 06:22 | word, lowercase first word.
| | 06:23 | I'm going to go ahead and save this, and then I
want to preview this back in my Browser again.
| | 06:28 | Now if you look at this and say, well,
it doesn't really look like a lot has
| | 06:33 | changed, James, you would be 100% correct.
| | 06:36 | And that's because different browsers are
implementing it slightly different ways.
| | 06:40 | In Firefox, Optimize Legibility has
pretty much become the default, especially
| | 06:45 | for text, any text over 20 pixels.
| | 06:47 | So this is one of those things that the
Browser is just trying to do to help you
| | 06:50 | out without requiring a
lot of extra effort from you.
| | 06:53 | Now other browsers like WebKit for
example, they are still at the stage where
| | 06:56 | you can turn it on manually,
but it's not a default setting.
| | 06:59 | So if I go back into my code and
preview this using say Chrome, which is a
| | 07:05 | WebKit browser, here we can see
there's a huge difference between it.
| | 07:09 | You'll notice that for Optimize
Legibility, take a look at the positioning of
| | 07:12 | the T and the e next to each other.
| | 07:14 | So those two letter pairs look a
lot better than optimize for speed.
| | 07:18 | So while this text might render a
little quicker, this text is certainly
| | 07:21 | rendering in a little bit higher quality.
| | 07:24 | So it's one of those things that if
you choose to turn it on for specific
| | 07:27 | headlines where you think spacing
really matters, it's going to you help in
| | 07:30 | certain browsers, but in other
browsers such as Firefox, it's sort of the
| | 07:34 | default way of doing things.
| | 07:36 | Going back to the beginning of the
lesson, word spacing and letter spacing,
| | 07:39 | those two properties, they are not
terribly exciting, but they do give you some
| | 07:42 | capabilities that are very
handy in specific situations.
| | 07:45 | Remember, you can use negative values
to tighten things up, positive values to
| | 07:48 | sort of move things apart.
| | 07:50 | Now I would caution you just as a
designer against overusing them and be really
| | 07:55 | careful about using large values for
those properties, again a little goes a
| | 07:58 | long way with those.
| | 07:59 | Now if you want to learn more
about some of the advanced typographic
| | 08:03 | capabilities that are currently in
development with CSS, I've given you a couple
| | 08:07 | of links here on this page.
| | 08:08 | One is to the Text Level 3
specification which we've kind of already looked at.
| | 08:13 | The other one is to the
Fonts Level 3 specification.
| | 08:14 | I'm going to open that up really quickly.
| | 08:16 | And if you look in this specification,
there's some really cool stuff in here
| | 08:20 | that's currently under development.
| | 08:21 | For example, these Font features
properties, we have some Kerning, so font
| | 08:26 | kerning is being developed, Ligatures,
Numerical formatting, Alternates and swashes.
| | 08:31 | So a lot of the stuff that we sort of
take for granted in print design that we
| | 08:35 | can do certainly with OpenType fonts,
that's starting to come to the Web as
| | 08:39 | well specifically with the adoption of Web
fonts, which is bringing OpenType fonts to it.
| | 08:44 | So we're getting a lot of those
capabilities added and as browsers begin to
| | 08:49 | implement them, you're going to want
to keep track of those so that you know
| | 08:52 | when you can start taking
advantage of those particular features.
| | 08:56 | So overall, just make sure you keep
track of what's going on so that you can use
| | 08:59 | those properties when they
become available in browsers,
| | 09:02 | and for the time being, just remember
you do have properties like letter spacing
| | 09:06 | and word spacing that can extend
your current typographic capabilities.
| | Collapse this transcript |
| Indenting text| 00:00 | This will probably be one of the shortest if
not the shortest movie in the entire course.
| | 00:05 | In this movie, we are going to cover
how to control text indenting through the
| | 00:09 | Text Indent property, and
it is super simple to do.
| | 00:13 | So I have the indent.htm file open and
you can find that in the 04_12 folder.
| | 00:20 | And just to give you a preview of
kind of what we are going to doing here.
| | 00:23 | If I open this up in one of my browsers,
I can see that we have got some text
| | 00:27 | here, a couple of paragraphs, and then
we have this little heading down here,
| | 00:30 | it's making a very odd comment, it's
saying please hide me so we are going to
| | 00:33 | look at normally just doing basic
text indenting, but some way is that text
| | 00:37 | indenting can help us out in
certain situations as well.
| | 00:40 | All right, so if I go back into my
html, I want to take a look at the
| | 00:44 | code really quickly.
| | 00:46 | Here we have an h1 with Text indenting,
we have some paragraphs inside of that,
| | 00:50 | and then we have that heading2 down
there, that is asking to be hidden.
| | 00:54 | So I am going to go up to my styles and
right below add styles here, we are just
| | 00:57 | going to do a text indent.
| | 00:59 | So we will take all my paragraphs and
I am just going to say text-indent and
| | 01:05 | then just give it a value.
| | 01:06 | You know how much indentation do you want?
| | 01:08 | We are just going to do 1em to start off with.
| | 01:10 | So if I save this and again I preview
this back in my browser again, we can see
| | 01:14 | that we are getting exactly that, every
single paragraph is indented up by 1em
| | 01:19 | and that's really all there is to it.
| | 01:21 | Now you can use negative values and they can
allow you to do some pretty interesting things.
| | 01:25 | Think about this quote here, when
we first saw this quote before the
| | 01:28 | indentation is applied to it.
| | 01:30 | Here we have got this sort of open
code character that causes it to look
| | 01:34 | indented even when it's really not.
| | 01:37 | So what I am going to do is, I am
going to go down to that paragraph and I am
| | 01:40 | just going to go ahead and
apply a class to that of quote.
| | 01:44 | And then in my styles, I am going to
go ahead and overwrite the indent that
| | 01:49 | we have all of our other paragraphs, and I
am going to give this a text indent of -.5ems;
| | 01:54 | I am not going to say, oh, I just knew
you know .5ems, I have played around with
| | 02:00 | them little bit before you got here.
| | 02:02 | All right, so I am going to save this,
go back into my browser and refresh this.
| | 02:07 | And you can see that what this is
doing is it is sort of giving us a
| | 02:10 | hanging punctuation.
| | 02:11 | It's hanging the punctuation outside of
the margin of the text which is a very
| | 02:14 | nice, and if you play around the
values of that, you can usually get that
| | 02:18 | consistently within your browsers, to look the
way that you want it to look, so that's awesome.
| | 02:23 | You know another technique that I use
text indenting for a lot is to hide elements.
| | 02:28 | You know there are some times when
you still want the text there for screen
| | 02:32 | readers or other user agents but you
might not want the text to be there
| | 02:35 | visually, so you still want in your html code.
| | 02:38 | You just don't want to be able to see it.
| | 02:39 | And there is a couple of
that ways you can hide that.
| | 02:41 | We have the display property that
we can use and that sort of thing.
| | 02:44 | But one of the things that makes text
indent pretty interesting, is that it can
| | 02:48 | remove the text for you but then
the element itself is still there.
| | 02:52 | So if you gave it a background color or
if you gave it a background image, maybe
| | 02:56 | an icon or something like that, that
will be still be there, but the text won't
| | 03:00 | be although the text is still in the html code.
| | 03:03 | So it's a really nice way of
maybe modifying how something is
| | 03:05 | displayed visually.
| | 03:06 | Let's go ahead and experiment with that.
| | 03:09 | So I am going to go down to my styles
again and here I am just going to do h2
| | 03:14 | for my heading2 selector.
| | 03:16 | And inside that I am just going to do
text-indent and here, I am going to be
| | 03:21 | very, very thorough.
| | 03:22 | I am going to say -2000 ems.
| | 03:25 | That means that it's going to push that text
somewhere in the next room off of your monitor.
| | 03:31 | And then I am going to come in and say
background and we will just do yellow
| | 03:35 | just to make sure it allows to visualize,
that yes, indeed the element is still there.
| | 03:38 | So I am going to save this, go back in my
browser and when I refresh it, there it goes.
| | 03:43 | So the text goes scattering off in to
the next room which is really nice, but
| | 03:46 | the h2 element as we can
see, is still right there.
| | 03:50 | So it occupies the same space, if I
had placed an image in the background, it
| | 03:53 | would be able to see the image now.
| | 03:55 | And content wise, in terms of text
readers and screen readers and other
| | 03:59 | syndication agents, the
content or the text is still there.
| | 04:03 | So that is really cool. So that's it.
| | 04:05 | Text indent, it's one of the
properties that you probably won't find
| | 04:08 | yourself using a lot.
| | 04:10 | It's nice to know it's there because
occasionally you are going to want to use it.
| | 04:12 | As also helpful to know that you can
use it to achieve something special
| | 04:16 | effects, things like hanging punctuation
or hiding of the text from element that
| | 04:20 | you would otherwise want to appear.
| | 04:22 | So go ahead and take this page and
experiment a little bit with text indenting
| | 04:26 | and start to come up with some
creative ways that you can use it
| | 04:29 | within your own sites.
| | Collapse this transcript |
| Adjusting paragraph line height| 00:00 | Now on the surface using the Line
Height property seems pretty simple.
| | 00:05 | Line Height controls the spacing
between lines of multiple lines of text.
| | 00:09 | If you're a graphic designer, you're
probably used to calling it leading.
| | 00:13 | It is exactly the same concept.
| | 00:16 | Line Height can get pretty tricky
however when you have to consider how
| | 00:19 | the values are calculated and if Line Height
is being inherited or not by child elements.
| | 00:25 | So for this exercise, we're going to
be using the line-height.htm file, which
| | 00:30 | can be found in the 04_13 directory.
| | 00:34 | And I'm just going to Preview this in a
browser before we begin working with it
| | 00:38 | to sort of show you what the page
structure is going to look like.
| | 00:40 | So we have a couple of headings
followed by paragraphs, and we have a span tag
| | 00:45 | right here that has a background
color that's going to help us illustrate
| | 00:48 | exactly what Line Height is doing for us.
| | 00:50 | Now, if I go back into my page, you can
sort of see that structure within the code.
| | 00:54 | So we just have some
headings followed by paragraphs.
| | 00:57 | We're also going to notice that
we have, in this h2, a class called
| | 01:01 | center, where we're going to
vertically center the text and the element
| | 01:04 | using Line Height as well. Okay.
| | 01:07 | So I'm going to go right up to my
existing selectors and I'm going to find the
| | 01:11 | paragraph selector, and we're going
to play around with some of the initial
| | 01:14 | values of what we can do with Line Height.
| | 01:16 | So just below font-size, I'm going to
create a new line for another property and
| | 01:20 | here I'm just going to type in
line-height, so it's line-height.
| | 01:22 | Now, remember, from earlier when we
were talking about the font shorthand
| | 01:27 | notation, this is a property just like
font-weight, font-size, font-style, that
| | 01:30 | can be added to the font
shorthand notation. All right.
| | 01:35 | So the values that we have here, one of
the possible values is normal, so let's
| | 01:39 | just use that as the first value.
| | 01:41 | So if I say normal, I Save this and I
go back into my browser and Refresh it,
| | 01:46 | we're not really going to see any difference.
| | 01:48 | That's sort of the default.
| | 01:49 | Now, every browser is a little bit
different, but typically the Line Height is 1
| | 01:53 | to 1.2 times the size of the font.
| | 01:57 | So we can also use a specific
number, a length, or a percentage.
| | 02:01 | Let's take a look at what
each one of those does for us.
| | 02:04 | If I come in and do a
percentage, let's say I do 140%.
| | 02:08 | So if I Save that and test it, now
what it's doing is it's basically taking a
| | 02:12 | look at the size of the text, and then
it's giving you a Line Height that is
| | 02:16 | equal to 140% of that.
| | 02:18 | You can see that it opened up the spacing
a little bit, but not a lot. All right.
| | 02:21 | Now, we can also use a length value.
| | 02:24 | If I use a length value, let's say I
use something like, I don't know, 1.4ems,
| | 02:28 | all right, so if I Save this and test it.
| | 02:34 | Wow, no movement whatsoever.
| | 02:36 | So 1.4ems is very similar to 140%.
| | 02:39 | Really, a lot of times you're just kind of
splitting hairs between one unit and the next.
| | 02:43 | And then we have a third way
that we can write this syntax.
| | 02:47 | We can just go ahead and get rid of
the unit of measurement altogether.
| | 02:50 | Now, Line Height is unique in the fact
that it is the only property that allows
| | 02:55 | us to do multiples like this and
not a unit of measurement after that.
| | 02:59 | Essentially this means 1.4
times the size of the text.
| | 03:03 | If I Save this and test it, you've probably
already guessed this, no change whatsoever.
| | 03:08 | 1.4ems and 140% all pretty much render the same.
| | 03:12 | There are really three different
ways of writing a very similar value.
| | 03:16 | However, there is a big difference and a
big value in terms of how this property
| | 03:21 | is inherited, in terms of how you write that.
| | 03:23 | So it does matter and we're going
to get into that in just a moment.
| | 03:26 | First, I want you to be able to
visualize Line Height a little bit better than
| | 03:30 | we're currently visualizing it right now.
| | 03:32 | So here's what I want to do.
| | 03:33 | I want to go down to the span rule, and
I'm going to change it's value to display
| | 03:39 | or actually add to its
value the display property.
| | 03:41 | Now, the display property is awesome
and it's something that you'll learn more
| | 03:45 | about in the CSS Layout course.
| | 03:47 | But the display property allows you
to change how an element is displayed
| | 03:51 | within the browser.
| | 03:52 | Most of our elements are either block-
level elements, meaning they occupy their
| | 03:56 | own space in the document flow, or
they're inline elements, meaning they can
| | 04:00 | appear side-by- side like images and spans.
| | 04:03 | Well, there's other values that we can use too.
| | 04:05 | And here I'm going to use inline-block;
| | 04:06 | Now, what that does for me is, it
means that the span element should still
| | 04:11 | behave as an inline character, but I
want it to display its properties like a
| | 04:15 | block-level element.
| | 04:16 | Now what that's going to do for me is it's
going to allow it to display its full height.
| | 04:20 | So if I Save this and go back into my
page and Refresh it, you can see there's a
| | 04:25 | slight difference there.
| | 04:26 | So let me go ahead and kick up the line-
height a little bit more, let me take it up to 1.6.
| | 04:30 | There we go.
| | 04:31 | Now we can really see the difference.
| | 04:33 | So what you're seeing here is you're seeing
the exact line-height of this line of text.
| | 04:38 | You can see it extends down a little
bit and extends above it and is based on
| | 04:42 | the ascenders and descenders of the characters.
| | 04:45 | So it just simply uses the baseline as
sort of that starting point, and then it
| | 04:49 | goes above and below based on
the values that you give it.
| | 04:52 | So the higher that value,
obviously the higher that is.
| | 04:54 | And if you could imagine these being
boxes stacked on top of each other, the
| | 04:58 | height of that box is
controlling the space between the lines.
| | 05:01 | So that helps me sort of
visualize exactly what's happening here.
| | 05:05 | You can even take that further, if I went down
into my span and I did just that span element.
| | 05:11 | So if I did a line-height here of say 2
.6, that's really going to make a huge
| | 05:17 | difference, trust me.
| | 05:18 | If I test that, you can see now how
different this line is compared to all
| | 05:23 | of the other lines.
| | 05:24 | And if you do have something like
this where you have the span tag with one
| | 05:28 | line-height and you have this line
that actually has another line-height, the
| | 05:32 | greater value is used.
| | 05:34 | So in this case, the greater
value is used for that line. Okay.
| | 05:37 | I'm just going to delete that property.
| | 05:39 | Now, I mentioned earlier that it
really mattered in terms of how you write
| | 05:42 | line-height if the value is being
inherited, and I want to show you that.
| | 05:47 | I'm going to remove the line-height
from the paragraph and I'm going to go up
| | 05:51 | to our body selector.
| | 05:52 | Now, again, we've been doing this
pretty much the whole course, applying
| | 05:55 | properties to the body selector and
then sort of letting those be inherited by
| | 05:59 | the elements below it.
| | 06:00 | So if I come up here and I do a line-
height and let's say I do a line-height of
| | 06:05 | 1.6ems and I Save this and I test it.
| | 06:10 | So we go back to a consistent
line-height all the way through.
| | 06:14 | Now what's happening here is a
lot different than using a multiple.
| | 06:17 | When you use an em, here's what happens.
| | 06:21 | It takes a look at the font-size, which
in this case would be about 16 pixels.
| | 06:25 | And then because it's using an em,
it goes ahead and multiplies 1.6 times
| | 06:29 | whatever the default would be, in this
case 16 pixels, computes that value and
| | 06:33 | then that is the value that's passed down
to every single element, every one of them.
| | 06:39 | They all get that computed value.
| | 06:41 | That means that this relative unit of
measurement is only relative for the body,
| | 06:45 | everybody else gets a fixed unit.
| | 06:47 | Now, on the other hand, if I take away
the em and I just do a multiple, if I
| | 06:51 | Save this, take a look at what happens.
| | 06:53 | When I Refresh the page, everything
changes, everything moves down a little bit,
| | 06:58 | everything gets spacing
that's a little bit different.
| | 07:00 | Because now what happens is instead of
calculating the value first and having
| | 07:05 | the calculated value pass down, what
happens is it passes down a line height of 1.6.
| | 07:10 | So every single one of these guys
now gets 1.6 times its own font-size.
| | 07:17 | So that gives you a little bit better
spacing in terms of the relationship
| | 07:20 | between those elements.
| | 07:21 | So if you're ever going to pass line-
height in as an inherited value, make sure
| | 07:25 | that you use multiples and not ems.
| | 07:28 | It's very, very important that you do that.
| | 07:30 | So now I'm going to Save this and
we're going to move on to doing our last
| | 07:33 | little thing, which is using line-
height to force text to be centered
| | 07:38 | vertically in an element.
| | 07:39 | I use this technique a lot in menus,
where I have sort of a horizontal menu and
| | 07:43 | I want the text vertically centered.
| | 07:45 | Really, it works if
there's a single line of text.
| | 07:48 | If you have multiple lines of text,
this is a little bit harder to pull off.
| | 07:50 | So what I'm going to do is I'm going
to go down, again, just to remind you of
| | 07:54 | who we're affecting here.
| | 07:56 | We have the heading2 that has a
class called center, so that's what we're
| | 07:58 | going to work with.
| | 07:59 | So I'm going to go right back up here
to my styles and I'm just going to create
| | 08:02 | a new selector, .center.
| | 08:05 | And then inside that, I'm
going to give it a color of #fff
| | 08:09 | That's white, by the way, that's
actually a hexadecimal notation.
| | 08:12 | You could do the exact same
thing by just saying white.
| | 08:14 | It doesn't really matter which one you do.
| | 08:16 | For background, we're going to
use more hexadecimal notation.
| | 08:19 | Here we're going to do #666, which is not
as ominous as it sounds. It's just a gray.
| | 08:24 | And then below that, here's the magic,
we're going to do line-height 50 pixels.
| | 08:30 | And then I'm going to do
a padding-left 25 pixels.
| | 08:33 | And all the padding to the left is going
to do for me is make sure that the text
| | 08:36 | is not butting up against the left
edge of the element, the background.
| | 08:40 | But line-height, here's what this does.
| | 08:42 | If you haven't specified the height of
an element, its line-height is going to
| | 08:46 | generate that height for you.
| | 08:47 | If you have a single line of text, that
means that the line-height becomes the
| | 08:51 | height of that entire element.
| | 08:53 | The text itself, because it's centered
on that baseline, will then be vertically
| | 08:57 | centered in that box, and this
is a very elegant way to do this.
| | 09:00 | If I Save this and go back in the
browser and Preview it, now when I scroll
| | 09:04 | down, notice that we have our Other
uses headline here, the text is vertically
| | 09:08 | centered in the box.
| | 09:10 | And if I wanted to adjust the height of
that, all I would need to do is come in
| | 09:13 | here and adjust the line-height.
| | 09:14 | So I can go to 75 pixels, Refresh it,
and you can see it stays vertically
| | 09:19 | centered, and now the
height of the box is adjusted.
| | 09:22 | Now, again, this works best when
there's a single line of text in there.
| | 09:25 | When you have multiple lines, then you
have to really work to keep everything
| | 09:29 | the way you need it to be. Okay.
| | 09:32 | That's the basics of line-height, and I
know it seems like I've probably covered
| | 09:35 | a lot there, but it is an
incredibly powerful property.
| | 09:38 | You're going to be using it probably
over and over again to adjust the spacing
| | 09:42 | of elements on the page.
| | 09:43 | Now, I want to really encourage you to
think carefully about how you're going to
| | 09:46 | plan to use line-height in your
overall site-wide typographic strategy.
| | 09:51 | If you place line-height on the body
selector, you do determine a starting
| | 09:55 | baseline grid for the entire page.
| | 09:57 | However, you need to think about how
you might need to modify that spacing for
| | 10:01 | certain elements or page regions
and how those values are going to be
| | 10:05 | calculated, so really sort of how
they're going to inherit that property.
| | 10:08 | And if you do that, you're going to
have a consistent vertical rhythm to your
| | 10:11 | text and the spacing is
going to look extremely natural.
| | 10:13 | Now, if on the other hand, you simply
just go ahead and add line-height values
| | 10:17 | to any element without really
considering how it might impact other elements or
| | 10:21 | work with other elements on the page,
your content is going to look a little
| | 10:24 | disjointed and ragged.
| | 10:26 | In other words, be extremely
deliberate in how you use it.
| | Collapse this transcript |
| Controlling the space between elements| 00:00 | Most of the time we'll start off with an
entirely new exercise file, but in this
| | 00:04 | case I wanted to pick up where we left
off in our last movie, since it's really
| | 00:08 | a continuation of what we were
just doing with line spacing.
| | 00:12 | So if you didn't watch the previous
movie, go back and watch that really
| | 00:16 | quickly, so that you get to
know what we are doing here.
| | 00:18 | So if line spacing allows us to
control the spacing between multiple lines of
| | 00:22 | text what about the space
between the elements themselves?
| | 00:26 | Now for that we typically use margins.
| | 00:29 | Now we're going to talk about margins
and padding in a little bit more detail
| | 00:33 | later on in another chapter.
| | 00:34 | I just want to introduce them here as
a means of controlling text formatting.
| | 00:38 | So I'm going to preview this page before
we do anything to it in a browser, just
| | 00:42 | to sort of refresh our memory.
| | 00:44 | And so in the last movie we set the
line height property, which is dealing with
| | 00:46 | the spacing between these lines of text.
| | 00:49 | However, the spacing between the
elements themselves is controlled by margins.
| | 00:54 | I'm going to go back into our file
that we were working with here, and
| | 00:57 | we're going to be working with the element-
spacing.htm and this is found in the 04_14.
| | 01:03 | Now the structure of this page is
exactly the same as the one we had in the last
| | 01:07 | one, and pretty much to the syntax of
the CSS is, exactly where it was when we
| | 01:12 | left off with the last movie as well.
| | 01:14 | Now you'll notice that we don't have any
margins going on in our document right now.
| | 01:18 | So you might be wondering well, wait a
minute what's controlling the spacing
| | 01:22 | between them right now?
| | 01:23 | Well, remember every single element
has default styling that the user agent
| | 01:26 | applies to it and those
margins are part of that.
| | 01:29 | So one of the first things you might
want to do if you're really going to
| | 01:32 | over ride these is to go
ahead and strip them out.
| | 01:34 | So I'm going to go all the way up to
the top of my styles and just below, the
| | 01:38 | sort of grouped aside in the
article style, I'm just going to come in and
| | 01:42 | I'm going to say, okay, body, h1, h2,
h3, p, and then I'm just going to do
| | 01:50 | margin of 0, and that's a very quick
down and dirty, no-nonsense CSS reset.
| | 01:57 | We're not doing any padding or anything else,
| | 01:58 | we're just sort of
stripping out all of the margins.
| | 02:00 | Now if I save this page, and I test
this again in the browser, you can see
| | 02:05 | what this does for us.
| | 02:06 | It just goes ahead and gets rid
of all the margins between it.
| | 02:10 | Now the only thing controlling any
spacing whatsoever is the line height, so
| | 02:14 | now we need to go back in and sort of put in
the proper margins that we want for our pages.
| | 02:19 | Now one of the strategies that's really
served us well up until this point with
| | 02:23 | font sizing and line height is to
just go ahead and apply one of the values
| | 02:26 | that we want to the body tag, allow
that to be sort of the default and let it
| | 02:30 | inherit to everything else.
| | 02:31 | Doesn't quite work that way with margins,
let's just experiment with that and see why?
| | 02:35 | Now I do have a margin already applied
to body, but I'm going to go down to the
| | 02:39 | very bottom and do this again.
| | 02:41 | And I'm just going to come in
and I'm going to say margin: 1em.
| | 02:43 | All right.
| | 02:44 | Save that, and then I'm
going to test this on my page.
| | 02:47 | That's not we were expecting at all.
| | 02:49 | Nothing happened with the elements, but
everything else on the page gets sort of
| | 02:52 | moved around and looks kind of weird now.
| | 02:55 | Well, that's one of the things that you
learned very early on about margins and padding.
| | 02:59 | Those properties, unless you tell
them to, do not inherit, and if you think
| | 03:04 | about that that makes sense.
| | 03:05 | If you put 10 pixels worth of margin
on the body and then every other element
| | 03:10 | got 10 pixels worth of margins,
pretty soon everything will just sort of be
| | 03:13 | spreading away from each
other in ways that you don't want.
| | 03:15 | So I'm going to get rid of this.
| | 03:16 | Now we need to go into the individual
elements themselves and control other margins.
| | 03:20 | So I'm just going to go right
down here to the h1, h2, and p selectors.
| | 03:25 | So here's what we're going to do.
| | 03:26 | I'm going to start off by
using instead of just margin, the
| | 03:29 | margin-bottom property.
| | 03:31 | So this is one of the nice
things about margins and padding.
| | 03:34 | You can apply them to whatever aside you want.
| | 03:36 | In this case since we're controlling
the spacing between these elements I
| | 03:40 | don't want to have any extra space
above them so we're just going to do the
| | 03:43 | margin-bottom, which is going to control the
spacing below these paragraphs and headings.
| | 03:47 | Okay, so here I'm going to change this
to 24 pixels and I'm going to do that
| | 03:51 | consistently for each one
of these, margin-bottom:
| | 03:52 | 24px margin-bottom: 24px.
| | 03:53 | So we have the heading 1, heading 2
and the paragraph, all now have bottom
| | 04:04 | margins of 24 pixels.
| | 04:05 | So if I save this and preview this in
my browser, okay, our spacing comes back
| | 04:10 | which is nice, and then the spacing
between the elements is all exactly 24
| | 04:14 | pixels, they're all exactly the same.
| | 04:16 | Now you might be saying to yourself,
well, they don't look exactly the same.
| | 04:19 | Well, do keep in mind that we do
have a line-height, so the line-height
| | 04:22 | basically is also on these bottom
lines sort of pushing down a little bit
| | 04:26 | below that as well.
| | 04:28 | So what we have here is instead of a
margin that is relative to the actual
| | 04:32 | element itself or the size of that
element, they're just all consistent and that
| | 04:36 | doesn't give us a very
nice flow to our page content.
| | 04:39 | So I'm going to go back into our
file and let's change this to a relative
| | 04:42 | unit of measurement.
| | 04:43 | So instead of 24 pixels, I'm going to
go ahead and say 1em, and then I'm going
| | 04:49 | to do the same thing here, 1em on the
h2, and then a 1em for a paragraph and
| | 04:55 | I'm going to save this.
| | 04:56 | Now you might be saying yourself, well,
yeah, but you just swapped that out
| | 04:59 | with 24 pixels with 1em, so you're still
going to get the same space between them right?
| | 05:03 | Not exactly.
| | 05:04 | If I save this and test this in the
browser, you can see that now our spacing is
| | 05:10 | adjusted a little bit and the reason
that it adjusts is because those em values
| | 05:15 | are being calculated based on the
size of that particular element.
| | 05:19 | If we go to an h1, its font size is
going to be 1.8ems, which is 1.8 times 16,
| | 05:25 | and that's what the value of
the bottom margin is going to be.
| | 05:27 | Same thing for h2, 1.4 times 16,
that's going to be that value, and the
| | 05:32 | paragraph spacing will be exactly, say
16 pixels if that's the default, because
| | 05:37 | it's spaced off that as well.
| | 05:38 | So even if you use a relative unit of
measurement on an element like a heading
| | 05:42 | 1 or heading 2, remember that its
value is calculated based on that element's
| | 05:46 | font size, not the default font size
of the page, and that's a very important
| | 05:51 | thing to keep in mind.
| | 05:52 | Now you can also make these
independent of each other.
| | 05:56 | So if I go down to the h2, I could
make that say maybe 0.2ems, and if I save
| | 06:01 | this and test it, you can
see what this does for us.
| | 06:05 | It just creates tighter spacing
between our heading 2s and our paragraphs,
| | 06:09 | whereas, the paragraphs and other
elements and the heading 1 in our paragraphs
| | 06:13 | have a greater amount of spacing.
| | 06:15 | So you can tweak those values to sort of get
that vertical rhythm that you're going for.
| | 06:19 | Now there is a little bit
more to using margins than this.
| | 06:22 | We still haven't talked about vertical
margin collapse, for example, but for now
| | 06:26 | it's enough for us to know that the
ability to control spacing between elements
| | 06:30 | lies with the margin property and
then if we begin to use relative units of
| | 06:33 | measure for those margins, that the
size of the margin will be based upon the
| | 06:37 | size of that particular element,
not the default size of the page.
| | Collapse this transcript |
| Basic text formatting: Lab| 00:00 | Controlling the text formatting of a
simple page doesn't require a tremendous
| | 00:04 | amount of planning or execution.
| | 00:07 | However, when controlling a site,
especially a complex site, even the simplest
| | 00:12 | text formatting requires thinking
about how to apply the formatting
| | 00:16 | efficiently, and in a way that doesn't change
the formatting that you need for other elements.
| | 00:21 | In this lab, you are going to return
to the desolve.org site and focus on
| | 00:26 | controlling the site's typography.
| | 00:28 | You'll need to utilize many of the
properties that you've learned in this
| | 00:31 | chapter as well as put some thought
into writing the most efficient selectors
| | 00:35 | possible to achieve the desired formatting.
| | 00:38 | Let's take a look at the goals that
we have for our text formatting lab.
| | 00:42 | I'm in the 04_15 folder and I've opened
up the index.htm along with the main.css
| | 00:49 | file which can be found in the
same directory in the _css file.
| | 00:54 | Now if I preview this page in a browser
just to kind of show you what's going on
| | 00:57 | here, a lot of the formatting
doesn't look very good at all.
| | 01:01 | So typographically, we've got our work
cut out for us here, so a lot of what
| | 01:06 | happens in this particular page is
very dependent upon the typography.
| | 01:10 | So I am going to jump back into our page.
| | 01:13 | Now, from the previous two labs,
you should be fairly familiar with the
| | 01:17 | structure of the page and you should be
fairly familiar with how the CSS is structured.
| | 01:22 | So I am just going to jump into what
our goals are for this particular lab
| | 01:26 | and to find out what those goals are, I am
going to switch over to the main.css file.
| | 01:31 | And at the very top of the code, I've
got our Lab instructions posted here.
| | 01:36 | Once again, just like we did in the
previous lab, you're going to have to figure
| | 01:40 | out exactly kind of
where to put these selectors.
| | 01:42 | This time I've given you some hints,
I've got comments scattered throughout
| | 01:45 | the CSS that say hey,
| | 01:47 | put the link styling here, place the @
font-face rules here, that sort of thing.
| | 01:50 | So you'll get some feedback as far as that goes.
| | 01:53 | I'm more concerned at this point that
you're focusing on the overall typographic
| | 01:57 | strategy of the page.
| | 01:58 | Now the very first thing that we are
going to do for this particular file, we
| | 02:02 | are going to be using web fonts for our site.
| | 02:05 | So one of the things I would like you
to do is go over to the assets folder,
| | 02:09 | inside that you're going to find a
text file that says fonts.txt and that has
| | 02:13 | all of the font syntax that we
are going to be using for this.
| | 02:16 | So I am not going to make you write
this syntax from scratch. That wouldn't be
| | 02:19 | exactly fair right now, would it?
| | 02:21 | And then you are going to place that
at the very top of our Global styles.
| | 02:25 | Okay, so that's kind of a
softball pitch, just to get you started.
| | 02:28 | But you're also going to have to go
through to make sure that you are using
| | 02:31 | those new fonts as well and we'll
talk more about that in just a moment.
| | 02:34 | Now, our second goal that we need you
to do is in the Global styles region, so
| | 02:38 | remember, our styles are separated by
sections, but in the Global styles region
| | 02:42 | or section of our styles, I need you to
write rules that are going to take the
| | 02:46 | em element and the strong element and
reset them so that they're once again
| | 02:50 | displaying as italic and bold.
| | 02:52 | So why aren't they?
| | 02:54 | Well, at the top of our styles,
we have a very limited reset.
| | 02:57 | This is one of my favorite resets to
use because it's not overpowering and it's
| | 03:02 | pretty easy to overwrite.
| | 03:04 | But essentially, we're stripping all
the margins, padding and border off of
| | 03:08 | these elements, so if there is any
default of those values, they are gone.
| | 03:11 | We're using vertical line baseline to
make sure that everything is aligned to
| | 03:15 | its baseline property, even within
things like tables and things like that.
| | 03:19 | And then we have a font:
| | 03:20 | inherit, and this is what's getting rid
of our default styling for some of those
| | 03:25 | elements like strong and em.
| | 03:27 | So it's not quite a scorched earth,
CSS reset, but it does reset a lot of
| | 03:32 | properties that you then have to go
back through and toggle back on if you want
| | 03:36 | them and that's one of the
dangers of using a CSS reset.
| | 03:39 | So again, the goal is in those Global
styles regions that we were just in, I
| | 03:44 | want you to follow that with a couple
of rules that are going to reset em as
| | 03:48 | displaying as italic and reset strong as bold.
| | 03:51 | Then in the same section, I want you to
find the body selector and I want you to
| | 03:54 | modify that selector, modify the
existing properties or add to the properties,
| | 03:58 | so that the font family being used is
Cantarell, the new font that we've added
| | 04:02 | along with its proper font stack.
| | 04:04 | I want you to set the initial font
size to the default size of the browser.
| | 04:08 | So again, you have to remember how to do that.
| | 04:10 | Set the line-height property so that all
of the elements on the page have a line
| | 04:14 | height that's 1.5 times
the size of their font size.
| | 04:19 | Now, when you do that you're going to
have to remember you know do you use set
| | 04:22 | that's using a relative unit of
measurement or a multiple, you know how is this
| | 04:25 | value going to inherit, those are the
things that you need to think about.
| | 04:29 | You're going to set the font-weight
and the font-style to Normal and you are
| | 04:32 | going to set the foreground color to ASH.
| | 04:34 | Now every time I ask you to set a color,
whether it would be a foreground or
| | 04:37 | a background color and I use a color
name, you can go right up here to the
| | 04:41 | Color Guide and you can copy and
paste these values, either the hexadecimal
| | 04:45 | value or the RGB value.
| | 04:47 | Don't copy and paste the color name,
because these are not reserved keywords.
| | 04:52 | So copy and paste one of these;
| | 04:53 | either the hexadecimal value or the RGB
value, one of those two, either one of
| | 04:57 | them will work just fine.
| | 04:59 | The fourth objective for our lab is I
want you in the Global styles to find the
| | 05:04 | comment that indicates the
location of the link style.
| | 05:06 | So if you scroll down into our Global styles,
this is kind of what you are looking for,
| | 05:10 | a comment like that and that
actually is the comments.
| | 05:12 | So anytime I tell you, hey,
| | 05:13 | go in the styles and look for a
comment that says this, it's going to look
| | 05:17 | something like that.
| | 05:18 | So I am going to go back up here
again, let's read through this.
| | 05:20 | So once you've found where you need to
write those styles, what you need to do
| | 05:23 | is write a couple of selectors
that's going to strip out all of the text
| | 05:27 | decoration for all our links.
| | 05:30 | Set the color, the default color of
our links to Burnt Orange, once again see
| | 05:33 | the color guide up there, and set all
of the color of the links when they are
| | 05:37 | hovered over to the Pewter Blue and again,
you can get that value from the color guide.
| | 05:42 | So remember, this is supposed to be
a very generic, very basic default
| | 05:45 | styling for our links.
| | 05:46 | So, keep that in mind as
you write the selector for it.
| | 05:49 | In the header section of the styles and
again, all of our styles are separated
| | 05:52 | by sections so here is banner styles,
you'd be looking for the header styles.
| | 05:57 | So as you go through, you're
going to look for that header section.
| | 05:59 | All right, so let me go back up.
| | 06:02 | But in the header section of styles,
you want to modify the header h1 and h2
| | 06:06 | styles, so that the h1 has a font size
that is 3.2 times its parent element's
| | 06:12 | font, set the font-weight to bold,
display the entire text in all caps, set the
| | 06:18 | line height to an exact value of
165px and set the color to white.
| | 06:23 | That's going to give you some
really dramatic formatting for that.
| | 06:26 | For the h2 in the header, find that
rule, set its font-style to italic.
| | 06:31 | Set the font-weight to normal, set
the font-size to 1.4 times its parent
| | 06:35 | element, the color to white, all the
letters to lowercase and increase the space
| | 06:40 | between the letters by 0.1em.
| | 06:42 | You also want to set the line height
there to exactly 165 pixels as well.
| | 06:47 | Now I know this might sound kind of
confusing, you know the font size to 1.4
| | 06:51 | times its parent element, but trust me,
if you were paying attention in the
| | 06:55 | font-size movie, you kind of
already know what I'm going for there.
| | 06:59 | Remember, it's calculating this based
on its parent element, so we are using a
| | 07:03 | relative unit of measurement there, okay.
| | 07:07 | So let's go down to our last two
objectives and the seventh one is Find
| | 07:12 | the #mainNav a selector that's going to
target every link inside the main navigation.
| | 07:17 | Modify the rule so that the text displays an
all caps and the text is aligned to the center.
| | 07:22 | You then need to find the #mainNav a
em selector which is just below that and
| | 07:26 | modify it, so that the
text appears in all lowercase.
| | 07:30 | Finally, go down in your styles
and find the #footer a selector,
| | 07:34 | you want to modify that selector so
that the link text is aligned vertically
| | 07:38 | with the background image (the bird).
| | 07:39 | So you want it centered
vertically with that bird.
| | 07:42 | Now if you want a hint on this one,
examine the height of that element for a
| | 07:45 | clue on how to accomplish that.
| | 07:48 | So okay, I know there's a lot going on there.
| | 07:50 | So I am just going to leave it right at that,
| | 07:52 | I am not going to make you do anything else.
| | 07:54 | But I want to encourage you.
| | 07:55 | The reason I'm giving you all these
tasks is I want you to really pay attention
| | 07:59 | to how the remaining formatting of the
rest of your document is set as well.
| | 08:04 | Look into each section, you know like
the article and the side regions and see
| | 08:08 | how the text in each of the
elements there is formatted.
| | 08:12 | By setting that base formatting on the
body tag, we can then treat every single
| | 08:16 | region as an individual area and go
ahead and tweak the formatting as needed.
| | 08:20 | Now for the most part, styling is
defining the relationship between the
| | 08:23 | various element types.
| | 08:25 | Care has been taken when I initially
designed this to make sure that the
| | 08:28 | formatting between the regions is
consistent and it works together harmoniously.
| | 08:31 | So really take a look at the styling and
see if you can pick up on that. All right.
| | 08:35 | There you go.
| | 08:36 | Have fun working on the lab and if you
want to compare your solutions to mine,
| | 08:39 | be sure to go ahead and watch the
solutions movie as soon as you're done
| | 08:43 | working on your lab.
| | Collapse this transcript |
| Basic text formatting: Solution| 00:00 | So, how did you do with our text formatting lab?
| | 00:03 | When I last left you, I left you
with a pretty big pile of stuff to do.
| | 00:08 | So hopefully, you got through it okay,
but, hey, if got stuck, feel free to open
| | 00:12 | up the finished_files, compare your
styles to the one in the finished_files
| | 00:15 | directory and you've finished them,
just come along with me in this movie and
| | 00:19 | you can compare your finished styles to
mine as we go through our tasks sort of
| | 00:23 | one by one, I'll show you how I've
solved the formatting issues as well.
| | 00:27 | The first thing I want to do is just
preview this page in a browser so you can
| | 00:30 | see kind of the finished formatting.
| | 00:32 | So now our heading looks great, it
looks a lot better than it did before, our
| | 00:36 | font styling is looking really good,
we've got the font that we were looking for
| | 00:40 | in terms of our Cantarell font.
| | 00:42 | The Twitter link right here is
vertically centered with our bird.
| | 00:46 | So everything is looking pretty much
the way that we wanted it to. Cool,
| | 00:50 | excellent.
| | 00:50 | So let's go take a look at how
we solved some of those issues.
| | 00:53 | So I am going to back in my main.
css and I am just going to go through
| | 00:56 | these guys one at a time.
| | 00:59 | Now the fonts was pretty simple to do, it's
just simply cut and paste, copy and paste.
| | 01:03 | So that was probably
pretty easy one for everyone.
| | 01:06 | But remember, we had to go into our body
selector, and let me find that real quick.
| | 01:11 | So in order to do kind of what we
wanted to there, I went ahead and used the
| | 01:16 | font shorthand notation and I passed a
font size of 100%, because remember, we
| | 01:20 | asked to make the size of our text
equal to whatever the default size of the
| | 01:25 | text of the browser would be, and
then we chose the Cantarell, Arial,
| | 01:29 | sans-serif font stack.
| | 01:31 | Now you may have noticed that at
the bottom of this, I also chose the
| | 01:35 | font-weight of normal and font-style of normal.
| | 01:37 | It's interesting, this is kind of
redundant, I also do that right here without
| | 01:41 | even really having to break a sweat.
| | 01:42 | Remember, if you use the shorthand
notation, but you don't pass those values,
| | 01:47 | normal gets passed for those values.
| | 01:49 | So why did I do it here?
| | 01:51 | Well, that's my way of just sort of
advertising to anybody else that comes along
| | 01:55 | that hey, I'm going ahead and
resetting font-weight and font-style to normal,
| | 01:59 | everybody is going to inherit that, and
then if you want it to be different, if
| | 02:03 | you want it to be italic, if you want
it to be bold, you've got to go ahead and
| | 02:06 | set that automatically.
| | 02:07 | I also went ahead and set the color to
that ASH color that we wanted to do and I
| | 02:11 | again, I used those values from the
color guide that we have above that.
| | 02:15 | For line-height, notice I mentioned I
wanted every single element to be 1.5
| | 02:20 | times their own font size.
| | 02:21 | That's why we used a
multiple here instead of 1.5ems.
| | 02:25 | If we'd used ems there instead of
a multiple, remember it would have
| | 02:28 | calculated the value and then the calculated
value would've got passed down, not the multiple.
| | 02:33 | So it's a very, very
important thing to remember.
| | 02:36 | Now, if I go down a little bit
further, I can see where I asked you to
| | 02:39 | reset strong and em.
| | 02:40 | Those were pretty easy to do.
| | 02:42 | We just did a strong
selector and an em selector.
| | 02:44 | We reset strong's font-weight to bold
and we reset ems font-style to italic, so
| | 02:49 | again, fairly simple.
| | 02:51 | And for our default link styles, I am
just going to scroll up a little bit here
| | 02:55 | and I just used very simple selectors.
| | 02:57 | Remember, I want this just to be the
most basic link formatting possible.
| | 03:01 | So what we did here is we did a text
decoration of none, that's going to strip
| | 03:05 | out all of the text decoration, the underline.
| | 03:07 | I set the color to that Burnt Orange
that we wanted it to be and then for hover,
| | 03:11 | I set the color to that Blue Pewter
color that we wanted, again using those RGB
| | 03:16 | values from the color guide up top,
and if you used the hexadecimal values,
| | 03:19 | nothing wrong with that,
| | 03:20 | it works just perfectly fine.
| | 03:22 | But remember, these selectors, I
just use the most simple selectors that I
| | 03:25 | possibly could, just the a
and the a:hover. All right,
| | 03:28 | now I'm going to scroll down a little
bit and as I scroll through here, I wanted
| | 03:32 | to point something out.
| | 03:33 | You know one of the things that I
asked you to do was to go ahead and use the
| | 03:36 | Cantarell stack on the body.
| | 03:38 | But you may have noticed that some
of the headings didn't use Cantarell.
| | 03:41 | I actually do have another stack going on and
let me scroll down to try to find one of those.
| | 03:45 | Here we go.
| | 03:45 | You can see that the other stack that we
are using is using the web font, Cardo,
| | 03:50 | so there is another web font being used
here as well and it's a serif font so we
| | 03:54 | can have the fall back fonts
being Georgia and Times there as well.
| | 03:58 | Okay, I want to go back up to about Line
184 and what we are going to talk about
| | 04:03 | here are those header h1s and header h2s.
| | 04:06 | How we did that.
| | 04:08 | Now I mentioned I wanted the font-size
to be 3.2 times the parent font-size and
| | 04:14 | to do that we use ems.
| | 04:15 | So hopefully, you caught
the hint there and did 3.2ems.
| | 04:17 | We are changing the font-weight to bold.
| | 04:21 | We used the text-transform property to
transform that particular text to all uppercase.
| | 04:27 | We set the line-height to that explicit
165 pixels, so we used that as well and
| | 04:32 | then the rest of the
formatting was kind of already there.
| | 04:35 | For the heading 2, we set the font-style
to italic, we set font-weight to normal.
| | 04:40 | We did the same thing with ems, so 1.
4 ems, and then we set the line-height
| | 04:45 | there to 165 pixels as well.
| | 04:47 | We used text-transform to change that
to all lower case and we changed the
| | 04:51 | letter-spacing to .1ems which
gives a slightly bigger spacing.
| | 04:55 | Just to give you a visual idea of what we
were doing there, this is the result of that.
| | 04:59 | So this is our DESOLVE in all upper
case, this is all lowercase and notice now
| | 05:03 | the letter spacing is there, it's kind
of pushing that apart a little bit, and
| | 05:06 | because they both have a line-height
of 165 pixels, they center each other
| | 05:11 | vertically, which is a
really nice little technique.
| | 05:13 | All right, now if I go down to about
Line 224, I can find that #mainNav a
| | 05:19 | selector that I wanted to talk about.
| | 05:22 | I am doing a text transform on that
to change this display to uppercase.
| | 05:25 | I change the color to what we were
wanting and I change the font-size to 1.2
| | 05:29 | ems, so that's 1.2ems, again 1.2
times the parent element and I changed the
| | 05:36 | text-align to center.
| | 05:37 | A little bit further down, I could find
that mainNav a em selector and again, what
| | 05:43 | I am doing there is I am doing a text-
transform to lowercase and the font-size,
| | 05:46 | it's already set there I believe
at .8ems.
| | 05:49 | So what does that do for us?
| | 05:51 | Well, again, it does this.
| | 05:52 | So we have all caps here,
we have text-align to center,
| | 05:55 | so these two lines of text are lining
up on each other and below that we have
| | 05:59 | our italicized all lowercase text.
| | 06:02 | Now finally, if we get all the way down
to about line 674, we'll find that page
| | 06:08 | footer a. Now that's
targeting this element, right there.
| | 06:13 | Here I give you a very cryptic clue.
| | 06:16 | I said I wanted that link to be
vertically aligned with the background image and
| | 06:21 | I said look at the height of
the element and there's your hint.
| | 06:24 | So you can see here we also
have a line-height of 100px.
| | 06:28 | So with a line height matching the
height of the element itself, it goes ahead
| | 06:33 | and just vertically centers
that text directly in that element.
| | 06:36 | So there's your 100px and that
vertically centers it with that element.
| | 06:41 | Now remember, if your styles don't
exactly match mine, it's not a problem
| | 06:45 | if they still work.
| | 06:46 | You know there is always more than
one way to accomplish something in CSS.
| | 06:49 | So if you've come up with
something that I didn't, awesome way, to go.
| | 06:53 | However, if our styles are different, I
do want you to take the time to examine
| | 06:58 | those rules and think about which one is
more efficient and easier to update and
| | 07:02 | I can give you no promises that
it's mine, it might be yours.
| | 07:06 | As always, not just having the right
selector but having the most efficient
| | 07:10 | selector should be a very
important goal for your site.
| | Collapse this transcript |
|
|
5. Styling Container ElementsUnderstanding the box model| 00:00 | In this chapter we're going to
talk about styling container elements.
| | 00:04 | One of the most basic concepts of CSS is
taking parent elements and then styling
| | 00:09 | them as page regions for their content.
| | 00:11 | In order for us to do that, we'll
need to understand the Box model.
| | 00:15 | So we'll start there.
| | 00:16 | Now the Box model is a term used
to describe the rules and properties
| | 00:20 | surrounding the physical
properties of all HTML elements on the page.
| | 00:25 | It's easier if you think about it like this.
| | 00:28 | All elements on your web page are
considered to be a rectangular box.
| | 00:32 | The properties of this box;
| | 00:34 | its width, height, padding, and margin
define not only the size of the element,
| | 00:40 | but also how it relates
to the elements around it.
| | 00:42 | Without these properties we
wouldn't be able to control layout at all.
| | 00:46 | The first thing I want to do is just
introduce the different parts of the Box
| | 00:49 | model visually by adding some styles to a couple
of elements that we're going to have on a page.
| | 00:54 | After this exercise, we'll explore each of
those properties in a little bit more detail.
| | 01:00 | So I've opened up the box-model.htm file
and you can find that in the 05_01 folder.
| | 01:06 | In this chapter of course we're going to be
working out of the Chapter_05 folder as well.
| | 01:12 | Very simple page structure, if I scroll
down, we can see that we simply have a
| | 01:16 | div tag with a paragraph inside of that
and that is followed directly by another
| | 01:21 | div tag with a paragraph inside of it.
| | 01:23 | The reason that we're going to use the
paragraph inside of it is because I want
| | 01:26 | to be able to visualize all of this
Box model properties, including padding,
| | 01:29 | content, margins, and sometimes in
order to do that you have to stack elements
| | 01:33 | on top of one another.
| | 01:34 | So I am going to go up to our styles
and I am just going to go ahead and create
| | 01:38 | a new selector for our div tags, and
inside of that I am going to just apply a
| | 01:44 | background color initially.
| | 01:45 | So I am just going to say background: #3ff.
| | 01:45 | Now, I am using
hexadecimal shorthand notation here.
| | 01:51 | We're going to study this in the next
chapter and we're going to be talking
| | 01:54 | about the background property as well in more
detail a little bit later on in this chapter.
| | 01:59 | So if I Save this file and Preview
this in one of my browsers, I can see that
| | 02:05 | sort of blue color that I just set to my divs.
| | 02:07 | Now, the page actually has a gray
background color, so we're going to use it to
| | 02:11 | help us differentiate between the
elements and the page itself. All right.
| | 02:16 | Another thing you might notice, there's
a space between the divs, I went ahead
| | 02:18 | and zeroed out the margins for
both the divs and the paragraphs.
| | 02:21 | So as we add those margins back in, we'll be
able to visualize those a little bit better.
| | 02:25 | Okay.
| | 02:25 | Now, going back into the div tag, one
of the things that we can do is we can
| | 02:28 | control the size of the element by
also controlling its width and height.
| | 02:33 | So on a new line within the div rule,
I am going to go ahead and set the
| | 02:36 | width property to 300 pixels, and then
I am going to set the height property
| | 02:42 | to 300 pixels as well.
| | 02:44 | So go ahead and Save that,
Preview that in your browser.
| | 02:50 | And now we see quite a bit of a change.
| | 02:52 | Notice that now the div tags are 300
pixels wide, and they are 300 pixels taller.
| | 02:57 | That's very hard to see because
there's no space between them.
| | 03:00 | This white space that you're seeing
out here to the right-hand side, the body
| | 03:03 | tag is being styled through a body selector
and it has been given a width of 600 pixels.
| | 03:08 | So each of these div tags is exactly
now half of the width of our body tag.
| | 03:14 | Padding is a property that often
causes a good amount of confusion when it's
| | 03:18 | paired with the width property.
| | 03:19 | A lot of people just assume that this
width that we just defined for the div tag
| | 03:23 | is the total width of the div tag, it is not.
| | 03:26 | One of the things that you need to
really think about when you're doing width
| | 03:29 | and height is that really you could
almost refer to those properties as content
| | 03:33 | width and content height,
because that's what they're defining.
| | 03:37 | They are not defining the
overall width of the element.
| | 03:40 | As we're going to see in just a moment,
the overall width of the element is
| | 03:42 | actually determined by the borders,
the padding, and the width and height.
| | 03:47 | So I am going to go down to the next line
and I am going to add the padding property.
| | 03:51 | So we're just going to say padding,
and I want to go ahead and do 10
| | 03:53 | pixels worth of padding.
| | 03:55 | Adding the padding, as we did this way
using the syntax, it goes ahead and adds
| | 03:59 | padding equally to each side.
| | 04:00 | So top and the bottom have 10 pixels of
padding and the right and the left have
| | 04:04 | 10 pixels of padding.
| | 04:05 | Now, if I Save this, go back into Safari
and Refresh my page, I can see that the
| | 04:11 | width and the height of
these has increased a little bit.
| | 04:14 | It's really hard to visualize this again,
because I don't have really anything
| | 04:17 | that's showing me exactly where the
padding is versus the content width.
| | 04:21 | So I am going to go ahead and do that
now by taking advantage of the paragraph
| | 04:25 | inside of the div tag.
| | 04:26 | So I am going to go back to my CSS, just
below the div tag, I am going to create
| | 04:30 | a selector for my paragraph, and the
only thing I am going to do here initially
| | 04:34 | is just give it a background color as well.
| | 04:36 | So I am going to say
background and this will be #c90.
| | 04:41 | So if I save this and go back out to
my browser and Refresh, you can see that
| | 04:47 | now we actually get to see
the padding in our div tag.
| | 04:51 | Now, the paragraph doesn't extend all the
way down to the 300 pixels worth of height.
| | 04:55 | So just notice the tops, the left, and
the right-hand side, you can see that
| | 04:59 | sort of 10 pixels worth of
padding all the way around that.
| | 05:02 | The width of the paragraph is
stretching all the way to the edge of the content
| | 05:06 | width of its parent element.
| | 05:08 | So that padding is actually holding
the contents of the div tag away from the
| | 05:13 | edge of the div tag,
that's what padding does for us.
| | 05:16 | Now, what happens if you don't
define say a width and a height?
| | 05:19 | I am going to go ahead and remove both
of those, and one of the things that I
| | 05:23 | want to talk about is the behavior
of what we call block-level elements;
| | 05:26 | a div tag, a paragraph, headings,
these are all block-level elements.
| | 05:30 | Essentially, block-level elements
sort of occupy their own space within the
| | 05:34 | normal document flow, and when left to
their own devices, they will stretch to
| | 05:40 | fit the width of their parent element.
| | 05:42 | Let's go ahead and observe that behavior.
| | 05:44 | So I'm going to go ahead and Save this,
go back out to my browser and Refresh
| | 05:47 | it, and you can see
exactly what's happening now.
| | 05:50 | The div tag is extending all the way
out to fill the body tag, which is at 600
| | 05:56 | pixels wide, and then the paragraph
is extending out as far as it can.
| | 06:00 | Now, it can only go as far as the edge
of the padding of the div tags, because
| | 06:04 | again, padding sort of keeps the
content away from the edge of the element.
| | 06:08 | So the padding inside the div tag is
keeping the paragraph content away from its edge.
| | 06:13 | So the blue that you're seeing is the
padding of the div tags and that sort of
| | 06:17 | ocher color that you're seeing there
is the actual content of the div tag
| | 06:21 | itself, which in this case is the paragraph.
| | 06:23 | Let's visualize this a little bit more
and see how height and width are affected
| | 06:27 | through the use of borders, which
is another property of the Box model.
| | 06:31 | If I go back into my styles, I am
going to first go into the div tag selector
| | 06:36 | and I am just going to go ahead and give it
a border, so we're just going to do
| | 06:40 | border: 1px solid #300.
| | 06:44 | So make sure you have white space
between these properties, we're using border
| | 06:52 | shorthand notation here.
| | 06:53 | So we're just creating a 1-pixel
solid border that has this sort of maroon
| | 06:57 | color applied to it.
| | 06:58 | And then in the paragraph we're
going to go ahead and do the same thing.
| | 07:01 | Here I am just going to do border:
| | 07:02 | 1px solid #000, which will be black.
| | 07:07 |
| | 07:08 | So if I Save this, and once again, I
am going to go ahead and Preview this.
| | 07:13 | You may or may not have caught that
change, but essentially what has happened
| | 07:17 | now is the border also needs to fit
within the 600 pixels, and we've added 1
| | 07:22 | pixel border to the left-hand side,
we've added a 1-pixel border to the
| | 07:26 | right-hand side, and then we've added 1
pixel border inside the paragraph, and 1
| | 07:30 | pixel border to the right side of the paragraph.
| | 07:32 | So what that means is that essentially
on either side we've had to reduce the
| | 07:37 | content by a certain number of pixels.
| | 07:40 | So essentially what happens is borders,
padding, and the content width of an
| | 07:44 | element all sort of add
up to make its total width.
| | 07:48 | If you change one of those and you
don't have the other ones defined, the
| | 07:52 | other ones will basically shrink or expand based
upon the available space that you're giving it.
| | 07:57 | I am just going to go back into my code.
| | 07:57 | If I take this to an extreme and take
this sort of outer div tag border and
| | 08:01 | cranked it up to 10 pixels, watch
what happens to the inside content here.
| | 08:07 | Notice that the height gets much
taller and the width of the paragraph gets a
| | 08:11 | lot smaller, because we still
need that 10 pixels of padding.
| | 08:15 | We now have 10 pixels of borders on
either side and we have much less room
| | 08:19 | for the content now.
| | 08:20 | So anytime that you modify one of
those properties, whether it be a border or
| | 08:24 | whether it be padding, if you don't
have an explicit width set for the element,
| | 08:28 | you're going to lose some of that width,
or if you reduce those amounts, you're
| | 08:31 | going to gain some width, so
you'll always have to keep that in mind.
| | 08:34 | I am going to go back in and I am just
going to reset that border to 1, because
| | 08:37 | that looks a little ungainly.
| | 08:39 | So far we've talked about content,
we've talked about the width and height
| | 08:43 | in terms of relating to the content,
we've talked about padding and we've
| | 08:46 | talked about borders.
| | 08:48 | What we haven't talked about yet are margins.
| | 08:50 | So let's go ahead and see what
margins can do for us as well.
| | 08:53 | I am going to go right over here to the
div element sector and I am just going
| | 08:57 | to type in margin, much the same way we
did padding, and with margin I am just
| | 09:01 | going to type in 10 pixels as well.
| | 09:03 | So this should apply 10 pixels worth
of margin all the way around the outside
| | 09:08 | edges of our div tag;
| | 09:09 | so top, bottom, left, and right.
| | 09:11 | Let's see what this does for us.
| | 09:12 | So if I Save my file and go into
Safari and test this again, I can see that
| | 09:17 | what's happening now is we're getting
spacing between these div tags, they're
| | 09:20 | not butting right up against
each other anymore, which is nice.
| | 09:22 | We're also getting 10 pixels worth of
spacing on the outer edges of it as well.
| | 09:27 | Now, this is not increasing
the size of the body element.
| | 09:30 | The body element is still at 600 pixels,
it's not going to flex or move when we
| | 09:35 | give it an explicit value like that.
| | 09:37 | So what happens is this
content has to flex a little bit.
| | 09:41 | So again, what happens, we lose content width
right in through here when it's not predefined.
| | 09:47 | It allows that content width to sort
of flex based on these other values.
| | 09:51 | One of the things that you might have
noticed if you're a real keen observer
| | 09:54 | here, you might have noticed that we gave 10
pixels worth of margin all the way around these.
| | 10:00 | We're seeing it on the edges, but we're
not seeing it on the bottom, we're not
| | 10:04 | seeing it on the top, and we're really
not seeing it between it, because if we
| | 10:08 | were seeing 10 pixels worth of
margins for both of those, they would be 20
| | 10:13 | pixels apart, right?
| | 10:14 | Well, what you're seeing on the top
between them and on the bottom here is what
| | 10:18 | we call vertical margin collapse.
| | 10:21 | Later on in this title when we have
the movie on margins, we're going to talk
| | 10:25 | more about vertical margin
collapse and why it happens.
| | 10:28 | I want to take a moment to reinforce
the concept of how you calculate the total
| | 10:33 | width of an element and how you know how
much space is left for the width of the content.
| | 10:38 | So I am just going to go down to a
new line here and we're going to do a
| | 10:40 | little bit of math.
| | 10:41 | This is not CSS syntax, this is just
to help me visualize this, because I am
| | 10:44 | not very good at math. All right.
| | 10:46 | So we have 600 pixels worth of space
available to us and we're getting that from
| | 10:51 | the body selector up here.
| | 10:53 | So if we go down and really calculate
what we have here, we know that we have 10
| | 10:58 | pixels worth of padding on
either side of our div tag.
| | 11:02 | So that's 10 pixels plus 10 pixels.
| | 11:05 | Now, I know, because I am at least
that good at math, that that's 20.
| | 11:09 | So we have 20 pixels worth of
space being taken up by the padding.
| | 11:12 | Then we have 10 pixels of margin on either
side, so we know that that is 20 as well.
| | 11:18 | So we have 20 pixels based on the padding,
we have 20 pixels based on the margins.
| | 11:23 | Then, and this often gets overlooked, we
do have 1 pixel worth of border on the
| | 11:28 | left and right sides.
| | 11:29 | So that's going to give us an
additional 2 pixels to our total element width,
| | 11:33 | and you can't forget the
border of our paragraph, can we?
| | 11:38 | It's 1 pixel as well.
| | 11:39 | This is kind of tricky, because the
border is applied to the paragraph and the
| | 11:43 | paragraph is expanding to fill
the content width of the div tag.
| | 11:47 | So it doesn't really add up to the
content width of the div tag, what it does is
| | 11:53 | it limits the content width of the paragraph.
| | 11:55 | So we're going to leave
that off for just the moment.
| | 11:59 | So we have 20 pixels worth of padding,
20 pixels worth of margin to content
| | 12:04 | width and 2 pixels worth of border.
| | 12:06 | So that's going to equal, obviously,
42 pixels worth of defined space that we
| | 12:12 | currently have on this div tag.
| | 12:14 | So what does that leave us in terms of the
actual content width that we have to deal with?
| | 12:19 | So if you add that up, that's going to
give us a total of 558 pixels to deal with.
| | 12:26 | So we have now 558 pixels worth of
content width for this div tag and that's the
| | 12:32 | available space for our paragraph to fit into.
| | 12:35 | Now, I mentioned this is not CSS
syntax, this is just helping me visualize
| | 12:39 | this, so I want to go ahead and get rid of
this, but I do want to put that theory to test.
| | 12:44 | So here's what I am going to do, I am
going to go into the div selector and I
| | 12:47 | am just going to say, okay, fine, what if I
made the width something bigger than that?
| | 12:51 | What if I said 565 pixels, what if I did that?
| | 12:55 | So if I Save this, go back to Safari
and Preview it, you can see what happens.
| | 13:01 | We don't break anything per se, but
our element width no longer fits, our
| | 13:06 | content width no longer fits into the
space that we're giving it, it no longer
| | 13:09 | fits in that available space.
| | 13:11 | What browsers are instructed to do
when this happens is that if there's still
| | 13:15 | room inside this parent element, in this
case the body selector, it's instructed
| | 13:20 | to ignore the margins.
| | 13:22 | So margins, while they do calculate in
terms of where an element fits into the
| | 13:27 | layout, one thing that you have to
remember about margins is that they will be
| | 13:31 | sacrificed in order to help an
element stay within its parent container.
| | 13:35 | So in this case, the right margin is
being just sort of thrown away, and that's
| | 13:38 | one of the reasons why I tell people
margins are important for planning document
| | 13:42 | layout, but you should not use them to
calculate the total width of an element,
| | 13:46 | because they can be discarded.
| | 13:48 | You certainly need to take them into
consideration and know how far your
| | 13:51 | elements are going to be apart, but if
you're looking for the total container
| | 13:54 | box of your element, margins
really don't come into play for that.
| | 13:58 | So what happens if we increase the
width to a level that you simply don't have
| | 14:01 | anymore margins to sacrifice?
| | 14:03 | Well, let's find out what happens there.
| | 14:05 | So I am going to go back into my code
and I am going to show you a very common
| | 14:08 | mistake that a lot of new designers make.
| | 14:10 | They're going to go in and declare like
a width of 600 pixels, because they say,
| | 14:14 | okay, I've got 600 pixels worth of
space to deal with, so I need my div tag to
| | 14:18 | be 600 pixels wide as well.
| | 14:20 | They're ignoring the fact that they have
the padding, the border, and the margin.
| | 14:24 | So what happens?
| | 14:24 | So if I Save this, go back into my
browser and test it, what happens is we
| | 14:28 | end up with overflow.
| | 14:30 | So right now, these div tags are
overflowing their parent container, in this
| | 14:34 | case, the body selector.
| | 14:36 | Now, browsers are instructed in terms
of how they should deal with overflow and
| | 14:41 | the default overflow instruction
is to make that content visible.
| | 14:45 | They error on the side of showing
it rather than not showing it.
| | 14:48 | But there are some things that you can do.
| | 14:49 | For example, if I come up to the HTML tag
right here, I can come up and I can say
| | 14:56 | overflow: hidden
| | 14:57 | Overflow is the property that we use to
tell browsers how we want to manage the
| | 15:01 | overflow of our content.
| | 15:03 | So if I save this and test this in
the browser, nothing really happens.
| | 15:08 | Well, remember, this is on the body element,
this is on the body tag, not so much the HTML.
| | 15:13 | So if I come back into the body
element and come in and say overflow:
| | 15:18 | hidden, Save that and test it. Boom!
| | 15:22 | Now that content is actually being clipped off.
| | 15:25 | We can't see to the right of that
content anymore, because it's gone and
| | 15:29 | there's actually no way to scroll to it,
no way to get to it, it really does
| | 15:32 | hide it, it clips it right off.
| | 15:34 | Now, there are other things that we can do.
| | 15:35 | For example, we could come in and just
say scroll, and if we say scroll, we're
| | 15:41 | going to be given scrollbars that
allow us to scroll around this element.
| | 15:45 | Now, different browsers render
this a little bit differently.
| | 15:49 | You'll notice that in Safari, it's
giving me a bottom scrollbar, but it's
| | 15:52 | also giving me the Chrome for the
vertical scrollbar as well, which in this
| | 15:56 | case we don't need.
| | 15:57 | So maybe a better choice
instead of scroll would be auto.
| | 16:01 | If I Save that and test it, I can see
that auto only gives me the scrollbars
| | 16:06 | that I need, in this case, I am getting
scrollbars on the bottom hand side, and
| | 16:09 | this allows me to kind of go
back and forth here on this element.
| | 16:13 | Now, that's actually a really useful
thing to know, because it's quite a
| | 16:15 | common technique actually to create a
parent container that's not wide enough
| | 16:19 | to contain the children of it and then add
scrollbars so that people can scroll through it.
| | 16:24 | It's very reminiscent of what people
used to do with frames and you can create
| | 16:27 | some neat little widgets that way as well.
| | 16:29 | I know that was a lot, but really those
are just the basic elements of the Box model.
| | 16:33 | Once again, width, height,
padding, borders and margins.
| | 16:38 | Now, we're going to explore every
single one of those properties and how they
| | 16:41 | work with each other throughout this chapter.
| | 16:43 | We're also going to explore other
properties, like the background property,
| | 16:46 | which isn't technically a Box model
property, but it's still very important when
| | 16:50 | styling container elements.
| | Collapse this transcript |
| Controlling element spacing| 00:00 | We'll start exploring the individual
properties of the Box model by taking a
| | 00:04 | closer look at the margin property.
| | 00:06 | Margins help us control the spacing
between elements and can be specified
| | 00:10 | individually for the top, right,
bottom, and left sides of an element.
| | 00:15 | While on the surface margins
appear to be pretty simple.
| | 00:18 | There are some very complex rules
associated with calculating how margins are applied.
| | 00:22 | So let's take a closer look at that.
| | 00:24 | I have the element-spacing.htm file open
and you can find this in the 05_02 directory.
| | 00:31 | I just want to go ahead and Preview this
in the browser so you guys can see kind
| | 00:34 | of what's going on in this file,
because it looks a little different than some
| | 00:37 | of the ones we've used before.
| | 00:38 | When I open it in this browser, you
guys can see what I am talking about.
| | 00:41 | So we have this sort of grid on the page,
and that's essentially just sort of a
| | 00:45 | background graphic applied to the HTML
tag, and that's going to allow us to sort
| | 00:49 | of visualize how these elements
are spacing apart from one another.
| | 00:53 | I am going to go back into my code
and I want to go over the page structure
| | 00:58 | really quickly here.
| | 00:59 | We have two headings,
| | 01:00 | they have classes applied to them, 1
and 2, so object 1, object 2, and then
| | 01:04 | we have two div tags,
| | 01:05 | the first div tag has a class of three,
so it's a third object, and then our
| | 01:09 | second div tag has a class of four.
| | 01:12 | Now, both of those div tag have
elements inside of them as well, and
| | 01:16 | margins within nested elements can
really cause some problems in terms of
| | 01:19 | how to calculate those.
| | 01:20 | So we're going to use these interior
elements, these two paragraphs in the first
| | 01:24 | div tag and the single paragraph in
the second div tag to sort of play around
| | 01:28 | with how nested elements and
margins work together as well.
| | 01:31 | If I scroll up into my styles, you can
see we have placeholder selectors for the
| | 01:35 | three and four elements.
| | 01:37 | And if I go up a little bit further I
can see that I have a group selector for
| | 01:40 | one and two and then another
one that's empty just for two.
| | 01:43 | But the styling on this one and two
are creating those sort of boxes that you
| | 01:46 | guys saw and then positioning them side-
by-side to the use of this float. Okay.
| | 01:50 | Well, let's take a look at
how horizontal margins work.
| | 01:53 | If I go to this group selector, the one
and two here, I am going to go ahead and
| | 01:57 | create a margin-right property and I
am just going to go ahead and give it a
| | 02:01 | right margin of 60 pixels.
| | 02:04 | So as far as syntax goes, when you're
declaring a margin, you can just say
| | 02:08 | margin- and then the side
you want to apply it to,
| | 02:11 | so that would be top, right, bottom, or left.
| | 02:13 | In this case, I am giving it
an absolute value of 60 pixels.
| | 02:16 | So I am going to go ahead and Save
this and then go back to my browser and
| | 02:20 | Refresh this and you can see that I
am getting exactly 60 pixels worth of
| | 02:24 | space between those two.
| | 02:25 | So these gridlines are about 10 pixels long.
| | 02:28 | Now, what's interesting is I do have
60 pixels worth of margin out to the
| | 02:31 | side of this one as well, you just
can't see it, because there's really
| | 02:34 | nothing out there, but if it ever
runs into something, that margin would
| | 02:37 | affect the object that it touches.
| | 02:39 | So right now we just have right margin
applied, so the margin is pushing out this way.
| | 02:43 | What if we added some left
margin to the second object?
| | 02:46 | If I go back into my styles and I go
to number two, I can go in here and say
| | 02:50 | margin-left, and let's go ahead and give
it a left margin of 20 pixels and we'll
| | 02:58 | go ahead and Save that.
| | 02:59 | Now, when I preview this, I can see
that we do have that added spacing, it's
| | 03:05 | cumulative, so we have 20 pixels of
margin coming from this side, we have 60
| | 03:09 | pixels of margin coming from this side,
and all total that gives us 80 pixels
| | 03:13 | of spacing between it.
| | 03:14 | So when you're dealing with
horizontal margins, you have to be aware of
| | 03:17 | whether those margins are coming from
both the right side and left side or just
| | 03:21 | one side or the other in order to
really understand how much spacing there's
| | 03:25 | going to be between those two elements.
| | 03:27 | Now, vertical margins
react entirely differently.
| | 03:31 | So let's take a look at what
vertical margins do for us.
| | 03:33 | I am going to go back to my code and in
this number one and number two selector,
| | 03:38 | I am going to add another line, and in this
one I am going to say margin-bottom: 20px
| | 03:44 | So if I Save that and I test it, at first
glance, it looks almost exactly the same.
| | 03:48 | We have a little bit of an offset on the
grid here, so it's an offset by about 5
| | 03:52 | pixels, but I think you can see what
the gridlines are doing for us here.
| | 03:55 | That's 20 pixels worth of space
between these elements and the elements below
| | 03:59 | them, so that's kind of exactly
what I was thinking that we would get.
| | 04:03 | However, what I want to do is I want
to go to the first div tag, remember the
| | 04:07 | first div tag is right underneath the
headings, and its class is 3, and I am
| | 04:11 | going to give that a margin-top value.
| | 04:16 | And let's go ahead and give
it a margin-top of 40 pixels.
| | 04:19 | So we have 20 pixels coming from the
bottom of these headings, which are floated
| | 04:23 | elements above it, and then margin-top
of 40 pixels of the div tag below that.
| | 04:28 | So I am going to Save this
and I am going to test it.
| | 04:31 | If this was behaving exactly the same
way as our horizontal margins, we would
| | 04:35 | now have 60 pixels worth of
margins between them, but we don't.
| | 04:39 | As a matter of fact, no
change occurs whatsoever.
| | 04:42 | Now, there are multiple reasons of why
vertical margins don't combine with each
| | 04:47 | other and there are
multiple things that trigger that.
| | 04:49 | In this case, it has nothing to do
with what we're going to look at in just a
| | 04:53 | moment, which is called
vertical margin collapse.
| | 04:55 | In this case, it has everything to do
with the fact that these two elements
| | 04:57 | right here are floated elements.
| | 05:00 | Floated elements are
removed from normal document flow.
| | 05:03 | What that means is everything else
sort of moves up to take its place.
| | 05:07 | So essentially the margin, this 40
pixels worth of margin here on this div tag,
| | 05:10 | it's really sort of floating up and
going up underneath those objects;
| | 05:14 | the 20 pixels of margin is indeed
pushing down, and it's one of those really
| | 05:18 | weird things that you have to deal with,
with floated elements, because these
| | 05:21 | elements down below have what's known
as a clear property applied to them.
| | 05:25 | So really in order to truly understand
that, you have to understand floats, and
| | 05:29 | floats is not something that we're
going to talk about in this title,
| | 05:32 | I will talk about floats in great detail
within the title that's going to follow
| | 05:36 | this one, which is the CSS Page Layout title.
| | 05:38 | So we will definitely come back to floats.
| | 05:41 | For now though, I want to take a look
at another way that vertical margins
| | 05:45 | interact with each other when they touch.
| | 05:47 | So I am going to go back into the code
and what I want to do is I want to go to
| | 05:51 | my paragraph selector because, remember,
we have two paragraphs inside the first
| | 05:55 | div tag and we have another
paragraph inside the last div tag.
| | 05:59 | So if I go up to my paragraph, I am
just going to create a new line in that and
| | 06:03 | I am just going to say margin-top, and
let's just do 20 pixels; nice even number.
| | 06:10 | So we'll Save that, preview it,
and now we're seeing a little bit of
| | 06:15 | extra spacing here.
| | 06:16 | Now, if you're wondering what this color is,
that is the background color of that div tag.
| | 06:21 | We can now see this, because these
paragraphs are no longer touching each other.
| | 06:26 | So the sort of blue color is the
background color of the paragraphs, whereas the
| | 06:29 | purple color is the
background color of the div tag.
| | 06:32 | So we're getting 20 pixels worth of
spacing here, we're getting 20 pixels
| | 06:36 | worth of spacing here.
| | 06:37 | So it looks okay right now, but
currently all we have going on is a margin-top,
| | 06:42 | what if we combine this with a
margin bottom, what would happen then?
| | 06:45 | So let's go back into our code, and what
I am going to do is right here still in
| | 06:49 | the paragraph selector, I am going to
do a margin-bottom of 20 pixels as well.
| | 06:57 | So above each paragraph we'll have 20
pixels worth of margin and below each
| | 07:01 | paragraph we'll have 20
pixels worth of margin as well.
| | 07:05 | So if I test this, absolutely nothing happened.
| | 07:08 | Believe it or not, that's not broke,
that is the way it is supposed to happen.
| | 07:12 | We have 20 pixels pushing up here, we
have 20 pixels pushing down here, we
| | 07:17 | have 20 pixels pushing up here, we
have 20 pixels pushing down here, so why
| | 07:21 | don't we see that space?
| | 07:22 | Well, that is due to something
that we call vertical margin collapse.
| | 07:26 | That can be sort of summarized in a
nutshell by saying that when two vertical
| | 07:31 | margins touch each other, when they
touch, they collapse, and essentially if
| | 07:36 | their values match, you just
get what one of the values is,
| | 07:39 | if their values are mismatched,
you get the larger of the two values.
| | 07:43 | That doesn't sound very intuitive until
you think about how paragraph spacing works.
| | 07:48 | If vertical margins didn't collapse
every time you used a paragraph, you would
| | 07:52 | get double spacing between that
paragraph instead of single spacing.
| | 07:55 | So there's a very good reason for
vertical margin collapse to exist.
| | 07:58 | Let's take a look at how we can
sort of take advantage of that.
| | 08:02 | So I am going to go back into my code,
and now what I am going to do is go into
| | 08:05 | the paragraphs and I am going to give
them a bottom-margin of 30 pixels now
| | 08:09 | instead of 20 pixels.
| | 08:10 | So when I Save this and test it, notice
that we do get the increase by 10 pixels.
| | 08:16 | So when two values are touching each
other, the larger of the two values are
| | 08:19 | used, in this case, 30
pixels rather than 20 pixels.
| | 08:23 | Vertical margin collapse is pretty easy
to understand when you have two elements
| | 08:27 | that follow one right after the other.
| | 08:28 | We've got one paragraph on top of
another paragraph, we know that margins inside
| | 08:32 | that is going to collapse,
that's pretty easy to keep track of.
| | 08:35 | However, when you have nested
elements inside of other elements, it can be
| | 08:39 | a little bit tricky.
| | 08:40 | So let's see how vertical margin
collapse works when you have parent elements
| | 08:44 | and nested elements inside of
them that both have margin values.
| | 08:48 | So going back into my code, just so
that we can sort of remember the structure
| | 08:52 | that we have here, we have these two
div tags, three and four, and currently
| | 08:57 | three has a margin-top of 40 pixels, but four
doesn't really have anything going on into it.
| | 09:03 | In three, I am going to go ahead and
modify that and do a margin-bottom of 20
| | 09:08 | pixels, and then for the four
selector, I am going to go ahead and do a
| | 09:13 | margin-top of 20 pixels.
| | 09:17 | So if I Save this, now those two div
tags should be touching each other as well.
| | 09:21 | So again, knowing what we know about
vertical margin collapse, we would expect
| | 09:25 | to see only 20 pixels between them.
| | 09:27 | So I am going to Save this, test it, and I
don't see any movement between them at all.
| | 09:32 | Now, the reason we don't see any
movement at all is remember they have
| | 09:35 | paragraphs inside of them and
those paragraphs have margins as well.
| | 09:38 | Remember that the paragraph's bottom-
margin value is 30 pixels, which is higher
| | 09:41 | than either of those, so it's
the 30 pixel value that's used.
| | 09:45 | Essentially when you have elements
that touch each other or even nested
| | 09:49 | elements, if there's nothing to keep
the vertical margins from touching each
| | 09:53 | other, meaning there's no border there,
there's no padding there, there is just
| | 09:57 | content, then all those
vertical margins collapse;
| | 10:01 | outer element's vertical margins
collapse and the inner element's
| | 10:04 | vertical margins collapse.
| | 10:06 | If you have a paragraph that's empty,
its top and bottom margin collapses in and
| | 10:10 | of itself, which allows empty
paragraphs to not take up any space.
| | 10:14 | So you have to remember all of those
things when you're dealing with element spacing.
| | 10:19 | If you look at this, we really should
have about 90 pixels between these two if
| | 10:24 | we didn't have any vertical margin
collapse, because we have the 30 pixels worth
| | 10:28 | of margin on the bottom paragraph, we
have the 20 pixels worth of margin on the
| | 10:31 | bottom div tag, we have the 20 pixels
worth of top margin on the div tag, and we
| | 10:35 | have the 20 pixels worth
of margin on the paragraph.
| | 10:37 | So that should give us around 90 pixels.
| | 10:39 | But because they collapse, they
collapse down to the highest value of those,
| | 10:43 | which would be 30 pixels.
| | 10:45 | I mentioned that this happens because
there is nothing to keep the vertical
| | 10:49 | margins from touching each
other, but what if there is?
| | 10:52 | So the last thing we're going to do,
let's go back in and let's prevent some of
| | 10:56 | these margins from touching each
other and see what happens then.
| | 10:59 | So in the three element, I am just
going to come in and apply a border to it.
| | 11:03 | So I am just going to say
border: 1px solid black;
| | 11:08 | so just black for color.
| | 11:09 | On the before, I am not going to use
border, I am going to use padding and I
| | 11:12 | will just do a padding of 1
pixel, then we'll Save that.
| | 11:15 | Then when I Preview this in the
browser, now we're seeing a lot of those
| | 11:20 | margins come into play.
| | 11:22 | We're seeing the margins now on this
paragraph that aren't collapsing anymore,
| | 11:26 | we're seeing the 30 pixels on the
bottom, we're seeing the 20 pixels on top,
| | 11:29 | because the padding, that 1 pixels
worth of padding all the way around our div
| | 11:34 | tag, is causing that margin to
stop when it reaches the padding.
| | 11:38 | We now only get 20 pixels between
the div tags, because their margins
| | 11:42 | are collapsing, but we still see
the 30 pixels worth of margin here
| | 11:45 | below the paragraph;
| | 11:46 | 20 pixels above it, because that border now
is stopping those margins when they touch.
| | 11:52 | So when you're dealing with vertical
margins, especially dealing with the
| | 11:55 | collapsing of vertical margins, you
also have to keep in mind that borders and
| | 11:59 | padding can interrupt that collapsing,
keep margins from touching, and then give
| | 12:04 | you the spacing that you're expecting,
or in some cases result in unwanted
| | 12:08 | spacing that you have to deal with, so
that is definitely part of the vertical
| | 12:11 | margin collapse that you need to be aware of.
| | 12:13 | I want to pass along one
more piece of information.
| | 12:16 | I know we've gone over a lot in this
lesson, but I want to talk about a very
| | 12:19 | unique ability that margins have, and
that is the ability to use the auto value.
| | 12:24 | So if I go back into my code, I
am going to go down to four here.
| | 12:28 | I am just going to create a new selector.
| | 12:30 | I am going to target the
paragraph inside of that div tag;
| | 12:33 | so .four p and then inside of that
what I am going to do, I am going to give
| | 12:38 | the paragraph a width of 80%.
| | 12:41 | So that's telling you, hey, take up 80%
of the available space inside this div tag.
| | 12:45 | And then below that I am
going to say margin-right: auto
| | 12:49 | and margin-left: auto
| | 12:54 | So what auto is, that auto value is
basically telling the browser, give me
| | 12:58 | whatever is left over.
| | 12:59 | So think about the way that this is working.
| | 13:01 | If I am telling my paragraph, hey, only
the 80% in terms of width of your parent
| | 13:06 | element, and then right, give me
whatever is left over and, left, give me what
| | 13:10 | is left over, it's going to calculate
those values and then split them evenly on
| | 13:14 | the left side and the right side.
| | 13:16 | What does that do for us?
| | 13:18 | Well, if I Save the file, and test this
in the browser, you can see it centers
| | 13:22 | the paragraph horizontally within that
div tag, and that actually is exactly how
| | 13:27 | I am centering the body content on this page.
| | 13:30 | It's a very common technique.
| | 13:32 | A lot of people use the auto-margin
centering technique, but what's really nice
| | 13:36 | to know about margins is that we have
that ability to say auto, in which case
| | 13:39 | it's going to take whatever value is
left over from the width of an element and
| | 13:44 | go ahead and apply the margin to that.
| | 13:46 | But if you take anything away from this,
margins control all of our element spacing.
| | 13:50 | Vertical margins, those
can be very, very tricky.
| | 13:53 | If you had trouble with the vertical
margins, because I know that I threw a lot
| | 13:56 | at you there, and if you didn't get all
that the first time around, just watch
| | 14:00 | this movie over a couple of times and
do the exercise again a couple of times.
| | 14:04 | The more you work with vertical
margins, the more comfortable you'll get
| | 14:07 | with understanding when they collapse
and when, like in our floated elements up
| | 14:11 | here, they're ignored.
| | 14:13 | And I can't stress to you how important this is.
| | 14:15 | Trust me, without understanding how
margins work, trying to style containing
| | 14:19 | elements and control page
layout becomes extremely difficult.
| | 14:23 | So this is definitely a concept that
you're going to need to put in the proper
| | 14:26 | amount of time to master it.
| | Collapse this transcript |
| Controlling interior spacing| 00:00 | The space inside an element is
controlled through three properties,
| | 00:04 | an element's width, height, and padding.
| | 00:07 | Now we'll discuss width and height
in a more detail in just a moment,
| | 00:10 | so for right now, I just want
to focus on an element's padding.
| | 00:14 | Padding is the space between an element's
content and the inside edge of its border.
| | 00:19 | It's primarily used to keep content away
from its edge in much the same way that
| | 00:24 | table cell content is often kept
away from the border of a table cell.
| | 00:28 | So here, I have the interior-spacing.htm file
open and you can find that in the 05_03 folder.
| | 00:34 | Not a lot going on in this file,
structurally it's pretty simple.
| | 00:37 | We have a heading one, a div tag below that
which has a paragraph inside of that as well.
| | 00:42 | If I preview this in my browser to just
kind of show you what's happening, here
| | 00:46 | is the heading one tag and here is
the div tag below it and here is the
| | 00:50 | paragraph inside the div tag.
| | 00:52 | Okay, so I am going to jump back into
my code, we have some selectors that are
| | 00:56 | sort of applying some of the
default styling that we have right now.
| | 00:59 | So I want to go up to the h1 and we'll
first start experimenting with padding a
| | 01:03 | little bit on the h1 tag.
| | 01:05 | So, just after the height, I am going
to go ahead and create a new line and I
| | 01:08 | want to do padding-left.
| | 01:10 | So if you watched the previous movie
on margins, you can see that the syntax
| | 01:15 | is extremely similar.
| | 01:17 | So then we just say padding and dash and then
the direction we want to apply the padding too.
| | 01:22 | Much like margins, you can apply it
to the top, right, bottom, and left
| | 01:27 | independently of one another.
| | 01:28 | So here I am just going to do a padding-
left of 50px, and then I am going to do
| | 01:32 | a padding-right of 50px as well.
| | 01:37 | If I save this and then preview this
in my browser, I can definitely see the
| | 01:43 | 50px worth of padding over here on the
left-hand side, but I can't really see it
| | 01:46 | over here on the right-hand side and
that's just simply because there's no
| | 01:49 | content over there to bump
into it, but it is there.
| | 01:52 | So the content were extended or maybe
made a little bit larger, you'd be able
| | 01:56 | to see that padding.
| | 01:57 | So there is our padding.
| | 01:59 | You may have also noticed that when we
added this padding, our element didn't
| | 02:02 | really get any wider.
| | 02:04 | It's exactly the same width as it was before.
| | 02:07 | Well, if I go back into the code, I can
see that I don't have a defined width.
| | 02:11 | I do have a defined height.
| | 02:12 | This is a block level element.
| | 02:14 | So it's essentially taking
up 100% of its parent element.
| | 02:17 | What that means is, when you add
padding to that, you're reducing the amount of
| | 02:22 | content width that element has.
| | 02:24 | So I am sort of subtracting 100 pixels
from the available width for the content.
| | 02:29 | We can see that illustrated a little
bit more clearly if we just sort of
| | 02:32 | increased the value here.
| | 02:33 | So I am going to increase the value for
the padding-left to 250 and increase the
| | 02:37 | padding-right to 250 as well.
| | 02:39 | If I save this and preview it, oh
yeah, we can definitely see that.
| | 02:44 | Now what happens here is because we
have a defined height, you know the height
| | 02:47 | is set to 100 pixels and with a padding
of 250 pixels on this side and a padding
| | 02:52 | of 250 pixels on this side, there is
no longer enough room for the content.
| | 02:55 | So the content does exactly what it
did in the last movie when we ran out of
| | 02:59 | room for it, it overflows.
| | 03:01 | So that's one of the reasons why it's
so important to understand how these
| | 03:05 | widths and heights are calculated,
so that you don't end up with content
| | 03:08 | overflowing that you don't want to overflow.
| | 03:11 | Now I am going to go back to my code
and I am going to reset those values to
| | 03:14 | 100 pixels each and that's going to be a
little bit nicer in terms of the way that they fit.
| | 03:18 | But I also want to address padding in terms of
how it affects the height of an object as well.
| | 03:23 | So if I go down on the next line and I
type in padding-top and I make that 150
| | 03:30 | pixels, and then I do padding-bottom and
I change its value to 50 pixels, what's
| | 03:38 | that going to do for us?
| | 03:39 | Well, remember, we have a
predefined height of 100 pixels.
| | 03:43 | When we didn't have a predefined width,
it's simply reduced the amount of width
| | 03:47 | by the left and right padding and
reduced the amount of content width you had.
| | 03:49 | But what happens if you
have a defined height here.
| | 03:52 | So if I save this and preview it, you can see
what happens to the height, the height grows.
| | 03:58 | So content width and content height, the
width and height properties are added to padding.
| | 04:05 | They are cumulative.
| | 04:06 | So in this case, the 100 pixels worth
of height is being added to 150 pixels
| | 04:11 | worth of padding on the top, 50 pixels
worth of padding on the bottom and that
| | 04:15 | leaves us with a 300 pixel tall heading 1.
| | 04:19 | Now this cumulative nature can
sometimes make it a little bit difficult to
| | 04:22 | really accurately calculate the
width and height of an element.
| | 04:25 | Let me show you what I mean by that.
| | 04:27 | So again, going back down to the
structure, remember we have a div tag that has
| | 04:31 | a nested paragraph inside of that.
| | 04:33 | So I am going to go up to the div tag
here and underneath the background, I am
| | 04:37 | going to go ahead and give it a
predefined width of 400 pixels.
| | 04:41 | I then want to give it a padding-right
of 100 pixels and then a padding-left
| | 04:50 | of 100 pixels as well.
| | 04:53 | That gives us a total, obviously, of
600 pixels and if I go up and look at the
| | 04:57 | body selector, I can see that it
indeed has a width of 600 pixels also.
| | 05:02 | So, if I save this and preview this in
the browser, you can definitely see the
| | 05:08 | padding here on the left-hand side, but
you can't really see it quite as much on
| | 05:11 | the right-hand side.
| | 05:13 | What we do know is that it hasn't
really extended the width of the div tag at
| | 05:17 | all, it's as same as it was before and
that's because before the width was being
| | 05:21 | determined automatically, it was just
expanding to fit its parent element.
| | 05:25 | Okay now, I want to go back into my
code and now I want to set some padding on
| | 05:31 | that nested paragraph, the
nested paragraph on the inside.
| | 05:34 | So for that one, I want to give it a
padding-left of 100px and a padding-right
| | 05:45 | of 100px as well, and I am
going to go ahead and save that.
| | 05:49 | Now if I test this in my browser, I
can see that what's happening is I still
| | 05:54 | have this 100px worth of padding to
the left of the div tag, but then I have
| | 05:58 | 100px worth of padding for the paragraph,
I have 100px worth of padding on this side.
| | 06:05 | The paragraph already has 300 pixels
defined for its width, so that's a total
| | 06:09 | we know of 500 pixels.
| | 06:11 | Well, the 500 pixels isn't going to
allow the padding over here for our div tag.
| | 06:17 | So much the same way that we
sacrificed margins in the last movie, we're
| | 06:21 | sacrificing padding in this one.
| | 06:24 | So in this case, the padding for the
div tag is basically being sacrificed to
| | 06:27 | make sure that the
paragraph can fit inside of it.
| | 06:29 | But what happens if the value is,
again, too great to do that.
| | 06:33 | If I go back here and do a padding-
right of 200 pixels, save and test that,
| | 06:39 | notice that we get our overflow.
| | 06:41 | Hopefully, this illustrates to you the
importance of understanding how much
| | 06:45 | room you have to work with when
you're defining the width and padding for
| | 06:48 | these interior elements.
| | 06:49 | It's really easy to break a layout
without meaning to by simply taking up too
| | 06:53 | much available space.
| | 06:54 | Now, I closed the last movie by
showing you guys auto-margins and talked a
| | 06:58 | little bit about that property.
| | 07:00 | Padding doesn't really have an auto value,
| | 07:03 | we don't have anything that's
comparable in terms of padding.
| | 07:06 | However, we can use percentages with
padding and when you use percentages with
| | 07:10 | padding, you can sort of often
calculate a padding that sort of flexes based
| | 07:14 | upon the available amount of space.
| | 07:16 | Let me show you what I mean.
| | 07:17 | Let's go right back into our code and
what I am going to do is I am going to get
| | 07:22 | rid of this h1 element just because I
really want us to focus on the percentage
| | 07:27 | based nature of what I
am going to show you guys.
| | 07:28 | All right, now I am going to go up to
my body element and instead of a very
| | 07:32 | fixed width here for the body, I am
going to go ahead and give the body 80%
| | 07:36 | so that's saying hey 80% of the available
viewport window, go ahead and give me that.
| | 07:40 | All right!
| | 07:40 | Now I am going to scroll down and in
the paragraph selector, I am going to
| | 07:45 | change the padding right and left.
| | 07:47 | I am going to change both of those
values to 20%, so 20%, and I am also going to
| | 07:55 | get rid of the width value, I don't need that.
| | 07:59 | Same thing over here in the div tag.
| | 08:01 | I am going to get rid of its padding
right and left in terms of those values and
| | 08:05 | I am going to replace it
with 10% and then save that.
| | 08:11 | And looking down the page here, I can
see I left a little px here on the padding
| | 08:14 | right, so I am just going to
get rid of that, there we go.
| | 08:16 | And I want to do one more thing here.
| | 08:18 | I need a little bit more content
inside this paragraph and I know watching
| | 08:21 | somebody type is never fun, especially
me because I have trouble typing, but I'm
| | 08:25 | just going to add a sentence or two here.
| | 08:27 | I am going to type in I want to put
more content into the paragraph so that I
| | 08:36 | can see the fluid nature of the padding
values when they are set to percentages.
| | 08:50 | By adding more content to the paragraph
element, I should be able to visualize
| | 09:03 | this better as a solid block of text so sort
of describing what I'm doing there as well.
| | 09:09 | Feel free to copy and paste some text,
put in some Lorem Ipsum or whatever
| | 09:13 | you want to do there.
| | 09:14 | Now before I preview this, I've got to
remember to go up and also delete the
| | 09:17 | width here from the div tag.
| | 09:18 | So let's just review these styles to
make sure we've got everything right
| | 09:21 | before we preview this.
| | 09:22 | We don't want any width
elements on the div or the paragraph.
| | 09:25 | And on the div, I just want
padding right left values of 10%;
| | 09:29 | on the paragraph, I want
padding left and right values of 20%.
| | 09:32 | On the body selector, I
just want a width of 80%.
| | 09:36 | So I am going to go ahead and save this
and then preview this in my browser and
| | 09:42 | now if I resize the page, you can see
exactly what I am talking about in terms
| | 09:46 | of the fluid nature of this padding.
| | 09:49 | As it gets smaller, the amount of space
available for the padding shrinks and as
| | 09:53 | it gets taller the available
space for the padding grows.
| | 09:56 | So it's not quite auto margins, it's
not an auto padding, but you can use
| | 10:01 | percentages to give yourself
fluid and flexible padding regions.
| | 10:05 | So you know as a whole, padding is a
little less complicated than margins, but
| | 10:09 | it still has its quirks that you need to
be aware of when setting values for it.
| | 10:13 | Remember, when we set too great a
padding value and it broke our layout, if you
| | 10:18 | don't account for element width and
height and then how those work with
| | 10:21 | padding, it can have disastrous consequences
for your layout or just overall element spacing.
| | 10:27 | You know oftentimes, when your layout
breaks, padding is sometimes like that
| | 10:31 | hidden culprit, because designers can forget
that padding is applied to parent elements.
| | 10:37 | So just to make sure that when you
begin to organize your styles that you track
| | 10:40 | when and where your padding is applied,
so that as you begin to style those
| | 10:44 | interior elements, you don't have
any unwanted surprises later on.
| | Collapse this transcript |
| Margin and padding shorthand notation| 00:00 | So we've seen that both margin and
padding can be set independently to the top,
| | 00:04 | right, bottom and left of an element.
| | 00:07 | Now as you can imagine, writing out
separate properties for each one of those is
| | 00:11 | quite inefficient, but thankfully
margins and padding also have a shorthand
| | 00:15 | notation that we can use when defining
them, and to demonstrate this I've opened
| | 00:20 | up the shorthand.htm file.
| | 00:22 | You can find this in the 05_04 directory.
| | 00:26 | Again, very simple file, will just
have a couple of paragraphs on the page.
| | 00:29 | One of them has a class of margin and
other one has a class of padding and they
| | 00:33 | both sort of explain what's
going to happen with them.
| | 00:35 | One is going to be controlled through
margins and the other one is going to be
| | 00:38 | controlled through padding.
| | 00:40 | So now here's what we're going to do.
| | 00:41 | I'm just going to go right up and
create another selector and I'm just going to
| | 00:45 | type in .margin and inside of that
we're going to apply the margin shorthand.
| | 00:50 | So, instead of typing in margin-
whatever, I just type in margin and I'm just
| | 00:55 | going to type in margin:.
| | 00:56 | Now after this I have several different
versions of this shorthand notation that
| | 01:00 | I can use depending upon how I wanted to
apply margins and what values I want to
| | 01:05 | apply to which side.
| | 01:06 | So let's go ahead and try out some of
the different versions of this syntax.
| | 01:10 | So the first thing I'm going to do
here is 10px and then a space, not a comma
| | 01:14 | but a space 15px and then a space, 20px,
another space and then 30px and then a semi-colon.
| | 01:23 | Okay, so what's happening here?
| | 01:24 | Well, I'm applying margins
independently to each side and you have to remember
| | 01:29 | the order in which these are applied.
| | 01:31 | We have top, right, bottom and left.
| | 01:38 | If you think about starting at the top
of the clock and then going clockwise to
| | 01:41 | the right, bottom and left sides,
that's one way that you can remember this.
| | 01:45 | Other people have used the mnemonic
device TRBL top, right, bottom, left to
| | 01:50 | remember that as well.
| | 01:51 | So if I save this and test this in my
browser, I'm getting 10 pixels worth of
| | 01:58 | margin up top, 15 pixels worth on the
right-hand side, 20 pixels worth of margin
| | 02:02 | on the bottom and 30 pixels worth
of margin here on the left-hand side.
| | 02:08 | Okay, so let's do the same thing
for padding and check out its syntax.
| | 02:12 | So I'm going to do .padding, and here
I'm going to give it a padding property,
| | 02:17 | so just like margin you don't have the
dash, you just say the word padding and
| | 02:21 | the same values that work for
margin will also work for padding.
| | 02:24 | So they both use the
exact same shorthand notation.
| | 02:28 | So what if I don't want to have to
explicitly define all four sides?
| | 02:32 | What if I have some sides or the top and
the bottom, for example, that share a value?
| | 02:37 | How would I do that?
| | 02:38 | Well, instead of using four
values I can also use three values.
| | 02:42 | So I can come in and say 10 pixels
space, 20 pixels space, 15 pixels and then
| | 02:50 | a semi-colon. Okay, so when you use three
values, where are you applying these values?
| | 02:55 | Well, the first value is still at
the top, the last value is still at the
| | 02:59 | bottom, but the middle value is going to
be used for both the left and the right
| | 03:03 | padding, so that middle value is
applied to both left and the right.
| | 03:06 | So if I save this and preview it,
I get something very similar.
| | 03:10 | I get 10 pixels on the top, I get 20
pixels of padding here on the right-hand
| | 03:15 | side, I get 15 pixels at the bottom and I
get another 20 pixels on the left-hand side.
| | 03:21 | So, so far we've seen the variation of
syntax that allows us to pass four values
| | 03:25 | for each individual side.
| | 03:26 | We've seen a variation of the syntax
that allows you to pass three values,
| | 03:30 | one value for top, one value for the
bottom and one value for the right and the left.
| | 03:34 | But there is also a version of the
syntax that allows you to pass two values.
| | 03:39 | So if I go up and modify my margin and
I change it to 10 pixels and 30 pixels,
| | 03:45 | let's talk about what this does for us.
| | 03:47 | Well, when you use two values, the
first value is used for the top and the
| | 03:52 | bottom, the second value is
used for the right and the left.
| | 03:56 | So again, if I save this, preview it in
my browser, now I have a top and bottom
| | 04:02 | margin of 10 pixels and
right and left of 30 pixels.
| | 04:06 | Now in addition to having four values,
three values or two values, you can also
| | 04:10 | just go ahead and use one value.
| | 04:12 | So for padding, I'm just going to come
down here and say 30 pixels, and then I'm
| | 04:18 | going to do the same thing for margins.
| | 04:20 | So I'm just going to place
both of them with 30 pixels.
| | 04:22 | Now you've probably guessed
what this is going to do for us.
| | 04:25 | So when we have a single value
that applies to all sides equally.
| | 04:29 | So in this case, I want to apply the
same amount of margin all the way around
| | 04:33 | the element or the same amount of padding all
the way around the element too. So let's review.
| | 04:38 | One value means the same value is
applied everywhere, two values means that
| | 04:42 | the first value is applied to the top
and bottom, second value is applied to
| | 04:46 | the right and left.
| | 04:47 | If you have three values, the first one
is applied to the top, the second one is
| | 04:51 | applied to the right and left, and
the third one is applied to the bottom.
| | 04:55 | If you have four values, the first one
applies to the top, and then you just go
| | 04:59 | around clockwise to the right, left and bottom.
| | 05:02 | So if I save this and preview this
in my browser, I see that I'm getting
| | 05:08 | basically the same all the way around.
| | 05:10 | You know what's interesting here is,
when you look at it like this it doesn't
| | 05:13 | really look like there's that much of
a difference between the margin and a
| | 05:16 | padding, and in fact, when there is
no borders involved, when there is no
| | 05:20 | background colors involved, it's
almost impossible to tell the difference
| | 05:23 | between margins and padding in
terms of controlling element spacing.
| | 05:27 | So just so we can see that there is a
physical difference between these, what
| | 05:32 | I'm going to do is go over to both of
these selectors, and I'm just going to
| | 05:35 | come in and apply a background color.
| | 05:37 | So I'm going to do background of #ccc,
which is a gray and I'm going to go ahead
| | 05:42 | and do the same color for both of them.
| | 05:43 | #ccc, so the syntax of this is background:
| | 05:47 | and then the # character is ccc;
| | 05:48 | So I'm going to save that and preview
this, and now you can definitely tell the
| | 05:54 | difference between margins and padding.
| | 05:57 | Padding is increasing the width and
height of the element, whereas, margin is
| | 06:01 | basically dealing with the
spacing outside of the element.
| | 06:04 | So the one thing I really like about
this shorthand notation that we're using
| | 06:08 | here for margin and padding is
that it really is very, very flexible.
| | 06:12 | You can use it in a variety of instances.
| | 06:14 | So I do want to point out, unlike the
font shorthand notation, it's not going to
| | 06:18 | pass any default values.
| | 06:20 | So using shorthand notation for
margins and padding are going to give you
| | 06:24 | exactly what you expect when you use it.
| | Collapse this transcript |
| Adding borders| 00:00 | Applying borders to elements is a fairly
simple process, but the Border property
| | 00:04 | syntax can be a little bit cumbersome.
| | 00:07 | Let's explore the options we have when
applying borders to our elements, and how
| | 00:11 | to write the syntax efficiently.
| | 00:13 | In this exercise, we will be
working with the borders.htm file
| | 00:16 | You can find that in the 05_05 directory.
| | 00:20 | Again, very simple structure here,
| | 00:21 | if I scroll down, I can see that I
have the heading 1 and that's what we're
| | 00:24 | going to initially apply a border to.
| | 00:26 | And then I have all these paragraphs
down here and they have classes that
| | 00:30 | basically correspond to the different
styles you can apply to borders, and we
| | 00:33 | are going to take a look at those
after we're done playing around with the
| | 00:36 | syntax of the border declaration. Okay.
| | 00:39 | So I'm going to scroll up to my Styles
here, and after the paragraph, I am going
| | 00:44 | to go ahead and create a selector for h1.
| | 00:46 | The first thing that I am going to do is I
want to explore the verbose syntax of borders.
| | 00:51 | There are actually three different ways that
you can apply borders in terms of their syntax;
| | 00:55 | one is a very verbose, the second one
is sort of a shorthand notation for a
| | 00:59 | single side, and then we have a
uniform shorthand notation that is
| | 01:03 | extremely efficient.
| | 01:04 | So we are going to do the inefficient
way first just so you can see it, and then
| | 01:07 | we are going to refine the syntax
to maybe more of an efficient way.
| | 01:11 | So the first thing that you can do is
you can declare that you want a border,
| | 01:14 | and you can declare that border on all
the different sides of your elements.
| | 01:17 | So you can do top, right, bottom and left
just like you can with margins and padding.
| | 01:22 | But with border, you're always
declaring a width, a style, and a color.
| | 01:27 | Using this syntax, you can
declare them individually.
| | 01:29 | So if I say border-top-width,
I can pass that a value.
| | 01:34 | So in this case, I am just going to
give it a border-top-width of 1 pixel.
| | 01:37 | Then I can say border-top-color, and I can
do these in any order that I want basically.
| | 01:45 | We will just go ahead
and do #000 which is black.
| | 01:49 | Then I can do border-top-style.
| | 01:50 | Now, we are going to experiment with
styles and all the different styles that
| | 01:56 | are available to us in just a moment.
| | 01:58 | So for right now I am just going to do solid.
| | 02:00 | So now, that would apply a
top border to this h1
| | 02:03 | that is 1 pixel, black and solid.
| | 02:06 | If you use this verbose syntax, you
have to do this to every single side.
| | 02:11 | So we would come down here and
say border-right-width: 1px;
| | 02:12 | border-right-color:#000
| | 02:12 | and then border-right-style: solid.
| | 02:31 | That's fun right?
| | 02:31 | So I'm betting you guys don't want
to go and complete the rest of this.
| | 02:36 | So if you were going to go ahead and
complete it out, you would do the same
| | 02:39 | thing for border-bottom and border-left.
| | 02:42 | You would declare individual width,
colors and styles for each one of those.
| | 02:45 | You end up with 12 separate
selectors that are all really just applying a
| | 02:49 | border to one element.
| | 02:50 | So it's not very efficient.
| | 02:52 | So let's take a look at maybe a
little bit more efficient way to do this.
| | 02:55 | Instead of going ahead and declaring
the width, color, and style their own
| | 02:59 | separate rules, I can use the sort
of directional shorthand notation.
| | 03:03 | So I could just say border-top and
when I say border top, I can pass-in all
| | 03:07 | three of those properties.
| | 03:08 | So I can say 1px solid #000.
| | 03:11 | So after border-top, I can do border-right:
| | 03:15 | 1px solid #000, border-bottom:
| | 03:19 | 1px solid #000, and finally,
border-left: 1px solid #000.
| | 03:35 | So that's much more efficient
than what we were doing before.
| | 03:37 | Rather than having 12 separate
properties, we only have 4 and we're declaring
| | 03:41 | basically border all the way
around this to each individual side.
| | 03:44 | Now using the syntax, the nice thing
about this, let me just go ahead and save
| | 03:48 | this and we will go ahead and preview
this in one of our browsers. There we go.
| | 03:52 | So I am getting a border of
equal width all the way around this.
| | 03:56 | The thing that I like about this
syntax is that if I wanted to do something a
| | 04:00 | little bit different here.
| | 04:01 | So, for example, if I decided that I
wanted a really thick top border and then 1
| | 04:04 | pixel border for everybody else, I
could save that, preview it, and you can see
| | 04:10 | it sort of gives me that nice top border.
| | 04:11 | So using this sort of directional
shorthand notation, you can declare individual
| | 04:15 | borders for each edge of the
element which is very nice.
| | 04:19 | But if we want to do a solid single
width border all the way around the element,
| | 04:22 | this also is not very efficient.
| | 04:25 | So I can take this one step further
and just use what we call the uniform
| | 04:28 | shorthand notation and I could just say border.
| | 04:31 | Here I can just do border: 1px solid black;
| | 04:34 | If save this, and test this in the
browser, I get that nice 1 px border all the
| | 04:40 | way around it again.
| | 04:41 | So using this shorthand notation,
you're essentially passing the same border
| | 04:45 | to each of the sides.
| | 04:46 | So I really recommend using one of those
two syntaxes depending upon whether you
| | 04:50 | want your border to be uniform or not.
| | 04:52 | I mention that we would take a
closer look at the border styles that
| | 04:56 | were available to us, and I'm going to do
that through the use of these class selectors.
| | 04:59 | You can see, for example, that I have
got all these different paragraphs and I
| | 05:02 | have these classes applied to them,
and I just want to come up here and I am
| | 05:06 | going to do each one of these as border
and then 2 px solid, and I am going to
| | 05:13 | do #f00 just as something a
little bit different, save that.
| | 05:18 | I am going to do f00 rather than black
because I want you guys to see how color
| | 05:23 | is applied to a few of these border
styles, some of them don't get quite the color
| | 05:28 | applied to it the way that you would
think, some of them use color almost as a
| | 05:31 | highlight if you will. Okay.
| | 05:32 | I am going to keep going.
| | 05:33 | Here, I am going to do border:
| | 05:34 | 2px, and this time, I am going to use dotted;
| | 05:38 | so dotted for the line style, then #f00.
| | 05:41 | Going down to the next line, you can
probably guess what we are going to do here.
| | 05:44 | I am going to do border: 2px-#f00.
| | 05:51 | Now, I'm going to change up a little
bit because the remaining borders down
| | 05:55 | here, the double, the groove, the ridge,
the inset and the outset often require
| | 06:00 | thicker borders in order for you to be
able to see the style because some of
| | 06:03 | these have sort of a three-dimensional
styling to them, and if you try to do them
| | 06:06 | with a 1-pixel border, you really
wouldn't see the formatting or the styling of
| | 06:10 | that particular border.
| | 06:11 | So I am going to up the width of these.
| | 06:13 | For double, I am going to do border:
| | 06:14 | 4px and then double #f00.
| | 06:20 | For groove, we are going to do border:
| | 06:22 | 4px groove #f00, for ridge,
border: 4px groove#f00.
| | 06:29 | We have two more to do, border:
| | 06:37 | 4px inset #f00, and finally, and yes,
feel free to copy and paste, it probably
| | 06:46 | would have been a little quicker; border:
| | 06:48 | 4px outset #f00.
| | 06:51 | Okay, let's take a look at all these
different styles, I am going to save this.
| | 06:55 | Again, I am going to go up to my
browser and I'm going to preview this again.
| | 06:59 | So you can see these first three the
solid, dotted, and dash give you pretty
| | 07:04 | consistent styling
throughout all of your browsers;
| | 07:07 | the double, groove, ridge, inset, and
outset these require a little bit of a
| | 07:11 | thicker border in lot of cases at least 3
pixels or higher, in this case I am using 4.
| | 07:15 | Now, the color that I used here f00 is
a red and depending upon which browser
| | 07:21 | you're looking at in, some of them
apply colors a little bit differently,
| | 07:24 | especially some of the older browsers.
| | 07:26 | So I am just going to open up
another browser here real quick.
| | 07:31 | In this case, I have opened it up in
Chrome, and you can see there's not too
| | 07:34 | much of a difference between that.
| | 07:37 | Now, I am going to open it up in Firefox.
| | 07:44 | Now, here in Firefox, we see
a little bit of a difference.
| | 07:46 | Let me compare this again to Opera.
| | 07:48 | So take a look at the
outset and the inset values.
| | 07:51 | Now look at those in Firefox, so
that's a lot lighter so that color is being
| | 07:55 | used as a much brighter highlight,
it's also being used as a much brighter
| | 07:58 | highlight on the ridge and the groove.
| | 08:00 | Let me try this in Safari and you can
see that you get the darker red in Safari
| | 08:07 | like you're in the other browsers.
| | 08:08 | So it's up to the browser itself to
go ahead and display that style the way
| | 08:13 | that, that style is basically
just defaulting in that browser.
| | 08:15 | It's when you throw a color in the
mix, you are going to see some slight
| | 08:18 | variations these days, especially
with some of the older browsers that you
| | 08:21 | might be working with.
| | 08:22 | So another thing I want to mention here
before we close is that with the advent
| | 08:26 | of CSS3 and the adoption of some of
those properties, you are going to have even
| | 08:30 | more options than you
currently have in regards to borders.
| | 08:34 | CSS3 introduces border images which
allow you to use images as decorative border.
| | 08:39 | So you can specify images for the
sides and the tops and basically decide how
| | 08:43 | you wanted the tile between the sides as well.
| | 08:46 | Now it's not fully implemented across
all of the browsers yet, but if you want
| | 08:49 | to see it in action, I recommend going
and checking out my CSS3 First Look title
| | 08:54 | for more information on border images.
| | Collapse this transcript |
| Defining element size| 00:00 | Over the last few movies we have
explored the box model properties of
| | 00:03 | margins, borders and padding and also along
the way we've set an element's width and height.
| | 00:09 | In this movie I want to formally
introduce the width and height properties
| | 00:12 | and review how all of the box model
properties are used when calculating an element's size.
| | 00:18 | To do this we are going to be working
with the element-sizing.htm file, which
| | 00:22 | you can find in 05_06 directory.
| | 00:26 | I just want to preview this in a
browser really quickly so you can see
| | 00:29 | what's going on here.
| | 00:31 | I want you to focus on the two
elements that have background colors;
| | 00:34 | essentially we are going to create a
two column layout with these, one on the
| | 00:37 | left, one on the right.
| | 00:38 | And we are going to make sure as the
text is telling us here, that the size
| | 00:43 | of these two columns don't exceed
600 pixels, they have to fit within the
| | 00:47 | sort of 600 pixel space.
| | 00:49 | And to do that we are going to have to
accurately be able to calculate the width
| | 00:53 | of both of these columns and that's
going to be based on all the different box
| | 00:56 | model properties that we are applying.
| | 00:57 | I am going to get back into my code.
| | 01:00 | And just so we understand our
structure a little bit, we have inside of our
| | 01:05 | article we have two div tags, one
with a class of one, the other one with a
| | 01:09 | class of two and those are the
elements that we are going to be working with.
| | 01:12 | We already have some selector started
for these, one and two and currently all
| | 01:15 | they are doing right now is
applying background colors.
| | 01:18 | And then we also have a
float property applied to them.
| | 01:20 | Now as I mentioned earlier we will
definitely talk more about the float property
| | 01:24 | in the CSS page layout course.
| | 01:26 | However, just for this particular
exercise, notice that we are floating one to
| | 01:30 | the left and floating another one to the right.
| | 01:32 | That's going to allow us to position
these two elements side-by-side, one on the
| | 01:36 | left-hand side and one on the right-hand side.
| | 01:38 | So the first thing I want to do
is introduce the width property.
| | 01:41 | So for the .one selector, I am going to
go ahead and type in the width property
| | 01:47 | and I am going to give it a width of 300 pixels.
| | 01:50 | Now remember we know that the
parent container is 600 pixels wide.
| | 01:54 | So if I make both of these 300 pixels
wide and save it and test it, I see that
| | 02:02 | indeed I'm positioning them right side
by side, they fit perfectly in there.
| | 02:06 | As a matter of fact they split right
down the middle 300 pixels on this side,
| | 02:10 | 300 pixels on that side.
| | 02:11 | So while it certainly does fit, it
doesn't look very good because the text in
| | 02:15 | both of these instances is just
budding right up against the edge of their
| | 02:19 | container, so right it begins the
edge of each column wall right up against
| | 02:22 | the edge of each other.
| | 02:23 | No, that doesn't look so good.
| | 02:25 | So we know that one of ways that we can
keep content inside of an element, away
| | 02:29 | from the edge of that element
is to use the padding property.
| | 02:33 | So I am going to go back into my code and
let's just add a little bit of padding here.
| | 02:37 | So I am going to do a padding
of 25 pixels for both of these.
| | 02:42 | And we know that if we use this
padding shorthand notation we are applying
| | 02:46 | padding equally to all side, so top
right bottom and left are all getting 25
| | 02:51 | pixels worth of padding.
| | 02:52 | So if I say this and test
this in the browser, uh oh,
| | 02:56 | Okay so that one good thing is that the
text is being held away from the edge,
| | 03:00 | but the bad thing is, is that our
columns or collapsing basically, we are having
| | 03:04 | this sort of collapse happen.
| | 03:05 | Now the reason that that's
happening is we made a very common mistake.
| | 03:09 | We applied the width and the padding
separate of each other and really didn't
| | 03:14 | consider how one was going to affect the other.
| | 03:17 | So if I go back in my code, I can see
that I have a padding of 25 pixels to the
| | 03:22 | left-hand side and a padding of
25 pixels to the right-hand side.
| | 03:25 | I have a width of 300,
remember those values are cumulative.
| | 03:29 | So each one of these is now 350 pixels
wide, which equals 700 pixels wide and
| | 03:35 | that means that the containing element
isn't wide enough to hold them anymore so
| | 03:38 | that's why we have that for a column collapse.
| | 03:41 | So one of the biggest mistakes
that I see new designers making is
| | 03:45 | miss-interpreting this property of
width as being sort of this catch all global
| | 03:50 | width property for the entire
element and it is definitely not.
| | 03:53 | As I mentioned earlier you should
really consider that property to be more of
| | 03:57 | content width, you know if it wasn't
longer to type out I would even you know
| | 04:01 | support it being change to that, but
that's exactly what it defines, it defines
| | 04:06 | the width of the content and that's
not the total width of the element.
| | 04:10 | So in order for this to be able to
fit we have to subtract a total of 50
| | 04:15 | pixels from both of these.
| | 04:16 | So I am going to go head and go 250 here,
250 here, I'll save that and preview it.
| | 04:24 | And you can see now both of those columns
fit inside their parent element because
| | 04:29 | the value still now adds up to 600 pixels.
| | 04:32 | You have to remember this every single
time you're trying to fit elements within
| | 04:36 | a container whether they
are the same width or not.
| | 04:38 | Let's say we wanted sort of an
imbalanced column width here.
| | 04:42 | What if I wanted the first column, for
example, to be 400 pixels wide and the
| | 04:46 | second column to be 200 pixels wide?
| | 04:49 | Okay to do that I'd have to take the 50
pixels that have here for padding and I
| | 04:53 | would add it to 350 pixels
for a total width of 400 pixels.
| | 04:58 | For my second one here, if I wanted
this to be a total of 200 pixels wide, I
| | 05:03 | would remember that I have 50 pixels
worth of padding and so I would make
| | 05:06 | that 150 pixels wide.
| | 05:08 | So again if I save this I go back to
my browser, refresh it and now indeed I
| | 05:13 | have columns of unequal width, awesome.
| | 05:16 | So this is really good for a
theoretical exercise, but what if we try to do
| | 05:19 | something that was maybe a little bit more
real-world, something that your going to run
| | 05:23 | into time and time again when you're
creating columns with in parent elements.
| | 05:29 | A lot of times you are going to have to
make sure that you're keeping track of
| | 05:31 | all of the box model properties
that are being, that includes margins,
| | 05:35 | padding, borders, width, height all
of that to make sure that's all fitting
| | 05:40 | the way it is supposed to.
| | 05:41 | So what if I wanted to do two
columns here, have a border down the middle
| | 05:46 | separating the two columns and have
equal amount of space on either side and
| | 05:51 | equal amount of space here and here.
| | 05:53 | Well I have 600 pixels to work with, so
now that in how much room I have to work
| | 05:57 | with I can begin thinking
about how to make that happen.
| | 06:00 | So I am going to go back into my code
and just so I can see this a little bit
| | 06:04 | easier, I am going to copy this last
paragraph text here, I will go ahead and
| | 06:09 | copy that, and then I am going to
create a new paragraph inside my first div
| | 06:19 | tag, I am just going to
paste that text right there.
| | 06:22 | I do want to copy that paragraph tag
because I don't want that class to come
| | 06:25 | along with it, here it goes.
| | 06:26 | And again just to make sure that I'm
really going to see this sort of tall
| | 06:31 | column I am going to paste in again,
so that I three paragraphs in here now.
| | 06:35 | So I am going to back up to my styles.
| | 06:38 | And let's take a look at creating the sort
of uneven columns that I was talking about.
| | 06:42 | First what I am going to do is I am
going to get rid of the background color
| | 06:44 | because I really want this to look the
way it would normally look on the page.
| | 06:46 | I'm not going to change the width, I
will leave the width at 350px, but for
| | 06:51 | padding I am going to change this, I am
going to do a padding left of 25px, and
| | 06:56 | then I am going to do a padding-right of 23px.
| | 07:01 | Now why am I doing that?
| | 07:02 | You remember I mentioned having a border right?
| | 07:05 | So a border has a width as well in
this case I am going to give the border 2
| | 07:08 | pixels worth over width.
| | 07:10 | So if I had not subtracted this by 2
pixels then we would still have that sort
| | 07:15 | of column overflow and our columns would break.
| | 07:18 | So now I am going to do a border-
right as well 2px solid and black.
| | 07:25 | I am also going to change the height so
I am just going to do a height of 500px,
| | 07:30 | and then I am going to do
a text align of justify.
| | 07:34 | And I want to do justify types so that I can
really see where that padding is being applied.
| | 07:38 | Now the height is optional, but I want
to introduce the height property as well
| | 07:42 | just like width, height is also the
height of the content and it is cumulatively
| | 07:47 | added just like width, height is based
on content and any padding to the top and
| | 07:52 | bottom any top and bottom borders and
even top and bottom margins need to really
| | 07:56 | be factored in to the
overall height of the element.
| | 07:59 | Now remember margins aren't always
factored into the height because sometimes
| | 08:03 | margins go away and that's why we
really talk about the container height and
| | 08:07 | container with involving the border
padding and width and height properties.
| | 08:12 | Now I am going to go down to the second
one here, I am going to get rid of its
| | 08:14 | background color as well.
| | 08:16 | Now for this one I am going to go ahead
and just give it a single padding value
| | 08:20 | but I am going to modify this a little bit,
I am going to change the syntax to 0 25.
| | 08:25 | You know when we took our
padding up here and modified it,
| | 08:28 | we took away all the padding to
the top and the bottom of this
| | 08:31 | particular element.
| | 08:32 | So by doing padding zero here remember
that's passing a zero value for top and
| | 08:36 | bottom, 25 for left and right.
| | 08:39 | Since the second element here the one
with the class two applied does not have
| | 08:42 | a border on it we can use 25 pixels worth of
space for the left and right and that's fine.
| | 08:47 | Now I am going to make its height match,
I am going to go ahead and do height
| | 08:50 | here of 500 pixels and I am
going to do text align-justify;
| | 08:56 | Let me go ahead and save that, preview
that in my browser and you can see we are
| | 09:01 | getting exactly what I'm looking for
here, I am getting two columns of text
| | 09:05 | equal amount of space here on either side,
it's actually not perfectly equal its
| | 09:09 | two pixels off on the side, but for
the most part you'll never catch that and
| | 09:14 | again I have 25 pixels
worth a padding here and here.
| | 09:17 | You know in this case with these
columns we only used padding, borders and
| | 09:20 | width to determine the overall element
width, if we had decided to use margins
| | 09:25 | instead on the left and right there, we
would've had to account for those values as well.
| | 09:29 | Now most of time as a designer you're
just going to make a judgment call about
| | 09:33 | when to use margins versus padding, but
there are going to be other times when
| | 09:37 | it's pretty clear as to
which one you need to use.
| | 09:39 | In this case padding works really well
because we're using that border and we
| | 09:44 | want to make sure that spacing
stays on the inside of the element.
| | 09:47 | Now no matter the exact formula or
which of the box model properties that you
| | 09:51 | are using, you just need to make sure
that you account for all properties when
| | 09:55 | attempting to fit elements to a specific
size and be prepared to spend some time
| | 10:00 | figuring out what the values for each
of those properties will need to be in
| | 10:04 | order to achieve the desired size.
| | Collapse this transcript |
| Creating rounded corners| 00:00 | CSS continues to evolve and as it does,
capabilities that were either impossible
| | 00:06 | or very difficult to do in the past
have suddenly become relatively simple.
| | 00:10 | Such is the case with rounded
corners and in the past creating a rounded
| | 00:14 | corners relied on adding additional
markup to your HTML, using images to
| | 00:19 | simulate the effect of rounded
corners and all sorts of crazy jump into the
| | 00:23 | hoops kind of things.
| | 00:24 | Well now it's as simple as declaring a
single property and I want to show you
| | 00:28 | that by using the rounded-corners file,
which is found in the 05_07 directory.
| | 00:34 | So here we have a very simple
structure we have just a little heading one, so
| | 00:38 | it's creating around the corners, and
then we have a paragraph on which we are
| | 00:41 | going to round corners.
| | 00:42 | If I preview this in the browser, I can
see that we just have an element defined
| | 00:46 | here as a box and I have got a
background color applied to it so that we can see
| | 00:50 | kind of how these rounded
corners are going to work.
| | 00:52 | Okay now, the syntax for this is
relatively simple, I am going to scroll up and
| | 00:56 | find my paragraph rule here and on a
line just below that I am going to type in
| | 01:01 | border-radius and give it
a border-radius: 25px;
| | 01:09 | If I save this and preview this in
the browser you can see right there
| | 01:14 | rounded corners, voila.
| | 01:16 | You know that's not going to be that
big of a deal to a lot of you guys out
| | 01:18 | there, but if any of you have tried to
do that prior to this capability you will
| | 01:22 | be jumping for joy the way that I am.
| | 01:26 | The syntax can get a little more
complex than this, so let's go back and take a
| | 01:30 | look at some of the options
that we have with the syntax.
| | 01:34 | So if I go again back into border-
radius, after 25px I am going to do a space
| | 01:39 | there and I am going to do 10px.
| | 01:41 | So essentially, when you pass one
value much like the margin and padding
| | 01:45 | shorthand notation when you pass one
value, its given to all sides equally, but
| | 01:49 | when you pass multiple values now
you're changing some of these corners
| | 01:52 | independently to one another.
| | 01:54 | When you pass two values like this, the
first value indicates the top left and
| | 01:59 | bottom right-hand corner so
they are kind of opposite corners.
| | 02:02 | The second value indicates the
bottom left and top right-hand corner.
| | 02:05 | So if I say this, preview it you
can see what I am talking about.
| | 02:09 | Here we have very round corners on
the top left and bottom right and on the
| | 02:13 | opposite corners we are using the smaller value.
| | 02:16 | Now you can also do three values. So
after the 10px I am going to do a space
| | 02:19 | here and I will do 5px so we can
really kind of see the difference here.
| | 02:23 | And when you use three values the
first value is going to be top left, the
| | 02:26 | second value is going to be bottom
left top right and the third value is
| | 02:30 | going to be bottom right.
| | 02:31 | So its kind of splitting those
first two values if you will.
| | 02:34 | So if I save this and preview it, you
can see what I am talking about, the last
| | 02:39 | value there is now that bottom right-hand
corner, the first value is this one and
| | 02:42 | then these guys have an equal radius or radii.
| | 02:47 | And then finally after the last one I
am just going to type in zero to give all
| | 02:50 | four, now if you're doing for, its sort
of that same trouble thing if you will,
| | 02:55 | top left, top right, bottom left, bottom right.
| | 02:58 | So if I save this and preview it you
can see what I am talking about, it
| | 03:03 | just starts to the top left and it just kind
of goes all the way around very-very lovely.
| | 03:09 | Now you also can define the radius
individually if you would like, I am now
| | 03:13 | going to get rid of these multiple values.
| | 03:16 | And I could also say border-top-left-radius;
| | 03:23 | So I could do the same thing, top right,
bottom left bottom right, just go ahead
| | 03:28 | and place those guys in the middle
like this, if I save this and test it,
| | 03:31 | you will notice that the only corner that's
getting any type of border radius is the top left.
| | 03:37 | Now the values themselves, you can do some
pretty interesting things with these as well.
| | 03:43 | Whenever you are looking at a rounded
corner radius, you basically have two
| | 03:47 | values here, you have the horizontal
and you have the vertical radius to this
| | 03:51 | and you can change those two values.
| | 03:54 | Let me show you what I mean by that.
| | 03:55 | So let me modify this syntax yet again
I'm a basically reduce it down to border
| | 04:00 | radius, save it, and then
I am going to do 25px/15px.
| | 04:02 | I am going to save that, test it,
| | 04:10 | and now what you're seeing is, you are
seeing kind of a flattening on the bottom
| | 04:14 | hand sides of this whereas the
horizontal radius is still quite robust.
| | 04:19 | And you can experiment with
these values a little bit.
| | 04:21 | So let's go down to like 5px and let's
go up to 30px, if I save this, you can
| | 04:29 | see exactly what I'm talking about.
| | 04:30 | Typically when you give it just one
value without the forward slash between the
| | 04:34 | two of them its used for both of them,
but if you'd like to tweak that a little
| | 04:38 | bit, you can certainly do that and
you can actually create some pretty
| | 04:40 | interesting effects this way, I had seen
people create cigar like shapes and all
| | 04:44 | sorts of fun stuff with this.
| | 04:46 | So play around those values little bit
and see if can come up with any of those
| | 04:49 | special effects on your own.
| | 04:50 | Now I want to mention a couple sites for
you because while simply declaring border
| | 04:55 | radius is fairly simple, the
syntax can be a little bit more complex.
| | 04:59 | So I am going to recommend that you go
out and read to the CSS backgrounds and
| | 05:03 | borders module level 3 you can find a
w3.org/css3-background and if I scroll
| | 05:09 | down little bit here, I can find this
rounded corners section and this is going
| | 05:13 | to give you a lot of diagrams to explain
to you what the horizontal and vertical
| | 05:17 | radius are in terms of the curve.
| | 05:18 | It's going to give you a lot of
different examples of syntax, let's if I can
| | 05:21 | show you how to do things like
corner shaping based on the padding.
| | 05:25 | So there is some really neat stuff here
where you can read up on border radius
| | 05:28 | and really customize what you're
doing with a particular property.
| | 05:31 | Now the syntax itself can be a bit
of a pain because it's relatively new
| | 05:35 | meaning it's not is evenly implemented
across browsers yet as may be some of
| | 05:40 | the older properties.
| | 05:41 | It has been around and it has been
implemented much longer than a lot of
| | 05:44 | the CSS3 properties,
| | 05:46 | so, for the most part you can use it
without fear, but so if you go to a site
| | 05:50 | like css3generator.com these site can
help you generate the syntax necessary to
| | 05:55 | get the rounded corners
that you are looking for.
| | 05:57 | So if I go down and choose Border
Radius, it's asked me if other border is
| | 06:00 | going to be running equally if I say,
no I can come in and just plug in the
| | 06:03 | values that I want.
| | 06:05 | And as I start plugging in some of
these values you are going to notice
| | 06:07 | something about the code that is
generating down below that, it's adding a lot
| | 06:11 | of vendor prefixes both WebKit and
Mozilla, essentially older versions of
| | 06:16 | Firefox and older versions of Chrome
and older versions of Safari really relied
| | 06:21 | on these particular vendor prefixes in
order to apply the property because they
| | 06:24 | were still sort of playing
around with the implementation.
| | 06:27 | So you may want to make sure that those
are in your code, if you are going to
| | 06:30 | support older versions of Firefox,
Chrome and Safari as well, it won't be too
| | 06:35 | long before we can just drop those
vendor prefixes, but I don't know that we
| | 06:39 | are quite there yet.
| | 06:40 | So regardless of which path you take I
very strongly recommend testing border
| | 06:45 | radius thoroughly before you use it,
since it since it's a relatively new
| | 06:48 | property and occasionally new
properties like this will still some changes in
| | 06:53 | how its adopted and
implemented within the browsers.
| | 06:56 | So you want to make sure
you are testing for that.
| | Collapse this transcript |
| Background properties| 00:00 | One of the properties that is often
associated with the box model but isn't
| | 00:03 | technically a part of it
is the background property.
| | 00:07 | The background property allows you to
control how the background of an element displays.
| | 00:11 | There are many different background
properties that allow us to control the
| | 00:14 | color of the background, whether we
want to display an image in the element's
| | 00:18 | background and ways to
control that image display.
| | 00:21 | Now we are going to explore
those in detail in just a moment.
| | 00:24 | For now, let's focus on just defining
a background and understanding how the
| | 00:28 | background area of an element is determined.
| | 00:31 | So here I have the background.htm
file open from the 05_08 folder and we
| | 00:37 | just have one lonely little
paragraph down here that says, I am The
| | 00:41 | background property. Okay, fair enough.
| | 00:43 | So in the add style section, I am
going to go ahead and add a paragraph
| | 00:48 | selector and inside that I am just
going to type in background-color, it's one
| | 00:54 | of our background properties and I am
just going to go ahead and use one of the
| | 00:57 | defined keywords yellow.
| | 00:58 | So if I save this and I preview this in
one of my browsers, I have my paragraph
| | 01:05 | right there, and indeed it's
background is yellow, but how do we determine or
| | 01:09 | how does the browser determined what
size to make the background, or how large
| | 01:14 | to make it, or what's
included in the background.
| | 01:16 | Well remember, backgrounds go all
the way up to the beginning edge of the
| | 01:19 | border of an element.
| | 01:21 | So any padding would be considered
part of the background, certainly any of
| | 01:25 | the element content would be
considered part of it as well, so if I go back
| | 01:28 | into my code and I go in and say,
all right, let's give it a width of 300
| | 01:34 | pixels, let's give it a height of 300
pixels, and let's just go and give it
| | 01:41 | some padding of say 100 pixels.
| | 01:44 | So I save this and preview that in the
browser, you can see that now 300x300
| | 01:51 | pixels with the padding added to it,
so that's a little bit of a additional
| | 01:57 | space there, there is the
background of the element.
| | 02:01 | So it goes all the way up to where the
edge of the element would be, and if we
| | 02:04 | go back and we take away the padding
and Save that and test it, you will see that
| | 02:09 | now just the height and the width are
defining that sort of background area.
| | 02:14 | You don't have to always use those
individual properties, later on in this
| | 02:17 | chapter we well talk more about the
background shorthand notation, but most of
| | 02:21 | time it's easy enough to just go ahead
and say background, you don't have to
| | 02:24 | always explicitly say background
color or even background image.
| | 02:27 | You can just say background.
| | 02:28 | And if I save that and test it, you can
see that it really gives me no change to
| | 02:33 | it whatsoever, so that's
acceptable shorthand notation.
| | 02:36 | Okay, so now that we know how to
properly set the background property and we
| | 02:40 | also know how browsers define the
area of the background, we can move on to
| | 02:43 | discussing other background properties
that we can set and we are going to start
| | 02:47 | that discussion by discussing
background images in our next movie.
| | Collapse this transcript |
| Using background images| 00:00 | In addition to using the background
property to specify a color for an element's
| | 00:04 | background, you can also
use it to display an image.
| | 00:07 | In this movie I want to introduce the
background image property and discuss the
| | 00:11 | syntax surrounding it.
| | 00:13 | So here I have the background-image.htm
file open, again, you can find that one
| | 00:18 | in the 05_09 directory.
| | 00:21 | We saw the same paragraph on the page,
slightly different size, a little bit
| | 00:25 | smaller this time around, and the
first thing I want to do is to go ahead and
| | 00:29 | apply a background image to this property.
| | 00:31 | So on a line just below
the margin declaration there
| | 00:35 | I want to do background-image.
| | 00:39 | Okay, now this one has some pretty
specific syntax, because one of the things
| | 00:43 | that we have to do is we have to tell
the browser where to go find this image
| | 00:47 | at, and we do that by using URL and
opening up some parentheses, and then
| | 00:51 | passing the path to the image in there.
| | 00:54 | You might notice if you can look over
here in the 05_09 directory that we have a
| | 00:59 | folder named _images and inside that
we have this tweet_90.png file and that's
| | 01:06 | what we want to display.
| | 01:08 | So we have to know the path to that
image, so we're going to go ahead and type
| | 01:11 | in _images/tweet_90.png that's the not
so pleasant part of doing that, because
| | 01:23 | you have to remember where that is,
unless the authoring tool that you're using
| | 01:26 | gives you the ability to
browse out and find that image.
| | 01:29 | So if you have an authoring tool that
allows you to browse out and find these
| | 01:32 | images, that's fine, because it's
going to save you a little bit of time,
| | 01:35 | but I've found that people that rely on
those sort of lose side of the fact that
| | 01:39 | this path is a relative path,
and here's the important part,
| | 01:42 | it's relative to the CSS, not the HTML.
| | 01:46 | Now in this case the HTML and the CSS
are in the same file, so that relationship
| | 01:50 | is exactly the same.
| | 01:51 | However, if this CSS was an external
cascading style sheet file, which it
| | 01:56 | normally would be your path of these
images needs to be relative to the CSS
| | 02:00 | file, not the page you're using it in.
| | 02:04 | Keep that in mind as well, if
you're ever using this particular syntax.
| | 02:07 | All right, so if I save this, and
preview this in a browser, excellent.
| | 02:14 | So there is my bird, and what's
interesting about this is we're not really
| | 02:17 | seeing everything the
background image property can do right now.
| | 02:22 | Let's go back in our code and let's
give this a background color as well.
| | 02:26 | I'll simply go down to the next line
and I'm going to type in background-color,
| | 02:32 | and here I'm going to use
the #9cf, which is a blue.
| | 02:36 | I'm going to save that, preview it, and
we get to see both the color and the image.
| | 02:42 | So when you're using the background
property, you can have an image and a color
| | 02:45 | at the same time, there is
absolutely nothing wrong with that.
| | 02:47 | And the reason that we can see both
of them at the same time is that this
| | 02:51 | image is a transparent png file, if it
was not, obviously the image is sitting
| | 02:55 | on top of the color.
| | 02:56 | So keep that in mind, if you have an
image and a color applied to the element,
| | 03:01 | the image is going to sit or layer
if you will, on top of the color.
| | 03:05 | There are some default behaviors around this
background image that you need to be aware of.
| | 03:09 | Right now, we can't really see too much
of this because our element is defined
| | 03:13 | at 90 pixels x 90 pixels, which
coincidentally enough is the exact size of that
| | 03:18 | image, but what if the element was larger?
| | 03:20 | I'll go into my code and I'm going to
change this, so that the element is now
| | 03:24 | 300 pixels x 300 pixels, so I'm
going to save that, and test this again.
| | 03:32 | If we don't tell them otherwise, the
browser is going to tile those images and
| | 03:37 | you even have control over how it tiles.
| | 03:40 | Let me show you that.
| | 03:41 | So if we go back into our styles, I'm
going to add another property underneath
| | 03:45 | this, and this time I'm
going to add background-repeat.
| | 03:51 | Now this has several values that we can
use, one value would be repeat, which is
| | 03:55 | what it's doing right now,
| | 03:56 | So if I just typed in the keyword repeat
and tested this, we wouldn't see any change.
| | 03:59 | Now we can also repeat along with specific axis.
| | 04:02 | So if I say repeat-x and save that,
notice that it's only repeating the image
| | 04:08 | along the x axis and that is extremely useful.
| | 04:12 | You can create all sorts of
really decorative borders or decorative
| | 04:15 | backgrounds that way.
| | 04:16 | A lot of people will fake gradients
even though we can gradients with CSS
| | 04:20 | now, by creating something smaller and just
sort of repeating it along a specific axis.
| | 04:24 | We can also repeat it along the y axis,
so if I save this and test it, you can
| | 04:29 | see the difference there as well.
| | 04:31 | If you don't want it to repeat at all,
you can just come in and say no-repeat.
| | 04:34 | If I save that, it's not
going to tile the image,
| | 04:40 | it's just going to display the image one time.
| | 04:42 | So the syntax we've looked at so far
allows us to control which image we
| | 04:46 | wanted to display in the element's
background and whether or not or even how
| | 04:51 | we want that image tiled.
| | 04:52 | It does not however allow us to
control where within the element's background
| | 04:57 | that the image is positioned.
| | 04:58 | For example, the bird which is right
now in the upper-left-hand corner, what if
| | 05:01 | I wanted it in the center or
at the bottom of this element?
| | 05:05 | In the next movie we're going to
learn how to use the background position
| | 05:08 | property to do just that.
| | Collapse this transcript |
| Controlling image positioning| 00:00 | Now that we've learned how to
display an image as part of an element's
| | 00:03 | background, we need to learn how to
control the positioning of that image within
| | 00:08 | the background region.
| | 00:09 | CSS gives us a couple of options for
controlling positioning some of which can
| | 00:13 | be a little tricky if you don't
understand exactly how they work.
| | 00:17 | So if you are going to do this
file with me, go ahead and open up
| | 00:19 | background-position.htm, which can be
found on the 05_10 directory, and I just
| | 00:25 | want to go over the structure of this,
because it's changed just a tad bit.
| | 00:29 | We have one empty div tag with the class
of position, and then we have two empty
| | 00:33 | div tags, one with the class of parent,
and then nested inside of that is a div
| | 00:37 | class with the class of percentage.
| | 00:40 | So we are going to get to these little
two a little later on, right now I just
| | 00:42 | want to focus on our initial div
tag here with the class of position.
| | 00:46 | So I am going to go up to our position
selector right up here and I am going to
| | 00:50 | add a background-image for it.
| | 00:51 | I am going to go ahead and do background
-image, and we are going to do URL, so
| | 00:56 | we are going to use the same image we
used earlier _images/tweet_90.png, if you
| | 01:08 | are doing this exercise with me, be
really careful about the spelling and
| | 01:13 | punctuation and the notation of everything.
| | 01:16 | If you start testing these and you are
not seeing the image show up or things
| | 01:19 | don't look the way that they should,
go back and look at the syntax very
| | 01:22 | carefully and make sure you
spelled everything correctly,
| | 01:24 | make sure that you do things like _
correctly things like that because those
| | 01:28 | little things really do matter.
| | 01:30 | Okay, I am going to go under
the next line and type and type in
| | 01:32 | background-repeat and then no-repeat.
| | 01:38 | So far nothing new, this is exactly
what we did in the last lesson, so we are
| | 01:42 | going to introduce a new property
here and that is background-position.
| | 01:47 | This has several different options in
terms of the values that we can pass into it.
| | 01:52 | I want to start with the keywords.
| | 01:54 | So I could, if I wanted to,
I can say, (left top;)
| | 01:58 | When I am using the keywords, typically
you will use two of them, although I am
| | 02:01 | going to show you I have the
views one in just a moment.
| | 02:03 | But you separate them with some white space.
| | 02:05 | So left top, means take the top left
corner of the image and line it up with the
| | 02:11 | top left-hand corner of the container.
| | 02:12 | So let's Save that and let's
preview that in one of our browsers.
| | 02:17 | Sure enough there is our Twitter bird
and he is showing up right there in the
| | 02:20 | top left-hand corner of our container.
| | 02:23 | What if we used other keyword?
| | 02:25 | So, for example, you can use for
horizontal, left center and test it, or right.
| | 02:37 | For vertical, you can use top-
center or bottom, and you can mix them
| | 02:45 | anywhere that you want.
| | 02:46 | One habit that I really want you to
get in the habit of doing is placing the
| | 02:50 | horizontal value first and
the vertical value second.
| | 02:53 | To be honest with you, it doesn't
really matter if I said (bottom left;) the
| | 02:59 | browser would know what I was
talking about, and it would apply right.
| | 03:02 | But when we get into using units of
measurement here, the horizontal value goes
| | 03:06 | first, the vertical value goes second,
and if you get in a habit of doing that
| | 03:10 | even with keywords, you're going to be
a lot better off when you try to use a
| | 03:13 | unit of measurement.
| | 03:14 | Okay, so what does happen if
you only pass one value in?
| | 03:18 | For example, left in, now I tested that.
| | 03:22 | Notice that center is always assumed.
| | 03:25 | So if I pass in say top,
it's going to do top center.
| | 03:30 | So unless you pass in two values, the
one value horizontal or vertical that you
| | 03:33 | don't pass in, is always
going assume to be center.
| | 03:36 | Now what if we wanted to
use units of measurement?
| | 03:39 | So what if I did something
like 50 pixels by 50 pixels?
| | 03:43 | If I Save this and test it, I can see
it's going 50 pixels over and 50 pixels down.
| | 03:50 | If I were to use values of 0 and 0 and
Save that, I notice that that positions
| | 03:56 | it at the top left-hand corner.
| | 03:58 | So if you want a little bit more control,
you can use these units of measurement.
| | 04:01 | You can also use things like ems.
| | 04:03 | I can do 1em over and 3ems down.
| | 04:05 | And if I save that and tested it, you
can see it moves 1em over and 3ems down.
| | 04:10 | So that's really up to you in terms of the
unit of measurement that you want to use.
| | 04:14 | What happens if you only
use 1 unit of measurement?
| | 04:16 | So if I do 25 pixels, for
example, notice what happens.
| | 04:21 | It assumes that the value is the
horizontal value and then defaults to
| | 04:25 | center for the vertical.
| | 04:26 | So even if I did something like 100
pixels, and saved it, still going to be
| | 04:31 | vertically centered right there.
| | 04:34 | Speaking of centering it, if you ever do
want to place it right in the middle of
| | 04:38 | the element, you can just
pass the keyword center.
| | 04:41 | The other vertical is assumed and it's
just going to center it right there in
| | 04:45 | the middle of your element.
| | 04:46 | There is another property that we have
that can change the positioning value as
| | 04:50 | well, and that is background-attachment.
| | 04:56 | Now background-attachment allows us to
have basically two values, fixed or scroll.
| | 05:01 | Scroll is the default, which just
basically means that it wants you to
| | 05:05 | position the background image relative to its
container, the element that you applied it to.
| | 05:12 | Fixed on the other hand
does something quite different.
| | 05:14 | So I am going to type in fixed.
| | 05:16 | When you use background attachment fixed,
you are saying, I want you to fix the
| | 05:21 | background image relative to the
viewport, not the containing element.
| | 05:26 | What does that mean?
| | 05:27 | Let's check it out.
| | 05:27 | So I am going to Save this and then Refresh.
| | 05:30 | It looks like it's just merely
shifted my element down, but it hasn't.
| | 05:34 | Watch what happens when I resize the browser.
| | 05:37 | That element is staying basically in
the very center of the viewport, the very
| | 05:42 | center of the browser window, and if
the browser window is really big, I
| | 05:46 | probably would not be able to see it anymore,
because it would go outside of my element.
| | 05:50 | And then as I scroll watch what happens.
| | 05:53 | So that's where the fixed comes in.
| | 05:55 | It keeps it fixed relative to the
viewport window right in the center, but only
| | 06:00 | when it's within the
containing element can you see it.
| | 06:03 | You can do some really,
really creative effects with this.
| | 06:07 | It's not fully supported in some of the
older browsers, most notably, Internet
| | 06:10 | Explorer, but it's a neat little feature
that you might want to play around with
| | 06:14 | and experiment with, because you can
do some really creative stuff with it.
| | 06:17 | Now I used almost every single unit
of measurement I could use right here,
| | 06:20 | except for percentages, and the
reason that I wanted to wait and talk about
| | 06:24 | percentages all sort of all by
themselves, is because they're so hard to wrap
| | 06:29 | your heads around when you are first
trying to learn how to use percentages to
| | 06:32 | position a background image.
| | 06:35 | So if you're going to use background-
position with percentages, what happens is,
| | 06:40 | now let's say we passed
this first value 25% and 50%.
| | 06:44 | What it does is it finds
that point on the image.
| | 06:46 | It goes 25% over on the image, 50% down.
| | 06:50 | It then goes to the element that you
are applying it to, it finds the same
| | 06:54 | corresponding point, 25% over, 50% down
and that's where it positions the image.
| | 06:59 | If you want to center an image using
percentages, you're probably going to pass 50% and 50%.
| | 07:05 | So what it does is it finds that 50% 50%
or center of the image and positions
| | 07:10 | that along with the
element itself at 50% and 50%.
| | 07:14 | So this is sort of a necessary way of working.
| | 07:17 | Hopefully this slide has illustrated
this a little bit for you, and if it
| | 07:20 | hasn't, we are going to go back into the
exercise and we are going to do this in
| | 07:23 | hands on way, so that you can
really kind of see this in action.
| | 07:26 | So I am going to go back into my code,
and I am really focusing on these
| | 07:30 | little guys right now.
| | 07:31 | So parent and percentage, so what I am
going to do in the parent is I am going
| | 07:34 | place a large grid back there, and
then for percentage we are going to have a
| | 07:39 | smaller grid that when we move it
around within parent, you can kind of see how
| | 07:43 | that positioning is
actually working and happening.
| | 07:45 | So for parent, I am going to come in and
I am going to type in background-image:
| | 07:51 | url and here I am going
to do _image/300grid.png;
| | 08:00 | don't forget my semicolon there.
| | 08:01 | I am then going to go down and
do background-repeat: no repeat.
| | 08:09 | Then I'm going to go down to the
percentage one and the first thing I am going
| | 08:11 | to do is get rid of the background color.
| | 08:13 | I am just going to change
that to background image as well.
| | 08:15 | So we want to be able to see through this one,
I am just going to come in here and say, url.
| | 08:20 | It's going be _images/100grid.
| | 08:25 | So we are using it with smaller grid
there and then on the next line after that,
| | 08:30 | we are going to do another
background-repeat; no-repeat; Save that and I am
| | 08:37 | going to test this in my browser.
| | 08:40 | You can kind of see these grids
kind of overlaying each other now.
| | 08:43 | These grids have 25% quadrants to them, so 25,
50, 75 or 100, same things down that way.
| | 08:50 | Okay, so let's do some background
positioning and see how this works.
| | 08:54 | So I am going to go down to
percentage, and I am going to do
| | 08:57 | background-position: and I am
just going to do 25% space 50%.
| | 09:05 | I will Save that, and then I will test
it, and you can see what happened here,
| | 09:11 | it went horizontally over 25% on the
smaller one, 25% on the bigger one.
| | 09:16 | They found that 50% spot on the larger
one vertically and they found that 50%
| | 09:20 | spot on the smaller one and
it lined that position up.
| | 09:25 | Now if I come in, for example, and say,
50 and 50 and Save that, it's going to
| | 09:30 | move this point right to the middle
point and I want to reverse the page, you
| | 09:34 | can see it do just that.
| | 09:36 | So go ahead and play around with those values.
| | 09:37 | Try some non-traditional values,
something like 13% and 85%, for example, when
| | 09:44 | you do that, it's going to find that
spot on your smaller one and it's going to
| | 09:48 | line it up with exact
same spot on your larger one.
| | 09:52 | So it definitely takes some time
to experiment with those values.
| | 09:54 | I think you will find that the more
you use percentages to position your
| | 09:57 | background image, the more that concept
will really start to make sense to you.
| | 10:01 | In order to achieve the desired results
that you're going for however, you are
| | 10:04 | going to need to really be able to
understand how the positioning keywords
| | 10:08 | work, how horizontal and vertical
positioning values are calculated, how
| | 10:12 | percentages work when relating
background images where there are containing
| | 10:15 | elements, things like that.
| | 10:16 | Once you have a thorough
understanding of those concepts, you'll be able to
| | 10:19 | combine element content in their image
backgrounds in any manner that you wish.
| | Collapse this transcript |
| Using multiple backgrounds| 00:00 | As CSS continues to evolve, the
capabilities we have around controlling elements
| |
|
|
