CSS in Depth
Keith Grant
  • MEAP began August 2016
  • Publication in December 2017 (estimated)
  • ISBN 9781617293450
  • 450 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

10.1. Introduction to KSS

10.1.1. Setting up KSS

10.1.2. Writing KSS documentation

10.1.3. Documenting module variants

10.1.4. Creating an overview page

10.1.5. Modules that require JavaScript

10.1.6. Organizing the pattern library into sections

10.2. Shifting the way we build CSS

10.2.1. CSS First

10.2.2. Pattern library as an API

10.3. Summary

Part 4: Advanced topics

11. Backgrounds, Shadows, and Blend Modes

11.1. Gradients

11.1.1. Multiple color stops

11.1.2. Radial gradients

11.2. Shadows

11.2.1. Buttons three ways

11.3. Blend modes

11.3.1. Tint an image

11.3.2. Types of blend mode

11.3.3. Adding texture to an image

11.3.4. Mix blend modes

11.4. Summary

12. Contrast, color, and space

12.1. Contrast is king

12.2. Working with color

12.2.1. Color notations

12.2.2. Adding new colors to a palette

12.2.3. Font color contrast

12.3. Fine-tuning space

12.3.1. Using ems versus px

12.3.2. Factoring in line-height

12.3.3. Inline elements

12.4. Summary

13. Typography

13.1. Using web fonts

13.1.1. Using Google Fonts

13.2. How @font-face works

13.2.1. Font formats and fallbacks

13.2.2. Using multiple variants of the same typeface

13.3. Adjusting space for readability

13.3.1. Spacing body copy

13.3.2. Spacing headings and small elements

13.4. The dreaded FOUT and FOIT

13.4.1. Using Font Face Observer

13.4.2. Falling back to system fonts

13.4.3. Get ready for font-display

13.5. Summary

14. Transitions

14.1. From here to there

14.2. Timing functions

14.2.1. Bezier curves

14.2.2. Steps

14.3. Dealing with non-animatable properties

14.3.1. Fading in and out

14.4. Transitioning to height "auto"

14.5. Summary

15. Transforms

15.1. Rotate, translate, scale, and skew

15.1.1. Changing the transform origin

15.1.2. Applying multiple transforms

15.2. Transforms in motion

15.2.1. Scaling up the icon

15.2.2. "Fly in" labels

15.2.3. Staggering the transitions

15.3. Improving Animation Performance

15.3.1. The Rendering Pipeline

15.4. Working in 3D

15.4.1. Controlling Perspective

15.4.2. More Advanced 3D

15.5. Summary

16. Animations

16.1. Defining Keyframes

16.2. Animating 3D Transforms

16.2.1. Build the layout without animations

16.2.2. Adding animation to the layout

16.3. Animation delay and fill mode

16.4. Conveying meaning through animation

16.4.1. Responding to user interaction

16.4.2. Drawing the user’s attention

16.5. One final piece of advice

16.6. Summary

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.
Buy
MEAP combo $44.99 pBook + eBook + liveBook
MEAP eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks