CSS: The Definitive Guide- Visual Presentation for the Web

by Eric A. Meyer, Estelle Weyl

If you’re a web designer or app developer interested in sophisticated page styling, improved accessibility, and saving time and effort, this book is for you. This revised edition provides a comprehensive guide to CSS implementation, along with a thorough review of the latest CSS specifications.

CSS is a constantly evolving language for describing the presentation of web content on screen, printers, speech synthesizers, screen readers, and chat windows. It is used by all browsers on all screen sizes on all types of IoT devices, including phones, computers, video games, televisions, watches, kiosks, and auto consoles. Authors Eric Meyer and Estelle Weyl show you how to improve user experience, speed development, avoid potential bugs, and add life and depth to your applications through layout, transitions and animations, borders, backgrounds, text properties, and many other tools and techniques.

This guide covers:

Selectors, specificity, and the cascade Values, units, fonts, and text properties Padding, borders, outlines, and margins Colors, backgrounds, and gradients Floats and positioning tricks Flexible box layout The new Grid layout system 2D and 3D transforms, transitions, and animation Filters, blending, clipping, and masking Media and feature queries

Genres: Reference, Programming, Technology, Web, Design, Website Design, Technical

1088 pages, Paperback

First published May 8, 2000

About the author

Eric A. Meyer is an American web design consultant and author. He is best known for his advocacy work on behalf of web standards, most notably CSS (Cascading Style Sheets), a technique for managing how HTML is displayed. Meyer has written a number of books and articles on CSS and given many presentations promoting its use. Eric currently works for Igalia.

Reviews

[Maureen]

OMG, there are a lot of words.

[Wilson Jimenez · Rating 4 out of 5]

Review

Notes

#2 Selectors

- Running “document.createElement('main')” will allow IE8 (which doesn't support it) to understand that element exist so we can style it.
- [class|="btn"] class starts with "btn-" or is exactly "btn".
- [class^="btn"] starts with "btn".
- [title="foo"] matches foo in a space separated list of words.
- Attribute selectors tend to be case sensitive if the underlying document language is.
* HTML attribute key terms, which is not: input[type="CHECKBox"].
- CSS4 introduces a case-insensitivity identifier: img[src$=".pdf" i].
* Only works for values, may not work on attributes, be aware of: input[TYPE='tel'].
^ XHTML enforces case sensitivity, HTML5 does not.
- "li + li" selects all but the first.
- "div * span" selects span grandchildren.
- "h2 + ol" adjacent sibling.
* "h2 ~ ol" following sibling.
- "a:lang(de)" target german links.
- "p:empty" pseudo-class treats whitespace as not-empty.
* Be aware of some elements which are always empty, "img" equals "img:empty".
* Is the only selector that considers text nodes.
- ":only-child", ":only-of-type".
- Changing element size on :active or :hover could cause reflow by triggering layout on the browser.
- Empty inputs might match ":valid".
- ":not()" takes a single selector, no descendants, nesting or grouping.
- Pseudo-elements styles are limited to font properties.

#3 Specificity and the Cascade

- 0,0,0,0
* Inline styles get the first digit.
* ID.
* Class, attributes, pseudo-class.
* Elements, pseudo-elements.
- Style links in the order: :link, :visited, :focus, :hover, :active, since they have the same specificity.

#4 Values and Units

- Every property accepts: inherit, initial, unset.
* Initial: set back to starting value.
* Inherit: set back to initial or inherit, whichever was previously set.
* URLs in stylesheets are relative to themselves, not the document.
- Viewport units.
* 1vmin: lesser from n/100 viewport width or height.
*1vmax: greater from n/100 viewport width or height.
- "currentColor": value of the computed 'color' property.
* when 'color' is not set on the element, this holds the inherited 'color' value.
- "turn": is a unit handy for animations.

#5 Fonts

- Never quote generic font family names like serif, it makes the browser think it refers to a font-family: font-family: Arial, 'serif'.
- When using @font-face.
* Appending "format('woff')" to the "src" prevents downloading a font the browser won't understand.
* Add "local('my-font')" first so the browser doesn't download fonts it already has.
- unicode-range can allow using a font face for a single or group of characters.
- "font-weight: bolder;" resolves to a value bolder than the parent's element.

#6 Text Properties

- line-height: use without units to make it work as a multiplier of the font-size, cause values like 1.5em get calculated and inherited as an actual value by children elements.
- vertical-align only works on inline elements and table-cells (not all values apply for table-cells).
* Accepts keywords and values.
* "bottom" value aligns elements to the bottom edge of the line, which most times is below the baseline of the text.
- "word-break: break-all" don't show hyphens even if the "hyphen" property is set.

#7 Basic Visual Formatting

- The values of margin, border, padding and content must add up to the width of the element's containing block.
* Only margin and width can be set to "auto".
^ When "auto", the remaining width of the container is distributed among those auto values.
^ If none of them is set to "auto" and the total is less than the container's width, then, margin-right is set to auto by the user agent in order to make the element's box (including margin) match the container width.
- box-decoration-break: clone. Causes each fragment of multiline inline elements to be drawn as a standalone box. So padding left|right is applied on every line rather than only at start and end.

#8 Padding, Borders, Outlines, and Margins

- background-clip prevents background from extending into the padding and/or border outside edge.
- Percentage values on padding and margin are computed from the parent's width (except on most positioned elements, flex and grid, where they are calculated with respect to the
height of their formatting context).
* can be used for fluid fluid pages, where the padding on elements enlarges or reduces to match the actual size of the parent element.
- Border takes the foreground color if no border-color is defined.
- "border-radius: h / v" sets the horizontal and vertical rounding individually.
- border-image for using an image as a border, it needs border-style and width to be set.
- Outlines do not take up space and may be non-rectangular.
* Cannot have different styles for each side.
* Run along the margin, just outside the border.
- Negative margins can create a Mondrian effect.
- Margin collapse: when vertical margins meet, the smallest one is reset to zero according to the specification.
* For parent-child, adding padding to the parent prevents collapsing.
* Doesn't happen on floated elements.

#9 Colors, Backgrounds, and Gradients

- "background-clip: text" fills the text with the background color or image (will need "color: transparent" or with opacity "color: rgba()").
- background-position: can be set in pairs like: 'top left. Except for the keyword 'center', percentages or length values.
* '0% 0%' is top left, '100% 100%' is top right., '50% 50%' is center.
* Using lengths aligns the top left of the image to the specified value: '20px 50px'.
* Can use negatives.
- Can use 4 values too in order to change the edges from which offsets are calculated.
* "background-position: left 33% top 30px" from the left edge, have a horizontal offset of 33%;
from the top edge, have an offset of 30px.
* "background-position: right 33% bottom 30px" from the right edge, have a horizontal offset of
33%; from the bottom edge, have an offset of 30px.
- When 'background-origin: center;' and background-repeat is set, the bg will be placed in the middle and then repeated, rather than starting from top left as default, making a consisten look around the edges.
- "background-repeat: space;" creates a grid pattern.
* It may override 'background-position: center' if the image is too big, like if only two repetitions can fit, it'll draw them on the horizontal edges.
- "background-repeat: round;" tries to fit as many images in the space provided: if the element is 850 px and the image 300px, the browser will scale down the image to 283 to fit 3 of them changing the aspect ratio if needed.
* To make sure images are not cut and fit completely, the origin has to be set in a corner and not the centre.
- 'background-attachment' immunes the effects of scrolling.
- 'background-size: % %' percentages refer to the area defined by 'background-origin' and not 'background-clip'.
- Setting auto triggers a 3-step fallback process:
* "background-size: auto 100px"
* On a 300px by 200px image.
^ The image has a 3:1 aspect ratio so it'll be preserved, resulting in a size of 150px by 100px.
^ If that fails but the image has an intrinsic aspect ratio (like most raster formats JPEG, PNG, GIF and some SVG), that ration will be used, resulting in 300px by 100px.
^ If that fails (which can happen on SVG or CSS gradients), like the image doesn't have intrinsic ratio, the horizontal size of the positioning area will be used (background-origin).
- Nearly every background property can be comma-listed, allowing for multiple backgrounds.
* Even the shorthand 'background: ..., ..., ...;'
^ background-color can only be added to the last layer, otherwise the declarations are made invalid.
- Gradients are images just like raster or vector.
* And can be used in any context an imager can, e.g. 'list-style-image'.
* They've no intrinsic aspect ratio.
- Setting the same color stop for two colours causes a hard colour switch effect.
- Color-hints declare the midpoint colour of the gradient transition.

#10 Floating and Shapes

- Margin on floated elements do not collapse.
- If no width is specified, the width collapses to zero.
- Floated elements do not overlap, if two floats are wider than the container, the 2nd one will drop to the next row.
- Floats only move horizontally, elements won't float to the top or bottom of the container.
* And are aligned top.
- When other elements overlap with a float:
* Inline: Borders, big and content render on top of the float.
* Block: borders and bg behind, content on top.
- ‘shape-outside’: floats around a defined shape.
* For images, they should have an alpha channel, or the shape will be rectangular.
* Can use inset, circle, ellipse, polygon.
- ‘shape-image-threshold’: opacity of float shape.
- 'shape-margin': margin around shape.

#11 Positioning

- Containing block
* For relative and static: the parent's content edge.
* For absolute: content edge if inline parent, padding edge if block parent.
- You can absolute position elements inside absolutely positioned elements.
- When absolute, setting 'auto' for offset prop 'top' makes the top touch the upper edge line up with the place the element would've been if not positioned at all (static position).
* left and right also but not bottom.
- 'static' position is basically the place in the normal flow of the document.
- left + margin + width + right = containing block width.
* If they sum is less than the containing block width, margin-right takes the remaining space (reset to auto).
* On positioned elements with all values set (left, width, margin, right), 'right' is reset to auto.
* If any of the props is set to 'auto', that one takes the remaining space.
- 'position: absolute; height: 5em; top: 0; bottom: 0; margin: auto;': centres vertically.
- Replaced elements have an intrinsic width and height.
- The specification keeps children from being drawn behind their parents when using z-index.
* Each parent with z-index, establishes a stacking context for its children.

#12 Flexible Box Layout

- Flexbox was designed for single dimensional layouts, works best at arranging information along one axis, not grids.
* 'justify-content' won't necessarily apply the same spacing between elements on multiple cross-axis blocks if the element count or size on each block is different.
- When 'writing-mode: vertical-lr;', flex direction row means top to bottom.
* Similar for 'direction: rtl'.
- 'flex-wrap', controls the cross-axis direction.
- 'flex-flow', shorthand for flex-direction and flex-wrap.
- flex items won't shrink to smaller than their border, padding, margin combined.
- justify-content aligns items across the main axis.
* space-around gives each item the same margin, making the space between the ones in the middle being double of that at the start and end (no margin collapse).
* space-evenly splits white space evenly everywhere.
- 'align-items' aligns items across the cross axis.
* stretch: will make elements take 100% height unless margin, [min-|max-]height are set.
* baseline: aligns all items' baselines starting with the one having the biggest font-size.
- 'align-self' is applied to flex items to override 'align-items'.
- 'align-content': controls the space between items spanning multiple columns in the cross-axis.
* Like justify-content does for the main-axis.
* As opposed to align-items, who aligns vertically per row.
- On flex items: margin do not collapse, 'float' and 'clear' are ignored.
- Empty text nodes (including whitespace) are ignored.
* Non-whitespace ones are wrapped in anonymous flex items and become part of the layout.
- flex-basis takes precedence over width/height.
- 'flex: 3' = 'flex: 3 0 0' (flex-basis will grow at a factor of 3 from 0px).
- 'flex: none' = 'flex: 0 0 auto'.

#13 Grid Layout

- Grids will not slide behind floated elements.
- Column props, float, clear have not effect on grid containers.
- vertical-align has no effect on grid items.
- If an inline-grid container is floated or absolutely pos, changes to display:grid.
- Grid area: one or more cells.
- Grid line can have multiple names, cols and rows and share names.
- minmax(a, b): not shorter than a, not larger than b.
- Mixing fr with other cols of fixed width, gives the fr col the remaining space.
- min-content and max-content can by used for col/row size.

[John Warner · Rating 5 out of 5]

Okay I have really hated CSS but had to learn it because that is "how you do modern webpages" etc. Having said that I was reading it for selected passages to update my knowledge of the much improved layout tools in CSS and it was clear and helpful in this case. It has also gone into my reference section of books near my desk so I can grab it. I have to say this is hardly a complete reading of it or a use of it as a reference but for the parts I wanted it worked fine.

[Chad · Rating 4 out of 5]

“Definitive Guide” is a fairly accurate title for this 3rd edition of Eric Meyer's CSS textbook; it’s a deep dive of sometimes eye-glazing detail. It’s quite technical in its explanations of the math and calculations that CSS performs. There are CSS snippets and screenshots of the results, but it’d be better if they were in color. The book was published in 2006 so it’s missing CSS3, but given the widespread use of CSS 2.1, the book is still relevant. My favorite topics were floating and positioning, generated content, pseudo-classes and pseudo-elements.

Types of positioning
• Relative: element’s box is offset by some distance. Element retains its shape, and space it would have occupied is preserved.
• Absolute: element’s box is removed from flow and positioned with respect to its containing block (nearest block-level ancestor box). The space it would have occupied is closed, as though the element didn’t exist. The positioned element generates a block-level box.
• Fixed: element’s box behaves as though set to absolute, but its containing block is the viewport.

Display: none vs. visibility: hidden
display: none renders the element invisible, and it doesn’t take up the space it would ordinarily. visibility: hidden renders the element invisible, but it takes up the space it would ordinarily.

[Abhishek Kumar · Rating 5 out of 5]

One of the few things I always dreaded was to implement any visual design into code. I always prioritised other languages and technologies over CSS. But, then I started to hit roadblocks in writing and understanding CSS, and a lot of CSS repetitions and classes started to appear in my code, which were leading to unwanted cognitive complexity in understanding the front end JSX for my React components. I finally decided to pick up this book, and I absolutely loved it. The chapters are really structured well, and I can pick up the chapter that I am having problem understanding. Like, transition or position or FlexBox etc. Would highly recommend anyone who is willing to take a dive into the world of CSS.

[Marcos · Rating 5 out of 5]

This book taught me CSS, plain and simple. I read it as if it were literature, non-technical. It gave my a big picture of what CSS could do at the time.

It is really easy to read and helps you understand CSS with little effort. As a beginner frontend developer I even looked things up on it, almost always giving me an answer (you know, quirks, bugs and bad implementation was difficult to catalogue and include).

[Alexander · Rating 4 out of 5]

It is what you would expect from a definitive guide book. It shouldn’t be used as a standalone material and probably shouldn’t be your first book about CSS. Read articles, specs or even Mozilla guides along the way and it all is going to make more sense.

[Darrell Ulm · Rating 4 out of 5]

Another solid book on CSS.

[Anar · Rating 5 out of 5]

with solid HTML knowledge this guide equips one with theory. i would suggest using it in parallel with w3chools.

[Tom · Rating 5 out of 5]

I have been programming for over a decade now, but mainly focused on back end technologies. Thus, I have never really taken the time to learn Cascading Style Sheets (CSS). CSS, as it turns out, was the last core web technology in widespread use that I still had not yet learned. A project came up for work that demanded me to jump into CSS, so I purchased this O’Reilly title. I am a huge fan of O’Reilly work… my bookshelves are sagging with O’Reilly titles. I didn’t really have the time to sit back and savor this read, as my work demanded I just gulp it down.

I have to say, I sincerely enjoyed this gulp. Eric Meyer is a web standards guru, and really, really understands CSS to its core. I fully admit my geekness and say that anyone who can break down a technology the way Eric did for CSS can hold my attention for 450 pages, no problem.

I did come away with a healthy appreciation for how complex good CSS can be for a sophisticated web site that is expected to work across all mainstream web browsers. With the guide, though, I came away with the tools to manage it.

I highly recommend this book to any programmer looking to create good looking websites.

[Adam · Rating 1 out of 5]

I picked up this book because I was so impressed with the JavaScript guide from O'Reilly. Unfortunately, my satisfaction did not carry through to this book. This book fails me both as a desk reference and as a tutorial. It is very difficult to succeed when attempting to find a particular tag or detail on CSS in this book (the index is sparse and skimming is difficult). Reading straight through as a tutorial is also frustrating, as the topics do not build upon each other. I had hoped the book would start out with some simple examples in structuring a page layout, and lead into more detail from there. Instead, each topic is covered first in exhaustive detail, and only in exhaustive detail. This makes using the samples very difficult.

[Martha · Rating 4 out of 5]

Like many people, when I want to learn new computer skills, I turn to an O'Reilly book as my starting reference. This book does not disappoint -- as usual, it does a good job helping the reader get started, presenting the material in a clear, logical fashion and giving you just enough background, but not so much that you get bogged down in academic details before getting to the nuts-and-bolts stuff you really want to know. I'd definitely recommend it as a starting point to anyone who wants to learn CSS.

[Christopher · Rating 4 out of 5]

This was one of the important reference books that I ever purchased from a professional development standpoint. It definitely helped me launch a whole new phase of my professional career. It's also a fairly easy read, although I would never read it through cover to cover again. It is one of those technical reference books that ALWAYS include in my "go bag" for my numerous, hateful contract assignments where pulling up the info using a Google search can be a hit or miss situation.

[Danien · Rating 2 out of 5]

CSS sounds great in theory but is a mess in practice because selecting the exact element you want to style can be a nightmare. This book addresses the basics of using CSS but doesn't cover these selection pitfalls in depth.

[Ivan Soto]

I'm reading this book alongside "Professional XML" by Bill Evjen, Kent Sharkey, and four others. As of October 8, 2011, I'm on page 19 of 447, which doesn't count the 54 pages in three appendixes. Actually, what one does with these books is not reading them but working through them.

[Vojta Svoboda · Rating 5 out of 5]

Kompletní CSS příručka, která pokrývá jak základy, tak pokročilé použití CSS. Jednotlivé CSS techniky jsou doplněny obrázky, nebo diagramy, takže není problém s pochopením.

Knížka pracuje s HTML 4 a CSS 2.1.

[wyclif · Rating 5 out of 5]

I'd read an earlier version of this book, so it's good to see that they've published a more-or-less up to date edition of this essential reference. Good for review of newer elements of CSS, including FlexBox.

[Evilmoo]

Will let you know when I finish it...

Being an O'reilly book, chances are it will be good

[Jennifer · Rating 4 out of 5]

A very handy reference book.

[Chris · Rating 5 out of 5]

Quick and handy reference for the initiated. Beginners should get something more thorough.

[TK Keanini · Rating 5 out of 5]

Very good first read on the topic. It is what you would expect from OReilly.

[Leslie · Rating 4 out of 5]

Another must-have reference for the up-to-date web designer, this book sees a lot of action on my shelf, and I keep it very close to hand.

[Chiel · Rating 3 out of 5]

While it is a nice read CSS is something you learn by doing in my opinion.

[Eddie]

One of the best books i ever bought.

[Sunny · Rating 2 out of 5]

CSS : La r

[Mike · Rating 5 out of 5]

This is probably the third time I've read this book, and if anything, I'd say it's too "Definitive". Its 500 pages cover a lot of CSS minutia I doubt I'd ever use. Still, it's a great reference book.

[Rajputits]

S

[Roman · Rating 5 out of 5]

Простым и понятным языком рассказаны все аспекты создания таблиц CSS. Обязательна к прочтению всем кто занимается технической стороной создания сайта.

[James Hooper · Rating 3 out of 5]

Great as a reference for CSS 2 and 2.1. Not so good, if your looking for a practical guide to get started quickly. A lot of detail about specifications.

[Terri · Rating 3 out of 5]

Has some interesting/informative ideas in the chapters. I just look up what I need at the moment, but I have found answers to some problems.