The Difference Between CSS2 and CSS3

The Major Changes to CSS3

CSS3 logo
CSS3 includes a number of new style options. Håkon Wium Lie Bert Bos World Wide Web Consortium

The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. Each of these modules is making its way through the W3C in various stages of the recommendation process. This process has made it much easier for various pieces of CSS3 to be accepted and implemented in the browser by different manufacturers.

If you compare this process to what happened with CSS2, where everything was submitted as a single document with all the Cascading Style Sheets information within it, you will begin to see the advantages of breaking the recommendation up into smaller, individual pieces.

Because each of the modules is being worked on individually, we have a much wider range of browser support for CSS3 modules. As with any new and changing specification, be sure to test your CSS3 pages thoroughly in as many browsers and operating systems as you can. Remember the goal is not to create web pages that look exactly the same in every browser, but to ensure that any styles that you use, including CSS3 styles, look great in the browsers that support them and that they fall back gracefully for older browsers that do not.

New CSS3 Selectors

CSS3 offers a bunch of new ways you can write CSS rules with new CSS selectors, as well as a new combinator, and some new pseudo-elements.

Three new attribute selectors:

  • attribute beginning matches exactly
    element[foo^="bar"]
    The element has an attribute called foo that begins with "bar" e.g.
  • attribute ending matches exactly
    element[foo$="bar"]
    The element has an attribute called foo that ends with "bar" e.g.
  • attribute contains the match
    element[foo*="bar"]
    The element has an attribute called foo that contains the string "bar" e.g.

16 new pseudo-classes:

  • :root
    The root element of the document. In HTML this is always
  • :nth-child(n)
    use this to match exact child elements or use variables to get alternating matches
  • :nth-last-child(n)
    match exact child elements counting up from the last one
  • :nth-of-type(n)
    match sibling elements with the same name before it in the document tree
  • :nth-last-of-type(n)
    match sibling elements with the same name counting up from the bottom
  • :last-child
    match the last child element of the parent
  • :first-of-type
    match the first sibling element of that type
  • :last-of-type
    match the last sibling element of that type
  • :only-child
    match the element that is the only child of its parent
  • :only-of-type
    match the element that is the only one of its type
  • :empty
    match the element that has no children (including text nodes)
  • :target
    match an element that is the target of the referring URI
  • :enabled
    match the element when it's enabled
  • :disabled
    match the element when it's disabled
  • :checked
    match the element when it's checked (radio button or checkbox)
  • :not(s)
    match when the element does not match the simple selector s

One new combinator:

  • elementA ~ elementB
    match when elementB follows somewhere after elementA, not necessarily immediately

New Properties

CSS3 also introduced a number of new CSS properties. Many of these properties were to create visual styles that would likely associate more with a graphics program like Photoshop.

Some of these, like border-radius or box-shadow, have been around since the introduction if CSS3. Others, like flexbox or even CSS Grid are newer styles that are still often considered CSS3 additions.

In CSS3, the box model hasn't changed. But there are a bunch of new style properties that can help you style the backgrounds and borders of your boxes.

Multiple Background I​mages

Using the background-image, background-position, and background-repeat styles you can specify multiple background images to be layered on top of one another in the box. The first image is the layer closest to the user, with the following ones painted behind. If there is a background color, it is painted below all the image layers.

New Background Style Properties

There are also some new background properties in CSS3.

  • background-clip
    This property defines how the background image should be clipped. The default is the border box, but it can be changed to the padding box or the content box.
  • background-origin
    This property determines whether the background should be places in the padding box, the border box, or the content box.
  • background-size
    This property allows you to indicate the size of the background image. It allows you to stretch smaller images to fit the page.

Changes to Existing Background Style Properties

And there are a few changes to existing background style properties:

  • background-repeat
    There are two new values for this property: space and round. Space spaces the tiled image evenly within the box without being clipped. Round rescales the background image so that it will tile a whole number of times in the box.
  • background-attachment
    A new value "local" is added so that the background will scroll with the element's content when that element has a scroll bar.
  • background
    The background shorthand property adds in the size and origin properties.

CSS3 Border Properties

In CSS3 borders can be the styles we're used to (solid, double, dashed, etc.) or they can be an image. Plus, CSS3 brings in the ability to create rounded corners. Border images are interesting because you create an image of all four borders and then tell the CSS how to apply that image to your borders.

New Border Style Properties

There are some new border properties in CSS3:

  • border-radius
    border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
    These properties allow you to create rounded corners on your borders.
  • border-image-source
    Specifies the image source file to be used instead of border styles already defined.
  • border-image-slice
    Represents the inward offsets from the border image edges
  • border-image-width
    Defines the value of the width for your border image
  • border-image-outset
    Specifies the amount that the border image area extends beyond the border box
  • border-image-stretch
    Defines how the sides and middle parts of the border image should be tiled or scaled
  • border-image
    The shorthand property for all the border image properties

Additional CSS3 Properties Related to Borders and Backgrounds

When a box is broken at a page break, column break for line break (for inline elements) the box-decoration-break property defines how the new boxes are wrapped with border and padding.

Backgrounds can be divided up between multiple broken boxes using this property.

There also is a box-shadow property that can be used to add shadows to box elements.

With CSS3, you can now easily set up a Web page with multiple columns without tables or complicated div tag structures. You simply tell the browser how many columns the body element should have and how wide they should be. Plus you can add borders (rules), background colors that span the height of the column, and your text will flow through all the columns automatically.

CSS3 Columns - Define the Number and Width of the Columns

There are three new properties that allow you to define the number and width of your columns:

  • column-width
    Defines the width your columns should be. The browser will then flow the text to fill the space with columns that wide.
  • column-count
    Defines the number of columns on the page. The browser will then create columns wide enough to fit in the space, but only the number you specify.
  • columns
    Shorthand property where you can define either the width or number (or both, but that rarely makes sense)

CSS3 Column Gaps and Rules

Gaps and rules are placed between columns in the same multicolumn scenario. Gaps will push apart the columns, but rules do not take up any space. If a column rule is wider than it's gap, it will overlap adjacent columns. there are five new properties for column rules and gaps:

  • column-gap
    Defines the width of the gaps between the columns
  • column-rule-color
    Defines the color of the rule
  • column-rule-style
    Defines the style of the rule (solid, dotted, double, etc.)
  • column-rule-width
    Defines the width of the rule
  • column-rule
    A shorthand property defining all three column rule properties at once

CSS3 Column Breaks, Spanning Columns, and Filling Columns

Column breaks use the same CSS2 options used to define breaks in paged content, but with three new properties: break-before, break-after, and break-inside.

Like with tables, you can set elements to span columns with the column-span property. This allows you to create headlines that span multiple columns more like a newspaper.

Filling columns decides how much content will be in each column. Balanced columns try to put the same amount of content in each column while auto just flows the content in until the column is full and then goes to the next one.

More Features in CSS3 That Aren't Included in CSS2

There are lots of additional things coming to CSS3 that don't exist in CSS2 including:

  • CSS Template layout module and CSS3 Grid positioning module- creating grids with CSS
  • CSS3 Text module - outline text and even create drop-shadows with CSS
  • CSS3 Color module - with opacity
  • Changes to the box model - including a marquee property that acts like the IE tag
  • CSS3 User Interface module - giving you new cursors, responses to actions, required fields, and even resizing elements
  • Media Queries - allows you more flexibility when defining how a style sheet should be used. For instance, you could define a style sheet that is only for handheld devices that have a viewport larger than 20em.
  • CSS3 Ruby module - provides support for languages that use textual ruby to annotate documents
  • CSS3 Paged Media module - for even more support for paged media (paper, transparencies, etc)
  • Generated content - running headers and footers, footnotes, and other content that is generated programmatically, especially for paged media
  • CSS3 Speech module - changes to aural CSS