CSS in Depth
Keith Grant
  • MEAP began August 2016
  • Publication in Fall 2017 (estimated)
  • ISBN 9781617293450
  • 500 pages (estimated)
  • printed in black & white

Cascading Style Sheets, better known as CSS, is one of the foundational technologies that drives the Web. CSS lets you precisely specify the visual design of a web page or web app, from the structural layout of elements on the page to their individual look and feel. If you are like most web developers, you know just enough CSS to get by. You can do basic styling and layout, but you often run into roadblocks. If you know CSS, but you don't really know CSS, this is the book for you.

"This book is for every web developer that has ever had to write CSS and wondered "why the frack" is their code not working. It will save them hours of frustration and explains the foundations of popular CSS frameworks."

~ William E. Wheeler

"The book teaches the real CSS specs rather the tricks."

~ Anto Aravinth

Table of Contents detailed table of contents

Part 1: Revisiting the fundamentals

1. Cascade, specificity, & inheritance

1.1. The cascade

1.1.1. Stylesheet origin

1.1.2. Scope

1.1.3. Specificity

1.1.4. Source Order

1.1.5. Some rules of thumb

1.2. Inheritance

1.3. "Inherit" and "initial"

1.3.1. Inherit value

1.3.2. Initial value

1.4. Shorthand properties

1.4.1. Shorthands can silently override other styles

1.4.2. The order of shorthand values

1.5. Summary

2. Working with relative units

2.1. Relative values are powerful

2.1.1. The end of the pixel-perfect web

2.2. Ems and rems

2.2.1. Using ems for font-size

2.2.2. Using rems for font-size

2.3. Stop thinking in pixels

2.3.1. Set a sane default font size

2.3.2. Making it responsive

2.3.3. Resizing a single component on the page

2.4. Viewport-relative units

2.4.1. Using vh and calc() for font size

2.5. Unitless numbers and line-height

2.6. Custom properties (a.k.a "CSS Variables")

2.6.1. Custom properties and the cascade

2.6.2. Custom properties and JavaScript

2.6.3. General advice for custom properties

2.7. Summary

3. Mastering the box model

3.1. Difficulties with element width

3.1.1. Avoid magic numbers

3.1.2. Adjusting the box model

3.1.3. Universal border-box sizing

3.1.4. Adding a gutter between columns

3.2. Difficulties with element height

3.2.1. Controlling overflow behavior

3.2.2. Alternatives to percent-based heights

3.2.3. Using min-height and max-height

3.2.4. Vertically centering content

3.3. Negative margins

3.4. Margin collapsing

3.4.1. Basic collapsing between text

3.4.2. Multiple margins collapsing

3.4.3. Collapsing outside a container

3.5. Spacing elements within a container

3.5.1. Creating a more general solution

3.6. Summary

Part 2: Mastering layout

4. Making sense of floats

4.1. The purpose of floats

4.2. Collapsing containers and the clearfix

4.2.1. Container collapsing explained

4.2.2. Understanding the "clearfix"

4.3. Unexpected "float catching"

4.4. The media object and block formatting contexts

4.4.1. Block formatting contexts

4.4.2. Using a block formatting context to fix the media object layout

4.5. Building a grid system

4.5.1. Grid system basics

4.5.2. Adding gutters

4.6. Summary

5. Flexbox

5.1. Flexbox principles

5.1.1. A basic flexbox menu

5.1.2. Adding padding and spacing

5.2. Controlling the size of flex items

5.2.1. Flex-basis

5.2.2. Flex-grow

5.2.3. Flex shrink

5.2.4. Some practical uses

5.3. Changing the flex direction

5.3.1. Styling the login form

5.4. Alignment, spacing, and other details

5.4.1. Flex container properties

5.4.2. Flex item properties

5.4.3. Using these properties

5.5. A couple things to be aware of

5.5.1. Flexbugs

5.5.2. Be careful with full-page layout

5.6. Summary

6. Grid layout

6.1. Web layout of the (near) future

6.1.1. Enabling grid layout

6.2. Anatomy of a grid

6.2.1. Numbered grid lines

6.2.2. Working together with flexbox

6.3. Alternate syntaxes

6.3.1. Naming grid lines

6.3.2. Naming grid areas

6.4. Explicit and implicit grid

6.4.1. Adding some variety

6.4.2. Adjusting to fill the grid track

6.5. Feature queries

6.6. Alignment

6.6.1. Spacing tracks within a grid

6.7. Summary

7. Positioning and stacking contexts

7.1. Fixed positioning

7.1.1. Other uses

7.2. Absolute positioning

7.2.1. Positioning a pseudo-element

7.3. Relative positioning

7.3.1. Creating a dropdown menu

7.3.2. Creating a CSS triangle

7.4. Stacking contexts and z-index

7.4.1. Rendering and stacking order

7.4.2. Manipulating stacking order with z-index

7.4.3. Stacking contexts

7.5. Sticky positioning

7.6. Summary

8. Responsive design

8.1. Mobile first

8.1.1. A mobile menu

8.1.2. The viewport meta tag

8.2. Media queries

8.2.1. Types of media query

8.2.2. Adding breakpoints to the page

8.2.3. Responsive columns

8.3. Fluid layout

8.3.1. Dealing with tables

8.4. Responsive images

8.4.1. Using srcset to serve the correct image

8.5. Summary

Part 3: CSS at scale

9. Modular CSS

9.1. Base styles: laying the groundwork

9.2. Building a module

9.2.1. Variations of a module

9.2.2. Modules with multiple elements

9.3. Composing modules into a larger structure

9.3.1. Divide multiple responsibilities among modules

9.3.2. Choosing module names

9.4. Utility classes

9.5. CSS methodologies

9.6. Summary

10. Pattern Libraries

Part 4: Advanced topics

11. Advanced backgrounds and filters

12. Color and space

13. Typography

14. Transitions

15. Animations

16. Transformations

About the book

CSS in Depth takes web developers from beginner to advanced CSS users, getting rid of their blind spots along the way. In this book, you'll revisit concepts you are likely familiar with but have not completely mastered. You'll also encounter advanced subjects, like transitions and animations, as well as brand new ideas, like flexbox and grid layout. You'll start by going deep into the essentials of CSS while you get practical advice to help you maintain control over your styles. Next, you'll dive deep into layout topics and learn to tackle common pitfalls. Then you'll focus on organizing your code and dealing with CSS at scale. The last part of this book explains more advanced techniques the average developer probably hasn't worked with, like transitions, animations, and transformations, as well as practical design skills: how to choose colors and typography so your page or app is pleasing to look at and use.

What's inside

  • Take a webpage design from wireframe to web
  • Avoid common pitfalls of the language
  • Master misunderstood concepts including the cascade, floats, and positioning
  • Use new and upcoming methods of layout: flexbox and grid layout
  • Create responsive designs for devices of any size
  • Organize your CSS for reuse and maintainability
  • Create a page that is visually appealing and functional
  • Use animation to enhance user experience

About the reader

This book is for both experienced and new web developers who want to deepen their knowledge of CSS. It assumes you have some basic experience with HTML, CSS, and the web. Some familiarity with JavaScript or other C-like programming language may be beneficial, but not required.

About the author

Keith J. Grant is a Senior Web Developer at Intercontinental Exchange, Inc. (ICE), where he wrote and maintains the CSS for the corporate websites, including The New York Stock Exchange site. He has many years of professional experience building and maintaining web applications and web sites using HTML, CSS, and JavaScript.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo $44.99 pBook + eBook
MEAP eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks