Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.