- [Voiceover] Now that we have a better handle
on how to keep track of what's going on with CSS,
let's narrow our focus a bit
on how to explore and read CSS specifications.
The CSS modules are technical documents
and learning from them can be a bit of a tour
if you're not familiar with their format.
In this movie I want to walk you through the process
of using the W3C site to learn more about a specific subject
and how to use the specifications as reference documents
as you're learning and offering CSS.
Let's start with the subject that we've already discussed
in a little bit of detail, and that would be CSS selectors.
Now if we go to the W3C's Current Work page,
which I recommend any time you're looking for information
on CSS, this is really where I'd start.
We can see that if I begin to scroll down a little bit
in the completed specifications,
right there we have this Selectors Level 3 module.
Now, if we click the name of this, it's going to take us
to the most recent version of that specification.
Now, there are ways other than the Current Work page
to find CSS specifications.
If I modify the URL that I have right up here
to just read w3.org/TR,
that's going to take me to a list
of all standards and drafts
that the W3C has published and hosted.
If I click on the CSS category, that takes me down to a list
of all CSS specifications.
They're going to be listed and grouped.
They're going to be grouped by Completed work,
Drafts.
And if I scroll down a little bit further,
Obsolete.
Any of the specifications in the Obsolete category
are ones that either never got adopted
or whose charter was pulled by the W3C.
You'll notice that all of these are grouped
by the last published date.
So the most recent ones are going to be up top.
If I were to go to the Completed work
and scroll down a little bit, you can see right here
I also find Selectors Level 3.
They're a little harder to find this way
since they're listed in the order that they were published
and not alphabetical.
So a lot of times you have to sort of scan through this list
to find exactly what you're looking for.
Okay, so no matter how you get to a specification,
once you're exploring it, it really helps you
to understand what's going on,
if you understand how specifications are structured.
All the specs follow the same basic template and format.
So if you learn how the document structure works,
it's a lot easier to find what you're looking for.
The first thing you want to do is make sure
that you're reading the most recent version.
And note at the top here, you're going to have links
to this version, the latest version,
latest Selectors specification, previous versions,
and then information on all the different editors.
One of the things I do is I click on this link
for latest version to ensure that I am indeed reading
the latest version of the spec.
Don't assume that you're looking at the most recent version,
even if you clicked on the link from the W3C's site.
Another thing that I want to point out here
is that often you'll also see a link to an editor's draft.
That's actually a more recent version
than the latest version of the spec.
Editors' drafts allow editors to work on specs
and try out versions before they publish them.
So often an editor's draft will give you insight
into how the process is evolving.
But from a reference standpoint,
it's really better to stick with the latest published draft.
Now let's talk about the structure
of the specifications themselves.
At the top of every specification,
you're going to find an abstract.
This abstract is going to give you a brief,
if overly technical, overview
of the purpose of the specification.
You're also likely going to see right below that
a section called Status of this document.
That's going to detail the current status of specifications.
That's usually followed by a detailed table of contents.
Thankfully, the table of contents of specifications
are extremely detailed.
And they're structured in a consistently logical way
that helps you find what you're looking for.
Often, I'm able to zero in on exactly what I'm looking for
simply by skimming a TOC.
Okay.
So in the case of CSS Selectors, it's pretty easier for us
to scan the Current Work page,
or the Standards and Drafts page,
and find exactly what we're looking for.
I mean, Selectors is right there
in the title of the specification.
However, how do you find what you're looking for
if you're not exactly sure
which specification it's covered in.
After all, there're a ton of modules and specs
in the CSS space.
Well, most of the time you can just scan
the titles of the modules to get a good idea
as to what's being covered.
Or you can click to read the description of module
but honestly there are times
when you're just going to need to dig.
I highly recommend starting out learning CSS by reading
through the Cascading Style Sheets Level 2.1 Specification.
This spec is going to give you a good idea
as to how CSS is organized and which modules
you need to check for a specific information.
Notice, for example, if I go down to the TOC,
you can see sections for things like the box model,
paged media, colors and backgrounds, fonts, tags, tables,
you name it.
If I go over to the Current Work page
and you scroll through, you can find modules
for each one of the sections.
So, in that sense, it's actually pretty easy to monitor
the status of those modules and see how they change.
Another nice resource that the W3 is providing for us
is the CSS Indexes page,
which you can find at drafts.ccswg.org/indexes.
This amazingly helpful resource not only lists
all the properties and descriptors and their values,
but also things like functions, at-rules and selectors.
So for example, if I click on Properties and Descriptors,
I can scroll through and find any property
that I'm looking for.
What's nice about this is, if I go to a property
that exists in more than one spec,
it'll actually list it.
Background, for example, can be found in the CSS
Backgrounds module and in CSS 2.1.
So I can look for multiple definitions of it
or find the most recent one.
This makes a great quick reference
so you want to bookmark this.
It also provides links directly to those properties
which makes it a great resource.
I should mention that this is relatively new
and they're still adding things to it.
With that in mind you also might want to bookmark
the older CSS Snapshot.
Now, this was last updated in 2010
so it's a little old.
But it gives a quick overview of the state of CSS in 2010.
And in much the same way that the index documents
those for you, provides an index
of most properties and selectors.
For example, if I click on the Selector Index down here,
you can see there is a nice quick list
for all of these selectors.
So while this document is a little bit older,
it's also a valuable one to bookmark and check out
from time to time.
Finding what you're looking for
is really only part of the equation.
Once you've found it, you'll need to make sense of it.
CSS specifications are by their very nature
technical documents and it can be very confusing
to try to read through them.
So in our next movie, we're going to take some time
to explore how CSS specifications are structured
and how to read through them
to get the information that you need.