Skip to main content

Smashing CSS: Professional Techniques for Modern Layout

Smashing CSS: Professional Techniques for Modern Layout

Eric Meyer

ISBN: 978-0-470-68416-0

Nov 2010

304 pages

Select type: Paperback

Product not available for purchase



Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. Very few in the industry can show you the ins and outs of CSS like Eric Meyer and inside Smashing CSS Eric provides techniques that are thorough, utterly useful, and universally applicable in the real world. From choosing the right tools, to CSS effects and CSS3 techniques with jQuery, Smashing CSS is the practical guide to building modern web layouts.

With Smashing CSS you will learn how to:

  • Throw elements offscreen/hide them
  • Create body/HTML backgrounds in XHTML
  • Usemore than 15 layout techniques including clearfix, two/three simple columns, faux columns, One True Layout, Holy Grail, em-based layout, fluid grids, sticky footers, and more
  • Use a variety of CSS effects including CSS popups, boxpunching, rounded corners, CSS sprites, Sliding Doors, Liquid Bleach, ragged floats, and more
  • Apply CSS table styling including using thead, tfoot, and tbody, row headers, column-oriented styling (classes); styling data tables with jQuery, tables to graphs, tables to maps; and more
  • Use CSS3 elements including rounded corners, multiple backgrounds, RGBA, using jQuery to do CSS3 selections and so much more.

Eric Meyer is an internationally recognized expert on the subjects of HTML, CSS, and Web standards, and has been working on the Web since 1993. Smashing CSS is for developers who already have some experience with CSS and JavaScript and are ready for more advanced techniques.

Smashing Magazine ( is one of the world's most popular web design sites. True to the Smashing mission, the Smashing Magazine book series delivers useful and innovative information to Web designers and developers.


Chapter 1: Tools.


Web Developer Toolbar.

Internet Explorer Developer Toolbar (or Tools).

Dragonfly (for Opera).

Web Inspector (Safari).



Diagnostic Style Sheet.

Reboot Styles.


Chapter 2: Selectors.

Pseudo What?

Targets with Style.



What Happens when You omit Shorthand Value Keywords.

Selectively Overriding Shorthands.

Universal Selection.

ID vs. Class.

ID with Class.


Simple Attribute Selection.

Attribute Selection of Classes.

ID vs. Attribute Selector.

Substring Attribute Selection.

More Substring Attribute Selection.

Child Selection.

Simulated Partial Child Selection.

Sibling Selection.

Generating Content.


Chapter 3: Tips.


Ordering Your Font Values.

Rolling in Line-Height.

Unitless Line-Height Values.

Avoid Style-less Border Values.

Controlling Border Appearance with Color.

Suppressing Element Display.

Suppressing Element Visibility.

Th rowing Elements Off -screen.

Image Replacement.

Print Styles.

Developing Print Styles.

Block-level Links.

Margin or Padding?

Outdenting Lists.

Bulleting Lists.

Background Bullets.

Generating Bullets.

You Have More Containers than You Think.

Document Backgrounds.

Server-specifi c CSS.

Chapter 4: Layouts.

Outlines Instead of Borders.

Centering Block Boxes.

Float containment: overflow.

Float containment: floating.


Adjacent Clearing.

Two Simple Columns.

Th ree Simple Columns.

Faux Columns.

Liquid Bleach.

The One True Layout.

The Holy Grail.

Fluid Grids.

Em-Based Layout.

Negative Margins in Flow.

Positioning Within a Context.

Pushing out of the Containing Block.

Fixed headers and footers.

Chapter 5: Eff ects.


CSS Pop-ups.

CSS Menus.


Pre-CSS 3 Rounded Corners.

CSS 3 Rounded Corners.

CSS Sprites.

Sliding Doors.

Clipped Sliding Doors.

CSS Parallax.

Ragged Floats.

Better Ragged Floats.

Boxing Your Images.

Constrained Images.


Chapter 6: Tables.

Head, Body, Foot.

Row Headers.

Column-oriented Styling.

Table Mapping.

Table Graphs.

Chapter 7: Th e (Near) Future.

Styling HTML 5.

Classing like HTML 5.

Media Queries.

Styling Occasional Children.

Styling Occasional Columns.

RGB Alpha Color.

HSL and HSL Alpha Color.

Shadowy Styles.

Multiple Backgrounds.

2D Transforms.


Smashing CSS Download Files