Water in a Garden: The Style and Substance of Cascading Style Sheets

The way some hypermedia object, like a Web page, presents itself is encoded using a language called Cascading Style Sheets (CSS). While CSS is one of the modern Web’s most powerful features, it’s also one of its most misunderstood and misused inventions. In this workshop, you’ll learn important CSS fundamentals that are often missing from most tutorials, like how to understand the concept of document flow, as well as gain insight into the equations and rendering algorithms that determine things like a CSS box’s size, position, and more that are at work behind the scenes in every stylesheet. We’ll also touch on how CSS can be used in contexts beyond HTML including print and mobile app styling, and how to use some more advanced features like media and feature queries, modern layout modules, and other CSS capabilities.

Attend the next workshop(s).

Detailed description

All physical mediums like print, music, or film can be beautiful, but they will always be constrained by the fact of their analog nature. Digital media—and specifically hypermedia—is different. It can change both its form and its function, simultaneously presenting itself as any one or a combination of multimedia formats without changing its underlying structure. The humble Web page is a good example: it can stretch to fit your screen when viewed in a Web browser, lay itself out on a page to prepare for being printed, and even embed voice cues so it can be more easily listened to when read aloud. All of this is done using a language called Cascading Style Sheets (CSS), one of the most powerful, and most often misused, features of the modern Web.

Although the CSS language itself is decades old now, its origins are even older. Rooted in the idea that form and function can simultaneously coexist in a multitude of different arrangements, CSS makes it possible for a single well-formed digital object to appear in the “best” way to any given viewer (or reader, or listener). This is a radical departure from physical media, like paper, and it requires an equally radical departure from some traditional graphic design paradigms that demands we spend an equal amount of time exploring philosophical issues like “the eye of the beholder” as it demands that we familiarize ourselves with technical implementation details such as the mathematical equations determining when, where, and how to draw specific shapes or colors.

This workshop builds on the concepts of hypertext introduced in Tech Learning Collective’s “The Web as a Language” workshop by speaking of fundamental CSS concepts often omitted from other tutorials, such as “User Agents,” document flow, and rendering contexts. You’ll learn how both the design and the function of your digital creations can benefit from approaching hypermedia more fluidly, so you can work with the CSS rendering engine in most modern graphical programming environments rather than fighting against it. Like water, your Web pages, apps, and other hypertextual creations will be able to flow seamlessly into vessels of any shape, Operating System, or Web Browser vendor.

Upcoming “Water in a Garden: The Style and Substance of Cascading Style Sheets” Events

Subscribe to our calendar.

(Not currently scheduled.)