Internet, Networking, & Security Web Development 40 40 people found this article helpful The Difference Between CSS2 and CSS3 Understanding the major changes to CSS3 by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on March 12, 2020 Håkon Wium Lie, Bert Bos / World Wide Web Consortium Web Development Web Design CSS & HTML SQL Tweet Share Email The biggest difference between CSS2 and CSS3 is that CSS3 has been split 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 begin to see the advantages of breaking the recommendation up into smaller, individual pieces. Because each of the modules is being worked on individually, developers enjoy a much wider range of browser support for CSS3 modules. New CSS3 Selectors CSS3 offers several new ways to write CSS rules with new CSS selectors, as well as a new combinator, and some new pseudo-elements. There are 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." 16 new pseudo-classes have been introduced: :rootThe root element of the document.: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-childMatch the last child element of the parent.:first-of-typeMatch the first sibling element of that type.:last-of-typeMatch the last sibling element of that type.:only-childMatch the element that is the only child of its parent.:only-of-typeMatch the element that is the only one of its type.:emptyMatch the element that has no children (including text nodes).:targetMatch an element that is the target of the referring URI.:enabledMatch the element when it's enabled.:disabledMatch the element when it's disabled.:checkedMatch the element when it's checked (radio button or checkbox).:not(s)Match when the element does not match the simple selectors. There's one new combinator: elementA ~ elementBMatch when elementB follows somewhere after elementA, not necessarily immediately. New Properties CSS3 also introduced several new CSS properties. Many of these properties 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 of 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 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-clipThis 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-originThis property determines whether the background should be placed in the padding box, the border box, or the content box.background-sizeThis property indicates the size of the background image. It allows you to stretch smaller images to fit the page. Changes to Existing Background Style Properties There are also a few changes to existing background style properties: background-repeatThere 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-attachmentA new value "local" is added so that the background will scroll with the element's content when that element has a scroll bar.backgroundThe 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 supports 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-radiusborder-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radiusThese properties allow you to create rounded corners on your borders.border-image-sourceSpecifies the image source file to be used instead of border styles already defined.border-image-sliceRepresents the inward offsets from the border image edges.border-image-widthDefines the value of the width for your border image.border-image-outsetSpecifies the amount that the border image area extends beyond the border box.border-image-stretchDefines how the sides and middle parts of the border image should be tiled or scaled.border-imageThe 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, or line break (for inline elements), the box-decoration-break property defines how the new boxes are wrapped with border and padding. Backgrounds divide among several broken boxes using this property. A new box-shadow property adds shadows to box elements. With CSS3, you can now easily set up a webpage with several 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) and background colors that span the height of the column, and your text will flow through all the columns automatically. 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-widthDefines the width your columns should be. The browser will then flow the text to fill the space with columns that wide.column-countDefines 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.columnsShorthand 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 multi-column scenario. Gaps will push apart the columns, but rules do not take up any space. If a column rule is wider than its gap, it will overlap adjacent columns. There are five new properties for column rules and gaps: column-gapDefines the width of the gaps between the columns.column-rule-colorDefines the color of the rule.column-rule-styleDefines the style of the rule (solid, dotted, double, etc.).column-rule-widthDefines the width of the rule.column-ruleA 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 features in CSS3 that didn'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: Now 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: Media queries allow 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.