Video: CSS3 overviewPerhaps a technology that is most often confused with being part of HTML5 is CSS3. CSS3 is the next generation of Cascading Style Sheets and it greatly expands your ability to control the presentation of your sites. The confusion between what is HTML5 and what is CSS3 is actually quite understandable as the two work very closely together to produce the final rendered page. Now a good way of understanding the difference between them is that HTML controls the structure of your documents while CSS controls their presentation.
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
Perhaps a technology that is most often confused with being part of HTML5 is CSS3. CSS3 is the next generation of Cascading Style Sheets and it greatly expands your ability to control the presentation of your sites. The confusion between what is HTML5 and what is CSS3 is actually quite understandable as the two work very closely together to produce the final rendered page. Now a good way of understanding the difference between them is that HTML controls the structure of your documents while CSS controls their presentation.
Just like HTML5, CSS3 is a continuation of previous standards and it's worth taking a moment to go over a brief history of the evolution of CSS. Cascading Style Sheets were originally designed to allow browsers to specify the styling of elements within HTML documents. In 1996, the CSS1 specification became a recommendation, with the goal of allowing authors and users to specify the styling of page elements independently of the user agent.
Now, this was followed by the CSS2 recommendation two years later in 1998. Although the excitement around what CSS would allow authors to do continue to build, browser implementation lagged behind and CSS had not yet taken its rightful place alongside HTML. Now that same year, the W3C drafted a note to suggest improvements to the CSS2 specification. You can still view it online at the W3C. Now this note helped form the basis of the CSS3 specification, which was submitted as a working draft in April of 2000.
Now, that part usually surprises people. Really CSS3 has been around since 2000? Yeah, sort of. Now remember working drafts are just that. Now in the meantime a very significant event in the life of CSS occurred in 2002. That's when CSS2.1 was issued as a working draft. As of this recording, CSS2.1 has reached the candidate stage and is usually what people are referring to when they refer to CSS.
Most major browsers now implement the majority of the 2.1 specification. So what's going on with CSS 3? Well, in order to make the process of working with such a large specification a little easier, CSS3 has been split into modules. The development of these modules is occurring independently and some have a higher priority than others. There are an incredible amount of modules. Certainly, more than I can list here, but to give you an idea what I'm talking about, sample modules include selectors, mobile profiles, values and units, text, text layout, fonts, color, 2D transformation.
Although splitting the specification into modules allows the working group to focus on specific areas and then issue recommendations based on priorities, the slow process of the overall procedure and the demand by designers for these new features has led to browsers issuing proprietary extensions to either test or implement a CSS3 property that hasn't reach candidate recommendation yet. Now this is causing a bit of a headache for designers as we seek to add CSS3 capabilities to our sites. Let me give you an example.
So let's say I want to take this div tag and round the corners to give it that cool look that all the kids like. Well, if I'm following the CSS3 specification, this is all I need to do. That's pretty easy, right? Well, here's the problem. Not all browsers support the border-radius property. I could just leave it at that and let the unsupported browsers show an ugly old box, but using vendor specific properties, I can extend the reach of my rounded corners to other browsers. Here we go! Now here I'm adding vendor specific properties to make sure that it works in Firefox and WebKit browsers.
Hey, what if I want to do asymmetrical corners? Now that would look really cool! Well, vendor specific markup results in this. That's without adding specific markup for Opera or Konqueror browsers. As you can tell, that is a mess. So the good thing about this is that allows us to use properties before their finalized as part of the recommendation. However, it creates a confusing amount of code and filters that must be written in order to achieve the desired results. What's more, the CSS3 specification advises against using these vendor specific extensions, since the CSS properties they represent could change before being standardized.
The reality is that until more of the CSS3 specification is standardized and then natively supported by browsers, vendor specific extensions are a necessary evil when using many of the new features in CSS3. If you're interested in using much of the CSS3 specification now, you'll need to learn these properties and when it's appropriate to use them. So while it's easy to get excited about many of the new features and capabilities of CSS3, it's not just as easy as learning the specification. If you want to make the process of writing CSS3 styles a bit easier, I recommend taking a look at eCSStender.
Hopefully, this'll give you an idea of how typography, styling, and even behavior can be influenced by the next generation of Cascading Style Sheets.
There are currently no FAQs about HTML5 First Look.