What is the Difference Between CSS2 and CSS3

The Major Changes to CSS3

By Jennifer Kyrnin

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 it's way through the W3C in various stages of the recommendation process. CSS2 was submitted as a single document with all the Cascading Style Sheets information within it. 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 specification, be sure to test your CSS3 pages thoroughly in as many browsers and operating systems as you can.

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

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 images

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 exixting 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) thebox-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.

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 programatically, especially for paged media
• CSS3 Speech module - changes to aural CSS