CSS, together with HTML, is the very foundation of the Web. While for a Web developer CSS might come secondary because it does next to nothing but make pages look pretty, if you care about how your site looks, then you can’t go without (at least) a working knowledge of CSS. Mastering CSS is really a hard job but getting a basic idea of it isn’t. This tutorial is aimed exactly at this – to give you an idea about the most important concepts in CSS3, the latest version of the CSS standard.
What Is CSS3?
CSS3, as the name itself implies, is the successor of CSS2.1. Similarly to the way HTML5 relates to HTML4, CSS3 uses the same foundation present in CSS2 but adds new features in the form of a new combinator, new selectors, new pseudo-elements, and new style properties and values in order to respond to the changed Web landscape and/or to give more power to designers to style their sites.
In addition to the new combinator, new selectors, new pseudo-elements, and new style properties and values the most important of which will be explained later in the tutorial, two other major differences between CSS2 and CSS3 are that CSS3 is modular and offers much better browser support.
The Modularity Concept of CSS3
Unlike its predecessor, CSS3 is not a single document you can read from start to finish. Instead, it’s divided into multiple documents, called modules. Each module deals with a given functionality only, such as colors, namespaces, selectors, tables, lists, templates, basic boxes, etc. Each module has a different status of acceptance – some are still in a Working Draft status, while others are in a Last Call status, or in a Candidate Recommendation status, and a few are in the highest status of readiness, called Recommendation.
This all might sound very complicated at first but it isn’t. If a given module has a Recommendation status, this means it’s very safe to use it because it’s complete. If it is in a Candidate Recommendation status, it might be stable but it might be still under testing, so in a sense you can use it but at your own risk because changes to the specification might happen. Last Call and especially Working Draft modules are still far from stable, though you can use them but you need to be prepared to make frequent changes to your code, if the modules get revised (of course, the revisions might not be that drastic but you need to be aware that this is an alpha version of the specification).
CSS3 Supports Many More Browsers
The second biggest difference between CSS2 and CSS3 – and it’s a nice one – is that CSS3 supports many more browsers. Also, many more CSS3 features work the same way in different major browsers and their relatively new versions. While you can’t say cross browser issues are a thing of the past (yep, you still need to test your code in different browsers and in different versions of them), with CSS3 this is becoming less of a problem.
What’s New in CSS3?
Now, after you already know about the new concepts in CSS3, let’s see how this affects our every day work. There is a new combinator, as well as some selectors, pseudo-elements, style properties, and values you can use in your code.
New Combinator
Combinators are probably the most difficult part of CSS and you might rarely or never have to use them but you do need to have an idea about them. When we want to include more than one simple selector in a selector (don’t give up, if you don’t understand, there is more on selectors next) we need a combinator. Basically, the combinator explains the relationship between the selectors.
Prior to CSS3, there were 3 combinators: the descendant combinator, the child combinator, and the adjacent sibling combinator. Now CSS3 adds a new combinator – the general sibling combinator. Its purpose is to match sibling elements no matter where they are (i.e. even if these sibling elements don’t follow each other immediately). Here is an example how to use it:
elementX ~ elementY
Use this, when you want to match elementY after elementX.
New CSS Selectors
Great, if you are still following, this means you are not an easy quitter and the new combinator didn’t scare you. Selectors aren’t the easiest aspect of CSS either but they do a great job, so you need to get familiar with them. As you probably remember from the tutorial on CSS and CSS2, selectors help to define rules how to style the selected element and in this aspect CSS3 goes much further in allowing you to create precise rules.
However, as you probably have learned so far, simplicity is key and my advice is to use selectors wisely – i.e. don’t create complex rules just for the sake of it because the more complex a CSS is, even with proper documentation, making changes to it later can be pretty painful. Anyway, after this short warning, here are the new selectors, together with some of the new pseudo-classes and pseudo-elements.
New Selectors Introduced in CSS3
There are three new substring matching attribute selectors:
[att^=val]– the “begins with” selector[att$=val]– the “ends with” selector[att*=val]– the “contains” selector
One of the cases when the “begins with” selector is useful is when you are trying to match a string that always has the same beginning but a different ending (like hyperlinks) and style them the same way.
Similarly, the “ends with” selector is useful when you want to match strings that end in the same way (i.e. file extensions), so that all extensions of the same type (i.e. pdf, mp3, etc.) get styled in the same way.
The third selector is the most powerful one – you can use it as a wildcard to match any type of string. For instance, if you want to style all occurrences of your company name the same way everywhere on your site (i.e. use the special font you use for your logo), this is the selector to do it with.
There is much more to know about selectors but since they aren’t beginner stuff, let’s not scare you further with more technical details. After all, many simple stylesheets can be made without knowing all the technical intricacies of selectors or combinators.
New CSS3 Pseudo-classes
CSS3 introduced more than a dozen of pseudo-classes. Here are the most important among them:
:root– used for the root element, which in HTML is always <html>.:nth-child(n),:nth-last-child(n),:nth-of-type(n),:nth-last-of-type(n),:last-child,:first-of-type,:last-of-type,:only-child,:only-of-type– these are used to match child and sibling elements based on their order of appearance. For instance, if you want to select every fourth list item in an unordered list and make it white, here is what you need:
ul li:nth-child(4) {
color: #fff;
}
:empty– matches the element that has no children:target– matches the element that is the target of the referring URI:enabled,:disabled,:checked, – use these to select the element when it’s enabled, disabled, and checked, respectively:not(s)– this negation pseudo-classes is used when you need to match an element that does not match the simple selector
If you are eager to read more about pseudo-classes, here they are listed all.
New Pseudo-elements
In addition to new pseudo-classes, CSS3 introduces new pseudo-elements as well. While pseudo-classes and pseudo-elements might look just the same, their function is different.
Pseudo-classes are used to access information that lies outside the document tree. For example, in the document tree we define a link selector but the tree doesn’t give information if the link is :active, :visited, etc. We can do this with the help of pseudo-classes. With pseudo-elements you can create abstractions about the document tree beyond those specified by the document language (i.e. use ::before or ::after pseudo-elements).
In CSS3 pseudo-elements are identified by :: and pseudo-classes by : only. This is very confusing because in CSS 1 and 2 pseudo-elements were identified by single colon (:), i.e. :before and :after and for compatibility reasons browsers do accept this but for the new pseudo-elements in CSS3 this is not valid, so you need to use double colon (::). Pretty cool, uh? In a sense, if you are new to CSS and have no prior knowledge, you are at advantage because you start with a clean plate and you won’t get confused by your old knowledge.
Fortunately, there isn’t much ground for confusion if a particular item is a pseudo-class or a pseudo-element because there are only 4 new pseudo-elements to remember:
::first-line::first-letter::before::after
Here is an example how to use them:
p::first-line { text-transform: uppercase }
This will make the first line of the text all uppercase. As you see, in practice it isn’t as complicated as it sounds in theory. If you want to learn more about pseudo-elements, check their section in the specification.
New Style Properties and Values
If you are still alive and kicking after all the stuff so far, finally we’ve come to something that’s much more enjoyable – new style properties. This is the longest list of new additions but since most of them are self-explanatory, their concept is very easy to comprehend. The new additions are so numerous and not all of them are finalized yet, so it’s next to impossible to include them all, so here is just a selection of some of the new properties and values:
Background Properties
The new background properties are these:
background-clipbackground-originbackground-size
Border Properties
Two new border properties are added:
border-radiusborder-image
Box Properties
Three new box properties to consider:
box-decoration-breakbox-shadowbox-sizing
Font Properties
A bunch of new font properties were added as well:
font-stretchfont-size-adjustfont-synthesisfont-kerningfont-variant-caps
Text Properties
Text properties also saw quite a lot of new additions, such as:
text-align-lasttext-decoration-linetext-decoration-skiptext-decoration-positiontext-decoration-styletext-emphasistext-justifytext-orientationtext-overflow
Multi-column Properties
The new multi-column properties are among the most interesting additions to CSS3. They allow very precise formatting of columns. Here are these properties:
column-countcolumn-widthcolumn-min-widthcolumn-width-policycolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-span
Other New Properties
Some of the other interesting new additions include the following properties:
animationiconimage-resolutionimage-orientationline-breakoutline-offsetoverflow-wrap / word-wraptransformtransform-styletext-shadowtransition
New Values and Units
In addition to properties, CSS3 adds new values as well. The list is pretty long to include here, so the most reasonable approach is to list just a few and tell you to look up the values (new and old) for every property you use right before you use it. Anyway, here are just a few of the new values and units:
- New
rgba(),hsl(),hsla(), andcurrentColorvalues for any property that accepts a color value. - New
linear-gradient(),radial-gradient(),repeating-linear-gradient(),repeating-radial-gradient(),image(), and multiple comma-separated images for any property that accepts an image value. - 15 new values for the
cursorproperty remunits for lengthscalc()units for lengthstoggle()units- Angle units (
deg,grad,rad,turn) - Time units (
s,ms)
The list of new style properties and values is much longer than this and new ones, especially in the modules that are still not complete, are being added quite frequently. If your head is spinning after reading about all these novelties and you wonder how you will ever learn them, don’t worry. In fact, you don’t have to learn them all – even if you use them on a daily basis, you can always look them up them and their exact syntax instead of carrying all this in your head. So, try to get their logic and when you need them, just look them up.
What is more, even if you have lots of free time to memorize all the CSS3 properties, values, etc., this doesn’t make much sense because CSS3 won’t be here for ages. The next version – CSS4 is still in the works but it’s in a very advanced stage, so in the next couple of years it will become the standard. It’s true that CSS4 isn’t galaxies different from CSS3 and the previous versions but still it makes many new things possible, so don’t get overzealous with CSS3 – just get a working knowledge of it and for now this should suffice.
