New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS Fundamentals
Illustration by

Exploring specifications


From:

CSS Fundamentals

with James Williamson

Video: Exploring specifications

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 chore if you're not familiar with their format. So in this movie, I want to walk you through the process of using the W3C's site to learn more about a specific subject, and how to use the specifications as reference documents as you are learning and authoring CSS.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS Fundamentals
3h 14m Beginner Sep 26, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

This course contains a high-level overview of Cascading Style Sheets, while exploring the basic concepts, terminology, and tools of the language. Beginning with an exploration of CSS syntax, author James Williamson explains how CSS modifies text, borders, backgrounds, and color; demonstrates CSS and HTML integration; and contextualizes the current state of CSS. The course also tours some of the most popular CSS editors and frameworks and lists online tools and resources for further study. This course is for people who want a big-picture overview before taking hands-on courses.

Topics include:
  • Understanding basic selector types
  • Integrating CSS with HTML
  • Examining browser rendering differences
  • Exploring CSS specifications
  • Checking browser support
  • Understanding the box model
  • Adjusting margins and padding
  • Positioning elements
  • Exploring basic layout concepts
  • Understanding media queries
  • Introducing CSS3
  • Using CSS Reset
Subjects:
Web Web Foundations
Software:
CSS
Author:
James Williamson

Exploring specifications

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 chore if you're not familiar with their format. So in this movie, I want to walk you through the process of using the W3C's site to learn more about a specific subject, and how to use the specifications as reference documents as you are learning and authoring CSS.

Let's start with the subject we've already discussed in some detail, CSS selectors. If we go back to the W3C's Current Work page, we can see that the Selectors Level 3 module is currently a proposed recommendation. Clicking on the link in the latest version should take you to the most recent version of the specification. Now, there are ways other than the CSS Current Work Page to find CSS specifications. For example, if we go back up to our URL here, and we just take off the css selectors and leave the w3.org/TR, that's going to give us a complete list of all standards and drafts.

If I scroll down a little bit and click on CSS, I am going to see all of the CSS work. Now here the work is categorized as belonging to either Completed Work, Drafts or as Obsolete--and we only have a few of those in CSS. Now drafts in the Obsolete category are specifications that either never got adopted or whose charter was pulled by the W3C. Now the Drafts, which is considerably longer--let me go up to the very top of those--you'll notice that the drafts are ordered by the date of their last published draft.

So they're not in alphabetical order, and sometimes it can be pretty difficult to find one if it hasn't been published for a while. So if I scroll down a little bit more, I can find, right there, Selectors Level 3. So, same specification, just a different way of finding it. Okay, so if I click on this, it takes me back to that specification. Okay, so no matter really how you get to a specification, once you're exploring it, it's going to help you understand what's going on if you understand how the specifications are structured.

All specifications follow the same basic template and format. So if you learn how the document structure work, it's going to be a lot easier to find what you are looking for within the spec. The first thing that you need to do is to make sure you're reading the most recent version. Now notice that at the very top here, you are going to see links to This Version, the Latest Version, and the Previous Version. Don't assume that you're looking at the most recent version, even if you clicked on the link from the W3C site. Now the first thing I do is always click right here on this Latest Version link to make sure I'm not reading an older version.

I also need to mention here that often there will be an editor's draft as well, that's a little bit more recent than the latest version of the published specification. The editor's drafts allow editors to work on specs and try out revisions before actually publishing them. So often an editor's draft will actually give you insight into how a process is evolving, but from a reference standpoint, it's better to go ahead and stick with the published draft. Now let's talk about the structure of the specifications. At the very top of every specification, you're going to find this Abstract section.

The abstract is going to give you a brief, if not overly technical, overview of the purpose for this specification. You'll also likely see the Status of this document section, which will detail the current state of the specification. And that is typically followed by a very detailed Table of Contents. Thankfully, all of the TOCs in Specifications are extremely organized and detailed. They are structured in a very consistently logical way, and usually they can help you find what you are looking for. You know, most the time, I can zero in on exactly what I'm looking for simply by skimming the TOC, so I always recommend starting in the Table of Contents of any specification.

Okay, so in the case of CSS selectors, it was pretty easy for us to go to their current work page and scan it, or go to Standards and Drafts page and find what you are looking for. I mean, selectors is right there in the title of specification. However, how do find what you are looking for if you're not exactly sure which specification it's covered in? And after all, there are ton of modules and specs in the CSS space alone. Well, most of time you can 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 the module.

Now if I go back to the CSS Current Work page, I can scan through all these titles and sort of see if that's what I am looking for, or I can click the actual title itself. I get just a little brief description. That's going to help you narrow your focus on occasion. You know, I will be honest with you though, there are times you are just going to need to dig. In any case, I always recommend actually starting out with the CSS 2.1 Specification. Reading through and familiarizing yourself with the 2.1 Specification is going to give a good idea as to how CSS is organized and which modules to check for any new information.

Notice, for example, here in the CSS 2.1 Table of Contents, we see sections for things like Box model, Paged media, Fonts, Text, and if you were to go over the Current Work page, you can find modules for each one of those sections. So in that sense, it's pretty easy to monitor the status of these modules to see how they're changing. Now I also wish the W3C had a better way of searching through its specs, but honestly, the search feature on the W3C's homepage doesn't work all that well.

Of course, the upside of having to search through all those multiple specifications is that you will familiarize yourself with the CSS landscape and gain a greater understanding of how it all fits together and how it all works. With that in mind, I do have one final W3C resource to show you. If you're looking to find something quickly, you may want to take a quick look at the CSS Snapshot. This document gives a quick overview of the current state of CSS and provides a list of all the current CSS properties, and index of selectors and index of the available at-rules.

Let me show you what I am talking about. So you can get a quick status and revision on Level 1, Level 2, and Level 3 of the CSS specification. Now if you are looking for something in particular, notice that I can click down here on this Property index and I'm taken to an index of all the properties that CSS has. If I click on the Selector index, I get a nice little list of every single selector that CSS has available to me. And if we keep going down, we can see an At-Rule index at the bottom that shows us all of the @rules like @media, @import, and almost all of these have more information that's available simple by clicking on a link, so you can learn more about these as well as reading through the brief description.

So this is a really great resource; I recommend bookmarking this page. Now I should mention that finding what you're looking for is only part of the equation. Now once you've found it, you are going to need to make sense of it. CSS specifications are by their very nature technical documents, and it can be extremely confusing to try to read through them. So in the next movie we are 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.

Find answers to the most frequently asked questions about CSS Fundamentals.


Expand all | Collapse all
please wait ...
Q: This course was updated on 12/13/2011. Can you tell me what has changed?
A: One movie called "Who is this course for?" was added to provide information on what you can expect to get from the course, depending on your level of familiarity with CSS.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.