Eric A. Meyer

Sara Wachter-Boettcher

You can't always predict who will use your products, or what emotional state they'll be in when they do. But by identifying stress cases and designing with compassion, you'll create experiences that support more of your users, more of the time.--Back cover.

Design for Real Life

Offers thirteen projects teaching the fundamental concepts behind CSS, covering topics such as tables, layouts, positioning, and presentation.

Mastering the Language of Web Design

Eric Meyer on CSS

Cascading Style Sheets (CSS) is a powerful tool that transforms the presentation of a document or a collection of documents, and it’s spread to nearly every corner of the Web—as well as many non-web environments. In this free introduction to Cascade Style Sheets, you’ll learn how CSS makes it possible for you to completely change the way document elements are presented by a user agent. You’ll discover the origins of this specification and how CSS styles work with HTML. Learn how you can choose style sheets based on the features of a given media type, including desktop screens, web-enabled phones, digital projectors, TVs, Braille devices, print documents, and even various audio renderings of a document. CSS and Documents is an excerpt from the forthcoming 4th edition of CSS: The Definitive Guide.

CSS and Documents

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

Visual Presentation for the Web

CSS: The Definitive Guide

This book is all about the theoretical side of visual rendering in CSS. Why is it necessary to devote an entire book on the theoretical underpinnings of visual rendering? The answer is that with a model as open and powerful as that contained within CSS, no book could hope to cover every possible way of combining properties and effects. --Publisher.

Layout Fundamentals in CSS

Basic Visual Formatting in CSS

Exactly how does the "cascade" in Cascading Style Sheets work? This concise guide demonstrates the power and simplicity of CSS selectors for applying style rules to different web page elements. You’ll learn how your page’s presentation depends on a multitude of style rules and the complex ways they function—and sometimes collide—within the document’s structure. This guide is a chapter from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Selectors, Specificity, and the Cascade, you’ll receive a significant discount on the entire Definitive Guide when it’s released. Why wait when you can learn how to use selectors and other key CSS 3 features right away? Learn how to create CSS rules that apply to a large number of similar elements Group rules to make style sheets smaller and download times faster Understand how elements inherit styles from their parents Discover how reader and browser preferences affect your page presentation Examine specificity—the method browsers use to choose between two conflicting style rules Get a handle on how specificity and inheritance combine to form the cascade Get details on all of the CSS3 selectors

Applying CSS3 to Documents

Selectors, Specificity, and the Cascade

CSS has had a layout-shaped hole at its center since the beginning. Designers have bent features such as float and clear to help fill that hole, but nothing has quite done the job. Now that’s about to change. With this concise guide, you’ll learn how to use CSS grid layout, a generalized system that lets you lay out pieces of your design independent of their document source order and with full awareness of the overall design. Short and deep, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Grid Layout in CSS, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to make your web pages come alive today. Explore the differences between grid boxes and block containers Create block-level grids, inline grids, and even nest grids inside grids Learn best practices for attaching elements to your layout, using explicitly defined grid lines or grid area Understand how the implicit grid automatically adjusts for oversized elements Create gutters between grid elements, and align and justify individual items Eric A. Meyer is an author, speaker, blogger, sometime teacher, and co-founder of An Event Apart. He’s a two-decade veteran of the Web and web standards, a past member of the W3C’s Cascading Style Sheets Working Group, and the author of O’Reilly’s CSS: The Definitive Guide.

Interface Layout for the Web

Grid Layout in CSS

An introduction to Cascading Style Sheets (CSS) and their applications in Web design takes readers step by step through the process of creating a dynamic Web site with CSS, providing detailed instruction, hands-on exercises, and real-world examples to help users master essential concepts and techniques and apply them to a variety of real-world situations. Original. (Beginner/Intermediate)

CSS Web Site Design

Demonstrates the control and flexibility Cascading Style Sheets bring to Web design, covering selectors and structure, units, text manipulation, colors, backgrounds, borders, visual formatting, and positioning.

The Definitive Guide

Cascading Style Sheets

From custom fonts to ad-hoc font families you assemble out of a variety of individual faces, CSS 3 gives you more typographic options than ever before. This concise guide shows you how to use CSS properties to gain a fine-grained and wide-ranging influence over how you display fonts on the Web. Short and sweet, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Fonts, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to choose and manipulate fonts right away. Specify font families and their generic alternatives Use @font-face to specify customized downloadable fonts Size your fonts with absolute or relative scales, percentages, or length units Understand the difference between italic and oblique styles Learn how to specify or suppress a font’s kerning data and other font features Synthesize your own variants for fonts that lack bold or italic text

Web Typography Possibilities

CSS Fonts

Scott Davis

Ian Lurie

Jamie Indigo

Olu Niyi-Awosusi

Alex Tait

Yana Dimova

Tom Van Goethem

Nurullah Demir

Barry Pollard

Christian Liebel

Moritz Firsching

Jyrki Alakuijala

Leonardo Zizzamia

Doug Sillars

Shuvam Manna

Nishu Goel

Alex Lakatos

Jono Alderson

Andrea Volpini

Eric Portis

Ingvar Stepanyan

Patrick Stox

Tomek Rudzki

Gary Wilhelm

Katriel Paige

Sia Karamalegos

Victor Le Pochat

Saptak Sengupta

Dave Smart

Ashley Berman Hale

Demian Renzulli

Alon Kochba

Tom Robertshaw

Artem Denysov

John Teague

Kevin Farrugia

Navaneeth Krishna

Lode Vandevenne

Jessica Nicolet

Dominic Lovell

Web Almanacは、Web開発コミュニティが毎年実施している調査プロジェクトで、Webがどのように構築され体験されているのかをより深く理解することを目的としています。業界の専門家とピアレビュアーやデータアナリストのチームが、Webページのコンテンツやユーザー体験、コンテンツ公開、コンテンツ配信の分野に焦点を当てて、Webの状態を1章ずつ調査しました。その成果として、数百万を超える上位Webサイトを集計した統計の強固な基盤に基づいた、内容領域専門家による優れた洞察と分析による詳細がレポートとしてまとまっています。

HTTP Archiveの年次報告書 ウェブの状態レポート

The 2021 Web Almanac

la référence

CSS has come a long way since its early days, when it provided a bit of help to a mostly HTML-oriented world. Today, nearly any serious multi-page site relies on CSS to provide consistent and attractive interfaces that layer smoothly on top of an HTML foundation. CSS: The Definitive Guide, 4th Edition provides experienced web developers with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 3. Updated to cover Internet Explorer 10, Microsoft's vastly improved browser, as well as Safari, Firefox, Chrome, and Opera, this new edition includes content on transitions, animations, new selectors, paged media, and more. Updated for the latest in CSS3 specifications and browser support Explores the complex world of CSS transformations Demonstrates new interface approaches built on CSS animations Reconsiders layout possibilities with grid and flexible box possibilities

While flowing text around images is certainly nothing new, with CSS you can float any element, from images to paragraphs to lists. In this practical guide, author Eric Meyer reveals some interesting—and surprising—ways to use CSS floats in your web design, including the latest capability to flow content past non-rectangular float shapes. Short and sweet, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of CSS Floating, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to bring life to your web pages now. Learn the characteristics of floated elements, and CSS rules for using them Be aware of certain rule exceptions when applying floats to your design, including the use of negative margins Use the clear property to prevent floats from affecting elements in the next section of the document Create floating boxes in non-rectangular shapes, including rounded corners, circles, ellipses, and even polygons Define float shapes with transparent or opaque images

Floats and Float Shapes

CSS Floating

The Grid Layout spec will soon change your approach to website design, but there will still be plenty of uses for CSS positioning tricks. Whether you want to create sidebars that remain in the viewport (browser window), add sticky section headings to lists or long articles, or overlap one element with another, this concise ebook will expertly guide you through all the main CSS positioning types. Short and deep, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Positioning in CSS, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Make your web pages come alive today. You'll learn how to: Remove an element from a document but keep its new position part of the document’s flow with absolute positioning Keep an element like a masthead or sidebar in one fixed position in the viewport with fixed positioning Preserve an element’s shape and the space it occupied in the document with relative positioning Make a document’s headers selectively stay still in response to scrolling conditions with sticky positioning Eric A. Meyer is an author, speaker, blogger, sometime teacher, and co-founder of An Event Apart. He’s a two-decade veteran of the Web and web standards, a past member of the W3C’s Cascading Style Sheets Working Group, and the author of O’Reilly’s CSS: The Definitive Guide.

Layout Enhancements for the Web

Positioning in CSS

One advantage of using CSS3 is that you can apply colors and backgrounds to any element in a web document, create your own gradients, and even apply multiple backgrounds to the same element. This practical guide shows you many ways to use colors, backgrounds, and gradients to achieve some pretty awesome effects. Short and sweet, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Colors, Backgrounds, and Gradients, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to bring life to your web pages now. Define foreground colors for a border or element with the color property Combine foreground and background colors to create interesting effects Position and repeat one or more images in an element’s background Fix an image to a screen’s viewing area, rather than to the element that contains it Use color stops to define vertical, horizontal, and diagonal linear gradients Create spotlight effects, circular shadows, and other effects with radial gradients

Adding Individuality with CSS

Colors, Backgrounds, and Gradients

The ability to apply margins, borders, and padding to any web page element is one of the things that sets CSS so far above traditional markup. With this practical guide, you will not only learn how to use these properties to lay out your document, but also how to change and control the appearance of any element on the page. Short and sweet, this short book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of Padding, Borders, Outlines, and Margins in CSS, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to bring life to your web pages now. Understand the CSS box model, including the way different properties relate to one another Use tricks for defining padding values, including inline element padding Explore border width, style, and color, plus the use of border images Learn how to use outlines: presentational elements that won’t affect layout Dive into the use of margins, including the way top and bottom margins collapse

CSS Box Model Details

Padding, Borders, Outlines, and Margins in CSS

The CSS Pocket Reference introduces CSS and lists all CSS1 properties, plus the CSS1 pseudo-elements and pseudo-classes. To help overcome the obstacle of browser incompatibility, we've included a comprehensive guide to how the browsers have implemented support for CSS1.

CSS Pocket Reference

The Web Almanac is an annual research project by the web development community to better understand how the web is built and experienced. Industry experts and a team of peer reviewers and data analysts research the state of the web, one chapter at a time, focused in areas of web page composition, user experience, content publishing, and content delivery. The result is a richly detailed report brimming with insightful analysis written by subject matter experts built on a solid foundation of statistics aggregated over millions of top websites.

HTTP Archive's annual state of the web report

Eric A. Meyer

About

Books

Join the club