IntroductionWelcome| 00:04 | Hi! I am James Williamson, Adobe Certified
Instructor and lynda.com Senior Author.
| | 00:09 | I want to welcome you to CSS Fundamentals.
| | 00:12 | This course is designed to introduce you to the
basic concepts, terminology, and tools for CSS.
| | 00:18 | It's perfect for anyone who is new to
CSS and is looking for a good starting
| | 00:22 | point, or for anyone who needs a
high-level overview of Cascading Style Sheets.
| | 00:26 | We will start by exploring some of
the basics of CSS, what it is, the basic
| | 00:31 | syntax, and how it works within browsers.
| | 00:35 | Next, we will explore CSS in more detail,
with an overview of how CSS has evolved
| | 00:39 | over the years, the current state of CSS,
and where to find CSS specifications,
| | 00:44 | and how to read them.
| | 00:46 | After that, we will focus on the
terminology and common concepts found in
| | 00:49 | Cascading Style Sheets.
| | 00:51 | This will give you a solid foundation
as you explore this subject further.
| | 00:55 | Finally, I'll give you an overview of
some of the most popular CSS editors and
| | 01:00 | introduce you to some of the online
tools and resources that can help you become
| | 01:03 | more productive with CSS.
| | 01:06 | CSS is one of my favorite subjects,
and I am really looking forward to showing
| | 01:09 | you how important CSS is to web
design and how easy it is to learn.
| | 01:14 | Let's dive in.
| | Collapse this transcript |
| Who is this course for?| 00:00 | One of the first things you'll
notice about this course is that it's a
| | 00:03 | little bit different than all the other CSS
courses in the lynda.com Online Training Library.
| | 00:09 | Because of that I thought I'd take a
few moments here to describe what this
| | 00:13 | course is, and who it's designed for.
| | 00:16 | First you'll notice the
discourse has no hands-on exercises.
| | 00:20 | As part of the fundamentals series,
it's designed to give you a high level
| | 00:24 | overview of CSS, its history,
concepts, and terminology.
| | 00:28 | If you're new to CSS or need an overview
of what CSS is, this course is for you.
| | 00:34 | In fact, if you're brand-new to CSS,
I recommend watching this course first
| | 00:39 | before moving on to the more applied courses.
| | 00:42 | I know it's sometimes tough to be an
observer when you want to try things out on
| | 00:46 | your own, but I have designed this
course to make you more familiar with the
| | 00:49 | concepts and terms that you'll
encounter up while learning CSS.
| | 00:53 | Being familiar with the terminology
and having a overall understanding of how
| | 00:57 | CSS works means that you'll be able to
focus more on the individual concepts
| | 01:01 | within the other CSS courses.
| | 01:04 | I'd also highly recommend this course
for someone that needs to be more familiar
| | 01:07 | with the language of CSS without needing
to author it themselves or for somebody
| | 01:11 | that's just sort of curious about what
CSS is and wants to test the waters to
| | 01:15 | see if it's right for them.
| | 01:17 | So does this mean you should
skip this course if you've had prior
| | 01:20 | experience with CSS?
| | 01:22 | Well, ultimately that's up to you,
but if you're like me and you're largely
| | 01:26 | self-taught you've probably missed a
thing or two along the way or maybe you've
| | 01:30 | just never focused on the
big picture of how CSS works.
| | 01:35 | This course will hopefully fill in
some of those gaps and give you a clearer
| | 01:38 | picture of how it all works together.
| | 01:41 | After watching this course, I recommend
moving on to my CSS Core Concepts course.
| | 01:46 | It features hands-on exercises that
reinforce many of the concepts you learn here.
| | 01:51 | I hope this gives you a clearer
picture of what this course is all about.
| | 01:54 | Let's dive in and start
learning the fundamentals of CSS.
| | Collapse this transcript |
|
|
1. CSS BasicsWhat is CSS?| 00:00 | If you're brand-new to web design it's
often easy to get overwhelmed at all
| | 00:04 | the different technologies and
terminology used in web development.
| | 00:08 | Trying to understand what you need to
learn first, or even making sense of it
| | 00:11 | all, can be frustrating.
| | 00:13 | With that in mind, I want to take a
moment to define exactly what CSS is and
| | 00:18 | where it fits in a larger scheme of web design.
| | 00:21 | CSS, or Cascading Style Sheets, is a style
sheet language developed to control the
| | 00:26 | presentation of markup
language documents, like HTML.
| | 00:30 | You can think of HTML as controlling the
structure of the web while CSS controls
| | 00:35 | the presentation of it.
| | 00:37 | The best way that I can think of to
display that visually is to think of HTML as
| | 00:41 | the structure of a new building.
| | 00:43 | You can see the structure as it's
being built, but you don't really know what
| | 00:46 | the building is going to look like.
| | 00:48 | CSS, on the other hand, serves as the skin
of the building, and determines what the
| | 00:53 | outside of the building is going to look like.
| | 00:56 | By separating structure and
presentation in this way, you can change how
| | 00:59 | things look by simply changing the
CSS files, all without changing the
| | 01:03 | underlying structure.
| | 01:05 | In terms of syntax, CSS is not a markup
language like HTML, or even a scripting
| | 01:11 | language like JavaScript;
| | 01:12 | it's style sheet language.
| | 01:14 | This means that CSS consists of a
collection of formatting rules which
| | 01:18 | identify the elements in the
document that they should control and the
| | 01:21 | properties that they wish to set.
| | 01:23 | These styles are usually contained in
an external file that can control a single
| | 01:28 | document or entire web site.
| | 01:30 | The term cascade refers to how
these styles are applied to pages.
| | 01:34 | Styles are applied in the order that
they're found and since styles can be
| | 01:38 | placed in several different locations,
this often results in a cascade of styles,
| | 01:42 | from external documents all the
way down to locally placed styles.
| | 01:47 | One of the major benefits of CSS is
that it allows us to enable highly
| | 01:51 | modularized web design.
| | 01:53 | While this is a bit of an
oversimplification, you can think of web sites as
| | 01:57 | being controlled and
constructed by five main elements:
| | 02:01 | HTML controls the document structure;
| | 02:04 | CSS controls the documents' look and
field; JavaScript controls behavior within
| | 02:09 | the client, or browser if you prefer;
server-side languages such as PHP control
| | 02:14 | processing and business logic; and
databases such as MySQL store content.
| | 02:19 | Now in some cases a web site might use
all of these elements, while in others it
| | 02:24 | might only use HTML and CSS.
| | 02:27 | This modular approach means that
you can change each of these elements
| | 02:31 | independently of each other.
| | 02:32 | In terms of CSS, you can change the
entire layout and design of a page without
| | 02:37 | ever changing its content or structure.
| | 02:40 | You also speed development and site
maintenance by controlling the formatting
| | 02:44 | for an entire site through a
small number of CSS files.
| | 02:48 | Separating style and structure in
this way helps your content become
| | 02:51 | more portable as well.
| | 02:53 | You can define separate styles for
different types of media so that your page
| | 02:57 | looks one way on the desktop and
receives a more optimized design for print
| | 03:01 | and mobile devices.
| | 03:03 | As more and more devices consume web
content, this allows you to control the
| | 03:07 | presentation of your content within
that device without having to change the
| | 03:10 | structure of your file.
| | 03:12 | Regardless of how complex the site
is, I think it's pretty easy to see how
| | 03:16 | important CSS is to the overall
process of creating web sites.
| | 03:20 | Anyone wanting to learn web design
should regard CSS as an essential skill.
| | Collapse this transcript |
| Default browser styles| 00:00 | Have you ever opened an HTML file
that wasn't controlled by a style sheet?
| | 00:04 | Chances are, if you have, that
it looked something like this.
| | 00:08 | Now I've also heard of this
referred to as unstyled content.
| | 00:13 | Now, while it certainly looks
unstyled, that's not entirely accurate.
| | 00:17 | Before authors were allowed to
control HTML pages through Cascading Style
| | 00:21 | Sheets, browsers had to have some way
of displaying HTML content visually.
| | 00:26 | Although the approaches among
early browser manufacturers differed,
| | 00:29 | essentially they all developed default
style sheets that told the browsers how
| | 00:33 | to display specific elements.
| | 00:35 | Although there are some differences
from one browser to another, in general, all
| | 00:40 | browser default style sheets will
render a page similar to what you see here.
| | 00:45 | When you write CSS, one of the things
you are actually doing is overriding those
| | 00:49 | default browser styles and replacing
them with how you want the page to look.
| | 00:54 | Remembering that is more important
to web designers than you might think.
| | 00:59 | If you forget about the browsers'
default styles, it's really easy to miss a
| | 01:04 | little bit of spacing on an element
or some text formatting that makes your
| | 01:08 | design or layout either look
a bit off or not work at all.
| | 01:12 | Then you spend an inordinate amount of
time trying to find the error in your
| | 01:16 | styles, rather than accounting for the
default margins or styling of a specific element.
| | 01:21 | How do I know that?
| | 01:22 | Well, it's happened to me more than once.
| | 01:25 | There is even a CSS technique designed
specifically to counter this, called a CSS
| | 01:30 | Reset, that we will talk more about later.
| | 01:33 | In addition to dealing with a
browser's default styling, you also have to
| | 01:36 | understand one very
important factor when writing CSS:
| | 01:41 | the end user can overrule
your styles any time they wish.
| | 01:45 | Now most visual designers cringe when
they first hear this, but in reality
| | 01:49 | there's some pretty smart thinking behind this.
| | 01:52 | First off, let me
demonstrate what I am talking about.
| | 01:54 | I am going to be using Firefox,
but almost all browsers have, to one degree or
| | 01:59 | another, the amount of control over
your content that I am going to show here.
| | 02:03 | Note that in the Preferences I can
choose the fonts that I want to use for my
| | 02:07 | pages and what size the text should display.
| | 02:09 | If I go into Advanced, I can even tell
the browser to ignore this font that the
| | 02:15 | site wants to use in favor of my own.
| | 02:17 | As you can see, that makes a
huge difference in the design.
| | 02:21 | If that's not enough control, I can
tell a page to zoom in or zoom out on the
| | 02:26 | content, or just the text, or even
turn the pages styles off completely.
| | 02:32 | So why do browsers give
end users so much control?
| | 02:36 | Well, mostly the reason is
accessibility. Let's face it.
| | 02:40 | Not every designer is a good designer.
| | 02:42 | Often layouts break or don't display correctly.
| | 02:46 | Other users might have disabilities
that prevent them from seeing the page
| | 02:49 | properly or colorblindness that
makes low-contrast sites hard to read.
| | 02:53 | By allowing users to overwrite styles,
increase the size of text, or just
| | 02:58 | turn off style sheets, it's allowing users to
access the page content the way that they want to.
| | 03:03 | As a visual designer, that might be a
bit hard to take it first, but on the web
| | 03:08 | it's the content that really
matters, not so much the design.
| | 03:12 | As a graphic designer myself, that's
hard to say, but remember that the main
| | 03:16 | focus of graphic design is on
communicating in ideas and information.
| | 03:20 | So no matter what the
context, content does matter.
| | 03:24 | Staying focused or making sure that
you are overriding defaults styles
| | 03:27 | correctly and making sure your
accounting for your users' needs are very
| | 03:31 | important aspects of web design,
and incredibly important considerations when
| | 03:35 | planning and writing your CSS.
| | Collapse this transcript |
| Syntax| 00:00 | Most people, especially designers, get a
little nervous when they find out they
| | 00:04 | need to learn any type of
scripting or coding language.
| | 00:07 | Now I've had more than one designer
express anxiety to me over having to
| | 00:11 | learn how to write CSS.
| | 00:13 | Yet thankfully, learning CSS is fairly simple.
| | 00:16 | There is really not a lot to the
syntax, which makes it easy to get up
| | 00:19 | and running quickly.
| | 00:20 | Let's take a look at a sample rule.
| | 00:23 | CSS styles are made up of two parts:
the selector and the declaration.
| | 00:28 | The selector--here, P for paragraph--tells
the browser which element or elements in
| | 00:33 | the document to style.
| | 00:35 | Using this selector, all paragraphs
within a styled document would be formatted.
| | 00:40 | Well, this element selector is pretty simple,
| | 00:42 | selectors can be very complex,
depending upon which elements on the page
| | 00:47 | you're trying to target.
| | 00:49 | Selectors can be grouped together
or even combined to allow for more
| | 00:52 | precise element targeting.
| | 00:54 | The declaration, which is enclosed in
these curly braces, gives the formatting
| | 00:59 | instructions for the style.
| | 01:00 | Here there are two rules: one telling
the browser which font to use and another
| | 01:05 | defining the size of the font.
| | 01:07 | The rules themselves are made up of
two parts: the property and the value.
| | 01:12 | These are separated by colons and use
a semicolon to tell the browser to stop
| | 01:16 | evaluating and move on to the next rule.
| | 01:19 | While this syntax is simple, you will
need to learn the myriad selectors and
| | 01:23 | selector combinations which make it
possible to exercise a greater amount of
| | 01:27 | control over page elements.
| | 01:29 | You will also need to learn the various
properties you can set for each of the
| | 01:33 | elements and the values that
are allowed for that property.
| | 01:36 | For the most part, the use
of whitespace doesn't matter.
| | 01:39 | For example, both of these CSS rules
would give you the exact same results.
| | 01:44 | In some cases, however, it does matter.
| | 01:47 | Within a selector, it often results in
determining which elements are targeted, so
| | 01:52 | you should be familiar with when
whitespace is important and when it's not.
| | 01:56 | There are also certain syntax
rules, such as shorthand notation and
| | 02:00 | pseudo-element pseudo-classes and
inline rules, that you will need to learn.
| | 02:04 | But if you focus on the basic elements
of CSS syntax first, you'll be surprised
| | 02:09 | at how quickly you pick it up.
| | 02:11 | I also highly recommend reading through
the CSS specifications to learn not only
| | 02:16 | the rules behind the syntax,
but alternate ways of writing it.
| | 02:19 | Later on in this title, we will examine
the CSS specifications in more detail.
| | 02:24 | Another great way to learn syntax is
to examine the CSS found in other sites.
| | 02:29 | Often the authors will comment the CSS
in a way that helps you understand the
| | 02:34 | syntax and why it's written a certain way.
| | 02:37 | You'll be seeing examples of CSS syntax
throughout this title, so you should have
| | 02:41 | a pretty good idea of how it works
before moving on to writing it yourself.
| | Collapse this transcript |
| Basic selector types| 00:00 | Now that we know a little bit more
about CSS syntax, I want to take a moment to
| | 00:04 | focus on selectors in a bit more detail.
| | 00:08 | Remember, selectors allow us to tell the
browser which elements on the page we want to style.
| | 00:12 | In some cases, you are going to want
to apply styles broadly to a number of
| | 00:17 | elements all across your site.
| | 00:19 | In other situations, you are going
to want to target a smaller number of
| | 00:22 | elements, or even a single element.
| | 00:25 | Understanding how selectors work
will allow you to do just that.
| | 00:30 | The first selector I want to start with
is the most basic, the element selector.
| | 00:34 | Element selectors are global in nature,
meaning they are going to affect every
| | 00:39 | element of that type in a style document.
| | 00:41 | You simply need to know what the tag is
for a given element in order to style it.
| | 00:46 | Now unlike HTML, we don't need the angle
brackets around the tag name, just the tag itself.
| | 00:52 | For example, to style paragraphs, you'd
use the p; for heading 1s, you'd use an
| | 00:57 | h1; for unordered lists
you'd use an ul, and so on.
| | 01:02 | While these selectors are very efficient,
they're also very broad, which is why
| | 01:06 | they are most often used to
set global site-wide styles.
| | 01:11 | Another basic selector
type is the class selector.
| | 01:14 | Classes are HTML attributes that
can be set on any HTML element.
| | 01:20 | You can name a class anything you want,
and you can use it on as many elements,
| | 01:24 | and as many times on the page as you need.
| | 01:27 | As you can imagine, that makes classes
pretty popular when it comes to writing CSS.
| | 01:32 | Now here, for example, the browser
would look through all the elements on the
| | 01:36 | page and apply styling to any elements
with a class attribute of subheading.
| | 01:41 | Note that classes are identified in
CSS by the period in front of their name.
| | 01:48 | Now ID selectors are similar to class
selectors in that they represent an HTML attribute.
| | 01:54 | They differ from classes in
one very important aspect.
| | 01:58 | IDs must be unique to the page,
meaning that if you assign an ID to a page
| | 02:03 | element, no other element on
that page may have that specific ID.
| | 02:09 | In this example, the browser would find
the element on the page that has the ID
| | 02:14 | attribute of sidebar and then apply the styling.
| | 02:17 | Now, IDs identified by the octothorpe,
or as it is more commonly known, the pound
| | 02:22 | symbol, in front of the ID name.
| | 02:25 | You can also make class and ID
selectors element-specific by adding an element
| | 02:30 | to the front of the selector.
| | 02:32 | This limits the styling to only elements with
the specific class or specific ID applied to it.
| | 02:38 | For example, here styling would only
be applied to heading 2s with a class of
| | 02:43 | subheading, or divs with an ID of sidebar.
| | 02:47 | This allows you to write a single
general class, or ID style, and then follow
| | 02:52 | that with a more focused
element-specific style if necessary.
| | 02:57 | Classes and IDs can be anything you
want them to be, but you do need a follow
| | 03:01 | some naming conventions.
| | 03:03 | First, don't use any
spaces or special characters.
| | 03:06 | Also, remember that they are case sensitive.
| | 03:09 | If you use uppercase letters, you
are going to need to remember that when
| | 03:12 | writing the styles for them.
| | 03:14 | Honestly, it doesn't really matter what
you practice, as long as you're consistent.
| | 03:19 | Another type of selector I want to
discuss is the descendent selector.
| | 03:24 | Descendent selectors allow you to
target an element based on where it's found
| | 03:28 | within another element.
| | 03:29 | You simply string the selectors
together, separating them with whitespace.
| | 03:34 | The parent selectors are added first,
followed by each successive nested selector.
| | 03:39 | For example, in this example the
browser would find any span elements inside of
| | 03:45 | paragraph elements which were
also inside of div elements.
| | 03:49 | Now there isn't any limit as to how
many of those that you can string together,
| | 03:53 | but more than three starts to
become extremely inefficient.
| | 03:57 | Let's take a look at a couple of examples.
| | 03:59 | Now in this first example, the browser
would locate any paragraph found within a
| | 04:05 | div tag and then apply the styling.
| | 04:09 | In the second one, it would find any
span element inside of a paragraph which is
| | 04:13 | also inside of a div, and then apply the styling.
| | 04:17 | As you can see, descendent selectors
allow you to be extremely specific.
| | 04:22 | Another thing I want to point out here
is that the descendent selectors apply to
| | 04:25 | any nested element, no matter how deep
it's found within the page structure.
| | 04:30 | Going back to that first example,
it's going to apply to paragraphs inside the
| | 04:35 | div, not just ones that are
immediately inside the div.
| | 04:39 | You can also group selectors
together by using commas between the
| | 04:42 | selectors themselves.
| | 04:43 | Now this can make writing styles more
efficient by grouping selectors together
| | 04:48 | that need the same styling.
| | 04:49 | Instead of writing three separate
selectors like this, for example, you can
| | 04:54 | simply write one group selector,
and that's a lot more efficient.
| | 04:58 | Although there are certainly more
selector types available than the ones that
| | 05:01 | I've shown here, the overwhelming bulk
of your styles will probably be written
| | 05:06 | through the basic selector
types that we've covered.
| | 05:08 | Learning how to write efficient
selectors based on your document structure is
| | 05:12 | among the most important CSS
skills that you can cultivate.
| | 05:16 | By mastering the different types of
selectors available, you'll find that you
| | 05:19 | have a much broader set of
options for writing effective styles.
| | Collapse this transcript |
| How CSS works with HTML structure| 00:00 | It's hard to understate how
important HTML and CSS are to web design.
| | 00:05 | Since both languages have syntax that is
relatively easy to learn, and since both
| | 00:10 | are such fundamental parts
of web site architecture,
| | 00:12 | I always recommend that new web
designers start out my learning HTML and CSS
| | 00:17 | first, before moving on server-
side scripting or JavaScript.
| | 00:20 | And typically, people tend to learn HTML first,
and then learn parts of CSS along the way,
| | 00:26 | eventually getting comfortable enough
with it to start tackling some of CSS's
| | 00:31 | more advanced concepts. While this
approach is pretty standard, the importance
| | 00:35 | of the relationship between the
structure of HTML documents and how they are
| | 00:40 | styled with CSS often gets lost along the way.
| | 00:42 | I want to take a moment and discuss how
CSS works with HTML structure, in hopes
| | 00:48 | that it'll help you write more efficient CSS.
| | 00:50 | I'm going to be referencing a lot of
the selectors that we discussed in the
| | 00:54 | previous movie, so if you haven't
watched the Basic selectors movie yet, go
| | 00:58 | back, watch it, and then come back to this one.
| | 01:01 | Now remember that to style elements
in your documents, you'll need to write
| | 01:05 | selectors that target those elements.
| | 01:07 | It should go without saying that if you
don't have efficient logical HTML code,
| | 01:11 | it's considerably more
difficult to write efficient CSS.
| | 01:15 | CSS works with the structure of your
HTML document, allowing the browser to
| | 01:20 | parse the HTML code, find the
right element, and style it accordingly.
| | 01:24 | Having a well structured consistent HTML
and being familiar with that structure
| | 01:28 | makes it a lot easier to write the CSS for it.
| | 01:32 | With that in mind, I want to give you a
few best practices that you can follow
| | 01:36 | when authoring HTML and talk about
how this can impact to your CSS.
| | 01:40 | First, don't use classes
and ID attributes arbitrarily.
| | 01:44 | And I'll take this example.
| | 01:47 | Here the author has used classes and
IDs to define styling for each of the
| | 01:51 | individual elements.
| | 01:52 | As you can imagine, there are
corresponding selectors in the CSS that define
| | 01:57 | the element styling.
| | 01:58 | Now, as far as functionality goes,
this would work just fine, but it terms of
| | 02:03 | proper HTML structure, this
have some serious problems.
| | 02:07 | You know, HTML should help define
your content and give it meaning. Take
| | 02:11 | this class, redText.
| | 02:14 | You know, by itself it means absolute nothing.
| | 02:17 | In fact, this is one of the biggest
mistakes that I see new web designers make.
| | 02:21 | They rely too heavily on classes and
IDs, and they end up with a considerable
| | 02:26 | amount of unnecessary markup
that's hard to maintain or update.
| | 02:30 | Classes and IDs should be descriptive,
and they should be used to add additional
| | 02:35 | meaning to your markup.
| | 02:36 | Now, take a look at an
updated version of our example.
| | 02:40 | Here, several of the classes and IDs
have been replaced with descriptive values,
| | 02:44 | and in other places,
they've been removed altogether.
| | 02:48 | In fact, this structure can be
styled with fewer CSS rules than before.
| | 02:53 | The descriptive ID and class names also
allow us to get a much clearer picture
| | 02:58 | of exactly what we're
styling in our document as well.
| | 03:02 | Now you might also want to make
sure that your HTML is structured
| | 03:04 | consistently across your site.
| | 03:06 | New authors often structure the same
content in different ways on different pages.
| | 03:12 | This makes it considerably more difficult
to write global styles for the entire site.
| | 03:16 | Now take this pull quote, for example.
| | 03:18 | On one page it's structured within a div
tag; on another page it's structured in
| | 03:22 | a blockquote; and on this page, it's
just represented in a normal paragraph.
| | 03:27 | To style this consistently across the
site, you need several different rules
| | 03:32 | that are essentially
doing exactly the same thing.
| | 03:35 | By establishing a guideline for how
content should be structured and then making
| | 03:40 | sure that you're consistent and
following those guidelines, you can make the
| | 03:43 | process of writing styles
much easier for yourself.
| | 03:46 | You know, the best piece of advice I
can give you is to write your HTML so that
| | 03:51 | you're giving clean,
efficient structure to your content.
| | 03:54 | As best you can, try to structure the
code so that you're adding meaning to the
| | 03:58 | content without even thinking about the styling.
| | 04:01 | Now this is sometimes difficult for
new web designers and a little bit
| | 04:05 | counterintuitive, as many visual
designers code their pages with styling in mind.
| | 04:10 | However, remember, the purpose of
HTML is to provide a structure for your
| | 04:14 | content that helps convey meaning.
| | 04:17 | If you're able to do this for your
content, you'll find that you end up with
| | 04:21 | leaner, more descriptive code
that is a lot easier to style.
| | 04:25 | It also means that you'll find yourself
having to modify your code for styling
| | 04:28 | purposes much less frequently, if ever at all.
| | 04:32 | Understanding how selectors work and
how they relate to your HTML document
| | 04:36 | structure is a crucial part of writing CSS.
| | 04:39 | If you focus on those concepts early in
the process of learning CSS, you'll find
| | 04:44 | that you write cleaner, more
maintainable styles, and avoid a lot of the
| | 04:48 | pitfalls that trip up many novice web designers.
| | Collapse this transcript |
| Authoring options| 00:00 | When authoring your CSS, you have a
few options available to you, as to where
| | 00:04 | you can write your styles.
| | 00:05 | In this movie, I want to cover those options and
how they're going to impact your overall site.
| | 00:11 | Now basically, styles can be located
in one of three different locations.
| | 00:16 | First, you can place styles
in their own separate CSS file.
| | 00:20 | This is usually referred to
as an external style sheet.
| | 00:24 | Secondly, you can place styles in
the head of an existing HTML document.
| | 00:28 | This is usually referred
to as an embedded style.
| | 00:32 | Finally, you can also apply styles
directly to an HTML element, which is
| | 00:36 | referred to as an inline style.
| | 00:39 | Let's take a look at each of these
styles in a little bit more detail.
| | 00:43 | External style sheets are simply
text files with a .css extension.
| | 00:48 | Typically, they'll hold multiple styles
that are designed to control an entire
| | 00:51 | site or section of a site.
| | 00:54 | You apply these styles to pages by
using a link tag in the head of a document.
| | 00:59 | Using a link tag, you can even
specify what type of media you would like to
| | 01:02 | apply the styles to, giving you a way
to apply different sets of styles to
| | 01:06 | printers, desktops, and mobile devices.
| | 01:09 | Using external style sheets is the
most efficient way of applying styles
| | 01:13 | across an entire site.
| | 01:15 | Embedded styles only apply to the
documents they're found in, which make them
| | 01:20 | inefficient for site-web styling,
but perfect for targeted styles that are
| | 01:24 | specific for that page.
| | 01:26 | Inline styles are styles that are
added to an element as an HTML attribute.
| | 01:31 | The syntax can be a little cumbersome,
as you start with a style attribute and
| | 01:36 | then follow that with a
semicolon-separated list of CSS rules.
| | 01:40 | For the most part, using inline styles
are discouraged, as they're inefficient
| | 01:44 | and can be very hard to override or maintain.
| | 01:47 | Editing an inline style requires you to
track down the element that the style is
| | 01:50 | applied to and edit the HTML code directly.
| | 01:54 | This can be even more difficult if
you are having to update somebody else's
| | 01:57 | code, as there's no way to tell where
the styles have been applied without first
| | 02:01 | looking at the code itself.
| | 02:03 | The only place where inline styles are
still used extensively is in HTML emails,
| | 02:07 | where older email clients
offer weaker CSS support.
| | 02:11 | For the most part, you'll find almost
all of your projects will rely heavily
| | 02:14 | on external CSS files with the occasional
embedded style used to override global styles.
| | 02:21 | Regardless of where you place your
styles, the most important thing is to have
| | 02:25 | an overall strategy that controls styling
side wide, and makes it easy for you to
| | 02:29 | maintain or edit the styles when necessary.
| | 02:32 | This is a little easier to do if you
understand how browsers apply styles, and
| | 02:37 | that's something we're going to
explore in more detail in our next movie.
| | Collapse this transcript |
| How browsers apply styles| 00:00 | While CSS syntax is relatively simple,
| | 00:03 | the styles themselves, and the pages
that they control, can get rather complex.
| | 00:08 | As size become larger and more complex,
it becomes more difficult to keep styles
| | 00:12 | from conflicting with one another.
| | 00:14 | This can lead to bloated code, inefficient
CSS, or styles that simply just don't work.
| | 00:21 | In order to confidently navigate
more complex page structure, you need to
| | 00:25 | understand how browsers apply styles.
| | 00:27 | Once you understand the rules of
style rendering, it becomes much easier to
| | 00:32 | write organized and efficient CSS.
| | 00:35 | First, I want to take a look
at how browsers read selectors.
| | 00:38 | You and I are probably used to
reading selectors from left to right.
| | 00:42 | Now, take the following selector.
| | 00:44 | This tells the browser to find any text
within a span tag, which is also inside
| | 00:50 | of a paragraph tag, which is also
found within div tag, which is also found
| | 00:54 | within an element with an ID of mainContent.
| | 00:58 | Now the browser, however, reads this
from right to left. In this case, the
| | 01:03 | browser would first find all of
the span tags within the page.
| | 01:08 | It would then check to see if
they were inside of a paragraph.
| | 01:12 | Next, it would scan through the content again
to see if any of those paragraphs are within a div.
| | 01:17 | After filtering those results,
it would finally check to see if the remaining
| | 01:21 | elements were inside an
element with an ID of mainContent.
| | 01:24 | Now as you can imagine, this is
not a very efficient selector.
| | 01:29 | In cases like these, you should ask
yourself if a simplified version of the
| | 01:34 | selector would work.
| | 01:35 | In some cases, you're going to need
this type of a detailed selector, but where
| | 01:39 | you can simplify, you should.
| | 01:42 | Next, I want to examine
the concept of the cascade.
| | 01:46 | Cascading style sheets derive their
name from the cascading order of styles as
| | 01:51 | they're applied within the browser.
| | 01:52 | And this usually means that external
styles are applied first, followed by
| | 01:56 | embedded styles, and finally followed
by inline styles, if they're applied
| | 02:00 | within the document.
| | 02:02 | Now if any of these styles conflict
with each other, the most recent set of
| | 02:05 | styles will overwrite the earlier styles.
| | 02:08 | Now, notice that I said
this is how it usually works;
| | 02:11 | that because the cascade can
really be summed up in one sentence:
| | 02:15 | the last rule applied wins. Styles are
applied in the order that they're found,
| | 02:20 | and recent styles always overwrite
earlier styles in the event of a conflict.
| | 02:25 | Take this example. Since the
external style sheet link appears after the
| | 02:30 | embedded styles, the external styles
would actually overwrite any of the
| | 02:34 | conflicting embedded styles.
| | 02:36 | This method even applies
to style sheets themselves.
| | 02:39 | Take a look at the style sheet.
| | 02:42 | Notice that it contains two paragraph
selectors. Of the two, the last selector
| | 02:47 | would be the one that's applied,
as it's the last rule applied.
| | 02:50 | Remember, no matter where the styles
are found, the last rule applied wins.
| | 02:55 | Next, I want to talk about inheritance.
| | 02:58 | Inheritance allows us to write very
efficient styles, but it can get us in
| | 03:01 | trouble if we don't remember
exactly how our styles are structured.
| | 03:05 | Inheritance essentially says that
child elements will inherit the properties
| | 03:09 | applied to a parent.
| | 03:11 | Take this very common rule, for
example. Here a body selector has a font,
| | 03:16 | font-size, and color applied to it.
| | 03:19 | In this case, every element on the
page would render as Arial, 100% of its
| | 03:23 | default size, and be gray.
| | 03:26 | All the headings, list, and paragraphs are
inheriting those values from the body selector.
| | 03:31 | You can reverse this, however. I
f I wanted all my main headings to be
| | 03:34 | Garnet, for example, I could simply write a
rule for that h1 and set the color to Garnet.
| | 03:41 | Child rules will always overwrite their
parent rules where there is a conflict.
| | 03:44 | Now understanding inheritance makes it
much easier to write efficient styles.
| | 03:49 | Imagine writing separate rules for every
element on the page to define a font and a color.
| | 03:54 | Now writing that for the body
selector and letting all those other elements
| | 03:58 | inherit it is a lot more efficient.
| | 04:00 | One more thing about inheritance:
not all properties will inherit.
| | 04:04 | Now, for the most part, it's pretty logical,
but there really isn't any way to tell
| | 04:08 | what inherits without digging into
the specifications or just memorizing it.
| | 04:12 | I promise, it's not that hard to keep
track of what it inherits and what doesn't.
| | 04:17 | The last concept I want to
talk about is specificity.
| | 04:20 | Specificity is just a fancy way
to describe how specific a rule is.
| | 04:25 | Basically, if the cascade or
inheritance can't resolve a conflict, the
| | 04:29 | more specific rule wins.
| | 04:31 | Each rule has a weight score based on
the elements that make up the selector.
| | 04:36 | This table explains it in
a little bit more detail.
| | 04:39 | IDs are worth 100 points, classes
are worth 10, and elements are worth 1.
| | 04:44 | Using this chart, it's pretty easy to
determine which rule is going to win in
| | 04:48 | the event of a conflict.
| | 04:50 | There is one final point I want to make
about browser rendering: styles are cumulative.
| | 04:56 | Take these styles, for example.
| | 04:57 | Here we have a body selector and an
external style sheet that applies the font,
| | 05:02 | font-size, and color.
| | 05:04 | Later on in the same style sheet,
there is a paragraph rule that sets
| | 05:07 | the line-height to 2.
| | 05:09 | Finally, in the HTML document there is
an embedded style that changes the color
| | 05:14 | of the paragraphs to black.
| | 05:16 | So what would the final
style of all this paragraphs be?
| | 05:19 | Well, it would inherit the font
and font-size from the body selector.
| | 05:24 | The line-height would come from the
paragraph rule in the external style sheet.
| | 05:28 | And finally, the color would be
overwritten by the embedded style, as
| | 05:32 | inheritance would resolve the conflict
between the embedded paragraph style and
| | 05:36 | the external body style.
| | 05:38 | Okay, I know I just threw a lot at
you in a short amount of time, but hey,
| | 05:41 | that's the beauty of video.
| | 05:43 | You can pause, take notes, and rewind.
| | 05:45 | If you understand how browsers render
styles and how the cascade, inheritance,
| | 05:50 | and specificity work, you'll be able
to write clean efficient styles that are
| | 05:54 | smaller in size and much easier to update.
| | 05:57 | So as you learn CSS and begin working
with it, keep these concepts in mind and
| | 06:02 | you're going to save yourself a
lot of time and a lot of trouble.
| | Collapse this transcript |
| Browser rendering differences| 00:00 | One of the most frequent questions I
get from my students is, why does my design
| | 00:04 | look this way in browser X while
looking another way in browser Y?
| | 00:08 | I mean if the pages are structured the
same and they are both using the same
| | 00:13 | CSS, shouldn't they look the same?
| | 00:16 | Well, in a perfect world they would.
| | 00:18 | Unfortunately, the world of web
browsers is far from perfect.
| | 00:22 | The reason that browsers render pages
differently has everything to do with
| | 00:27 | something we call a rendering engine.
| | 00:29 | Every browser has its own rendering
engine that it uses to parse your code and
| | 00:34 | determine how it's supposed to display.
| | 00:37 | Since most browsers developed
independently of each other, there are multiple
| | 00:41 | rendering engines. Each one has
slightly different parsers, preferences, and
| | 00:45 | policies that determine how
your content is rendered.
| | 00:49 | As a designer, it's important to
understand which rendering engines are used for
| | 00:54 | various browsers and how they
differ when laying out pages and content.
| | 00:58 | The four most common rendering engines
are Trident, Presto, Gecko, and WebKit.
| | 01:04 | Microsoft developed the Trident
rendering engine and as such, it's a proprietary
| | 01:09 | engine that's used in a
multitude of browsers and web clients.
| | 01:12 | Internet Explorer and most
AOL browsers use Trident.
| | 01:16 | Presto is another proprietary engine,
developed by Opera software for their
| | 01:21 | browsers and licensed to other devices.
| | 01:24 | Gecko is an open-source rendering engine,
originally developed by Netscape, but
| | 01:28 | released to the Open Source Mozilla
project, which then continued development.
| | 01:33 | It powers popular
browsers like Firefox and Camino.
| | 01:36 | WebKit is another open-source
rendering engine developed by Apple,
| | 01:41 | Google, Nokia, and others.
| | 01:43 | It drives browsers such as Apple's
Safari browser and Google's Chrome.
| | 01:48 | It's worth noting that these
rendering engines are still being developed,
| | 01:52 | and older versions of the browsers will
have older versions of these rendering engines.
| | 01:56 | That's why designers should test their
pages in not just multiple browsers, but
| | 02:01 | multiple versions of the same browser as well.
| | 02:04 | Now thankfully, there aren't as many
differences now as there have been in the past.
| | 02:08 | This convergence in browser behavior
has been driven in large part by something
| | 02:13 | called web standards.
| | 02:15 | The movement towards web standards
started in the late '90s with organizations
| | 02:19 | such as the Web Standards Project,
which began as a group of designers and
| | 02:24 | developers frustrated with the
current state of browser development.
| | 02:28 | They, and other organizations and
corporations, began pressuring browser
| | 02:32 | developers to adopt the
recommendations of the World Wide Web Consortium.
| | 02:37 | The World Wide Web Consortium, or
W3C, began in 1994 and attended the
| | 02:43 | standardize web protocols and
technologies by issuing a series of
| | 02:47 | recommendations for everyone to follow.
| | 02:49 | In the end, the outcry from the design
and development community, along with the
| | 02:53 | rise of open-source browsers such
as Firefox, helped other manufacturers
| | 02:58 | realize the advantages of
supporting web standards.
| | 03:02 | So what makes understanding web
standards so important to designers in general,
| | 03:06 | and in CSS in particular?
| | 03:08 | Well, if most modern browsers support
web standards--to a degree, they all do--
| | 03:13 | that means that by learning these
standards and staying current with their
| | 03:16 | development, you ensure that your sites
will have a consistent design and user
| | 03:21 | experience across multiple browsers.
| | 03:24 | To a degree, that's kind of
where we find ourselves now.
| | 03:27 | As of this recording, the current
versions of Firefox, Safari, Chrome, Opera,
| | 03:32 | and Internet Explorer have far more in
common with how they display pages than
| | 03:37 | they have differences.
| | 03:38 | Now, that doesn't mean that you
won't eventually have to deal some minor
| | 03:41 | browser inconsistencies, or that you still
don't need to account for older browser versions.
| | 03:46 | I mean, you do, but I may be
worried about how a page looks in Netscape
| | 03:50 | Navigator 4 or Internet
Explorer 5.5 for many years.
| | 03:54 | Soon enough dealing with a majority of
browser inconsistencies will be a thing of the past.
| | 03:58 | Of course, that just leaves us to the
brave new world of mobile development that
| | 04:04 | we now need to worry about.
| | 04:05 | The current state of mobile browsers is
very similar to what we experienced in
| | 04:09 | the mid-'90s with desktop browsers.
| | 04:11 | I have no doubt that mobile devices will
experience a similar maturation as they
| | 04:16 | begin to adopt web
standards in a consistent way.
| | 04:19 | Until then, the best thing that you
can do is become familiar with the
| | 04:23 | differences in CSS rendering from
one browser and one device to another.
| | 04:27 | Later on in this title, I'll pass along
some valuable online resources that can
| | 04:31 | help you keep track of those
differences and how to deal with them.
| | Collapse this transcript |
|
|
2. CSS SpecificationsA brief history of CSS| 00:00 | To me, one of the most interesting
things about CSS is how it's constantly
| | 00:04 | changing and evolving.
| | 00:06 | As web designers, the ever-changing
nature of CSS continues to give us new
| | 00:10 | features and capabilities that
we can use to enhance our designs.
| | 00:13 | Of course, this also means that we
need to keep an eye on CSS, monitor the
| | 00:18 | changes that are being made to it, and track
how browsers are implementing those changes.
| | 00:23 | In this chapter, we're going to
discuss how you can do all those things,
| | 00:27 | but before we get into how to track
CSS specifications, I want to take a
| | 00:31 | moment to cover some of CSS's
history. That's going to provide you with a
| | 00:35 | little bit of context.
| | 00:37 | In the very beginning, there were no
style sheets--at least not for authors.
| | 00:41 | Each browser had its own internally
defined style sheet that gave the browser
| | 00:46 | instructions on how to style page elements.
| | 00:49 | Eventually, the movement to allow
authors to control the presentation of HTML
| | 00:54 | led to the publication of the
CSS 1.0 specification in 1996.
| | 01:00 | This was quickly followed up by the CSS
2.0 specification, which was released as
| | 01:04 | a recommendation in 1998.
| | 01:05 | Now, these early CSS specifications were
released at a very volatile time in the
| | 01:11 | development of web browsers.
| | 01:13 | You see, in the late 1990s, browser
manufacturers were more interested in market
| | 01:17 | share than being standards compliant.
| | 01:20 | In fact, the movement towards
supporting web standards was still very young.
| | 01:24 | At that time, browsers would introduce
their own proprietary way of dealing with
| | 01:29 | presentation that didn't agree with the
CSS specifications, or would even offer
| | 01:34 | uneven support for CSS.
| | 01:36 | Now, it didn't help matters that the
CSS 2.0 specification continued to be
| | 01:41 | updated even after it was published.
| | 01:44 | Due to these and other factors, CSS had
real problems in gaining traction among
| | 01:48 | web designers and browser manufacturers.
| | 01:51 | In fact, to this day, not a single
browser fully implements the 2.0 specification.
| | 01:57 | Those issues prompted the W3C to start
work on revising the 2.0 specification.
| | 02:03 | This revision, dubbed CSS 2.1 was issued
as a candidate recommendation in 2004 and
| | 02:10 | is largely what people are
talking about when they discuss CSS.
| | 02:14 | Support for web standards continued
to grow during the development of CSS
| | 02:18 | 2.1, and browser manufacturers
finally began to get serious about
| | 02:22 | implementing the standard.
| | 02:24 | For the most part, modern browsers offer
full implementation of the 2.1 standard.
| | 02:28 | You'll notice I said, "for the most part."
| | 02:31 | Because of uneven implementation, the
W3C pulled the 2.1 specification back to
| | 02:37 | working draft status in 2005 to even
out the bugs and make the standard a
| | 02:41 | little bit stricter.
| | 02:43 | It was returned to candidate
recommendation in 2007 and upgraded to full
| | 02:47 | recommendation status in 2011.
| | 02:50 | Okay, so just to review, the 2.0
specification was released and never fully
| | 02:55 | implemented, and the 2.1 revision was
released, pulled back to working draft, and
| | 02:59 | then re-released again over
the course of about six years.
| | 03:03 | Now, saner minds might reason that the
W3C should get one standard release and
| | 03:08 | implemented before moving onto the next,
but that line of thinking ignores the
| | 03:13 | rapid evolution of the web.
| | 03:15 | During the course of the development
of CSS, some very important changes have
| | 03:19 | occurred in the way that web
sites are developed and consumed.
| | 03:22 | For example, the rise of online
applications and mobile devices are just two
| | 03:27 | of the changes that the original CSS
specifications just weren't designed to address.
| | 03:32 | Now, this is leading the W3C to take a
very different and deliberate approach to
| | 03:37 | developing the next
generation of style-sheet standards.
| | 03:40 | I'm guessing that you've at least heard of CSS3.
| | 03:43 | What you may not know, however,
is that CSS3 isn't really a
| | 03:47 | single specification.
| | 03:49 | Although work on the CSS level 3
standard has been going on since at least 2001,
| | 03:54 | the days of a large singular
standard document that defines CSS are over.
| | 04:00 | CSS 2.1 was the last all-encompassing
CSS specification that we're going to see.
| | 04:05 | The capabilities, properties, and just
sheer size of CSS have grown enormously
| | 04:10 | over the last decade.
| | 04:12 | Trying to get such an overwhelmingly
large document through the development
| | 04:15 | and review process and then publish
it as a recommendation is extremely
| | 04:19 | difficult and slow.
| | 04:21 | Because of this, the W3C has
decided to modularize the CSS standard.
| | 04:26 | Now, what does that mean?
| | 04:28 | Well, essentially it means it's
been split up into various parts.
| | 04:31 | CSS selectors, for example, are defined
in their own standard, while backgrounds
| | 04:35 | and borders are defined in another.
| | 04:38 | This approach allows the working
group to have much more flexibility over
| | 04:41 | the evolution of CSS.
| | 04:43 | Individual standards can be
developed based on different priority levels
| | 04:46 | when needed, and it's much easier to edit or
add modules as the needs of web content changes.
| | 04:52 | So in fact, there is no
single CSS3 specification;
| | 04:56 | there are simply individual
specifications, and some of them have that level 3
| | 05:00 | label that are based on, and meant
to extend, the 2.1 core specification.
| | 05:05 | If you want to find out a little bit
more behind the strategy of the W3C
| | 05:09 | regarding CSS, I recommend
reading their Introduction to CSS3.
| | 05:14 | Although it was published in 2001, this
document is a great job of explaining the
| | 05:19 | logic behind the move towards the
modularization of CSS and gives you a list and
| | 05:24 | description of the initial CSS3 modules.
| | 05:27 | From this point on, all future additions
to CSS will update the existing modules
| | 05:32 | or add new ones to the mix.
| | 05:34 | While this is a smart way to make sure
the evolution of CSS responds to the web
| | 05:38 | community's needs, it can make it
difficult to keep track of all of it.
| | 05:41 | In our next movie, we'll do that by
discussing the current state of CSS3 and
| | 05:46 | showing you how you can keep up with
the development of the different modules.
| | Collapse this transcript |
| The current state of CSS| 00:01 | Okay, so now that we know a little but
more about the history of CSS, let's take
| | 00:06 | a look at what is going on with it currently.
| | 00:09 | Now, please keep in mind that the
changing nature of CSS means that what I am
| | 00:13 | about to show you here is likely to
have changed significantly since I
| | 00:17 | recorded this movie.
| | 00:18 | So take what I'm showing you here as
more of a guide to finding out what's going
| | 00:23 | on with CSS, rather than a snapshot of
how it really looks in its current state.
| | 00:28 | To get a high-level overview of
what's going on with CSS, visit the W3C's
| | 00:33 | Cascading Style Sheets Current Work page.
| | 00:36 | Here you are going to find a complete
list of all the CSS modules, their current
| | 00:40 | status, priority level and a
timeline for when the model could reach
| | 00:44 | recommendation status.
| | 00:45 | So let's take a closer look.
| | 00:48 | First, you'll notice that we have a
list of modules and specifications that
| | 00:51 | are split into four groups, based
on level of completion and priority.
| | 00:56 | Listed beside the modules, you'll
see their current status and any
| | 00:59 | upcoming revisions.
| | 01:01 | Now if these modules are live on the
W3C site, you can simply click on the
| | 01:06 | current status for the latest
revision of the specification itself.
| | 01:11 | Now, if I go back and click on the name
of the specification, I am taken to a
| | 01:16 | brief description of it and then a
timeline for the specification track.
| | 01:20 | To help make sense of the module's status,
it helps if you know all the steps of
| | 01:24 | the document goes through on
its way to recommendation status.
| | 01:28 | So let's take a closer look at that as well.
| | 01:30 | I am just going to hit the Back
button to go back to our Current Work page.
| | 01:33 | If I scroll all the way
down towards the bottom,
| | 01:35 | I can see an exclamation of those colors
and the statuses what we are talking about.
| | 01:41 | So, documents are first
published as a public working draft.
| | 01:45 | Now this is the stage where most of
the collaborative work behind the
| | 01:48 | standard itself is done.
| | 01:50 | Once the working draft stage starts
coming to a close, the standard is just
| | 01:53 | going to go into what they
call the last call stage.
| | 01:56 | Now last call, it is just
essentially a way of letting people know that the
| | 02:00 | standard is about to move
to the next stage of testing.
| | 02:02 | So any reviews that people might have,
edits, or additional implementations need
| | 02:07 | to be done before the proposed deadline.
| | 02:11 | Now after this last call, a
standard moves into what they call
| | 02:14 | candidate recommendation.
| | 02:16 | Now although the standard is
considered stable at this point, implementations
| | 02:20 | are being studied and changes can
be made at this stage if required.
| | 02:24 | So they are last-minute changes,
but they can still be done.
| | 02:28 | Now from there, specifications move
on to the proposed recommendation and
| | 02:32 | published recommendation statuses.
| | 02:33 | Now using those as a guide, it's pretty
easy, if we scroll back through this list, to
| | 02:38 | see which models are stable and which
ones still might see significant changes
| | 02:43 | prior to publication.
| | 02:45 | Now, as you would imagine, the
specifications that are listed as high priority
| | 02:50 | are a bit further along
than some of the other specs.
| | 02:53 | However, make sure you don't confuse a
specification's status with the current
| | 02:57 | state of its implementation.
| | 03:00 | Certainly keeping track of the CSS
modules and their timelines will give you a
| | 03:04 | better idea of which modules to focus
on as you learn CSS, versus the ones that
| | 03:09 | maybe you could put off for the near future.
| | 03:11 | However, many of the features that are
currently in working draft status are
| | 03:16 | actually further along in terms of
being implemented by browsers than those
| | 03:20 | that are in some of the
candidate recommendations.
| | 03:23 | The bottom line here is that you need
to keep your eye on both what's going on
| | 03:27 | with the specifications and how
browsers are implementing them.
| | 03:31 | We will discuss how to track browser
implementation a little bit later on, after
| | 03:34 | we are through taking a closer look and
reading through the CSS specifications.
| | Collapse this transcript |
| Exploring specifications| 00:00 | Now that we have a better handle on
how to keep track of what's going on with
| | 00:03 | CSS, let's narrow our focus a bit on how
to explore and read CSS specifications.
| | 00:10 | The CSS modules are technical documents,
and learning from them can be a bit of a
| | 00:15 | chore if you're not familiar with their format.
| | 00:18 | So in this movie, I want to walk you
through the process of using the W3C's site
| | 00:23 | to learn more about a specific
subject, and how to use the specifications as
| | 00:28 | reference documents as you
are learning and authoring CSS.
| | 00:32 | Let's start with the subject we've already
discussed in some detail, CSS selectors.
| | 00:37 | If we go back to the W3C's Current
Work page, we can see that the Selectors
| | 00:42 | Level 3 module is currently
a proposed recommendation.
| | 00:47 | Clicking on the link in the latest
version should take you to the most recent
| | 00:51 | version of the specification.
| | 00:53 | Now, there are ways other than
the CSS Current Work Page to find
| | 00:57 | CSS specifications.
| | 00:58 | For example, if we go back up to our
URL here, and we just take off the css
| | 01:04 | selectors and leave the w3.org/TR,
| | 01:09 | that's going to give us a complete
list of all standards and drafts.
| | 01:13 | If I scroll down a little bit and click on
CSS, I am going to see all of the CSS work.
| | 01:19 | Now here the work is categorized as
belonging to either Completed Work, Drafts
| | 01:25 | or as Obsolete--and we only
have a few of those in CSS.
| | 01:31 | Now drafts in the Obsolete category
are specifications that either never got
| | 01:36 | adopted or whose charter was pulled by the W3C.
| | 01:40 | Now the Drafts, which is considerably
longer--let me go up to the very top
| | 01:44 | of those--you'll notice that the
drafts are ordered by the date of their
| | 01:48 | last published draft.
| | 01:49 | So they're not in alphabetical order,
and sometimes it can be pretty difficult to
| | 01:53 | find one if it hasn't
been published for a while.
| | 01:56 | So if I scroll down a little bit more,
I can find, right there, Selectors Level
| | 02:01 | 3. So, same specification, just
a different way of finding it.
| | 02:04 | Okay, so if I click on this, it
takes me back to that specification.
| | 02:09 | Okay, so no matter really how you
get to a specification, once you're
| | 02:13 | exploring it, it's going to help
you understand what's going on if you
| | 02:16 | understand how the
specifications are structured.
| | 02:20 | All specifications follow the
same basic template and format.
| | 02:23 | So if you learn how the document
structure work, it's going to be a lot easier
| | 02:27 | to find what you are
looking for within the spec.
| | 02:30 | The first thing that you need to do
is to make sure you're reading the
| | 02:33 | most recent version.
| | 02:35 | Now notice that at the very top here,
you are going to see links to This
| | 02:38 | Version, the Latest Version, and the
Previous Version. Don't assume that you're
| | 02:43 | looking at the most recent version, even if
you clicked on the link from the W3C site.
| | 02:48 | Now the first thing I do is always
click right here on this Latest Version link
| | 02:52 | to make sure I'm not reading an older version.
| | 02:54 | I also need to mention here that often
there will be an editor's draft as well,
| | 02:59 | that's a little bit more recent
than the latest version of the
| | 03:02 | published specification.
| | 03:03 | The editor's drafts allow editors to
work on specs and try out revisions before
| | 03:08 | actually publishing them.
| | 03:10 | So often an editor's draft will
actually give you insight into how a process is
| | 03:15 | evolving, but from a reference
standpoint, it's better to go ahead and stick
| | 03:19 | with the published draft.
| | 03:20 | Now let's talk about the
structure of the specifications.
| | 03:23 | At the very top of every specification,
you're going to find this Abstract section.
| | 03:28 | The abstract is going to give you a
brief, if not overly technical, overview of
| | 03:33 | the purpose for this specification.
| | 03:35 | You'll also likely see the Status of
this document section, which will detail
| | 03:40 | the current state of the specification.
| | 03:42 | And that is typically followed by
a very detailed Table of Contents.
| | 03:47 | Thankfully, all of the TOCs in
Specifications are extremely organized and detailed.
| | 03:52 | They are structured in a very
consistently logical way, and usually they can help
| | 03:56 | you find what you are looking for.
| | 03:58 | You know, most the time, I can zero in
on exactly what I'm looking for simply
| | 04:02 | by skimming the TOC,
| | 04:03 | so I always recommend starting in the
Table of Contents of any specification.
| | 04:09 | Okay, so in the case of CSS selectors,
it was pretty easy for us to go to their
| | 04:13 | current work page and scan it, or go to
Standards and Drafts page and find what
| | 04:17 | you are looking for.
| | 04:18 | I mean, selectors is right
there in the title of specification.
| | 04:22 | However, how do find what you are
looking for if you're not exactly sure which
| | 04:26 | specification it's covered in? And after
all, there are ton of modules and specs
| | 04:31 | in the CSS space alone.
| | 04:33 | Well, most of time you can scan the
titles of the modules to get a good idea as
| | 04:37 | to what's being covered, or you can
click to read the description of the module.
| | 04:41 | Now if I go back to the CSS Current
Work page, I can scan through all these
| | 04:46 | titles and sort of see if that's what
I am looking for, or I can click the
| | 04:50 | actual title itself. I get
just a little brief description.
| | 04:53 | That's going to help you
narrow your focus on occasion.
| | 04:55 | You know, I will be honest with you though,
| | 04:57 | there are times you are
just going to need to dig.
| | 05:00 | In any case, I always recommend
actually starting out with the CSS 2.1
| | 05:05 | Specification. Reading through and
familiarizing yourself with the 2.1
| | 05:10 | Specification is going to give a good
idea as to how CSS is organized and which
| | 05:14 | modules to check for any new information.
| | 05:17 | Notice, for example, here in the CSS
2.1 Table of Contents, we see sections for
| | 05:22 | things like Box model, Paged media,
Fonts, Text, and if you were to go over the
| | 05:28 | Current Work page, you can find
modules for each one of those sections.
| | 05:32 | So in that sense, it's pretty easy to
monitor the status of these modules to see
| | 05:37 | how they're changing.
| | 05:38 | Now I also wish the W3C had a better
way of searching through its specs, but
| | 05:43 | honestly, the search feature on the
W3C's homepage doesn't work all that well.
| | 05:47 | Of course, the upside of having to
search through all those multiple
| | 05:50 | specifications is that you will
familiarize yourself with the CSS landscape and
| | 05:56 | gain a greater understanding of how it
all fits together and how it all works.
| | 05:59 | With that in mind, I do have one
final W3C resource to show you.
| | 06:04 | If you're looking to find something
quickly, you may want to take a quick look
| | 06:08 | at the CSS Snapshot.
| | 06:11 | This document gives a quick overview of
the current state of CSS and provides a
| | 06:16 | list of all the current CSS properties,
and index of selectors and index of
| | 06:21 | the available at-rules.
| | 06:22 | Let me show you what I am talking
about. So you can get a quick status and
| | 06:26 | revision on Level 1, Level 2,
and Level 3 of the CSS specification.
| | 06:30 | Now if you are looking for something
in particular, notice that I can click
| | 06:33 | down here on this Property index
and I'm taken to an index of all the
| | 06:37 | properties that CSS has.
| | 06:39 | If I click on the Selector index,
I get a nice little list of every single
| | 06:44 | selector that CSS has available to me.
And if we keep going down, we can see an
| | 06:49 | At-Rule index at the bottom that shows us
all of the @rules like @media, @import,
| | 06:54 | and almost all of these have more
information that's available simple by
| | 06:58 | clicking on a link, so you can
learn more about these as well as reading
| | 07:01 | through the brief description.
| | 07:02 | So this is a really great resource;
I recommend bookmarking this page.
| | 07:06 | Now I should mention that finding what
you're looking for is only part of the equation.
| | 07:10 | Now once you've found it, you are
going to need to make sense of it.
| | 07:13 | CSS specifications are by their very
nature technical documents, and it can be
| | 07:18 | extremely confusing to try to read through them.
| | 07:20 | So in the next movie we are going
to take some time to explore how CSS
| | 07:24 | specifications are structured
| | 07:25 | and how to read through them to
get the information that you need.
| | Collapse this transcript |
| Reading specifications| 00:00 | As a web author, reading through a W3C
specification can be a very tedious task.
| | 00:06 | If you've ever wondered why
that is, there is actually a really
| | 00:09 | simple explanation for it.
| | 00:12 | Specifications are written
for implementers, not authors.
| | 00:16 | In the case of CSS, it means that
specifications describe, in detail, how
| | 00:20 | browser manufacturers or other user
agents should implement the syntax
| | 00:25 | contained within the spec.
| | 00:26 | Now often this will feature detailed parsing
information, error handling, and syntax rules.
| | 00:32 | The very nature of these documents
creates a fundamental disconnect between a
| | 00:36 | W3C specification and most web authors,
| | 00:40 | so I want to take a moment and go
through a CSS specification with you, discuss
| | 00:45 | its structure and how it's organized,
examine the areas that authors should be
| | 00:49 | concerned with and the areas that you
can maybe safely ignore, and discuss how
| | 00:53 | to read the syntax that tells you
how to properly format your CSS.
| | 00:58 | So I want to take you on a tour of the
CSS Fonts Module Level 3 specification.
| | 01:03 | And if you want to follow along with me,
feel free to go to w3.org and search
| | 01:08 | for and find this specification and
open it up, although the structure that I am
| | 01:12 | going to be talking about, the syntax
rules that I am going to be talking about,
| | 01:15 | are really true for every
single CSS specification.
| | 01:18 | So even though we're using this one, it
really doesn't matter which one that we use.
| | 01:22 | Now we talked a little bit about the
structure of specifications in the previous
| | 01:25 | movie, but just as a way to sort of
refresh your memory, remember at the top of
| | 01:29 | each specification, you're
going to find an abstract.
| | 01:32 | The abstract basically talks about
the purpose of the specification,
| | 01:35 | what's contained within it, why
it exists, and what its focus is.
| | 01:39 | You are also going to get
a status of this document.
| | 01:41 | It's going to give you a little
snapshot of where it is within the process,
| | 01:45 | what's currently being worked on,
and what its next steps are.
| | 01:48 | That's typically followed by either a
couple of more sections or a table of contents.
| | 01:52 | You can typically read through the TOC,
get a really good idea as to what's
| | 01:55 | going on within the specification, how
it's structured, and typically you can
| | 01:59 | focus exactly on what you're looking for.
| | 02:01 | Now towards the bottom of the document--and
I am going to let the TOC help us with this--
| | 02:05 | you're going to typically find a
few appendices, maybe some changes,
| | 02:09 | definitely some references, and some indexes.
And I'll talk about the indexes in just a moment,
| | 02:13 | but I want to turn your attention to
these References first, and this word in
| | 02:17 | particular, Normative References.
| | 02:20 | You're going to find that word,
normative, all over CSS specifications and you
| | 02:25 | might be wondering exactly what it
means if you've never run into it before.
| | 02:28 | That's actually a really nice clue for you.
| | 02:31 | If you see Normative, in terms of
describing a section to say, like, for example,
| | 02:35 | this section is normative,
| | 02:36 | that essentially means that that
section is written for implementers and has
| | 02:41 | detailed information as to how certain
parts of the specification are supposed
| | 02:45 | to be implemented within the user agent.
| | 02:47 | As an author, if you see that word,
that's a nice clue to you that you can sort
| | 02:51 | of skim through, or ignore, that section.
| | 02:53 | Now I don't mean to say it's not important.
| | 02:55 | That's not what I'm saying here.
| | 02:56 | What I'm saying is as an author,
you're after the meat of the syntax:
| | 03:00 | what can I do with this, how do I write it?
| | 03:02 | You're not after, how should I
parse through malformed code?
| | 03:06 | That's really for the implementers,
and the word normative is often a really good
| | 03:10 | clue to you that this section
is not written exactly for you.
| | 03:13 | Still good reading, still a smart
idea to skim through it, but maybe not
| | 03:16 | something that you want
to focus on quite as much.
| | 03:19 | Now the indexes, I want to talk about those too.
| | 03:21 | Indexes are great because not only do
you get a normal index where you can go
| | 03:25 | look for a specific thing, click,
and jump to that, but typically, most CSS
| | 03:29 | specifications will also have a property index.
| | 03:33 | These property indexes are great because
they're going to go and give you a nice
| | 03:37 | sort of overview, or snapshot, of all
the properties that are contained within
| | 03:41 | this specific specification.
| | 03:43 | They're going to give you the property,
the values that's acceptable for those
| | 03:46 | properties, the initial value, what
they apply to, so a really nice summary of
| | 03:51 | all the properties within the specification.
| | 03:54 | And often, if you're just looking for a
specific property, this might be the best
| | 03:57 | place to start looking.
| | 03:58 | So I am going to go back up to the TOC,
and I want to talk about the way that
| | 04:02 | the properties themselves are written
out and structured, and what you can glean
| | 04:06 | from them as an author.
| | 04:07 | And I am going to start at the top
section in the Fonts module, which is the
| | 04:11 | Basic font properties.
| | 04:12 | I am just going to jump down to that section.
| | 04:15 | Okay, so the first property that
I see is the font-family property.
| | 04:19 | Now some properties are described in a
huge amount of detail, while as others
| | 04:23 | only get maybe one or two paragraphs.
| | 04:25 | The font-family property is
described in a large amount of detail.
| | 04:29 | If I scroll through this,
you can see what I'm talking about.
| | 04:31 | There's a lot of information
that's being given to us here.
| | 04:35 | So this is a really good one to start with.
| | 04:36 | They're not all that detailed, but it's
nice to know that on occasion they do go
| | 04:40 | into that amount of detail.
| | 04:41 | Now the first thing I want to show you
is this little snapshot right here, which
| | 04:45 | is actually the same information
that we just saw in the property index--
| | 04:48 | value, what it applies to, that sort of thing.
| | 04:51 | There is some really good information here.
| | 04:53 | First off, I want to show you one that a
lot of people typically ignore, which is Media.
| | 04:57 | Here it says font-family
applies to visual media.
| | 05:00 | Now that's really helpful to know,
because if I'm writing a style sheet, for
| | 05:04 | example, for a screen reader, for an
assistive device like that, I know that
| | 05:07 | that's not a visual device, so I know
font-family isn't the property that that
| | 05:10 | particular device is going to respond to.
| | 05:12 | So I can safely sort of ignore
setting font-family on anything, whereas for
| | 05:16 | a visual like screen or projection, I
definitely want to pay attention to this property.
| | 05:20 | We also see that it can apply to all
elements, so there's not a single element
| | 05:23 | within HTML that we can't write font-family for.
| | 05:25 | The values are inherited.
| | 05:27 | So there's a lot of information I can glean
from just looking at this little snapshot.
| | 05:30 | Now the thing that probably confuses
the most people when they initially start
| | 05:34 | trying to read CSS specifications
are the actual values themselves.
| | 05:38 | I mean this looks like gibberish,
but it's describing to you exactly how to
| | 05:42 | write the font-family syntax.
| | 05:44 | Now this is actually something called BNF,
which is the Backus Normal Form notation,
| | 05:49 | and it's simply a way to represent
the grammar of computer languages.
| | 05:54 | So obviously, for humans it can
be a little confusing to read.
| | 05:57 | Now the more that you're exposed to
this syntax and the more that you see the
| | 05:59 | resulting CSS syntax that comes
from it, the easier it is to read BNF.
| | 06:04 | But I am going to give you just a
couple of pointers here to help you along the
| | 06:07 | way, and we're going to go ahead and
use font-family to help us do this.
| | 06:09 | Okay, the first thing that you're
going to notice are these brackets.
| | 06:12 | We can see, for example, that
brackets contain this entire first section.
| | 06:16 | Well, brackets actually do two things for us.
| | 06:18 | Number one, they help group content,
so they are sort of grouping all this
| | 06:21 | together as a single choice.
| | 06:23 | They also tell you that
certain things are optional.
| | 06:26 | So a bracket is either grouping
something together, telling you that something
| | 06:30 | is optional, or it may be both.
| | 06:32 | So in this case, for example,
notice that we also have a grouping of
| | 06:36 | family-name or generic-family.
| | 06:39 | And this sort of pipe character,
this vertical line that we see there,
| | 06:42 | that serves as an or.
| | 06:43 | So when we see that, we could say okay,
family-name or generic-family, which is
| | 06:49 | followed by a family-name or a generic-family.
| | 06:51 | We also see this comma.
| | 06:53 | That lets us know that if we're going to
use more than one of those, we're going
| | 06:56 | to separate those with a comma.
| | 06:57 | So we could do a family-name, family-name.
We can do family-name, generic-family.
| | 07:03 | And then we also see that we have
this little asterisk right there.
| | 07:07 | And whenever you have a group in
brackets followed by another symbol, that
| | 07:10 | symbol is typically telling you something.
Asterisk, for example, indicates that
| | 07:15 | from that following group,
you could list zero or more.
| | 07:19 | If there was a question mark, for
example, you could use one or none from
| | 07:22 | the following group.
| | 07:23 | So there's always a nice little
indicator as to how many of those items.
| | 07:28 | In this case, you can use as many as
you want, so you could have five family
| | 07:31 | names in a row if you wanted to, or two
family names, or one; it's totally up to
| | 07:35 | you as to how many you want to use;
| | 07:37 | or you could use the keyword inherit.
So there's that little "or" again.
| | 07:40 | So it's like you could either use values from
this group, or you could use the value inherit.
| | 07:46 | Okay. One more thing too.
| | 07:47 | Whenever you see these little greater
than or less than brackets, that typically
| | 07:51 | means that whatever is
inside here is a computed value.
| | 07:55 | Now, that could be a length.
| | 07:56 | So whenever you see these little
bracket notations, sort of less than and
| | 08:00 | greater than brackets,
| | 08:01 | that means that whatever is inside of
that is a computed value, meaning you
| | 08:04 | don't actually use family name;
| | 08:06 | you would figure out what
family name you're going for.
| | 08:09 | Now typically, typically, most
properties are going to explain these computed
| | 08:13 | values in more detail a little bit later on.
| | 08:16 | So if I was to scroll down, for example,
I could see that indeed family-name and
| | 08:21 | generic-family are described in more
detail a little bit later on, and I could
| | 08:25 | indeed see that family-name and generic-
family are described in more detail and
| | 08:28 | I get more information about
exactly what they are looking for there.
| | 08:31 | Now another thing that I get after I
sort of slog through all of this stuff here
| | 08:36 | is I get nice examples of code.
| | 08:39 | So I can see that in this case
here's a family name, comma, another family
| | 08:44 | name, comma, a generic family.
| | 08:46 | So I can see exactly what
this is telling me up here.
| | 08:50 | I can use one of these, one of these,
and I can string them together using commas.
| | 08:54 | And this tells me I can use
as many of those as I want.
| | 08:57 | Now, specifications don't always do this,
but in the case of this property, we
| | 09:02 | also get to see code.
| | 09:03 | We also get to see examples of
invalid code that's being written.
| | 09:06 | So pay attention to both the good
examples that they show you, and if they ever
| | 09:10 | show you invalid code,
take a look at that as well.
| | 09:12 | It's really going to help
you write your syntax properly.
| | 09:16 | Now value notation isn't always this
complex, and it's not always that simple.
| | 09:21 | If I were to scroll down, for example,
and go down to, say, font-weight, I can see
| | 09:25 | this is very simple.
| | 09:27 | So I have these keywords separated by
an or, these values separate by ors, or
| | 09:32 | inherit. So I can use one of
those values, it's an either/or.
| | 09:35 | And then a little bit later on it explains
to me what exactly all these numbers mean.
| | 09:39 | Now it can also be a lot more complex.
| | 09:41 | If I go back to the TOC and I go down
to the Shorthand font notation, you can
| | 09:45 | see this is a lot more
complex than what we had before.
| | 09:49 | There are a couple of things we
haven't seen here before, for example, these
| | 09:51 | little double pipes.
| | 09:53 | These little double vertical lines
indicate that each value is possible and
| | 09:57 | that if you use more than one of these
values, you're going to separate them
| | 10:01 | with whitespace instead of a comma.
| | 10:03 | So these are little things that you're
going to pick up on the more you look
| | 10:06 | at this notation and the more that you look
at the code that results from this notation.
| | 10:10 | Now as I mentioned to you before, there
are always sections that you can kind of
| | 10:14 | safely ignore when you're reading
through the specification, because they're
| | 10:18 | written primarily for implementers.
| | 10:19 | If I go back to the TOC, I can go to the
section of the Font matching algorithm.
| | 10:25 | I would definitely encourage you to
read through these sections, because
| | 10:28 | they're going to help you understand
how these properties are implemented within the browser.
| | 10:32 | But after reading through the first
couple of lines of this, it's pretty obvious
| | 10:36 | that this isn't telling an author how
to write styles within a style sheet;
| | 10:40 | it's telling a manufacturer or an
implementer how exactly to implement the code
| | 10:45 | within the user agent.
| | 10:47 | So this isn't as useful to authors
as it is, obviously, to implementers.
| | 10:51 | So I would recommend that when you run into
one of these sections, sort of skim through it.
| | 10:55 | If it has some really good meaty
information about how browsers are going to
| | 10:58 | be implementing it,
| | 10:59 | it's just going to set you apart from
most authors and you're going to know
| | 11:02 | more about the process.
| | 11:04 | But overall, you can safely sort of
skim through those sections and maybe not
| | 11:07 | read through them quite as thoroughly.
| | 11:09 | Now there's one more thing that I want
to point out about the specifications.
| | 11:12 | They are living documents.
| | 11:13 | Unless they are a published
recommendation, they are being revised.
| | 11:17 | And if you scroll through this one,
you're occasionally going to see these
| | 11:19 | little red notes that says Issue.
| | 11:22 | Sometimes they'll be questions,
sometimes they'll actually mention people by
| | 11:25 | name, but they're basically
showing you sort of issues that are still
| | 11:29 | outstanding with the specification,
and the next version or next few versions
| | 11:35 | should be addressing these concerns.
| | 11:38 | What's nice about that as an author is
you can sort of read through those and
| | 11:41 | get a feel for parts of the
specification that maybe aren't quite as solid and
| | 11:45 | aren't quite as resolved.
| | 11:47 | You could sort of get an idea as
to what's coming down the pipe.
| | 11:49 | For example, as an author, I am very
excited about OpenType features being
| | 11:53 | available in browsers, but I know
from reading this that there's still some
| | 11:56 | questions on how that works.
| | 11:58 | And also, if you're reading through these,
you may have an opinion on this as an author.
| | 12:02 | You may have a specific opinion on how
you think browsers ought to implement that.
| | 12:06 | Well, you can join the W3C's mailing
list and you can add your voice to the
| | 12:10 | chorus and make your opinions known
on how these ought to be implemented.
| | 12:13 | It's a very, very public process.
| | 12:15 | That's one of the things I really love
about reading through the specifications
| | 12:18 | is being a part of that process.
| | 12:20 | I know it didn't feel like it probably,
but that's actually a really brief
| | 12:22 | overview of how to make sense of the CSS
specification from an author's point of view.
| | 12:27 | If you really want to dig into
CSS and learn it from the ground up,
| | 12:30 | there's actually no better way to
do that than spending time in the
| | 12:34 | specifications themselves.
| | 12:36 | I wasn't able to cover all of the
syntax or formatting that you're going to
| | 12:39 | encounter when reading these
specifications, but you should have a pretty good
| | 12:43 | idea of how to find your way around a
spec, the areas that you can sort of skim
| | 12:46 | over, what to pay attention to,
and more importantly, how to read the syntax to
| | 12:50 | make sure that you're going
to format your rules properly.
| | 12:53 | If something doesn't really seem to
make a whole lot of sense, just be sure to
| | 12:57 | examine the provided examples really carefully,
| | 12:59 | and usually they're going to help
you understand what's acceptable for a
| | 13:02 | property and sort of how it works.
| | 13:04 | So just don't be
intimidated by the CSS specifications.
| | 13:07 | The more time that you're going to
spend reading them, the more that you're
| | 13:10 | going to get out of them.
| | Collapse this transcript |
| Checking browser support | 00:00 | As I mentioned earlier, knowing what's
in the specification is only half of the
| | 00:04 | process of understanding CSS.
| | 00:06 | You see, browsers haven't
implemented everything in the specifications,
| | 00:11 | and some of the things that are
implemented aren't implemented consistently.
| | 00:15 | Remember, CSS is a constantly evolving language,
| | 00:19 | and the price of that flexibility
means that as an author you have a
| | 00:23 | responsibility to understand what works
seamlessly across browsers, what you'll
| | 00:27 | need to tweak, and what you'll need
to keep an eye on for future support.
| | 00:32 | So, how do you track browser support?
| | 00:34 | Well, one way is simply test them yourself.
| | 00:38 | Ideally, when designing web sites,
you'll want to test in Safari, Chrome,
| | 00:43 | Firefox, Opera, and Internet Explorer.
| | 00:44 | Of course, in many cases, you'll need
to test across multiple versions of those
| | 00:50 | browsers as CSS support changes
over the course of browser versions.
| | 00:55 | Web authors can no longer
ignore mobile devices either.
| | 00:59 | Unfortunately, testing on mobile
devices is considerably trickier than desktop
| | 01:03 | testing, but there are online
services that can help you see what your site
| | 01:07 | looks like in a mobile space.
| | 01:09 | Simply put, there is no substitute for
testing your pages on as many browsers
| | 01:14 | and devices as you can.
| | 01:16 | The reality of course is that
testing across a wide array of devices and
| | 01:19 | browsers isn't always really feasible.
| | 01:22 | You should work to build as wide a test
suite as you can within your environment,
| | 01:26 | but realistically, you're often going
to need to rely on knowing what does work
| | 01:31 | and what doesn't work in various
browsers and various platforms.
| | 01:34 | Now thankfully, there are a lot of
online sites that can help you get a better
| | 01:37 | understanding of what is and what
isn't supported in various browsers,
| | 01:41 | so let's go take a look at a couple of them.
| | 01:43 | Now I want to start with caniuse.com.
| | 01:46 | This is a great site for checking
browser compatibility, especially as it lists
| | 01:51 | not only desktop browsers, as we can see
here, but also mobile browsers as well,
| | 01:56 | which is really nice.
| | 01:57 | Now, you can filter by different categories.
| | 02:00 | So you can see right now, I'm just
looking at CSS properties, but you can also
| | 02:03 | look at HTML5, the JavaScript API, SVG.
| | 02:07 | So there are a lot of things here that
we can see what their support level is in
| | 02:11 | current browsers, which is very nice.
| | 02:13 | Now you're also going to see that a
lot of these properties have links to
| | 02:15 | external reference articles or
examples as well, which is really nice.
| | 02:19 | Now as you scroll through this, you're
going to notice that the site is focusing
| | 02:23 | more on CSS3 properties and some of the
recent additions to CSS, but it's still
| | 02:28 | a great reference and resource for you
to start with, especially for some
| | 02:32 | of the newer properties of CSS.
| | 02:34 | Now another fantastic resource is
Peter-Paul Koch's, or PPK as he is better known,
| | 02:40 | his site quirksmode.org.
| | 02:42 | This has by far the most comprehensive
list of browser compatibility charts online.
| | 02:47 | Now, the Compatibility Master Table
which I'm showing you right now gives you a
| | 02:52 | series of compatibility tests that
you can then explore in more detail.
| | 02:56 | For example, from here I can
take a look at the CSS2 or CSS3
| | 03:00 | compatibility table.
| | 03:01 | So I'm just going to click over on CSS2 to
show you this in a little bit more detail.
| | 03:05 | From there, if I scroll down, notice
that he has a ton of browsers that he tests
| | 03:09 | against, IE 5.5 all the way though IE 9.
| | 03:12 | It goes in Opera, Konqueror,
although Konqueror, I don't think
| | 03:16 | he has had a lot of testing going on there.
| | 03:18 | But Firefox, Safari, Chrome. Some of the
versions you're going to see here are a
| | 03:21 | little behind of times.
| | 03:23 | He doesn't keep this as updated as he
used to, because he's got so much
| | 03:26 | other stuff going on,
| | 03:27 | but this is still a great place to start.
| | 03:29 | So you'll notice, as I scroll through here,
there's so many different properties,
| | 03:33 | selectors, and declarations that he tests for.
| | 03:36 | There's a lot going on here,
and there's a lot of information that you can
| | 03:38 | pull from this site.
| | 03:39 | Now another great source of
information is, as always, Wikipedia.
| | 03:44 | And these guys have an awesome
comparison of CSS support for different
| | 03:48 | browser-rendering engines.
| | 03:49 | So you wanted to look at the comparison of
layout engines, Cascading Style Sheets page.
| | 03:53 | You can just go to Wikipedia and search
for that, and it will take you right to this.
| | 03:56 | Now the trick here--I'm going
to scroll down a little bit--
| | 03:58 | the trick here is to realize that
you're looking at rendering engines.
| | 04:03 | Remember, we talked about
rendering engines a little earlier and not
| | 04:06 | actual browser versions.
| | 04:07 | So you might have to do a little bit of
digging to figure out things like which
| | 04:12 | version of Chrome is driven by which
version on the WebKit rendering engine.
| | 04:15 | But once you have that, this
list is amazingly thorough.
| | 04:19 | I'm just going to do a real sort of
brief scan through this, just so you can see
| | 04:24 | how much information regarding CSS
is covered here. It is incredible!
| | 04:31 | The other really nice thing about this
is that it includes nightly build support
| | 04:35 | as well and experimental
support, as you can see here.
| | 04:38 | So there's a lot of information
here that you can glean through, a lot of
| | 04:42 | links and references that you can
click on to go get a little bit more
| | 04:44 | information about this.
| | 04:45 | So when you're really digging in the
details of it, and you don't mind sort of
| | 04:49 | researching which version of
rendering engine is driving which browser,
| | 04:52 | this is a really good table to take a look at.
| | 04:56 | Somewhat older, but I also
really recommend checking out
| | 04:59 | positioniseverything.net.
| | 05:00 | If you've ever watched some of my older CSS
titles, you'll know that I love this site.
| | 05:03 | I went to it to almost all the
time in some of my older CSS titles.
| | 05:07 | So this site does consist of primarily
older information, but it is absolutely
| | 05:12 | still the go-to guide on browser bugs
and ways around those browser bugs.
| | 05:17 | And its primary focus, as you would
imagine, is on Internet Explorer and some of
| | 05:20 | those older versions of it.
| | 05:22 | IE 6 isn't dead yet as of this recording;
IE 7 is still being used a good bit;
| | 05:26 | IE 8 is still being used a good bit;
| | 05:27 | so you're still going to need to know
how to solve some of those browser errors
| | 05:31 | and those browser bugs.
| | 05:32 | And if you're brand new to CSS,
reading through these past articles is really
| | 05:36 | going to give you a nice solid
foundation into browser and standards
| | 05:39 | development over time.
| | 05:40 | So it'll give you good ideas to sort of
how browsers have evolved over time and
| | 05:44 | the level of standards support that they have.
| | 05:47 | Finally, there is no better place
to check for support than the actual
| | 05:51 | browsers themselves.
| | 05:52 | Now Mozilla, I can't say
enough about their documents.
| | 05:55 | They do such an awesome job of
documenting not only browser support, but all
| | 06:00 | sorts of things going on with their browsers.
| | 06:02 | Check out their page on CSS
support at the Mozilla Developer Network.
| | 06:06 | So you can just go to the
developer.mozilla.org and search for CSS Support.
| | 06:11 | Now as I scroll through this, however,
you can see how comprehensive this is.
| | 06:15 | It starts with selectors,
and it's just going to go right on down.
| | 06:19 | It's going to tell you whether it's
supported, which version it's supported in,
| | 06:23 | and what specification--with a link
to that specification, I might add--to
| | 06:27 | help you out as well.
| | 06:28 | And you can see from the length of
this table the amount of information
| | 06:31 | that's covered here.
| | 06:32 | I think this is a great cheat sheet to
come to and just find all the different
| | 06:36 | CSS properties, values,
and selectors in one great huge list.
| | 06:41 | And the other really nice thing about
this is if there is a bug in Mozilla's
| | 06:46 | current implementation of that, it'll
take you right to the bug tracker, so you
| | 06:49 | can go to read about the bug, who filed
it, what the errors are, and maybe see
| | 06:54 | what the current status of that bug is as well.
| | 06:56 | So this is a great resource for you.
| | 06:59 | The Safari Developer Library also has a
similar resource involving CSS support.
| | 07:04 | And if I go to developer.apple.com and
look though the Safari documentation,
| | 07:08 | what you're looking for is the CSS reference.
| | 07:10 | So that's what you want to search for.
| | 07:12 | But here we are at the Introduction
page, and we can see that we have an
| | 07:15 | Explanation of Terms, which is
we can go through the terminology.
| | 07:17 | Supported CSS Properties, I'm
just going to click on that.
| | 07:20 | And it's going to go through those in
detail, maybe not in a table format, the
| | 07:24 | way Mozilla does it, but in a
really nice sort of readable format.
| | 07:27 | So this is a great resource too.
| | 07:29 | It also contains links to related
content, which is really going to help you
| | 07:33 | sort of understand Safari's and
WebKit's capabilities overall.
| | 07:37 | Now Chrome doesn't have a detailed CSS
resource page, at least not one that I
| | 07:41 | could find, like Mozilla or Safari,
| | 07:44 | but I do recommend reading The Chromium Blog.
| | 07:47 | It's a great way to keep up with
what's going on with Chrome. Any changes to
| | 07:51 | implementations are going to be written
about here, and it's also giving to keep
| | 07:54 | you informed on support issues,
| | 07:55 | so this is a great blog to kind of read.
| | 07:57 | Now for the most part, since
Chrome is a WebKit-based browser, the
| | 08:01 | reference information that I was
just showing you on Safari's site will
| | 08:03 | also apply to Chrome.
| | 08:05 | Now just like Mozilla,
I'm absolutely in love with Opera's documentation.
| | 08:11 | So if I go to opera.com/docs/specs,
I'm going to see all of the rendering
| | 08:18 | engines, the past versions of the
Opera's Presto rendering engine here, and their
| | 08:22 | support for web
specifications, which is really cool.
| | 08:24 | So if I go to the latest one,
Opera Presto, say 2.9, and click on that, notice
| | 08:29 | that I get a full list of properties here
that are supported and what level of support.
| | 08:34 | So if I just go to say CSS Properties,
I see I get a really detailed table
| | 08:39 | here of all the different properties, the
accepted values for it, a nice description of it--
| | 08:44 | this is a nice teaching tool as well--and
then whether that is supported within Opera.
| | 08:48 | And if you scroll down though here, you
can see, they will really tell you when
| | 08:51 | they've got partial support, when
something is fully supported, or whether
| | 08:55 | something is not supported, although
they don't have anything here within the
| | 08:58 | properties that currently is not supported.
| | 09:01 | Now not to be left out, Microsoft has
a really detailed CSS reference as well
| | 09:07 | for Internet Explorer.
| | 09:08 | This is a little harder to find.
| | 09:10 | You're going to want to msdn.microsoft.com
and go into the Library section and
| | 09:15 | search for CSS Compatibility.
| | 09:17 | Now it's worth the search though,
because what you're going to get here is an
| | 09:22 | extremely detailed table that's
a lot like the Mozilla's table.
| | 09:26 | And it's going to give you all the
way from Internet Explorer 5 through
| | 09:29 | Internet Explorer 9.
| | 09:31 | And I would imagine in the very near
future you're going to Internet Explorer
| | 09:33 | 10 up there as well.
| | 09:36 | It's going to show you what's supported,
whether it has partial support, full support.
| | 09:40 | This is a great place to go learn about
what Internet Explorer supports and what
| | 09:45 | it doesn't support, so I recommend
definitely reading through this as well. Okay.
| | 09:51 | Now, hopefully those are enough
resources to get you started.
| | 09:54 | I would imagine you can at
least get started with those, right?
| | 09:57 | I realize that probably after
watching through all these CSS specification
| | 10:01 | movies and support movies in this chapter,
you might be a little overwhelmed. My advice: don't be.
| | 10:07 | You don't have to know all of this at
once to start writing and using CSS.
| | 10:12 | The good news is that most
modern browsers fully support CSS 2.1,
| | 10:16 | so you can usually write valid CSS
based on the 2.1 specification, and
| | 10:21 | be reasonably confident that your designs
are going to function well across browsers.
| | 10:26 | However, don't let that particular comfort
level keep you from learning these details.
| | 10:31 | Simply make reading through the
specifications and becoming familiar with
| | 10:34 | browser support levels are part
of the process of you learning CSS.
| | 10:39 | You'll find that you grasp concepts a
little quicker, write more efficient CSS,
| | 10:43 | and create designs that work more
consistently across browsers and platforms.
| | Collapse this transcript |
|
|
3. Common CSS ConceptsWorking with fonts| 00:00 | In this chapter, I want to spend some
time going over some of the common CSS
| | 00:03 | concepts that you are likely to
encounter when using style sheets.
| | 00:07 | While the main focus will be to
provide you with a broad overview of topics,
| | 00:11 | we will spend some time exploring syntax and
best practices to use when authoring styles.
| | 00:16 | I want to start by focusing on fonts.
| | 00:19 | Controlling typography is often the
first thing the designers learn to do when
| | 00:22 | using CSS, and for good reason.
| | 00:25 | Typography is so important to your
design and what you're trying to communicate
| | 00:29 | that it's just a natural starting point.
| | 00:31 | Remember, if you don't specify a font
and format your text, your content will
| | 00:35 | receive the browser's default styling.
I highly doubt that that's the look
| | 00:39 | that you are going for.
| | 00:40 | The first thing that you will need to
decide when choosing a font for your site
| | 00:43 | is whether you want to use the older,
more widely supported system fonts or take
| | 00:48 | advantage of the emerging
technique of using web fonts.
| | 00:51 | Let's take a moment to discuss
the differences between the two.
| | 00:54 | Now in the past, designers have been
limited to using a small set of fonts that
| | 00:59 | are preinstalled on almost every machine.
| | 01:01 | These are called system fonts, and I
have no doubt that you have used them at
| | 01:05 | one time or another.
| | 01:06 | Fonts like Arial, Helvetica, Verdana,
Times, Times New Roman, and Courier, and yes,
| | 01:13 | even Comic Sans, are so common on the
web that you're more likely than not to
| | 01:18 | encounter at least one of
them every time you go online.
| | 01:22 | So, why are these fonts so popular?
| | 01:25 | Well, it has very little to do with
the popularity or quality of the fonts,
| | 01:29 | although most of them are quite good,
and everything to do with their ubiquity.
| | 01:33 | Until recently, HTML and CSS contained
no mechanisms for displaying a font that
| | 01:38 | wasn't already installed
on the client's machine.
| | 01:41 | You could certainly specify that you
wanted your web pages to use Garamond, but
| | 01:45 | unless the person viewing your page had
Garamond installed, it would fall back to
| | 01:49 | the system's default font.
| | 01:51 | You can see this concept illustrated
most clearly by looking at the syntax for
| | 01:54 | declaring font families.
| | 01:56 | Now at first glance, this may look a little odd.
| | 01:59 | Here the designer seems to be asking
for more than one font for all paragraphs.
| | 02:04 | In reality, what this syntax allows
designers to do is to provide fallback fonts
| | 02:09 | in case the first one requested
isn't found on the client's system.
| | 02:13 | In this case, the first choice would be Arial.
| | 02:17 | If Arial wasn't installed,
it would then request Helvetica.
| | 02:20 | If Helvetica wasn't found,
it would then request Verdana.
| | 02:24 | And if in the unlikely event that one
of those three fonts weren't found, it
| | 02:28 | would finally ask for the
system's default sans-serif font,
| | 02:32 | so that at least the text would display
in the style that the designer wanted.
| | 02:36 | Now is there anything wrong with that?
| | 02:39 | No, actually there isn't.
| | 02:41 | Many of the system fonts, like Georgia
and Verdana, were designed specifically for
| | 02:45 | the screen, making them very
functional choices for web sites.
| | 02:49 | However, recent advances to CSS and
browser support now make it possible to use
| | 02:54 | a much wider array of fonts.
| | 02:56 | By now you've probably heard of web fonts.
| | 02:59 | Web fonts is simply the term
typically used to describe the technique of
| | 03:03 | embedding font files in web
pages using the @font-face method.
| | 03:08 | This allows web authors to use fonts
without worrying about whether they're
| | 03:11 | installed on the client machine or not.
| | 03:14 | The CSS @font-face rule has
actually been around for quite some time,
| | 03:19 | but only recently has browser support,
font formats, and licensing issues reach
| | 03:24 | the stage where it's actually feasible to use.
| | 03:27 | Web fonts typically work by having an
@font-face rule, such as this one, in your
| | 03:32 | styles that point to an external font resource.
| | 03:35 | Now, this could be a font that you host
yourself or one that's hosted through any
| | 03:40 | number of recent font hosting services
that have appeared to support web fonts.
| | 03:45 | Now, I know that this syntax looks a
little complicated, but trust me, it's not
| | 03:50 | as bad as you think.
| | 03:51 | There are also plenty of online
resources that can help you find fonts and even
| | 03:55 | generate the syntax for you.
| | 03:57 | I'll list some of those in the final chapter.
| | 04:00 | If you want a deeper look into web
fonts, check out my lynda.com title,
| | 04:04 | Web Fonts First Look.
| | 04:06 | What all this means is that when you
are working with fonts in CSS, you have
| | 04:10 | three basic choices:
| | 04:11 | first, you could rely on the
browser to supply the user's default font;
| | 04:16 | second, you can specify a preferred
system font and then provide fallback fonts
| | 04:21 | all the way down to specifying the
generic font family to use in case the client
| | 04:25 | machine doesn't have the defined fonts
installed; or third, you can use @font-face
| | 04:31 | to supply custom fonts to the browser.
| | 04:34 | You could also use a blended
approach, where you use web fonts but provide
| | 04:37 | fallback system fonts to the user
agent if it doesn't support web fonts.
| | 04:42 | Okay, now that we have we talked little
bit about some of the different ways you
| | 04:45 | can use fonts with CSS, we will move on
and talk about some of the options for
| | 04:49 | formatting fonts, and we'll do that next.
| | Collapse this transcript |
| Formatting text| 00:01 | So now that we know a little bit more
about how fonts work with CSS, let's take a
| | 00:05 | look at how they're formatted.
| | 00:07 | While CSS doesn't provide you with quite
a level of control over typography that
| | 00:11 | most desktop publishing programs do,
| | 00:13 | you still have some very powerful
typographic options when writing styles.
| | 00:18 | As we begin exploring text
formatting options, we will not only examine the
| | 00:21 | properties themselves, but we are also
going to see them in action as we preview
| | 00:25 | how the styles we are
discussing affect a sample HTML page.
| | 00:29 | Keep in mind that in this course we
are going to concentrate on more of the
| | 00:33 | concept than the actual syntax itself.
| | 00:36 | If you are looking for a deeper dive
into the ins and outs of the syntax, I
| | 00:39 | would recommend exploring some of the other CSS
courses in the lynda.com Online Training Library.
| | 00:46 | Let's start with something we've
already discussed, choosing a font.
| | 00:49 | To define fonts, you use
the font-family property.
| | 00:53 | You can define a single font, or you
can provide a fallback list of fonts,
| | 00:57 | separated by commas, that instructs the
browser to use the next font in order if
| | 01:01 | the previous font isn't
found on the client's system.
| | 01:04 | In this example, all the text on
the page would be set to Georgia.
| | 01:07 | Now if that's not available,
it would be set to Times New Roman.
| | 01:11 | If that wasn't available, it would
be set to Times, and if Times wasn't
| | 01:15 | available it would just say, okay, just go
ahead and give me your default serif font.
| | 01:20 | Now in terms of the syntax, note that
Times New Roman is in quotation marks since
| | 01:24 | there's more than one word in the font's name.
| | 01:26 | Here is how our page would
look with the new font applied.
| | 01:30 | Now to control the size of the
text, use the font-size property.
| | 01:34 | CSS gives you a ton of options for
defining size as you can use a diverse
| | 01:39 | group of measurements.
| | 01:40 | Now I know this syntax looks a little
weird, but I'm just basically giving you
| | 01:44 | the same syntax that they give
you within the specification.
| | 01:47 | Now in one of our earlier chapters we
took a look at reading through the CSS
| | 01:50 | specifications and what all these
meant. Just so you'll know, we have some
| | 01:55 | computed values of
absolute-size and relative-size--
| | 01:57 | those are about the keywords that you could use--
| | 02:00 | computed length which is what we are
going to focus on, or a percentage, or you
| | 02:04 | could use the inherit value,
which is the default value for text.
| | 02:08 | Later on I am going to explore the
units of measurement that we can use for
| | 02:12 | things like this in more detail,
but for the moment I want to focus on the
| | 02:16 | difference between using units
like pixels and units like em.
| | 02:19 | So I am going to focus on the
length value that you're seeing here.
| | 02:22 | Length is basically saying, just give me a
value and I will compute the length for you.
| | 02:26 | So I want to talk about differences
between using units like pixels and ems.
| | 02:30 | Now pixels are fixed size or fixed
units, meaning that if I set a font size to
| | 02:36 | 16 pixels, it's going to be 16 pixels,
regardless of which user agent it's viewed on.
| | 02:41 | Now if, on the other hand, I use a
relative unit such as em, the font size is
| | 02:46 | relative to the device's current default size.
| | 02:49 | And if you want to
visualize this, take mobile devices.
| | 02:52 | 16 pixels may look great on your
desktop for body copy, but notice how huge it
| | 02:57 | would be on a mobile device.
| | 02:59 | Now if, for example, I said 1em, I'm
essentially telling the device to set the
| | 03:03 | font at 100% of its default font size,
which is one size on desktop and another
| | 03:09 | size on a mobile device.
| | 03:10 | It's a way to bring a little bit
more flexibility to your design.
| | 03:13 | So let's go back to our example.
| | 03:16 | Now, here you can see that we are
setting the font size of the headings and the
| | 03:19 | paragraphs to be relative to each other.
| | 03:23 | The main heading will be 1.6ems,
secondary headings will be 1.4, heading 3s will
| | 03:29 | be 1.2ems, and then finally the
paragraph themselves will be 1em, and this is
| | 03:33 | going to establish a strong
relationship between all of them. And when I go
| | 03:36 | ahead and apply that,
| | 03:37 | I can see how now the size of the text
changes to reflect that new relationship.
| | 03:42 | Now if you are looking to set text as
either bold or italic, you are going to
| | 03:46 | use the font-weight and font-
style properties respectively.
| | 03:50 | Now font-weight can be either
expressed as bold, normal, told to inherit, or
| | 03:55 | it can be specified as a numeric weight
from 100 to 900, 100 being the lightest,
| | 04:00 | 900 being the boldest.
| | 04:02 | Now font-style allows us to specify
italic, normal, oblique, or inherit.
| | 04:08 | Now if I go back to our example, you
can see how easy it is to set all of
| | 04:11 | our span text to bold,
| | 04:13 | then write custom styles for our
title class, to set it as italicized, and
| | 04:18 | overwrite the bold, and then write a
specific style for author as well.
| | 04:22 | And we will go ahead and
apply that and we see the changes.
| | 04:24 | Now another font property that I
want to discuss is font-variant.
| | 04:28 | Font-variant allows you to set
text as small caps. Within the title
| | 04:32 | there, we can see how that looks.
| | 04:34 | And this is a feature that you're not
going to probably need that often, but
| | 04:38 | it's nice to know that it's available.
| | 04:40 | So essentially we are setting the
author's name here, in this case inside of
| | 04:43 | an h3 as small-caps.
| | 04:45 | Now in a similar vein there are probably
going to be times that you are going to
| | 04:48 | want to control the capitalization of text.
| | 04:50 | You will probably need to do that more
frequently, to be honest with you, and for
| | 04:53 | that you are going to use
the text-transform property.
| | 04:56 | That allows you to set text in all
caps, uppercase, all lowercase, and then
| | 05:01 | automatically capitalize text
through the capitalize property.
| | 05:05 | As you can see, if we set
text-transform to uppercase, our h2 is transformed and
| | 05:10 | the text is displayed in all caps.
| | 05:13 | The text-align property allows us--
I'm sure you can guess--to control the
| | 05:16 | alignment of our text.
| | 05:18 | You can choose between left, which is
the default, center, right, and justified.
| | 05:22 | As you can see here in our example, all
of our text is left aligned by default,
| | 05:26 | but by modifying the styles, we can set
our paragraphs to be justified and our
| | 05:30 | quote to be center-aligned.
| | 05:33 | The text-indent property allows you to
set a value to indent the first line of a
| | 05:37 | block-level element such as a paragraph.
| | 05:40 | Now if the text only fits on one
line, you'll still see the indent.
| | 05:44 | Interestingly enough, you can set
indents to negative values, which is sometimes
| | 05:48 | used to hide text or just move
it off the screen for a while.
| | 05:51 | Now here you can see the
results of our giving the paragraphs a
| | 05:53 | text-indent value of 1em.
| | 05:56 | If you're familiar with desktop
publishing or desktop graphic design, I'm
| | 06:00 | guessing that you've heard of the term kerning.
| | 06:02 | If you're not, don't worry.
| | 06:03 | It's just one of the most
frequently used questions I get.
| | 06:06 | How do you control kerning through CSS?
| | 06:09 | Well, kerning is the process of
changing the space between letters based on the
| | 06:12 | letter pairs themselves.
| | 06:14 | It's considered actually somewhat of an
art form in typography, and it helps to
| | 06:17 | make text more readable.
| | 06:19 | CSS unfortunately doesn't have a true
kerning value, at least not yet, but you
| | 06:25 | can control overall letter spacing and
word spacing with the letter space and
| | 06:29 | word space property.
| | 06:31 | You can use any value you would like,
including negative values, and here we see
| | 06:35 | the effect of letter
spacing on our course title.
| | 06:37 | Finally, I want to discuss another
common typographic need, controlling the
| | 06:41 | space between lines of text.
| | 06:43 | The common typographic term for that is
leading, but if you're looking for the
| | 06:47 | leading property in the CSS
specifications, you're going to be disappointed.
| | 06:51 | To control the line spacing of
text blocks, you are going to use the
| | 06:54 | line-height property.
| | 06:56 | Line-height can be set to an absolute
value or set to be relative to the
| | 07:00 | size of the text itself.
| | 07:03 | Although you can use any value you would
like, line-height is unique in that it's
| | 07:07 | the only property that
allows you to use a multiple.
| | 07:11 | Now multiple uses no unit indicator,
| | 07:13 | so it's just a number.
| | 07:14 | So if we were to set our line-height to
1.4, for example, it would be 1.4 times
| | 07:19 | the size of an element's font.
| | 07:21 | Now in our example here, we are
going to go ahead and set the paragraph's
| | 07:23 | line-height to 1.6. We are using a 1.6
multiple, and as you can see, it increases
| | 07:29 | the amount of space between the lines of text.
| | 07:31 | Now we didn't cover every single
formatting option for text in CSS, but we've
| | 07:36 | covered them enough to give you a good
idea of the type of typographic control
| | 07:40 | you are going to find when writing your styles.
| | 07:42 | Now, I'm also pleased to announce that
the W3C is adding OpenType support to the
| | 07:47 | Fonts Level 3 Module.
| | 07:49 | When these features are widely
implemented, we will be able to do things like
| | 07:52 | controlling ligatures, font-based
kerning, old style numerals, and more.
| | 07:57 | In terms of CSS and typographic
controls, the best is yet to come.
| | Collapse this transcript |
| What is the box model?| 00:00 | No matter what the topic, you can
always find a handful of core concepts that
| | 00:04 | are critical to
understanding the subject properly.
| | 00:06 | For CSS, the box model is
certainly one of those concepts.
| | 00:10 | Without understanding the box model,
almost every task related to the physical
| | 00:14 | relationships of elements
would be more difficult.
| | 00:18 | If, on the other hand, you have a
thorough grasp of the box model,
| | 00:21 | tasks like page layout become much easier.
| | 00:24 | So, what is the box model?
| | 00:26 | Well, the box model is the term used
to describe the rules surrounding the
| | 00:30 | physical properties of all HTML elements.
| | 00:33 | If that makes you go, huh?
| | 00:33 | well, think about it this way.
| | 00:37 | Every single element on your web page
is considered to be in a rectangular box.
| | 00:43 | The properties of this box, its width,
height, padding, and margin defined not
| | 00:49 | only the sides of the element,
but also how it relates to the elements
| | 00:52 | around it, so yeah, it's pretty important.
| | 00:56 | First, let's cover the basics, the
properties that make up the box model.
| | 01:00 | Now, here we have a nice visual
representation of an element's box.
| | 01:04 | This could be a paragraph, a heading, a
list item, really any element on your page.
| | 01:10 | If we start on the outside of an
element, the first item we encounter is
| | 01:14 | the element's margin.
| | 01:16 | Margins represent the space around an
element and are used to define the space
| | 01:21 | between page elements.
| | 01:23 | Margins are not used to calculate the
final width of an element, but as you can
| | 01:26 | see, they are very important in terms of
how elements relate to each other and
| | 01:31 | how much space an element
requires within a layout.
| | 01:35 | The next property we come
to is the element's border.
| | 01:39 | All elements are allowed to have a
border assigned to it, even though by
| | 01:42 | default, most elements don't have one.
| | 01:45 | Borders have three properties
that define the border itself:
| | 01:48 | the border-width, border-style, and border-color.
| | 01:52 | You can also assign borders
individually to the top, right, bottom, and left
| | 01:57 | sides of an element.
| | 01:59 | Borders are considered to be part of
the box model because they defined the
| | 02:02 | outside edge of an element and
because their physical size is used when
| | 02:07 | calculating the overall size of an element.
| | 02:09 | This often gets overlooked in many
layouts, and more often than not, it can
| | 02:13 | cause serious problems.
| | 02:15 | Forgetting to add the size of the
border to the size of an element can cause
| | 02:19 | tight layouts to break, as elements will
be anywhere between two to four pixels
| | 02:23 | larger than anticipated.
| | 02:25 | After borders we have padding.
| | 02:28 | Padding is space added to
an element inside the border.
| | 02:32 | Now the easiest way to think of this is
to imagine a box with something fragile
| | 02:37 | inside of it that you need to ship.
| | 02:39 | More than likely, you're going to add
some packing material to the box to keep
| | 02:43 | the fragile object from touching
the edge of the box; that's padding.
| | 02:47 | Padding is totally transparent, and its
value is used to calculate the overall
| | 02:52 | width and height of an element.
| | 02:54 | Finally, we have the
width and height properties.
| | 02:57 | You can set these properties for any
element using either percentages or a fixed
| | 03:01 | unit of measurement.
| | 03:03 | It's important to remember, however,
that there's a big difference between the
| | 03:06 | width and height properties and the
total width and height of an element.
| | 03:10 | This tends to be very confusing to
those that are new to CSS or simply
| | 03:14 | unfamiliar with the box model.
| | 03:16 | To calculate the total width of an
element, use the left and right border
| | 03:20 | values, the left and right padding
values and the element's width property.
| | 03:25 | If you were thinking that this has
probably tripped up a lot of designers,
| | 03:28 | you would be right.
| | 03:30 | Often layouts will break because the total
width of an element is greater than anticipated.
| | 03:35 | However, understanding this concept
gives you the ability to confidently set
| | 03:39 | values to all of the box model
properties to fit specific layouts or regions.
| | 03:44 | The box model, for the
most part, is pretty simple.
| | 03:47 | There are, however, a few things that
can trip you up, if you're not careful.
| | 03:51 | First, just because a property isn't
declared, don't assume that its value is zero.
| | 03:56 | Remember that all browsers have
default styles that apply to HTML elements.
| | 04:01 | If you don't overwrite them,
the default value will be applied.
| | 04:05 | It's also a quite common to see authors
set the width of the element to 100% in
| | 04:10 | order to make it fit
fully within a parent element.
| | 04:13 | For the most part, that's fine, but any
values for margins, borders, and padding
| | 04:18 | will force the total width to be over
100%, making the element no longer fit.
| | 04:23 | There are other things, like margin
collapse, floated elements and considerations
| | 04:28 | for undefined widths and heights,
that you'll need to investigate as your
| | 04:31 | understanding of the box model deepens.
| | 04:34 | For now, concentrate on the fact that
the properties that make up the box model
| | 04:38 | allow you to control the physical
dimensions of the elements on your page, and
| | 04:42 | that to fully and truly master
visually formatting your elements,
| | 04:46 | you'll need to understand the ins
and outs of how those properties work.
| | Collapse this transcript |
| Margins and padding| 00:00 | After our overview of the box model, I
want to take a moment to familiarize you
| | 00:04 | with the individual properties of
the box model, and I want to start with
| | 00:09 | margins and padding.
| | 00:11 | Padding is the space inside of
elements that hold the contents of an
| | 00:14 | element away from its edge.
| | 00:16 | You can specify padding in several ways.
| | 00:19 | First, you can define padding
individually for each side of an element, and keep
| | 00:24 | in mind, however, that setting padding
in only one direction is not the same as
| | 00:28 | setting padding to zero in other directions.
| | 00:31 | Any existing padding on other
sides is still going to apply.
| | 00:35 | You can also use shorthand
notation when defining padding.
| | 00:38 | There are four variations on padding shorthand.
| | 00:42 | First, you can define four
separate values, separated by white spaces.
| | 00:46 | Now these values are going to apply
in order to the top, right, bottom, and
| | 00:52 | left sides respectively.
| | 00:54 | Now if you use three values, the
first value will be applied to top, the
| | 00:59 | second value for the left and right sides,
and the last value will be applied to the bottom.
| | 01:04 | If you only use two values, the first
value applies to the top and the bottom,
| | 01:09 | while the second value will apply
to both the left and right sides.
| | 01:13 | Finally, if you simply use a single
value, that value is going to be used
| | 01:17 | for all sides equally.
| | 01:20 | The rules for padding are actually
fairly straightforward, and most elements
| | 01:24 | start with no padding at all.
| | 01:25 | However, when width values are set on
an element as well, there are couple of
| | 01:30 | things to keep an eye on.
| | 01:31 | Now by default, most elements that
are considered block-level elements, like
| | 01:35 | paragraphs, will go ahead and
expand to fit the width of their parents.
| | 01:39 | If you don't define the width for those
elements, padding will be added to the
| | 01:43 | inside of the element, which causes
the content area to shrink, and sometimes
| | 01:47 | results in the element actually getting taller.
| | 01:50 | If on the other hand, you specify a width, say 100%,
| | 01:54 | that padding will then result in the
element actually becoming wider than its
| | 01:58 | parent element, as the padding is actually
added to the outside of an element's width.
| | 02:03 | When defining an element width,
it's crucial that you factor the element's
| | 02:06 | padding into the equation.
| | 02:08 | Most designers use padding to keep the
contents of a box away from its edge.
| | 02:13 | This can be used to create visual boxes,
like pull quotes out of a single element,
| | 02:17 | without using graphics or background images.
| | 02:20 | Padding can also be used to move
the contents of an element away from a
| | 02:24 | background image, to give the
appearance of custom bullets, or as a way to add
| | 02:28 | decorative touches to elements.
| | 02:30 | Margins represent the space between the
elements and are applied outside of an
| | 02:35 | element's edge. While it's not factored
into the total width of an element, it
| | 02:40 | does affect the amount of space that an
element takes up on that page and is
| | 02:44 | critical to achieving
proper spacing between elements.
| | 02:47 | Unlike padding, many elements do have a
default margin that you need do account
| | 02:51 | for when structuring layouts.
| | 02:54 | Later on, we are going to discuss what
a CSS reset is, how they affect margins,
| | 02:58 | and the rationale for using them.
| | 03:00 | Margins also use the same syntax as
padding, so you can either specify margins
| | 03:04 | for each side individually
or use the shorthand notation.
| | 03:08 | For the most part, margins are pretty
straightforward, but there is one aspect
| | 03:12 | of margins that tends to trip up
even the most experienced of designers.
| | 03:17 | Unlike horizontal margins, vertical
margins collapse. That means that if you
| | 03:22 | have two elements stacked one on top
of another, only one of the elements'
| | 03:27 | margins are applied.
| | 03:29 | Take this example. If you have heading
one with a bottom margin of 16 pixels and
| | 03:34 | a paragraph with a top margin is 16
pixels, there were only be 16 pixels' worth
| | 03:38 | of space between them, not 32 pixels.
| | 03:42 | This prevents paragraphs and headings from
having double spaces between the two of them.
| | 03:46 | If the values are not the same, the
higher of the two values is going to be used.
| | 03:51 | There is a lot more to margin collapse,
so as you learn CSS, pay particular
| | 03:55 | attention to when vertical margins
collapse, why they collapse, and how you can
| | 04:00 | trigger, or prevent it, based on your needs.
| | 04:02 | As you can imagine, mastering how
margins and padding work is a very important
| | 04:07 | part of learning CSS.
| | 04:09 | They're both incredibly important
to properly positioning content and
| | 04:12 | establishing
relationships between visual elements.
| | 04:15 | Mastering these properties early on
can save you from some frustrating
| | 04:19 | moments down the road.
| | Collapse this transcript |
| Borders| 00:00 | Borders define the outside edge of
elements and are usually used to apply a
| | 00:04 | decorative effect to the specific elements.
| | 00:07 | Element borders are usually defined by
three properties: style, width, and color.
| | 00:13 | Much like margins and padding, borders
can be defined for the top, right, bottom
| | 00:18 | and left sides individually, or defined
for the entire element at the same time.
| | 00:22 | Now, border syntax can sometimes be quite
verbose, as you can specify width, style,
| | 00:28 | and color for each individual side.
| | 00:30 | Now because of this, authors typically
use border shorthand notation that allows
| | 00:35 | you to set all three border
properties at the same time.
| | 00:39 | The important thing to remember about
borders is that they do affect the overall
| | 00:43 | width of an element.
| | 00:45 | Border widths begin at the edge of
padding widths and then extend outward.
| | 00:50 | It's easy to forget about a one-pixel
border on an element, but this is often
| | 00:54 | the culprit for breaking layouts or
causing elements to shift unexpectedly. So
| | 00:59 | when authoring CSS, be sure to account
for border widths when planning layouts.
| | 01:04 | Now border width is pretty self-
explanatory, but border styles and border colors
| | 01:09 | deserve a closer look.
| | 01:11 | Border styles can be set in one of ten
values: none, hidden, dotted, dashed,
| | 01:16 | solid, double, groove, ridge, inset, and outset.
| | 01:21 | None and hidden are very similar,
except for when tables come in the play,
| | 01:24 | where there are some certain
differences regarding when borders are drawn
| | 01:27 | around table cells.
| | 01:28 | Now solid, dotted,
and dashed create a single flat line
| | 01:33 | that's either solid, broken
into dots, or broken into dashes.
| | 01:37 | Although support for border
styles is almost complete in browsers,
| | 01:41 | some older browsers don't support the dotted
value, resulting in dashed lines when found.
| | 01:47 | The remaining values--double, groove,
ridge, inset, and outset--create dimensional
| | 01:52 | line affects that often require
width values greater than one.
| | 01:56 | The border-color property allows
you to define the color of the border
| | 02:00 | independently of the color of the
element's foreground and background. While
| | 02:05 | most border style properties will
display the color specified, a few of the 3D-
| | 02:10 | like values, will actually use the
color as a highlight value or not at all,
| | 02:15 | depending upon browser implementation.
| | 02:17 | Most designers use borders for
decorative effects, or as a way of providing
| | 02:22 | visual separation between elements.
| | 02:24 | Borders can also be used as a way of
creating text rules between blocks of text,
| | 02:29 | and as a way of replacing the
default underlines under linked text.
| | 02:32 | A relatively new addition to
borders is the border-image property.
| | 02:36 | This allows you to specify an image
that will be sliced and then aligned with
| | 02:40 | the elements' corners and repeated
or stretched in the middle sections.
| | 02:45 | The syntax is a bit too much to cover
in a general overview, and browser support
| | 02:49 | is just now starting to solidify,
but this is definitely a technique that should
| | 02:54 | be on your radar as a designer.
| | 02:57 | Before we move on, I also want to
take a moment to discuss the difference
| | 03:00 | between a border and an outline.
| | 03:03 | The outline property has been a part of
the CSS specification since CSS 2.0, but
| | 03:08 | it's only very rarely discussed in tutorials.
| | 03:11 | One of the biggest reasons for this is
that unlike borders, outlines can only be
| | 03:15 | set on the entire element, not the
individual sides, like borders can.
| | 03:20 | You can, however, set width, style,
and color just like the border property.
| | 03:24 | One other intriguing difference between
borders and outlines is that outlines do
| | 03:29 | not add to the total width of an element.
| | 03:32 | This rather odd behavior means that
outlines will often overlap other elements
| | 03:36 | when they come in contact with them;
however, outlines can be set on elements
| | 03:41 | without breaking layouts or causing
other elements to shift, making them
| | 03:45 | valuable in those situations.
| | 03:48 | The biggest reason for authors
ignoring the outline property, however, is its
| | 03:52 | lack of broad support among browsers.
| | 03:54 | Safari, Opera, and Chrome have
supported it for some time, but Firefox's
| | 03:59 | support is still a little bit buggy,
and Internet Explorer has only recently supported it.
| | 04:04 | Still, it's worth mentioning, since
it gives you an alternative to using
| | 04:08 | the border property.
| | Collapse this transcript |
| Backgrounds| 00:00 | It's hard to overstate just how important
the background property is to web design.
| | 00:05 | This one simple property allows us to
add visual sophistication and style to
| | 00:10 | even the most basic content.
| | 00:12 | Take this sample web page.
| | 00:14 | Here it is with just the
browser's default styles displayed.
| | 00:18 | Now if I turn on its CSS, you can
see the very dramatic difference.
| | 00:23 | Same content, just worlds
apart in terms of look and feel.
| | 00:27 | Now of course there's more going on
here than just the background property,
| | 00:31 | but all the images, accents, and defined
regions are made possible by using backgrounds.
| | 00:38 | The background property and its related
syntax can get fairly complex, certainly
| | 00:43 | too complex to cover in a five-minute
movie. So instead of delving too deep into
| | 00:48 | the syntax itself, I want to talk a
little bit about what the background
| | 00:52 | property can do and why it's so
important for you as a designer to focus on
| | 00:57 | learning all you can about how backgrounds work.
| | 01:00 | First, let's focus on exactly how the
background of an element is defined.
| | 01:05 | You'll often hear the background
property referred to in discussions of the box
| | 01:09 | model, even though it's not
actually a part of the box model itself.
| | 01:13 | That's because the area for the background
extends all the way to an element's edge.
| | 01:18 | If you were to define a solid color for
an element's background, it would extend
| | 01:23 | not only to the edges of the
element's content width and height, but to the
| | 01:27 | edges of the padding for the element as well.
| | 01:30 | As the name suggests, backgrounds
display behind an element's content, allowing
| | 01:35 | you to create sophisticated
visual effects from a single element.
| | 01:39 | The default style for most elements is
to have a transparent background, meaning
| | 01:43 | you can see through them.
By explicitly setting the background property,
| | 01:48 | you can choose to display solid
colors, gradients, or even images behind
| | 01:52 | an element's content.
| | 01:55 | With that in mind, let's take a look
at what types of things you can display
| | 01:58 | in an element's background and some of the
techniques that designers use when employing them.
| | 02:03 | The first and most basic usage of the
background is to simply display a solid color.
| | 02:09 | This can allow you to transform an
invisible div, section, aside, or article
| | 02:14 | into a visually defined space, or give
individual paragraphs or headings added definition.
| | 02:20 | With the advent of CSS 3.0, we can now
define gradients for backgrounds as well.
| | 02:25 | The support for this feature is
still evolving, but it gives us an option
| | 02:28 | for displaying gradients that uses
far less overhead than the previous
| | 02:32 | method of using images.
| | 02:34 | And some designers are experimenting
with CSS gradients to create patterns and
| | 02:37 | other cool visual tricks.
| | 02:39 | The background property also allows
you to specify an image instead of a
| | 02:43 | solid color or gradient.
| | 02:45 | This opens up a tremendous amount of
possibilities for the visual designer and
| | 02:49 | indeed was one of my most
transformative moments in learning CSS.
| | 02:54 | Once I learned what was possible with
background images, my designs and approach
| | 02:58 | to web design changed dramatically.
| | 03:01 | When specifying a background image,
you can control its position, whether
| | 03:05 | it repeats, and along which axis it
repeats on, the background image's size,
| | 03:11 | and whether or not the background image
should be clipped inside the background area.
| | 03:16 | I should point out as well that it's
entirely possible for an element to have
| | 03:19 | both a background color and a background image.
| | 03:21 | Background colors are layered
underneath background images and allow you to
| | 03:27 | combine the two for powerful
visual effects; in fact; in CSS 3.0,
| | 03:32 | the ability to use multiple background
images for a single element has been introduced.
| | 03:36 | This feature gives designers even more
options when creating complex visual designs.
| | 03:41 | So how are backgrounds
typically used in web designs?
| | 03:44 | Well, as I mentioned before,
solid background colors allow you to add
| | 03:48 | visual definition to elements and
to help draw attention to important
| | 03:51 | sections of content.
| | 03:54 | Going back to the design that I showed
you earlier, I want you to take a look at
| | 03:58 | the headings for the
secondary sections on this page.
| | 04:02 | Now, for search engines' and
accessibility's sake, I really need the text to
| | 04:06 | remain, but visually, I wanted to
display the text in a way that CSS won't let
| | 04:12 | me do stylistically.
| | 04:13 | So in this case--I want to go
ahead and turn the styles back on here.
| | 04:17 | In this case, I use CSS to move the text
off of the page visually and then use a
| | 04:23 | background image to display in its place.
| | 04:26 | So screen readers, search engines, or
bots will still see the headings, while
| | 04:31 | people that are looking at the visual
design see the headings the way that I
| | 04:35 | wanted them to display.
| | 04:36 | Now on the same page, I am using
background images to display icons, custom
| | 04:41 | paragraph rules, and even the company
logo without sacrificing accessibility or
| | 04:47 | adding unnecessary image tags to the content.
| | 04:50 | As you can imagine, there's a lot
more to the background property than
| | 04:54 | what we've covered here.
| | 04:55 | I just want you to understand how
important the background property is to visual
| | 04:59 | design and encourage you to make sure
that the background property is one that
| | 05:04 | you put specific emphasis on as you learn CSS.
| | Collapse this transcript |
| Color| 00:00 | Whenever I'm learning a new language or
new forms of syntax, there always seems
| | 00:04 | to be something that everyone just
takes for granted that you already know.
| | 00:09 | In the years that I've spent teaching
CSS, it seems like no one ever really
| | 00:13 | concentrates on how color works and
how the syntax is used to define it.
| | 00:18 | There are three primary properties that
you'll use when defining color in CSS.
| | 00:23 | Two of them, border-color and
background-color, we've already discussed.
| | 00:27 | The third property is the color property,
and it's used to define the color for
| | 00:32 | the content of an element.
| | 00:33 | Many people often refer to this as
foreground color, and in terms of elements
| | 00:38 | like paragraphs, headings, and lists,
it refers to the color of the text.
| | 00:43 | Whether you're defining color on
borders, backgrounds, or element content, you
| | 00:47 | have a number of options in terms of
how you want to define in the color.
| | 00:51 | First, you can choose from one of more
than one hundred and fifty color keywords supported by CSS.
| | 00:58 | In older versions of CSS, you were
limited to the sixteen color keywords, but in CSS3
| | 01:05 | support has been added for the SVG 1.0
color keyword names, greatly expanding
| | 01:11 | the range of available keywords.
| | 01:13 | These keywords mapped to a predetermined
set of RGB values the browsers will use
| | 01:18 | to display the color.
| | 01:20 | In the place of keywords, you can
also use hexadecimal notation to
| | 01:23 | represent color values.
| | 01:26 | Essentially, hexadecimal notation is
another way of representing RGB color by
| | 01:31 | using three hex pairs to represent the
red, green, and blue values of a color.
| | 01:37 | The easiest way to visualize
hexadecimal notation is to examine this table.
| | 01:42 | When you have a hex value like this
one, you match up the first pair of
| | 01:46 | values for red, the second pair of values for
green, and the final pair of values for blue.
| | 01:53 | Now, I'm not going to lie to you and
say that I can spout hexadecimal notation
| | 01:57 | off the top of my head, but over time you'll
memorize the ones that you use most frequently.
| | 02:04 | You'll also want to become familiar with
using shorthand hex values for web-safe colors.
| | 02:09 | If the hex values are made up of
pairs, you can shorten them to three
| | 02:13 | characters instead of six.
| | 02:15 | FFF would represent FFFFFF, or white,
while 000 would represent 000000, or black.
| | 02:28 | Keep in mind that all three
values need to be matching pairs,
| | 02:31 | so FF33AB couldn't be
represented using shorthand.
| | 02:37 | If you don't want to use hexadecimal values,
you can stick with using RGB color values.
| | 02:42 | To use actual RGB values, you'll simply
declare RGB for the color value and then
| | 02:47 | pass either numeric values for the red,
green, and blue values, or you can use
| | 02:53 | percentages if you'd like.
| | 02:54 | CSS3 introduces a new method of defining
color as well, and that is the HSL model.
| | 03:00 | If you're familiar with Photoshop or
other photo editing software, you've
| | 03:05 | probably used HSL at least once or twice.
| | 03:08 | It stands for Hue, Saturation,
and Lightness, and gives us a more intuitive way
| | 03:15 | of defining color.
| | 03:16 | RGB is an additive mixture of red,
green, and blue colors that range in
| | 03:21 | values between 0-255.
| | 03:25 | Now if all three of them are set to
255, you get white; if all the colors are
| | 03:30 | removed or set to zero, you get black.
| | 03:33 | It can become very difficult to try to
mix RGB colors without a color picker or
| | 03:38 | some sort of other aid.
| | 03:40 | Now HSL, on the other hand, is a mixture of
a color's hue, saturation, and lightness.
| | 03:47 | A color's hue is represented as an angle
on a color wheel, with ranges from 0 to 360.
| | 03:54 | Red is 360; green is 120; blue is 240;
and other colors such as yellow, orange,
| | 04:00 | and violet are found in between those values.
| | 04:03 | Saturation represents the amount of
color, with 100% being fully saturated and
| | 04:08 | 0% being grayscale.
| | 04:10 | Lightness is how bright or dark the
color is and just like saturation, it's
| | 04:14 | defined as a percentage, with 100%
being a bright white, 0% being black.
| | 04:20 | Now, while this declaration is relatively
new to CSS, it already enjoys widespread
| | 04:25 | support among modern browsers.
| | 04:28 | In addition to color, CSS also allows
us to define transparency for elements,
| | 04:32 | and it gives us a couple of
different ways to do this.
| | 04:35 | Now first, we're able to
use the opacity property.
| | 04:39 | Opacity can be defined using a value
from zero to one. So to make an element 50%
| | 04:45 | transparent, for example,
you'd use 0.5 for the value.
| | 04:48 | Now the thing about opacity is that it
defines the opacity for the entire element:
| | 04:53 | borders, backgrounds, and all.
| | 04:56 | In order to give you some additional
flexibility when defining opacity, CSS3
| | 05:01 | introduced the concept of RGB and HSL alpha.
| | 05:06 | Essentially, you can add a fourth value to RGB
and HSL definitions in the form of a range of 0-1.
| | 05:13 | This allows you to have individual
transparency settings for backgrounds,
| | 05:17 | borders, and foreground colors.
| | 05:20 | Like HSL itself, RGBA and HSLA enjoy a
widespread support among modern browsers.
| | 05:27 | I know this movie has probably been a
little bit more technical in terms of the
| | 05:31 | syntax and how deep we've dived into it
than some of our other movies, but when
| | 05:36 | learning, I think you'll find the color
values are often given with little to no
| | 05:41 | explanation as to what they mean,
| | 05:43 | and I wanted to make sure that you
have an understanding of why certain
| | 05:46 | values are used and what they refer to
when specifying the colors involved in
| | 05:51 | your design.
| | Collapse this transcript |
| Common units of measurement| 00:00 | In this movie, I want to cover another
topic that you're going to come across
| | 00:04 | again and again and again when learning CSS,
| | 00:06 | that is, how to declare units of
measurements for certain properties.
| | 00:10 | Now many of the property values that you'll
see in CSS require what's known as a length.
| | 00:16 | Within the specification, you'll often
see them referred to like this, where the
| | 00:21 | length notation is in brackets.
| | 00:23 | So, what's a length?
| | 00:24 | Well, a length is really nothing more than a
numeric value followed by a unit of measurement.
| | 00:29 | In CSS syntax, there is no whitespace
between the number and the unit itself.
| | 00:34 | There are a couple of exceptions to
this rule, but by and large, this is the
| | 00:38 | syntax that you're going to be using.
| | 00:40 | Obviously, if you're not familiar with
the units of measurement in CSS and when
| | 00:44 | it's appropriate to use one over
another, declaring values for properties can
| | 00:48 | get a little confusing.
| | 00:50 | Most of the time, you're going to see
units referred to in the specifications as
| | 00:53 | being either absolute or relative,
and that's typically how you're going to see
| | 00:58 | them grouped when referenced.
| | 01:00 | Let's take a closer look at those
unit types and when it's appropriate to
| | 01:03 | use one over another.
| | 01:05 | Absolute values, which are sometimes
referred to as fixed values specify an
| | 01:09 | exact measurement and are typically
used when the physical properties of the
| | 01:13 | user agent is known. Great.
| | 01:16 | So what does that mean?
| | 01:17 | Well, if you take a look at the
absolute values, it becomes a little bit clear.
| | 01:21 | Inches, centimeters,
millimeters, points, and picas,
| | 01:24 | those are all absolute values.
| | 01:26 | Now for output devices where you know
exactly what size you're going to be
| | 01:30 | dealing with, say, a printer,
| | 01:31 | those units work just fine.
| | 01:34 | However, for user agents that may have
different sizes, resolutions, things like
| | 01:38 | rendering intents, these
units aren't exactly optimal.
| | 01:42 | Now that leaves us with relative units.
| | 01:45 | These are called relative units
because their value is relative to the length
| | 01:48 | of another property.
| | 01:50 | These units are ems; exes; pixels;
grids; root ems; viewport width; viewport
| | 01:56 | height; a viewport minimum, which is
based on the width and height--whichever one
| | 01:59 | is smaller--and character width, which
is typically based on the width of the
| | 02:03 | zero character of a font.
| | 02:05 | Now, I'm betting that a lot of the guys are
seeing some of these units for the first time,
| | 02:08 | so let's talk about them in
just a little bit more detail.
| | 02:10 | At first, I need to point out that
several of these units are brand new in CSS3,
| | 02:15 | and they're not fully supported yet.
| | 02:18 | Others aren't as widely used, or maybe
they're used for very, very specific
| | 02:21 | purposes like grids, and grids are new to CSS3.
| | 02:24 | They're widely used for East Asian typography,
| | 02:27 | so, very narrow usage set there.
| | 02:29 | They in fact refer to the layout
grid used in the CSS3 Text module.
| | 02:33 | Now viewport width, height, and minimums
are also new to CSS3, and they allow you
| | 02:37 | to size elements relative to the
viewport, which is really cool, but
| | 02:41 | unfortunately they don't have
widespread support just yet.
| | 02:44 | Now that leaves us with ems,
exes, root ems, and pixels.
| | 02:47 | I want to talk about pixels first,
because a lot of people think that pixels
| | 02:51 | should be an absolute
value, like inches or points.
| | 02:54 | The truth is, however, that the size
of pixel is actually relative to the
| | 02:58 | display of the device that it's shown on.
| | 03:00 | Let me show you what I'm talking about.
| | 03:01 | A pixel on a 1024x768 display is a lot
bigger than the one shown on a 1440x900 display.
| | 03:09 | After all, not the size of the
monitor that changes when you change the
| | 03:12 | resolution, just the size of the pixels.
| | 03:15 | Pixels are one of the workhorse units
in web design, and you'll see them used
| | 03:19 | inside over and over again.
| | 03:20 | You just need to keep in mind that
while sixteen pixels will always be sixteen pixels,
| | 03:25 | it won't always be the same size.
| | 03:27 | Ems, exes, and roots are
also all fairly similar.
| | 03:31 | If you're a graphic designer, I'm betting
that ems probably look familiar to you.
| | 03:36 | The name doesn't indeed come from
typography, and it roughly means the value of
| | 03:40 | text at its default size. As you can
see here, for example, if somebody sets
| | 03:44 | their browser's default font-size to 16
pixels, 1 em for that particular page is
| | 03:50 | going to be equal to 16 pixels.
| | 03:52 | You do need to understand, however,
that the value of an em changes depending
| | 03:55 | upon where it's used within your CSS.
| | 03:58 | If it's used to define the size of fonts,
then 1 em is equal to the value of its
| | 04:03 | parent element's font size.
| | 04:04 | Now, essentially all that means is that
an em tells an element to calculate its
| | 04:09 | size relative to the size of the parent.
| | 04:12 | This means that you can set one value
for the body element and then set all the
| | 04:15 | headings and paragraphs relative to that value.
| | 04:19 | So here, for example, if you set the
body font-size to 100%, now the h1, h2, h3
| | 04:25 | and paragraph's ems will all be based
on that body size, because the body is the
| | 04:30 | parent element of those elements.
| | 04:32 | Now the added beauty of this technique
is that the starting size of the text
| | 04:35 | is up to the device itself, whether
it's a desktop browser or it's a mobile
| | 04:41 | device, or even if the user has changed the font-
size to compensate for say a vision disability.
| | 04:46 | Now in those cases, the overall file
size will get bigger or smaller, but the
| | 04:50 | relationship between the
elements will stay exactly the same.
| | 04:53 | Now, if you're still with me, you'll
probably remember me saying that the value of
| | 04:58 | an em changes based on where it's used.
| | 05:01 | If an em value set outside of font-size,
it's equal to the computed size of the
| | 05:05 | text of that element.
| | 05:06 | I know that sounds confusing,
| | 05:08 | so let me try to walk you through this, in
the hopes that I can make some sense of it.
| | 05:12 | So here we have a rule set on h1.
| | 05:14 | We're using ems for both font-size and
margin, but remember, the rules on how an
| | 05:19 | em's size is calculated changes based
on whether it's defined in font-size or
| | 05:23 | outside of font-size.
| | 05:24 | So let's take a look at that.
| | 05:26 | Let's say that whatever device we're
on, its default font size is 16 pixels.
| | 05:30 | So if we go to font-size,
that's 2 ems. So two times 16,
| | 05:35 | we've calculated out to 32 pixels of font-size.
| | 05:37 | So it's very tempting here to say, oh,
okay, so the bottom-margin would be 16
| | 05:41 | pixels, but no, that's not true.
| | 05:43 | Remember, if an em is used outside a
font-size, it's relative to the size of
| | 05:50 | that unit, that element.
| | 05:51 | So it's going to look for
the actual font-size of the h1.
| | 05:54 | So in this case 1 em since our h1
calculated out to 32 pixels of font-size is
| | 05:59 | equal to 32 pixels in this case.
| | 06:01 | So there is always a slightly different
calculation for that em based on whether
| | 06:05 | it's part of the font size
or part of another property.
| | 06:08 | I know that may seem a little confusing
to you, but the more you do it I promise
| | 06:12 | you the easier it is to make sense of all that.
| | 06:15 | As for the remaining two relative values,
exes and root ems, they're very similar to ems.
| | 06:19 | Exes are a lot like ems; they're
just based on the x-height of the font.
| | 06:22 | Now, root ems are a very
intriguing addition to CSS3.
| | 06:27 | Root ems always size text relative to the
root element, which is usually the body tag,
| | 06:31 | so they give you a much more
consistent starting point for sizing text in
| | 06:35 | the other elements.
| | 06:36 | Now I need to point out their support
isn't complete yet, but hopefully we'll be
| | 06:40 | able to use root ems without
hesitation in the near future.
| | 06:43 | I want to mention one last unit of
measurement that isn't contained in the
| | 06:47 | relative or absolute value groupings,
| | 06:49 | even though I always considered it to be
a relative unit, and that is percentages.
| | 06:54 | Percentages are exactly what you think. If you
size an element's width to 80%, for example,
| | 06:58 | its computed size will be
80% of its parent element.
| | 07:02 | Text the size with percentage
calculates the value based on the parent element.
| | 07:06 | Percentages are great for building
fluid layouts that react to size of the
| | 07:10 | screen or device on which it's viewed,
| | 07:11 | so it's really good if the user might, for
example, change sizes every now and then.
| | 07:15 | Now keeping track of all the various
units of measurement in CSS can be tricky,
| | 07:19 | but don't be too concerned
about what you've seen here.
| | 07:22 | Unless you're dealing with really
specific circumstances, you're more likely to
| | 07:26 | just use a mixture of pixels, ems,
and percentages for screen designs, and then
| | 07:31 | inches, points, and picas for our print designs.
| | 07:33 | Either way, you should be aware of
what your options are when defining
| | 07:36 | lengths for CSS properties.
| | Collapse this transcript |
| Element positioning| 00:00 | Perhaps of all the various aspects of CSS,
the hardest to learn and master is layout.
| | 00:06 | There have been numerous books, web sites,
and courses dedicated to nothing but CSS layout.
| | 00:11 | With that in mind, I want to introduce
you to some of those concepts in broader
| | 00:15 | terms, so that the terminology and
overall concepts of CSS layout aren't foreign
| | 00:20 | to you as you begin to experiment with
it and learn the various nuances around
| | 00:24 | controlling page layout with CSS.
| | 00:26 | I want to start with the
concept of element positioning.
| | 00:30 | Positioning allows you to take an
element on the page and control where and how
| | 00:35 | it's positioned relative to things such
as its original starting position, other
| | 00:39 | elements, or even the viewport itself.
| | 00:42 | CSS defines three positioning schemes:
| | 00:45 | Normal Flow, Element Floating,
and Absolute Positioning.
| | 00:50 | Now, we are going to discuss floating in
more detail in another movie in just a moment,
| | 00:54 | so for now, let's focus on
Normal Flow and Absolute Positioning.
| | 00:59 | Normal Flow is exactly what happens
when you do nothing to control page layout.
| | 01:04 | You can think of this as the default
layout method of your browser, and it's more
| | 01:08 | powerful than you think.
| | 01:10 | Essentially, normal document flow takes
the content in the order that it's found
| | 01:15 | in the HTML and then stacks it,
one element right on top of another.
| | 01:20 | Block-level elements like headings,
paragraphs, and section elements like
| | 01:23 | divs, sections, articles, and asides,
those things take up their own space
| | 01:27 | in a document's normal flow, and they just
stack one on top of another much like blocks.
| | 01:32 | Inline elements like images, links, or
span tags will appear inside of those
| | 01:36 | block level elements, and they simply
stack themselves based on the flowing of
| | 01:40 | line boxes, and what's a line box?
| | 01:42 | Well, think of those as the lines of
text in a paragraph and the way that
| | 01:47 | they stack themselves.
| | 01:48 | They stack themselves only once
they've gone as wide as they can go.
| | 01:51 | So just think of like the lines in a paragraph.
| | 01:53 | Now, believe it or not, Normal Flow can
and should handle the majority of your
| | 01:57 | layout needs by letting elements
stack in the order that they are found.
| | 02:01 | It's a lot easier to make some minor
tweaks to create columns or reorder a
| | 02:05 | single element or two.
| | 02:06 | Now, if you want elements to arrange
themselves based on normal document flow,
| | 02:11 | you don't really need to do anything.
| | 02:12 | The browser is just going
to handle it automatically.
| | 02:14 | If, on the other hand, you do want to
tweak or drastically alter the positioning
| | 02:19 | of your elements, you can
then use the position property.
| | 02:22 | Exploring its values is also
going to allow us to explore our other
| | 02:26 | positioning models.
| | 02:27 | The position property
accepts one of five values:
| | 02:30 | static, relative, absolute, fixed, and inherit.
| | 02:35 | Inherit simply means that the position
value from the element's parent should be used.
| | 02:39 | Now, static tells the element to
position itself using normal document flow, and
| | 02:43 | you can think of that as, like, the default value.
| | 02:45 | However, relative positioning is still
considered part of normal document flow,
| | 02:50 | but it allows you to tweak an element's
position based on offset values that you could give it.
| | 02:55 | Offset values can be given for top,
left, bottom, or the right of an element.
| | 03:00 | Now, giving offset values of top and left,
for example, would offset the element
| | 03:04 | from its top-left corner.
| | 03:06 | Let me show you what I mean.
| | 03:07 | So here, we have an element called box 1,
position is set to relative, and then
| | 03:12 | we are giving it an offset of
left of 100 pixels, top of 50 pixels,
| | 03:15 | so what it will do is move over
100 pixels and down 50 pixels.
| | 03:20 | So using this method, you can
simply nudge an element over a little or
| | 03:24 | reposition it all the way over on to the
other side of the page if you wanted to.
| | 03:27 | Now, you may have noticed this,
but what's really peculiar about relative
| | 03:31 | positioning is that it creates
kind of like a hole where the element
| | 03:34 | would normally be found.
| | 03:35 | And instead of having elements below
it move up to take its place, an empty
| | 03:39 | space where the element would be is left behind.
| | 03:42 | This empty space would even change sizes
if the element would change size as well.
| | 03:47 | Most relative positioning is
actually set without any offsets at all.
| | 03:50 | So here we would just say
box 1, position relative,
| | 03:52 | with no left and top values.
| | 03:54 | Now what does that do?
| | 03:55 | Well, it just merely gives
the element a positioning value.
| | 03:58 | Why is this so important?
| | 04:00 | Well, for that, we need to
look at absolute positioning.
| | 04:04 | Absolute positioning is not
considered part of normal document flow.
| | 04:08 | In fact, it removes the element from
normal flow and repositions it based on
| | 04:13 | those offset values given.
| | 04:14 | So let's take a look at an example of that.
| | 04:16 | So here we have the same
box 1, position: absolute,
| | 04:20 | and its left set to 100 and its top set to 50.
| | 04:22 | Now, any element below the absolute
position element now moves up to take
| | 04:27 | the element's place.
| | 04:28 | So unlike relative positioning where
you had that sort of hole left above it,
| | 04:31 | notice that in this case box 2 and box
3 move up because box 1 has been removed
| | 04:35 | from normal document flow.
| | 04:36 | The browser really doesn't see it there anymore.
| | 04:38 | Where absolute positioning elements get
really tricky is how to calculate where
| | 04:42 | the element is going to be positioned.
| | 04:45 | Essentially, an absolutely
positioned element looks to the nearest parent
| | 04:49 | element that has positioning.
| | 04:50 | If no elements are positioned above
it, it simply looks to the body tag.
| | 04:55 | Now, that means that the actual viewport
itself is used to position the element.
| | 04:58 | Let me give you an example here.
| | 04:59 | If I took this div tag and positioned
it using an absolute positioning at the
| | 05:04 | top-left value of 20 and 40, it's going
to start at the top-left corner of the
| | 05:08 | screen, go 20 pixels over to the
right, and then 40 pixels down.
| | 05:12 | Notice that this happened because the parent
element, content in this case, wasn't positioned,
| | 05:17 | so it went up to the body tag.
| | 05:19 | If, on the other hand, the div's parent
element was positioned, for example, here
| | 05:23 | giving content a position relative,
notice that div would then be offset from
| | 05:27 | its top left-hand corner, not the page's.
| | 05:30 | If you look at other people's CSS, you
are going to see this technique used over
| | 05:33 | and over again as a way of
positioning child elements within their parents.
| | 05:37 | So it will give the parent element,
the section element position of relative,
| | 05:40 | then they could use absolute positioning to
move an element or two around inside of it.
| | 05:45 | Now, you may remember that we had
one more positioned value, fixed.
| | 05:49 | Fixed elements are considered to be
absolutely positioned, but they're always
| | 05:53 | positioned relative to the active viewport.
Now, what does that mean?
| | 05:56 | Well, the important part of that
statement is what is meant by the active viewport.
| | 06:02 | If you position, for example, a fixed
element at the top-right offset of 50
| | 06:06 | pixels and 100 pixels, the top-right
corner of the element will be positioned
| | 06:10 | 50 pixels over to left and 100 pixels down.
| | 06:12 | So that's just like absolute positioning.
| | 06:15 | But since it's relative to the active
viewport, scrolling page content would not
| | 06:20 | affect this element at all.
| | 06:21 | It would remain in that position, no
matter how the screen was resized or scrolled.
| | 06:25 | It truly is fixed.
| | 06:27 | Another thing that's very
important to point out here when discussing
| | 06:29 | positioning is how positioned
elements can stack one on top of the other.
| | 06:34 | This layering can even be controlled by
the z-index property, which allows you
| | 06:39 | to control which elements are on top of others.
| | 06:41 | Now, by default, positioned elements
will appear on top of non-positioned
| | 06:46 | elements if those two elements overlap.
| | 06:49 | Well, this barely scratches the
surface of what's possible when
| | 06:51 | positioning elements.
| | 06:52 | But hopefully this has been a solid
introduction for you into the concept of
| | 06:56 | positioning elements and how you can
manipulate a document's normal flow to
| | 07:00 | reposition elements based on
your specific layout needs.
| | Collapse this transcript |
| Floats| 00:01 | Any discussion on positioning
elements would be incomplete without
| | 00:04 | mentioning floating.
| | 00:05 | Floating is by far the most
popular CSS layout technique;
| | 00:10 | however, it's also one that many
new web designers struggle with.
| | 00:14 | That's because how the technique works
changes based upon the relationship of
| | 00:19 | the elements that are being floated.
| | 00:20 | Let's take a closer look at floating
and how it works. So, what's a float?
| | 00:25 | Essentially, it's an element that is
shifted to the right or the left of
| | 00:29 | it's current position.
| | 00:30 | You assign floating, logically
enough, by using the float property.
| | 00:34 | You can use the left, right, or none
keywords to define the direction of the float.
| | 00:39 | Here is how it works.
| | 00:41 | Remember that in normal document flow,
block-level elements simply stack one on top of another.
| | 00:47 | They are commonly refer to as boxes,
and that's actually really good way of
| | 00:50 | thinking about them.
| | 00:52 | When you float an element, it moves
as far over as it can, either it to the
| | 00:56 | right or the left, depending upon the
property that's been assigned to it.
| | 00:59 | The elements below it then move up to
occupy the space that the floated
| | 01:03 | element used to occupy.
| | 01:05 | In that sense, floating an element
removes it from normal document flow.
| | 01:09 | As you can see, floating an element
to the right and then allowing the
| | 01:12 | content below it to move up beside it, it's
pretty easy way to create a two-column layout.
| | 01:16 | But you can probably guess, there is
a lot more to floats than just this.
| | 01:20 | For example, let's take a look at what
happens when you float an element to the left.
| | 01:24 | Now, the default element alignment is
to the left edge of their containing
| | 01:28 | element, so if you float one of
those top boxes to the left, it doesn't
| | 01:32 | appear to move it all,
| | 01:33 | since it's already
aligned to the left of the page.
| | 01:35 | However, it's still removed
from normal document flow.
| | 01:38 | And that means, the element below it would
move up to occupy what they see as empty space.
| | 01:44 | The result? Well, those elements would
actually go underneath to floated element,
| | 01:48 | at least partially. You see, individual
parts of an element will react differently
| | 01:53 | to floated elements.
| | 01:54 | To best demonstrate this, let's
take a look at another example.
| | 01:57 | Let's say we have an image
contained within a paragraph.
| | 02:01 | If you were to float the image to the
left, it looks as if the paragraph is
| | 02:06 | wrapping around the image instead of
going underneath it, kind of weird.
| | 02:10 | The truth is, what we are seeing here
is how those inline boxes, or those lines of
| | 02:13 | text, react to floated elements.
| | 02:15 | Inline boxes, such as the lines of
text within a paragraph, will wrap around
| | 02:19 | floated elements if they have enough room.
| | 02:21 | Now, if the paragraph had a
background color, you would still see that the
| | 02:25 | paragraph itself did indeed
move up and underneath the image.
| | 02:29 | Once you have learned the ins and
outs of floats, you can do all kinds of
| | 02:33 | cool things with them.
| | 02:34 | For example, if you float a series of
elements to the same side, like these
| | 02:38 | series of boxes that have all been
floated to the left, you end up with the
| | 02:41 | horizontal display of elements.
| | 02:43 | This technique is used frequently
to transform a list of links into a
| | 02:47 | horizontal menu, for example.
| | 02:49 | You can also use floats to create
multiple columns of elements, drop caps in
| | 02:53 | paragraphs, pull quotes that have text
wrapped around them, product description
| | 02:58 | details, and a whole lot more.
| | 03:00 | I also want to make sure that
we talk about clearing floats.
| | 03:04 | And if you remember from earlier, I
discussed how floated elements affect all
| | 03:08 | the elements below it in normal flow.
| | 03:10 | At times, that's less than ideal.
| | 03:12 | You might, for example, create a
two-column layout by floating one containing
| | 03:17 | element to the left and one to the right,
| | 03:20 | as you see here. So we have got this
content element floated to the right, we
| | 03:23 | have the sidebar element floated to left.
| | 03:26 | However, based on the way floats work,
any remaining content on the page, like our
| | 03:30 | footer here, would move up an
underneath the floated elements.
| | 03:33 | By using the clear property, you can
tell the browser to stop floating elements
| | 03:38 | and go back to normal document flow.
| | 03:41 | The clear property can be set to prevent
elements from floating to the left or right
| | 03:45 | of an element, or set to both.
| | 03:47 | So you can use the left, right, or
both values to prevent any float from
| | 03:51 | affecting the cleared element.
| | 03:53 | The best way to think of clearing is
just think of it as your way of telling the
| | 03:56 | browser, hey, thanks, but I need to
start going back to stacking elements again.
| | 03:59 | Now, obviously mastering how
browsers handle floated elements requires a
| | 04:04 | little bit of time.
| | 04:05 | You will need to become comfortable
with how floated elements affect their
| | 04:08 | parent elements, how clearing works,
how margins work with floated elements, and
| | 04:14 | how the width of parent elements can
impact the behavior of floated elements--
| | 04:17 | for example, making them break
down to the right or left, instead of
| | 04:20 | floating up beside them.
| | 04:21 | You will then need to take that a bit
further and explore the best practices
| | 04:26 | that have evolved over the years
regarding using floats for layout.
| | 04:29 | Now, the good news about that is that
a fair amount of ground has already
| | 04:33 | been covered for you.
| | 04:34 | Floats are by far the most popular
CSS layout technique currently in use, so
| | 04:39 | there are plenty of examples in
tutorials out there for you to learn from,
| | 04:43 | including many of the CSS titles here
in the lynda.com Online Training Library.
| | Collapse this transcript |
| Basic layout concepts| 00:00 | Now that we've learned a little bit
about positioning elements with CSS and how
| | 00:04 | the various methods of positioning work,
I want to walk through one of the more
| | 00:08 | common strategies used by
designers when creating CSS-based layouts.
| | 00:13 | Now with this movie, I'm not advocating
one specific layout technique over another.
| | 00:17 | As you learn CSS, you'll soon see that
there about as many variations on how to
| | 00:21 | create CSS layouts as there are designers.
| | 00:24 | I just want to give you a starting
point, so that you can see how designers
| | 00:27 | typically approach page layout and how
various techniques are combined to drive
| | 00:32 | the overall page design.
| | 00:34 | I want to start with the
concept of page regions.
| | 00:38 | Most designers will print a quick
markup of pages, with content regions just
| | 00:43 | sort of blocked out.
| | 00:45 | This will allow them to design
towards the functionality of the site and
| | 00:48 | consider content first before
getting caught up in the visual design.
| | 00:53 | It also allows designers to start
thinking about the structure of their HTML.
| | 00:57 | Each one of these content regions will
most likely be represented in the page
| | 01:02 | structure by a containing element.
| | 01:04 | Now in the past, we've been pretty much
limited to using divs for these purposes,
| | 01:09 | but HTML5 now gives us several new
semantic tags to use when marking up
| | 01:14 | sections of content.
| | 01:15 | No matter which tags are used,
the concept here is that sections of content are
| | 01:21 | contained within parent elements.
| | 01:23 | This serves the dual purpose of
grouping the content together and giving us a
| | 01:28 | containing block to use
for positioning and styling.
| | 01:32 | Let's take a look at how we can
create a simple two-column layout using
| | 01:35 | these containing blocks.
| | 01:37 | The first thing we'll do is give the
body element a defined width to set
| | 01:41 | the size of the page and then center it by
giving it a right and left margin of auto.
| | 01:47 | In this case, we'll create a flexible
layout by using percentages, but if we
| | 01:51 | wanted to target a specific screen
size, we could do that by using pixels.
| | 01:56 | With our header element,
we don't really need to do anything;
| | 01:59 | it will expand to fill the body tag.
And if we don't define a height, it would
| | 02:03 | be determined by its content.
| | 02:05 | In this case, we'll go ahead ad define a
height to make sure the header takes up
| | 02:09 | the visual space we need for the layout.
| | 02:11 | We'll also add a little margin to the
bottom of the header element to separate
| | 02:15 | its content from the navigation.
| | 02:18 | In the case of our navigation, we might
want the menu to be a specific height as well.
| | 02:24 | Depending upon how you structure
your navigation, you'll have several
| | 02:27 | opportunities to do that.
| | 02:28 | Just for the sake of simplicity, I'll
go ahead and set it here and then add
| | 02:32 | another bit of bottom margin to
separate the navigation from the content.
| | 02:36 | You may have noticed here, too, that I'm
using ems instead of pixels for margins.
| | 02:41 | The reason I'm doing that is
because I'm doing a fluid layout.
| | 02:44 | The ems will be relative to the size of
the text, connecting the page layout to
| | 02:48 | the device's font size.
| | 02:49 | Now next up, we face our first real challenge.
| | 02:54 | We need to have our sidebar and
main content arranged as two columns.
| | 02:58 | The easiest way to do
that would be to use floats,
| | 03:01 | so in this case, I'll float the sidebar
to the left and the content to the right.
| | 03:06 | I'm going to also assign width to them.
| | 03:09 | Now notice that I'm giving the sidebar a width
of 30%, while giving the content a width the 60%.
| | 03:15 | These widths will be based off a
calculated width of their parent element,
| | 03:19 | in this case, the body tag.
| | 03:21 | By making the width not quite 100%, I'm
defining the amount of space between the two columns,
| | 03:27 | in this case, 10%.
| | 03:29 | Again, I'll let the content itself
control the height of these elements.
| | 03:33 | Now floating these two elements
gives us our columns, but it also causes
| | 03:37 | problems with our footer.
| | 03:39 | As you can see, our footer has now
moved up and is underneath the sidebar
| | 03:43 | and content regions.
| | 03:44 | We'll need to clear the footer and move it
back down underneath our content. That's it.
| | 03:49 | The basic layout of the page is complete.
| | 03:52 | From there, you'll begin to control
the layout of the content within the
| | 03:56 | regions themselves.
| | 03:57 | For the navigation, for example, you'll
probably take the list items within an
| | 04:01 | unordered list and float them so
they appear as horizontal menu items.
| | 04:06 | You might also want to control the
positioning of the items in the header by
| | 04:10 | setting the header's position to
relative and then absolutely positioning an
| | 04:13 | item inside of it, like a logo.
| | 04:16 | We might also float items within
content regions to control how items like text
| | 04:20 | and images interact with each other.
| | 04:22 | This is of course just one example of
how layout techniques can be combined to
| | 04:27 | control page layout.
| | 04:28 | What I'm hoping it will do is show you
that basic layouts can be handled with a
| | 04:32 | minimum of effort and that CSS
layout doesn't have to be intimidating.
| | 04:36 | Yes, you will need to dig a little
deeper into the techniques I've mentioned
| | 04:40 | here, and you'll need to start learning
about how browser-rendering differences
| | 04:43 | can force you to seek
workarounds from various layout issues.
| | 04:46 | But, by and large, page layout isn't any
harder than any other CSS technique that
| | 04:51 | you're going to learn.
| | 04:52 | Just be sure to learn as many
different techniques as you can, including the
| | 04:56 | emerging CSS3 capabilities, like
the flex box and CSS grids modules.
| | 05:01 | By understanding the ins and outs of
various layout methods, you'll be able to
| | 05:05 | craft solutions that are tailored
specifically to your site's content and needs
| | 05:10 | and not be tied to a
single layout or page structure.
| | Collapse this transcript |
| Media types and media queries| 00:00 | One of the great benefits of using
HTML and CSS to separate presentation
| | 00:05 | and structure is the ability to
present the same content in different ways
| | 00:09 | to different devices.
| | 00:11 | CSS allows us to do that
through the use of media types.
| | 00:15 | In this movie, I want to take a
closer look at media types and their recent
| | 00:19 | extension, media queries.
| | 00:21 | Media types allow you to control which
styles are served to a user agent, based
| | 00:26 | on that user agent's device type.
| | 00:28 | This means that you can send one set
of styles to screen devices, another
| | 00:32 | set to a printer, and yet
another set to a screen reader.
| | 00:36 | This ability allows you to change the
design of your site based on the context
| | 00:40 | of where it's viewed,
| | 00:41 | or restrict the use of certain
media-specific styles, like page breaks, to the
| | 00:47 | devices that understand them.
| | 00:49 | You can choose between three different
types of syntax when declaring media types.
| | 00:54 | First, you can use the @media blocks
to group media-specific styles together.
| | 00:59 | This allows you to have multiple sets
of styles within a single style sheet.
| | 01:04 | You can also use media
types with the @import rule.
| | 01:07 | You simply declare the media type
after the location of the external style.
| | 01:11 | The third and probably most common
syntax for declaring media types is
| | 01:16 | actually part of HTML.
| | 01:18 | When using a link tag to link to an
external style sheet, you can use the
| | 01:22 | media attribute to specify which media type,
or types, that you want to styles to apply to.
| | 01:27 | Now, as you can see in the syntax,
you can assign more than one media type of
| | 01:31 | styles through using a comma-separated list.
| | 01:34 | So what media types are available?
| | 01:36 | Well, currently, we have all, which
tells all user agents to apply the styles;
| | 01:41 | braille for tactile feedback devices;
embossed, which is intended for paged
| | 01:46 | Braille printers; handheld for mobile
devices; print for printers; projection
| | 01:52 | for projected presentation devices;
screen for screen devices; speech for
| | 01:57 | speech synthesizers, such as screen
readers; tty for teletypes or terminals; and
| | 02:03 | finally, tv for televisions.
| | 02:04 | Now truthfully, you probably won't use
very many of these and support for the
| | 02:09 | media types isn't universal.
| | 02:11 | Many mobile devices, for example,
choose to support the screen media type,
| | 02:15 | rather than handheld, due to the
browsing capabilities of those devices.
| | 02:19 | Still, being able to have your site
display one way on screen while controlling
| | 02:23 | how the content prints and giving
extra information to assisted devices is an
| | 02:28 | amazingly powerful
capability for designers to have.
| | 02:32 | The other benefit we gain from media
types is their forward-looking nature.
| | 02:36 | As new devices come online, those media
types can be added to the specification,
| | 02:40 | and media specific properties can be
created to help control how content is
| | 02:45 | displayed or presented on those devices.
| | 02:48 | As I mentioned earlier though,
sometimes media types alone can't give us the
| | 02:52 | control we need over how
content displays on various devices.
| | 02:56 | The rise of smartphones and tablets
have created a segment of mobile devices
| | 03:00 | that are increasingly being used to
consume online content but that only
| | 03:04 | offer inconsistent support for the
handheld media type, preferring to support
| | 03:08 | the screen media type.
| | 03:10 | That means that these devices with
their much smaller screen sizes would render
| | 03:14 | the page using the same styles
that are used for desktop browsers.
| | 03:18 | To help deal with this, CSS3
introduced media queries.
| | 03:22 | Media queries combine with media
types and allow you to apply a little
| | 03:25 | conditional logic along with the
media type itself, so that you can filter
| | 03:29 | when styles are applied, based on things
like width and height, orientation, and color.
| | 03:35 | Let's dig into media queries a little
deeper by taking a look at the syntax.
| | 03:39 | First, you can use the optional
"only" or "not" keywords to filter out
| | 03:43 | your media queries.
| | 03:44 | "Only" is simply used to filter out
media queries from being applied by
| | 03:49 | non-supporting devices.
| | 03:51 | Conforming agents are just told to
ignore it, so you're only going to use it if
| | 03:54 | you're trying to hide the media
query styles from older browsers.
| | 03:58 | The "not" keyword
negates the entire media query,
| | 04:01 | so the styles would apply to devices
that do not meet the media query expression.
| | 04:06 | From there, you move on to
declaring the media type as normal.
| | 04:10 | You can then use the "and" keyword to
add as many as expressions as you'd like.
| | 04:16 | Now these expressions allow you to
check for certain media features, and even
| | 04:20 | allow you to check for ranges of values.
| | 04:23 | Here is a list of the current media features.
| | 04:25 | Time is going to prevent me from going
into all of these media types in more
| | 04:29 | detail in this course, but it's
worth noting that many of them deal with
| | 04:33 | techniques that we're likely to use in
the future, or deal with features that
| | 04:36 | aren't widely supported yet.
| | 04:38 | Other features, like width and height, are
supported currently, and even allow you
| | 04:42 | add a minimum and a maximum prefix to
set upper or lower limits on those values.
| | 04:48 | Let's take a look at a more specific
example of syntax to see how you might
| | 04:52 | use this in action.
| | 04:53 | So here we have the media query that's
to be applied if the media device type is
| | 04:58 | screen and the width of the
screen is between 0 and 480 pixels.
| | 05:03 | This would be ideal for targeting
mobile devices for smaller screens, as it
| | 05:07 | would limit those styles from being
applied unless these conditions were met.
| | 05:11 | Although media queries are still
relatively new, they are widely supported among
| | 05:16 | modern browsers and mobile devices,
| | 05:18 | so many designers are beginning to
add them to their styles right now.
| | 05:23 | So media types allow us to control when
styles are applied based on the type of
| | 05:27 | device being used by the client.
| | 05:29 | Media queries allow us to further
refine that process by creating a more narrow
| | 05:33 | focus for when styles are
used by various media types.
| | 05:37 | What this means for you as a designer
is that now you have an amazing amount of
| | 05:41 | control over how your site is viewed by
multiple devices and how the user sees
| | 05:46 | and interacts with your content.
| | Collapse this transcript |
| What is CSS3?| 00:00 | I know we talked briefly about CSS3
earlier when we discussed the history and
| | 00:05 | current state of CSS.
| | 00:07 | So we know that CSS3 isn't really a
specification itself, as CSS has been broken
| | 00:13 | up into series of modules that
are evolving at different paces.
| | 00:17 | That still, however, leaves the question open:
| | 00:20 | what exactly is CSS3, and why are
so many people talking about it?
| | 00:24 | Well, in many ways, CSS3 is
simply a brand much, like HTML5 is.
| | 00:31 | People are using it as a blanket term
to describe the new CSS features and the
| | 00:35 | functionality that have
emerged over the last few years.
| | 00:39 | Now, part of this new functionality is the
continued development of CSS through the W3C.
| | 00:45 | Another part of it is being driven by
a new generation of browsers that are
| | 00:49 | focused on giving designers more
powerful tools for creating sites.
| | 00:53 | In fact, some of the syntax and
features being added to the CSS modules are
| | 00:57 | coming straight from people like
Mozilla and WebKit, as they continue to stretch
| | 01:01 | the boundaries of what's possible through CSS.
| | 01:05 | So let's take a look at some of the
features most commonly associated with CSS3.
| | 01:10 | Keep in mind that many of these
features are in the early stages of being
| | 01:13 | supported by browsers.
| | 01:15 | Many are experimental, and many are
features that have been around for some time,
| | 01:19 | but are just now being widely implemented.
| | 01:22 | Taken as a whole together, they will
give you a good idea as to what people are
| | 01:26 | talking about when they mention CSS3.
| | 01:29 | In many cases, enhancements to
older capabilities are defined as CSS3.
| | 01:34 | This include things like border radius,
which allow you create rounded corners
| | 01:38 | for elements; border images;
background property editions, like the ability to
| | 01:43 | have multiple backgrounds; and
enhancements to controlling background image size,
| | 01:48 | orientation, and clipping.
| | 01:50 | In some cases, it's also associated with
enhancements to existing property values.
| | 01:55 | The new color values of HSL and the
addition of RGBA and HSLA, which add alpha
| | 02:01 | values to color values, are also
often labeled as being features of CSS3.
| | 02:06 | Many of the new text-formatting
features are often also classified as CSS3.
| | 02:12 | These include things like the new
text shadow property, creating multiple
| | 02:16 | columns, and working with web fonts.
| | 02:18 | Now, web fonts aren't new,
and they've been around since the CSS2.0
| | 02:22 | specifications, but browsers
have only recently started adding
| | 02:26 | widespread support.
| | 02:28 | Web fonts allow you to use fonts that
aren't installed on the client's system, and
| | 02:32 | greatly increase their creative
control that designers have over their sites.
| | 02:37 | Quite a few new selector types have
been added to CSS as well, and although they
| | 02:41 | don't get a lot of attention when
people discuss CSS3, I would actually argue
| | 02:46 | that they are among the most important
additions to CSS, as they dramatically
| | 02:51 | increase a designer's ability
to target elements on the page.
| | 02:54 | There are also a few features that are
almost always mentioned when CSS3 is discussed.
| | 03:00 | If you've been researching it at all,
I am guessing you've come across these.
| | 03:03 | First, box shadow gives us the ability
to add drop shadows to element boxes.
| | 03:09 | You can control the color, offset, blur,
and whether this shadow is offset or
| | 03:14 | inset in relation to the element.
| | 03:16 | One of the features that gets a
tremendous amount of attention is CSS gradients.
| | 03:21 | CSS gradients are incredibly powerful
and allow you to set the background color
| | 03:25 | of an element to a gradient.
| | 03:28 | You can use a simple two-color gradient,
or you can go all out by using numerous
| | 03:31 | color stops and varying levels of
opacity throughout the gradient.
| | 03:35 | Now, these can be linear or radial,
and designers are currently using them to
| | 03:39 | create all kinds of impressive visual
effects, from creating buttons all the way
| | 03:43 | to building background patterns.
| | 03:46 | CSS transforms are also getting a
fair amount of recent attention.
| | 03:49 | Transforms allow you to do things like
rotate items, scale them, skew them, or
| | 03:56 | otherwise transform elements on the page.
| | 03:58 | While this has powerful implications on
how page layout can be controlled, it's
| | 04:03 | also often used in conjunction with
another new CSS feature, CSS transitions.
| | 04:08 | CSS transitions lets you animate
from one CSS property value to another.
| | 04:13 | For example, you could animate the
height of an element from 0 pixels to 100
| | 04:18 | pixels to reveal the contents of the element.
| | 04:21 | When combined with transforms, you can
animate the position, rotation, and even
| | 04:24 | scale of an element.
| | 04:26 | One of the properties gaining the most
attention currently is CSS-based animations.
| | 04:32 | Although the two are similar, don't
confuse transitions with animations.
| | 04:35 | CSS animations are contained within
their own specification, and they allow you
| | 04:40 | to create keyframes to control
animations and properties that allow you to
| | 04:44 | control the timing, duration,
and looping of the animations.
| | 04:48 | While that's not a comprehensive
list of all the features that are being
| | 04:51 | attributed to CSS3, it should give you
a good idea of what people are referring
| | 04:56 | to when they discuss it.
| | 04:57 | There's another thing that you should
consider when approaching many of the
| | 05:00 | features that I've talked about here:
| | 05:02 | most are either not widely supported
or not supported at all in older browsers.
| | 05:07 | Now, many of them are experimental and
are only supported through the use of
| | 05:11 | vendor prefixes, which we're going to
discuss in more detail in just a little bit.
| | 05:15 | What that means is that if you decide
to use these new features, you will need
| | 05:18 | to--at least in a short term--plan for how
you want to deal with older browsers, or
| | 05:23 | browsers that don't support the features.
| | 05:25 | In some cases, like gradients,
browsers differ in syntax and execution.
| | 05:29 | You'll also need to keep an eye
on how the syntax is evolving.
| | 05:34 | Many of those features are still being
refined, and it's not uncommon to see the
| | 05:38 | syntax and behavior go through
significant changes before they're stabilized.
| | 05:42 | In other words, proceed with
caution until the features are supported
| | 05:46 | evenly across browsers.
| | 05:48 | So keep in mind that CSS3
isn't really any one specification;
| | 05:53 | it's more of a general term used
to describe evolving CSS features.
| | 05:57 | Keep an eye on emerging techniques and
how they're being implemented, so that you
| | 06:01 | can make intelligent decisions
about when to start using them.
| | 06:04 | For more information on many of the CSS3
features I've mentioned here, be sure to
| | 06:09 | check out my CSS3 First Look title in
the lynda.com Online Training Library.
| | Collapse this transcript |
| Vendor prefixes| 00:00 | As you learn CSS, you'll often see
examples of code with some very curious syntax.
| | 00:06 | In front of the CSS properties, you'll
often see a prefix, or a series of prefixes,
| | 00:12 | that looks something like
this. So, what are those?
| | 00:15 | Those are vendor prefixes, and they
can seem a little confusing the first
| | 00:20 | time you run into them,
| | 00:21 | especially since they seem to
set the same rule multiple times.
| | 00:25 | Vendor prefixes allow browser
manufacturers to add support for proprietary
| | 00:30 | features or features that
are still in development.
| | 00:34 | You might have noticed, for example,
that the prefixes all correspond with a
| | 00:38 | browser or browser developer.
| | 00:40 | And typically, each vendor prefix
includes an abbreviation representing the
| | 00:44 | browser manufacturer, which is
surrounded on the side by a dash and followed by
| | 00:49 | the property that they are going to support.
| | 00:51 | And here's a list of some of
the more common vendor prefixes.
| | 00:54 | We have Microsoft, Mozilla,
Opera, Konqueror, and WebKit.
| | 00:59 | Now, at first glance, it may seem like
vendor prefixes tend to confuse things,
| | 01:03 | but in reality they are very
important part of the evolution of CSS.
| | 01:08 | Remember, CSS is still a work in progress.
| | 01:11 | Many of the new features are
still being standardized and refined.
| | 01:15 | During this process, browser developers
may choose to implement these features
| | 01:19 | a little bit early.
| | 01:20 | Now, this could be the result of them
wanting to experiment with the best
| | 01:23 | implementation method or a desire to
drive a feature forward to improve the
| | 01:28 | browser's capabilities.
| | 01:30 | This means that we've reached a point
where modern browsers will offer support
| | 01:33 | for features that may see
significant changes in how those features are
| | 01:38 | supported or implemented down the line.
| | 01:41 | Now, this actually a good thing for
designers, as we get to start using these new
| | 01:45 | features much earlier than
we would have in the past.
| | 01:48 | This early adoption also creates a very
dangerous situation, where the same code
| | 01:53 | could behave differently between
browsers or even between the later versions of
| | 01:57 | the same browser based on
those implementation changes.
| | 02:01 | This is why we need vendor prefixes.
By using them, browser developers can support
| | 02:06 | implementations that are
experimental without breaking valid syntax.
| | 02:10 | Once implementations have been
solidified or the property specification is
| | 02:15 | finished, the prefix can then be safely dropped.
| | 02:18 | This will keep older code from failing
if the implementation of the property
| | 02:22 | changes between now and then.
| | 02:24 | To give you an example of this,
I want to talk about the history of browser
| | 02:27 | support for CSS gradients.
| | 02:30 | Mozilla and WebKit both started
supporting gradients while the syntax was still
| | 02:34 | being developed. At first, WebKit and
Mozilla decided to take different approaches
| | 02:40 | to the syntax of gradients,
| | 02:41 | meaning that to create the same
gradient in both the browsers you had to know
| | 02:45 | the differences in syntax between them.
| | 02:48 | As of early 2011, WebKit changed its
syntax to more closely match the shape the
| | 02:54 | syntax was taking in the specification,
which put its syntax in line with how
| | 02:59 | Mozilla was developing it.
| | 03:01 | Now this can lead to extremely
convoluted code, such as this example.
| | 03:07 | If I want to create a simple black-to-white
gradient that works across multiple browsers,
| | 03:12 | I'll need this line as a fallback for
unsupported devices, this for support in
| | 03:18 | older WebKit browsers, this for support
in Firefox, this for support in recent
| | 03:26 | WebKit browsers, this line for
support in Opera, and this one for Internet
| | 03:32 | Explorer, and I'll also need to include
these filters if I want to support older
| | 03:38 | versions of Internet Explorer.
| | 03:39 | Now finally, I'll add this code
| | 03:42 | that's based on the specification
for when user agents decide to go ahead
| | 03:46 | and drop the prefix.
| | 03:47 | On the surface, this seems like a huge pain,
but imagine if we didn't have those prefixes.
| | 03:54 | It would mean that as browsers begin
to implement these features, our syntax
| | 03:58 | would break in the some browsers and
not in others, or be rendered differently
| | 04:02 | depending upon which
browser our viewers were using.
| | 04:05 | By using vendor prefixes, we get to
decide which features we want to add without
| | 04:10 | breaking our design.
| | 04:12 | Now, essentially they give
designers a bit of a trade-off.
| | 04:15 | There prefixes allow us to use
properties before they're finalized, but they
| | 04:19 | also result in a fair amount of
additional code and the steeper learning curve
| | 04:23 | in terms of mastering the syntax.
| | 04:25 | Basically, if you're interested in
using many of the CSS3 modules now,
| | 04:30 | you'll need to learn these
prefixes and when to use them.
| | 04:34 | A little bit later on, I'll
introduce you some online tools that can
| | 04:37 | make generating the syntax and keeping
track of their changes a little easier.
| | 04:42 | Just don't lose sight of the fact that, as a
designer, the responsibility for keeping
| | 04:46 | up with those changes lies with you.
| | Collapse this transcript |
| What is a CSS Reset?| 00:00 | One of the terms that you'll probably
come across from time to time as you
| | 00:04 | become more familiar with
CSS is the term CSS reset.
| | 00:08 | A CSS reset is simply the term used
to describe a collection of styles that
| | 00:12 | designers use to deal with the
browser's default style sheets.
| | 00:16 | As we discussed a little earlier, all
browsers have a default style sheet that
| | 00:20 | will be applied to the page if they're
not overwritten by the author's styles.
| | 00:25 | Using a CSS reset, a designer can
essentially nullify those styles and start
| | 00:30 | from scratch without having to worry
about what effect the browser's default
| | 00:33 | styles might have on their own designs.
| | 00:36 | For the most part, there are couple of
basic properties that most CSS resets
| | 00:40 | establish a baseline for.
| | 00:42 | Those are margins, padding,
borders, font-size, and line-height.
| | 00:47 | Now I said "for the most part" because
there are many different variations of CSS
| | 00:50 | resets out there and some of them are
considerably more complex than others.
| | 00:55 | To use a reset, you simply add your baseline
styles to the top of your main style sheet.
| | 01:01 | It's important that these styles are the
first styles your browsers encounter, as
| | 01:06 | you want to reset the values site wide
and then go back over them and overwrite
| | 01:11 | them with the site's specific styles.
| | 01:13 | If the reset styles are added below the
site's custom styles, all your hard work
| | 01:18 | is undone, and the reset
values become the site's styling.
| | 01:22 | As a way of introducing you to CSS
resets, I want to show you Eric Meyer's
| | 01:27 | popular Reset CSS file, and I am
going to do that by going to his site
| | 01:32 | meyerweb.com, and just you can do an
article search, if you wanted to, for "Reset
| | 01:36 | Revisited," and you'll find
the latest version of it.
| | 01:39 | Now Eric was one of the first
developers to work on CSS resets and many
| | 01:43 | designers, developers, and systems
have adopted his approach over the years,
| | 01:47 | and even used his file.
| | 01:49 | Now rather than go through this code
line by line and bore you to tears, I'd
| | 01:54 | rather just discuss what each section
is doing as a way of building a bigger
| | 01:57 | picture about what exactly a CSS reset does.
| | 02:00 | So I am just going to
scroll down a little bit here,
| | 02:02 | so I get a little bit more into the code.
| | 02:05 | So this first really,
really big block a code here
| | 02:08 | takes most of the common HTML
elements and resets their padding, margin, and
| | 02:14 | border to 0, essentially eliminating
any of those browser default values.
| | 02:18 | It's also going to set the font-size
to 100%, and it ensures cross browser
| | 02:24 | stability with font
settings in baseline alignments.
| | 02:27 | From there it goes on to ensure
block-level display for newer HTML file elements,
| | 02:31 | it gives a consistent value for
line-height and then goes ahead, and removes
| | 02:35 | the styling from list.
| | 02:37 | Now as you can see below this, there is
actually a little bit more than just that
| | 02:40 | going on here, but by now
I think you get the idea.
| | 02:43 | Now the flip side of this of course is that
if you remove the default styling of an
| | 02:47 | element, you have to remember
to put your own styling back.
| | 02:50 | If you eliminate the default margins on
paragraphs, for example, you have to
| | 02:54 | remember to give them a value later on
in your styles, or all your paragraphs
| | 02:58 | wouldn't have any spacing between them at all.
| | 03:00 | Now, that's one of the reasons that some
designers are critical of using a CSS resets.
| | 03:05 | If you plan on setting your own
margins for paragraphs in your styles, you're
| | 03:09 | essentially doing the work twice by
resetting the value to 0 and then setting it
| | 03:13 | again to the desired value.
| | 03:15 | CSS resets can also cause the
browser to do a lot of work.
| | 03:19 | Depending upon the complexity of the
reset, you could be asking the browser to
| | 03:23 | go through and style every single
element before even beginning to apply the
| | 03:28 | site's actual styling, and this can
add a lot of overhead to your sites, for a
| | 03:32 | minimal amount of value on occasion.
| | 03:34 | Now other designers love the fact
that a CSS reset gives them a consistent
| | 03:39 | baseline to build sites from.
| | 03:40 | Instead of having to remember which
items they need to overwrite for a site and
| | 03:44 | which they don't, going ahead and using
a reset consistently when designing
| | 03:48 | sites means that you know exactly where
you're starting from every single time.
| | 03:53 | There's a lot of value in that.
| | 03:54 | Should you use a reset or not?
| | 03:57 | Honestly, there is simply a personal preference
| | 03:59 | that depends on how you
as a designer like to work.
| | 04:03 | In fact, the need for a CSS reset can
even vary from one project to the next.
| | 04:09 | Eric Meyer even says in the introduction to his
reset that it's not designed to be used as is,
| | 04:14 | that it should be altered and customized to
meet the needs of the designer or the project.
| | 04:20 | Unfortunately, I'll be honest with you here,
| | 04:22 | designers have gotten into the habit
of just copying and pasting CSS
| | 04:25 | resets into their styles.
| | 04:27 | Now, this approach may give them the
default baseline to work from, but in my
| | 04:31 | opinion, it actually creates a
more work for them in the long run.
| | 04:35 | By exploring the styling needs of a
site carefully and then planning for how a
| | 04:40 | reset can benefit that site, a designer
can take a standard reset and tweak it so
| | 04:45 | that the reset is efficiently
setting default styling for that project.
| | 04:48 | My own personal approach to using
resets is actually a really minimal one.
| | 04:53 | I simply prefer the zero out default
values for elements that I know I'm
| | 04:56 | going to use in the site, and I don't have a
set reset that I use for every single project.
| | 05:00 | I have simply just like guiding
principle to use smaller efficient resets, if
| | 05:04 | I need them at all.
| | 05:05 | Now if you want to learn more about CSS
resets, I recommend checking out cssreset.com.
| | 05:12 | This is an awesome resource that
explains a little bit about what a CSS reset
| | 05:16 | is and how to determine if you need one,
and it provides you with the links to
| | 05:21 | some of the more popular
CSS resets in use today.
| | 05:24 | You noticed Eric Meyer's resets there,
| | 05:26 | there's the YUI CSS, and a lot more of them.
| | 05:29 | Now if you read the documentation for
these resets and go ahead and explore the
| | 05:33 | code that's provided, you will gain
a greater appreciation for dealing with
| | 05:37 | browser default styles, when it's
appropriate to use these resets, and where
| | 05:41 | the use of a CSS reset fits
into your own design philosophy.
| | Collapse this transcript |
|
|
4. CSS ResourcesUsing frameworks and grids| 00:00 | As you begin to develop web sites,
you'll find that you often do the same
| | 00:04 | things over and over again when writing CSS.
| | 00:07 | At a minimum, you'll have to figure
out how you want to deal with browser
| | 00:10 | inconsistencies, what type of layout
styles to use, and what kind of typographic
| | 00:15 | treatment you'll use for your site.
| | 00:17 | Over time you'll find that you begin
to develop a consistent way of handling
| | 00:21 | these issues thorough your styles.
| | 00:23 | In many ways, it would be advantageous
to have a templating system in place to
| | 00:27 | speed up the process of generating those styles.
| | 00:30 | Well, that's where CSS frameworks come in.
| | 00:33 | CSS frameworks are pre-existing CSS
libraries that are designed to give you a
| | 00:38 | starting point for your site's CSS, as
well as to give you tools to make page
| | 00:43 | layout and typography faster to implement.
| | 00:45 | There are a lot of different CSS
frameworks available, with a wide variety of
| | 00:50 | features, but as a general
rule, here's how they work.
| | 00:54 | Most of the frameworks come with a
style sheet that contains a base level set of styles.
| | 00:59 | These will typically contain a CSS reset
to account for browser default styling,
| | 01:05 | baseline rules for common elements,
basic rules for structural elements, and
| | 01:10 | rules that help with browser inconsistencies.
| | 01:14 | From there, the framework might include
styles for form and table styling, styles
| | 01:19 | to control the site's
typography, and a CSS grid for layout.
| | 01:25 | CSS grids allow you to quickly build
multi-column layouts based on a specific grid.
| | 01:30 | The grids themselves might be based on a
fixed size, a specific aspect ratio, or fluid columns.
| | 01:37 | Basically, they work by having
pre-built classes that you can assign to
| | 01:41 | structural elements.
| | 01:43 | Those classes will control the width
and layout of containers, making the
| | 01:47 | process of building your layout as simple as
applying classes to the containing elements.
| | 01:53 | Developers will often build CSS grids
as part of a larger framework, although
| | 01:57 | it's not uncommon to see
them as stand-alone tools.
| | 02:00 | Now the choice to use or not use a CSS
framework is entirely up to you or your team.
| | 02:07 | There are both pros and cons to using them,
| | 02:09 | so let's take a look at how to determine if
a CSS framework is right for your project.
| | 02:14 | On the plus side, CSS frameworks
can save you a lot of work, especially if
| | 02:20 | you're working on a larger site
that requires multiple styling options.
| | 02:24 | They can also take the worry away about
generating cross-browser compliant code.
| | 02:29 | In the most cases, this headache will be
taken care of for you by the framework.
| | 02:34 | For frameworks that have grids built in, the
process of generating layouts is much faster.
| | 02:40 | Many of the grids are designed to be
extremely flexible and give you multiple
| | 02:44 | options for creating multi-column layouts.
| | 02:46 | Using a framework in the team
environment also gives you a consistent code base
| | 02:51 | to work from, from the beginning.
| | 02:53 | This makes it easier to make sure that
everyone's on the same page and that code
| | 02:57 | conventions are already in place.
| | 03:00 | Basically, if you use them correctly, a
quality framework can lower the amount of
| | 03:04 | time that it takes you to create sites
and ensure that you're using styles that
| | 03:08 | you know are going to work.
| | 03:10 | That doesn't mean, however, that
they're not without their drawbacks.
| | 03:13 | Unless you're working on a really,
really complex site, it's doubtful that you'll
| | 03:17 | use all of the features
that a framework has to offer.
| | 03:21 | That means that often you have a lot of code
in your styles that you're simply not using.
| | 03:26 | Many frameworks also come
structured with multiple CSS files.
| | 03:30 | Now, this means that you either have to
combine them yourself or be committed to
| | 03:34 | having links to multiple external
style resources on every single page.
| | 03:39 | Another consideration is that most
frameworks make heavy use of class styles, and
| | 03:45 | their classes often look something like this.
| | 03:49 | Now, while this means
something to the framework,
| | 03:52 | it has no semantic bearing on your site,
| | 03:55 | so if you use a framework, be prepared
to have class-heavy, non-semantic markup
| | 04:00 | throughout your site.
| | 04:02 | Frameworks can also be difficult
to update, modify, and maintain.
| | 04:06 | Since you didn't write the code, finding
specific styles that you want to modify
| | 04:10 | or overwrite can be a kind of difficult.
| | 04:12 | It can also be hard to add
functionality not contained within the framework, as
| | 04:17 | the complex nature of the styles may
cause conflicts with your custom styles.
| | 04:22 | Also, just because frameworks are
designed to speed up site development, doesn't
| | 04:26 | mean that they're simple to use.
| | 04:28 | The more features a framework has, the
more you're going to need to know exactly
| | 04:33 | what's going on in order
to make it work efficiently.
| | 04:36 | In fact, I am going so far as to say
that if you're a beginner, a framework
| | 04:40 | isn't necessarily a good idea.
| | 04:42 | You need to understand how the underlying
CSS works in order to use them correctly.
| | 04:47 | However, they are great teaching
tools. If you find a well-documented CSS
| | 04:52 | framework, learning to use it can be
a great way of learning how to write
| | 04:56 | efficient cross-browser CSS.
| | 04:58 | I think one of the best ways is to
decide whether a CSS framework is right for
| | 05:02 | you is to simply try one out,
| | 05:04 | so in our next movie I'll introduce
you to some of the more popular CSS
| | 05:08 | frameworks to give you a
starting point for your own research.
| | Collapse this transcript |
| Popular frameworks| 00:00 | Once you've developed a site or two
with a framework, you'll have a good feel
| | 00:03 | for when they're
appropriate and when they are not.
| | 00:06 | With that in mind, let's take a look at
some of the more popular CSS frameworks.
| | 00:11 | Blueprint is one of the oldest and
most respected frameworks around.
| | 00:15 | It includes a CSS reset, a layout grid,
best practices typography, form styles,
| | 00:21 | print styles, and more.
| | 00:23 | It's also one of the better-documented
frameworks as well, with its own wiki and
| | 00:27 | live demo pages that you can explore.
| | 00:30 | You can find it at www.blueprintcss.org.
| | 00:35 | 52framework is a full-featured framework
focused on the newer features of HTML5 in CSS3.
| | 00:42 | It includes fallback support
for older browsers and is also
| | 00:45 | extremely well documented,
| | 00:47 | with demo pages and video
overviews of all the major features.
| | 00:51 | You can find it at 52framework.com.
| | 00:56 | The 960 Grid System is one of the
most popular CSS grid-focused frameworks.
| | 01:01 | It offers grid layouts based on the
commonly used dimensions of 960 pixels, with
| | 01:07 | a dizzying array of options for
creating multiple-column layouts.
| | 01:11 | One of the very nice features of the 960
Grid is that the download also includes
| | 01:16 | Photoshop and Firework templates
based off the grid framework to make site
| | 01:20 | mockups even easier.
| | 01:22 | You can find it at 960.gs.
| | 01:27 | Another very popular framework comes from Yahoo!
| | 01:30 | The YUI 2 framework is small in size but
very powerful in terms of layout options.
| | 01:37 | In fact, there are more than one thousand layout
combinations available with YUI 2 Grids.
| | 01:44 | It's also very well documented, with
sections dedicated to getting started, using
| | 01:49 | the grids, and how it works on mobile devices.
| | 01:53 | You can find it at
developer.yahoo.com/yui/grids.
| | 02:01 | If you're looking for something a
little bit more stripped down, check
| | 02:04 | out css-boilerplate.
| | 02:06 | This is a framework developed by
one of the creators of Blueprint.
| | 02:10 | It's designed to be a lightweight
framework with a greater emphasis on semantics.
| | 02:14 | It may lack the features of other
frameworks, but it provides a solid starting
| | 02:19 | point for projects, without the larger footprint.
| | 02:22 | It's hosted a Google code, and you can
find it code.google.com/p/css-boilerplate.
| | 02:33 | Baseline is a lightweight
framework focused on typography.
| | 02:37 | It features a true baseline grid for
type, solid typographic conventions, and a
| | 02:42 | flexible four-column layout grid.
| | 02:45 | It's a great framework for someone
looking for advanced typographic styles
| | 02:49 | without additional overhead.
| | 02:51 | You can find it at baselinecss.com.
| | 02:55 | There are of course many other
frameworks for you to research and experiment
| | 02:58 | with as you explore whether CSS
frameworks are right for your projects or not.
| | 03:03 | As you experiment with the frameworks
that I've mentioned here, be sure to
| | 03:07 | search for additional frameworks to compare.
| | 03:10 | Have fun trying out some of the
CSS frameworks I've shown you here.
| | 03:13 | Just keep an open mind and be honest
about the pros and cons of using these
| | 03:18 | frameworks as you start to work
on them within your own projects.
| | Collapse this transcript |
| Preprocessors| 00:00 | As powerful as CSS is, there are going to
be times when you want to be able to do
| | 00:06 | something that the
language just won't let you do.
| | 00:08 | Let me give you a quick example.
| | 00:10 | Let's say that you use this color, which
is a burgundy, throughout your entire site.
| | 00:15 | Complex style sheets can
contain hundreds of rules.
| | 00:18 | Now, let's say that your client decides
to use this flavor of burgundy instead.
| | 00:24 | At this point, you'd better have a
good find-and-replace option in your CSS
| | 00:27 | editor, or you're going to be
doing a lot of work by hand.
| | 00:30 | Wouldn't it be easier if you could
simply declare a variable for the color at
| | 00:35 | the top of your styles and then
reference that variable throughout your code?
| | 00:39 | To change the color site-wide, you could
just simply change the color of the variable.
| | 00:43 | Well, that would be great, but you
can't do that with CSS--at least not yet.
| | 00:48 | Well, that's where CSS preprocessors come in.
| | 00:51 | CSS preprocessors are programs created
to extend the functionality of CSS and
| | 00:57 | make it easier for authors to write their code.
| | 01:00 | They work by allowing authors to write
styles using the preprocessor's extended syntax.
| | 01:06 | This code is then processed by
JavaScript or server-side languages, like PHP and
| | 01:11 | Rails, and then generates styles for the browser.
| | 01:16 | Most of the features of a CSS
preprocessor are a little beyond the scope of this
| | 01:20 | title, as they begin to move CSS away
from a strictly presentational syntax to
| | 01:25 | more of a processing language.
| | 01:27 | However, I do want to give you a
brief overview of some of the things that
| | 01:31 | preprocessors allow us to do.
| | 01:33 | We've already mentioned variables,
and most preprocessors add those to the mix.
| | 01:39 | Others allow you to nest rules in much
the same way that HTML does, which can
| | 01:43 | make writing styles a bit
faster and a lot easier.
| | 01:47 | You can also take class
selectors and reuse them in other styles.
| | 01:51 | This ability to mix in styles from one
rule to another is an incredibly powerful
| | 01:56 | way to write more efficient styles.
| | 01:59 | Some preprocessors even allow you to
pass values into a class, so that the class
| | 02:05 | covers the basic styling of an element,
while different values allow you to tweak
| | 02:10 | it in each rule that references it.
| | 02:12 | In most cases, you can also use operators.
| | 02:16 | Now these allow us to do things like
have the margin of one element equal to the
| | 02:20 | margin of another element, plus another number.
| | 02:23 | Now, that way, if the first element changes,
the second element would maintain its spacing.
| | 02:30 | Other preprocessors allow you to write
simplified code for the new CSS3 features,
| | 02:35 | adding the appropriate vendor prefixes
and support for older browsers for you,
| | 02:39 | after the code is processed.
| | 02:42 | While CSS preprocessors are
amazingly powerful, they aren't for everyone.
| | 02:47 | Now first, you have to learn how they
work and the syntax necessary for the
| | 02:51 | preprocessor to work.
| | 02:53 | In many ways, it's like
learning a new language all over again.
| | 02:56 | Second, your CSS is abstracted from you
in a way that's not always acceptable.
| | 03:02 | The CSS is processed and served
to the browser when requested,
| | 03:06 | meaning that the author doesn't always
see the end result. The resulting CSS is
| | 03:11 | often much less efficient than it would
be if carefully authored by a designer.
| | 03:16 | In many cases, JavaScript is
required to process the CSS.
| | 03:20 | In the event that a user has
JavaScript disabled, your styles could end up
| | 03:24 | malformed, or not even served at all.
| | 03:27 | Perhaps the final point about
preprocessors has really nothing to do with them.
| | 03:32 | Many of the capabilities that
preprocessors add to CSS are currently being
| | 03:36 | added through CSS3.
| | 03:39 | Eventually we should be able do the
bulk of what preprocessors help us do
| | 03:43 | without using them at all.
| | 03:45 | I also want to caution
any new designers out there:
| | 03:48 | preprocessors and their
syntax can be very complex.
| | 03:52 | If you don't understand CSS or are just
learning it, I wouldn't recommend a
| | 03:56 | preprocessor until you're a little bit more
comfortable with the native syntax of CSS.
| | 04:00 | Of course, as with any tool, you need
to decide for yourself if a preprocessor
| | 04:05 | is right for your projects or not.
| | 04:07 | Now, researching and experimenting with
them is perhaps the best way to judge for
| | 04:11 | yourself how effective they
would be in your own workflow.
| | 04:13 | So, let's take a look.
| | 04:16 | Of the available CSS preprocessors,
LESS and SASS are by far the most popular.
| | 04:22 | LESS, which you can find at
lesscss.org, uses syntax that's very similar to
| | 04:28 | CSS's existing syntax, making it very
popular with designers and easier to learn
| | 04:33 | for those that might know CSS but
maybe aren't as fluent with JavaScript or
| | 04:38 | other scripting languages.
| | 04:40 | SASS, which you can find at sass-lang.com,
actually has two syntaxes that you can use:
| | 04:48 | the older default syntax which has more
in common with scripting languages, or
| | 04:52 | the new Sassy CSS syntax that's
designed to be a bit more like CSS.
| | 04:58 | After checking out those two, you
might want to spend some time exploring
| | 05:01 | Turbine, Switch CSS, CSS Cacheer, CSS
Preprocessor, and PCSS. Each has its own
| | 05:12 | unique focus, and they come in
varying degrees of complexity.
| | 05:15 | Now CSS preprocessors certainly aren't
for everyone, and they usually require a
| | 05:20 | fair amount of experience
to implement effectively.
| | 05:23 | They are, however, extremely powerful
tools designed to extend CSS and make
| | 05:28 | writing it more efficient.
| | 05:30 | That alone makes them worth exploring.
| | Collapse this transcript |
| Editors| 00:00 | Writing CSS doesn't require
anything more than a text editor.
| | 00:05 | If you're comfortable with the rules
and syntax of CSS, you could just use
| | 00:08 | programs like Notepad or TextEdit,
write your styles, and save the documents
| | 00:13 | with a .css extension.
| | 00:15 | Although some designers are quite
content to do just that, most designers
| | 00:19 | are looking for software that makes the job
of writing and editing CSS a little easier.
| | 00:25 | CSS editors come in many different
varieties, from bare-bones editors
| | 00:29 | dedicated to CSS, to fully featured
web development applications with CSS
| | 00:34 | editing capabilities.
| | 00:36 | What's right for one designer
might not be right for another,
| | 00:39 | so before you commit to a single
editor, you should consider what type
| | 00:43 | of features you're looking for and find an
editor that matches your personal workflow.
| | 00:49 | With that in mind, I want to give you a
sample of some of the types of editors
| | 00:52 | available to you and the
features that they offer.
| | 00:56 | Use this as a starting point for researching
and finding the editor that's right for you.
| | 01:01 | I want to start by going over
some of the more basic CSS editors.
| | 01:06 | Many of these are free, and they tend
to be used by developers who are more
| | 01:10 | focused on hand coding sites with
minimal intrusion by the software.
| | 01:14 | If you're looking for something basic
but with a bit more functionality than
| | 01:18 | your everyday text editor, try
Notepad++ for Windows or TextMate for the Mac.
| | 01:25 | Both of these are more focused on
writing code and offer support for CSS.
| | 01:31 | TextMate comes with support for over fifty
languages, including CSS baked in, while
| | 01:36 | Notepad++ has a plug-in designed
to offer support for HTML and CSS.
| | 01:43 | You can find Notepad++ at notepad-plus-plus.org.
| | 01:49 | You can find TextMate at macromates.com.
| | 01:53 | Snapcss is an open-source, no-frills
CSS editor aimed at those that prefer to
| | 01:59 | code with little or no distractions.
| | 02:02 | Its feature set is extremely limited by design,
and its focus is entirely on the code itself.
| | 02:09 | You can find it at
www.improvingcode.com/snapcss.
| | 02:18 | BBEdit is a simple code
editor built for the Mac.
| | 02:22 | Code snippets, code completion,
and code support for over twenty languages makes
| | 02:27 | BBEdit a logical choice for a web
designer that needs to work heavily in code or
| | 02:32 | switch between scripting languages.
| | 02:34 | Unfortunately, it's Mac only.
| | 02:36 | You can find it at
barebones.com/products/bbedit.
| | 02:44 | There are also several CSS editors that
focus almost entirely on CSS but have a
| | 02:49 | bigger feature set than the
previous set of tools. Let's take a look.
| | 02:54 | Rapid CSS is a
feature-rich editor for creating CSS.
| | 02:58 | It has tools for both designers who
prefer to write styles manually or those
| | 03:02 | that prefer to let the
software write the code for them.
| | 03:05 | It features support for both HTML and
CSS3, has a preview functionality to let
| | 03:10 | you test your code, and has a built-in FTP
client for uploading and downloading files.
| | 03:16 | You can find out more about
it at blumentals.net/rapidcss.
| | 03:24 | Simple CSS is just that,
| | 03:26 | a simple editor for CSS files.
| | 03:29 | You can create new projects or edit
existing files, and creating and editing
| | 03:33 | rules are done through
simple and clear dialog boxes.
| | 03:37 | Although it isn't as feature rich as
some of the other tools, it is free, and
| | 03:40 | it's very easy to use.
| | 03:42 | You can find out more about it at hostm.com/css.
| | 03:46 | cssedit is a powerful CSS editor for the Mac.
| | 03:53 | It comes with live preview, an x-ray
inspector that allows you to quickly
| | 03:57 | identify which elements belong to
which styles, style editing through a
| | 04:01 | visual editor or a code editor
depending upon your personal preference, and
| | 04:05 | helpful debugging tools.
| | 04:07 | One of the tools I really like is the
ability to group styles in the visual editor.
| | 04:12 | This allows you to quickly find
styles for navigation tabs or other groups,
| | 04:16 | rather than scrolling through
your style sheet to locate them.
| | 04:19 | You can find out more about
it at macrabbit.com/cssedit.
| | 04:26 | Style Master by Western Civ is a
full-featured CSS editor for both the Mac and the PC.
| | 04:32 | In addition to features like Live
Preview and a powerful code editor, it comes
| | 04:36 | with pre-built templates, integration
with blogs, and popular CMSes, and powerful
| | 04:42 | wizards for rapidly building styles.
| | 04:45 | You can find out more about
it at westciv.com/style_master.
| | 04:53 | Stylizer is one of my favorite CSS editors.
| | 04:56 | It comes with built-in previews from
nine integrated browsers, neat tools like
| | 05:02 | their bull's-eye feature that allows
you to target an element on the page and
| | 05:05 | quickly edit the styles relating to it,
and an editor that allows you to edit
| | 05:09 | the code directly while still
giving you WYSIWYG-like editing tools.
| | 05:14 | You can find out more
about Stylizer at skybound.ca.
| | 05:18 | Of course, you might also be
looking for a CSS editor that is part of a
| | 05:24 | larger development suite. Let's face it,
| | 05:27 | you'll probably be authoring more than just CSS.
| | 05:30 | Here are some of the more popular
all-in-one web development suites.
| | 05:36 | CoffeeCup software's HTML editor is
another clean and standards-compliant HTML
| | 05:41 | and CSS editor that is
packed full of powerful features.
| | 05:46 | Code validation, multi-browser testing
support, code completion, code snippets,
| | 05:51 | and site management tools make this
a very powerful web-authoring tool.
| | 05:56 | In addition to the HTML editor,
CoffeeCup offers separate programs for specific
| | 06:01 | tasks like e-commerce and form building.
| | 06:04 | As such, if you find you need more
functionality, you can often add it through
| | 06:08 | another one of their applications.
| | 06:10 | You can find it at www.coffeecup.com.
| | 06:15 | Coda is a very popular and powerful web
design program that's released on the Mac only.
| | 06:21 | Coda offers two ways to edit your CSS
files, either visually or through hand coding.
| | 06:27 | It will even let you split windows
out and use both modes at the same time.
| | 06:32 | Coda also has an integrated WebKit
Preview pane that lets you see just how your
| | 06:36 | styles are going to render.
| | 06:37 | In addition to CSS, Coda features an
impressive array of web development tools,
| | 06:42 | such as a terminal window, JavaScript
consoles, and a live collaboration feature
| | 06:47 | that helps remote teams
work together on projects.
| | 06:50 | Learn more about it at panic.com/coda.
| | 06:55 | Last but not least is Adobe's Dreamweaver.
| | 06:58 | Dreamweaver is recognized by many as being
the industry standard tool for web development,
| | 07:02 | and for good reason. Its integration
with other Adobe tools makes it easier
| | 07:07 | to create and share assets, and its feature
list is far too large for me to list here.
| | 07:12 | As for CSS, Dreamweaver has some of
the best features in the business.
| | 07:16 | Support for HTML5 and CSS3 makes hand
coding CSS easy, and Dreamweaver's CSS
| | 07:23 | Styles panel gives you a central hub
for controlling, organizing, and even
| | 07:27 | creating styles visually.
| | 07:29 | Dreamweaver also has an integrated
WebKit Preview and comes with a CSS
| | 07:33 | Inspect mode that is similar to the
functionality of tools like Firebug and WebKit Inspector.
| | 07:39 | Dreamweaver is certainly more
expensive than the other tools I have mentioned
| | 07:42 | here, but its feature set
makes it worth the price.
| | 07:45 | Find out more at
adobe.com/products/dreamweaver.html.
| | 07:52 | How you write your CSS is entirely up to you.
| | 07:55 | As I mentioned earlier, what works for one
designer isn't going to work for another.
| | 07:59 | You owe it to yourself to try as
many tools as you can, and it's worth
| | 08:03 | mentioning that all the tools that
I've listed here are either free or have
| | 08:07 | demos that you can try
out to find your favorite.
| | 08:10 | Just be sure to find a tool that
writes clean consistent CSS the way that
| | 08:15 | you like to work.
| | Collapse this transcript |
| Online tools| 00:00 | In this movie, I want to explore some
of the online tools that can help you
| | 00:04 | generate CSS, check your syntax,
and help make your CSS more efficient.
| | 00:10 | One of the downsides to the rapid
evolution of CSS is the ever-changing nature
| | 00:14 | of the syntax and the complexity
of the vendor-specific prefixes.
| | 00:19 | Keeping track of all the changes can
feel, at times, like a full-time job.
| | 00:23 | Well thankfully, for many of the newer
CSS3 features, there are online tools
| | 00:28 | that not only help you keep up to date
with the syntax, but will generate the
| | 00:32 | code for you as well.
| | 00:33 | I first want to introduce you to a few
online tools that focus on generating the
| | 00:38 | syntax for the new features found in CSS3.
| | 00:42 | There are a surprising amount of these
tools, and many do exactly the same thing.
| | 00:46 | So instead of experimenting with all of
them, we will just preview a couple of
| | 00:50 | them to give you a feel for how they
work and then show you where you can find
| | 00:54 | some of the other tools so that
you can compare them on your own.
| | 00:58 | I want to start with perhaps
the most simple, CSS3 Generator.
| | 01:03 | You start with a simple dropdown menu,
| | 01:06 | you choose the property you want to
set, and then you begin a series of
| | 01:10 | questions or forms to generate the code.
| | 01:12 | So here, I have started with Border
Radius, and the first thing that it does is
| | 01:16 | ask me if the borders are
going to be rounded equally.
| | 01:19 | Well, let's just say Yes.
| | 01:20 | So now I can go ahead and enter in the
amount that I want for the Border Radius,
| | 01:23 | let's say 20 pixels.
| | 01:25 | It gives me a nice preview area over
here, and it also gives me the code that's
| | 01:30 | required to do that,
including the vendor prefixes.
| | 01:33 | There is also this really nice little
browser support future over here that
| | 01:37 | let's me see which browsers support it
and which versions it's supported in.
| | 01:42 | A similar tool is CSS3 Generator.
| | 01:46 | You get to work visually with
easy-to-use form controls to set the styling
| | 01:51 | that you're looking for.
| | 01:52 | Now, it has a smaller feature set
than some of the other tools, but it is
| | 01:55 | incredibly easy to use.
| | 01:57 | So once again, let's say we
wanted that twenty-pixel border radius.
| | 02:00 | So I can just go ahead and slide that,
and you can see how this is changing over here.
| | 02:06 | I can also go ahead and toggle off
whether I want minimal support for older
| | 02:09 | versions of Internet Explorer. And then
when I am happy with what I've got, let's
| | 02:14 | just go ahead and add something
like a box-shadow to it while we're at it.
| | 02:19 | And then once we are happy with it, we
can click GET THE CODE and it generates a
| | 02:23 | nice little pop-up window where I can
go ahead and copy this CSS and past it
| | 02:27 | directly into my own code. CSS3 please!
| | 02:32 | may look a little bit more
complicated, but it's actually pretty simple.
| | 02:37 | You're provided with code samples for
CSS3 features, which you can then modify
| | 02:41 | with your own settings.
| | 02:42 | So again, we can go into our
border-radius here and modify that with our
| | 02:46 | own value of 20 pixels.
| | 02:48 | We can come into box-shadow and
change some of those settings as well.
| | 02:53 | Now, unlike CSS3 Generator, you're
expected to know how to modify the syntax and
| | 02:58 | what the values pertain to;
| | 03:00 | however, with a little experimenting,
you can quickly learn quite a bit about
| | 03:04 | how the syntax works.
| | 03:06 | You can also toggle rules off and
on to see how they would affect your
| | 03:10 | preview area here, and you can sort
of invert the styling if you don't like
| | 03:14 | the darker background.
| | 03:16 | Once you're finished with your code,
you can go ahead and click to copy it to
| | 03:19 | your clipboard and paste it into your own CSS.
| | 03:24 | You'll also want to check out layer
styles, which gives you a floating palette,
| | 03:28 | not unlike Photoshop or other Adobe
programs to kind of play around with.
| | 03:33 | CSS3 Playground, which includes a large
amount of CSS properties, not just CSS3.
| | 03:42 | CSS3 Maker also provides you with
a visual way to create CSS3 code.
| | 03:49 | If you're interested in CSS3
gradients, you really need to check out the
| | 03:53 | Ultimate CSS Gradient Generator.
| | 03:56 | CSS gradient syntax is extremely complex
and has gone through many changes recently.
| | 04:02 | Not only does this tool keep you up
with the syntax, it provides you with a
| | 04:05 | familiar way to build the
gradient you're looking for.
| | 04:09 | If you've ever used Illustrator or
Photoshop to build gradients, you are going
| | 04:12 | to be a right at home
using this gradient generator.
| | 04:18 | Western Civ is a great CSS resource site,
and they have multiple tools that you
| | 04:22 | are going to want to explore.
| | 04:24 | I love the XRAY bookmark that allows
you to identify elements on the page and
| | 04:28 | how they are styled and the CSS3
Sandbox that contains tools that will generate
| | 04:33 | gradients, shadows, text
strokes, and CSS transforms.
| | 04:38 | Now, keep in mind that although the
authors of these tools generally do a pretty
| | 04:43 | good job in keeping them updated,
| | 04:45 | these are free services that
are updated as time allows.
| | 04:48 | In the end, it's up to you to make sure
that the generated code is correct and
| | 04:53 | uses the currently supported syntax.
| | 04:56 | With that in mind, generating CSS is one
thing, making sure it's right is quite another.
| | 05:01 | Thankfully, there are online
resources that can help us with that as well.
| | 05:05 | One way to test your CSS is to
run it through the W3C's Markup
| | 05:10 | Validation Service.
| | 05:12 | This service will parse your code
and return any errors that are found.
| | 05:15 | Now keep in mind that this is
designed to make sure your code is standards
| | 05:18 | compliant, not that it's going to work
in all browsers; still, it's a valuable
| | 05:22 | way to test your code and make
sure it's been authored correctly.
| | 05:28 | For a more minute check,
you might want to try CSS Lint.
| | 05:32 | CSS Lint will process any CSS you feed
it and then check it against a host of
| | 05:37 | errors and warnings, some of
those which you can see it right here.
| | 05:41 | Now one thing I want to mention is that
many of these warnings are very subjective.
| | 05:45 | For example, the default setting will
warn you if any IDs are found in your code
| | 05:51 | or if too many font sizes are declared.
Not including IDs and selectors is a
| | 05:56 | totally subjective judgment, and one
that not all designers, including myself
| | 06:00 | agree with. Plus there's no real way,
without knowing the context of the web
| | 06:05 | site, whether or not there are too
many font size declarations being used.
| | 06:09 | In the end, realize that CSS Lint is
a tool that will help you write more
| | 06:14 | efficient CSS and pick up on errors,
but don't take all its recommendations as gospel.
| | 06:19 | Well, those are a few of the tools
that are available to you, to not only
| | 06:23 | write CSS, but keep up with the evolving syntax
and to make sure that your code is error free.
| | 06:29 | Of course, there are many more online
tools than the ones I've shown you here,
| | 06:33 | so be sure to research and
experiment with as many tools as you can find.
| | 06:37 | Just be sure that any tool that you use
creates valid efficient code and that
| | 06:42 | you're using it more as a learning
tool and as a way to experiment with
| | 06:47 | properties, rather than relying
on it to generate the code for you.
| | Collapse this transcript |
| Additional resources| 00:00 | I want to thank you for
watching CSS Fundamentals.
| | 00:03 | I hope that you feel better prepared to
begin learning CSS and that you have a
| | 00:06 | better overall understanding of
how CSS works than when you started.
| | 00:10 | I want to leave you with a couple of
additional resources that I haven't yet
| | 00:14 | mentioned in this title.
Let's go ahead and take a look at those.
| | 00:17 | The Web Developer's Handbook has one of
the most massive lists of CSS resources
| | 00:22 | that you'll find anywhere.
| | 00:23 | They offer links to inspirational sites,
tutorials, blogs, tools, and services, and more.
| | 00:30 | Now, some of the links in tutorials are a
little old, but that's actually not a bad thing.
| | 00:34 | Understanding some of the challenges
that designers have faced over the years
| | 00:38 | regarding CSS will give you a better
perspective of its present state. Plus,
| | 00:43 | many of the older links to tutorials
features techniques that are still being used today.
| | 00:48 | Since almost every tutorial or site
that I would recommend you visit is already
| | 00:52 | listed in the handbook, I just want
to mention one or two more by name.
| | 00:55 | SitePoint's CSS Reference is
clear, concise, and easy to navigate.
| | 01:01 | You can get the exact same
information from reading the specifications, but
| | 01:06 | SitePoint's Reference is easy to read,
has fantastic examples, and even better,
| | 01:11 | comes with a chart of browser support
for the property that you are referencing.
| | 01:16 | This is a great reference for any
designer, especially someone who is just
| | 01:19 | starting out with CSS.
| | 01:22 | I also highly recommend reading
Chris Coyier's blog CSS-Tricks.
| | 01:26 | Chris posts some pretty impressive
demos here, although some of them might be a
| | 01:30 | little complex for a beginner.
| | 01:32 | What I really love about his blog
though, is his clear approach to describing
| | 01:35 | CSS and his focus on where it's going.
| | 01:38 | This is a fantastic blog to read for
both inspiration and staying informed with
| | 01:43 | what's going on in the world of CSS.
| | 01:46 | As always, I recommend checking out
the large selection of CSS titles in the
| | 01:50 | lynda.com Online Training Library as
well. We're adding new ones all the time and
| | 01:56 | feature CSS titles from some of
the best minds in the business.
| | 02:00 | Well, that's all for now.
| | 02:02 | Feel free to drop me a line on my blog,
simpleprimate.com, or through lynda.com,
| | 02:06 | and let me know how you're doing.
| | 02:07 | I'd also love to have you
join the conversation on Twitter.
| | 02:11 | My username is @jameswillweb.
| | 02:13 | Feel free to follow me and contact me there.
| | 02:15 | Thanks again for watching, everyone,
and I'll see you in my next lynda.com title.
| | Collapse this transcript |
|
|
