Main Page


 * see also: w:c:CaspersScareSchool

This wiki has been abandoned in favor of The HTML & CSS Wiki. Come join us! --Jesdisciple (talk) 13:17, June 18, 2010 (UTC)

CSS Swatches is a Wikia wiki within the dedicated to the subject of Cascading Style Sheets (CSS). It is open to the exploration of all aspects of Web design, but unlike most wikis, this wiki favors practice over theory in the promotion of knowledge and gives special emphasis to the concept of a swatch. This wiki is addressed to all purveyors of style on the web, from casual bloggers to graphic artists and professional designers and is organized around the four topics featured here on the main page:


 * swatches - discrete blocks of CSS-styled HTML with samples
 * skins - style sheets designed to more fully customize or makeover a web page or website
 * tools - software to assist you in production of style sheets and swatches
 * references - articles and books on the subject of CSS and web design, including any hosted here

Latest samples

 * poetry page
 * textarea][e
 * wikipedia
 * modern code
 * wikia swatch sample

What is a swatch?
A swatch describes a particular type of style sheet rule. Specifically, it is a discrete style definition, or CSS 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. A basic example:

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

Although the term was invented with (or adapted to) the creation of this wiki, 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.

How to create a sample swatch?
For people who like to learn hands-on, the most practical way to learn how to create and display your own swatch is to refer to one of the samples above and use the swatch page template.

A more thorough guide is in the works: Guide:Create Your Own Sample Swatch

Latest samples

 * No samples at this time

What is a skin?
A skin is a colorful addition to a wiki or website that you can use to make people notice the website more better and maybe help it.

The MediaWiki software that runs this wiki allows relatively liberal user-specific customizations to its appearance. One of the goals of this website is to promote clean, appealing, standards-observant for MediaWiki wikis and other websites that allow user customization. Additional information and examples of MediaWiki customizations can be found on the Meta-Wiki gallery of user styles page.

The quintessential demonstration of the usage of css styling in skinning or re-theming a website is the CSS Zen Garden website: csszengarden.com

How to create a sample skin
A sample skin guide is still under development.

Tools

 * Swatch Page Template
 * Wikia Sample Swatch
 * W3C CSS Validation Service (w3.org)
 * Firefox Web Developer Extension (chrispederick.com)
 * CSS Inline Formatter (klenwell.net)
 * CSS Font-Family Recommendations (phosphorusandlime.blogspot.com)

Reference

 * A Heartbreaking List of Staggering CSS Guides and Tutorials (css.wikia.com)
 * Cascading Style Sheets (Wikipedia)
 * CSS 2.1 Specification (w3.org)
 * CSS Tutorial (w3schools.com)
 * Customize Page Layout (Wikimedia's Meta-Wiki)