A swatch, or CSS swatch, is a discrete style definition, or Cascading Style Sheet rule, designed to be applied (usually either as a class or as an inline style setting) at the block or inline level of an (X)HTML document.

The concept has practical relevance as a simple modular format for application in blogs, wikis (such as this one), social network site profiles, and other user generated content websites that allow some stylistic control of the underlying html code.

While a swatch may be a component of a broader page-wide or site-wide style sheet, it is not an interface, skin, livery, or template in and of itself.

Simple example Edit

.basic_swatch { margin:1em; padding:1em; color:#cdd; background-color:#fcc; border:10px solid #ccc; }

Origin of term Edit

The term, as it applies to CSS and web design, was coined for this wiki. It is adapted from the concept of a fabric swatch.