CSS in Depth
Keith J. Grant
Foreword by Chris Coyier
  • March 2018
  • ISBN 9781617293450
  • 472 pages
  • printed in black & white

Become better at writing code that lasts and is understandable and performant.

From the Foreword by Chris Coyier, Cofounder of CodePen

CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design.

CSS in Depth in Motion is the perfect next step after finishing this book, digging deeper into CSS with new exercises and examples to really help you reach the next level of web design.

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

Appendixes

Appendix A: Selectors reference

A.1. Basic selectors

A.2. Combinators

A.3. Pseudo-class selectors

A.4. Pseudo-element selectors

A.5. Attribute selectors

Appendix B: Preprocessors

B.1. Getting started with Sass

B.1.1. Installation

B.1.2. Running Sass

B.2. Important features

B.2.1. Inline computation

B.2.2. Nesting

B.2.3. Partials (@import)

B.2.4. Mixins

B.2.5. Extend

B.2.6. Color manipulation

B.2.7. Loops

B.3. PostCSS

B.3.1. Autoprefixer

B.3.2. cssnext

B.3.3. cssnano

B.3.4. PreCSS

About the Technology

Some websites really pop. They look great, they're visually consistent, and they feel interactive and responsive. You can bet their developers knew CSS in depth. CSS specifies everything from the structural layout of page elements to their individual look and feel. True masters know the patterns of CSS development, the techniques to implement them, and the subtle touches that result in beautiful typography, fluid transitions, and balanced graphics. Join them!

About the book

CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design. You'll gain new insights into familiar features like floats and units, and experiment with emerging ideas like responsive design and pattern libraries. Bottom line: this book will make you a better web designer and your apps will look fantastic!

What's inside

  • Avoid common CSS pitfalls
  • Master misunderstood concepts
  • Use flexbox and grid layout
  • Responsive designs for any device
  • Code for reuse and maintainability

About the reader

Written for web developers who know the basics of CSS and HTML.

About the author

Keith J. Grant is a senior web developer who builds and maintains web applications and websites, including The New York Stock Exchange site.


buy
combo $44.99 pBook + eBook + liveBook
CSS in Depth (eBook) added to cart
continue shopping
go to cart

eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

From zero to hero in CSS!

Pierfrancesco D'Orsogna, GamePix

The bible of the most up-to-date CSS.

Phily Austria, Faraday Future

A well-written, concise book. I enjoyed every minute of reading it.

Tanya Wilke, Sanlam

A clear and complete guide to CSS.

Giancarlo Massari, Unic