Cascading Style Sheets (CSS) in Layman's Terms

CSS refers to presentation instructions for a document written in a markup language such as HTML or XHTML. A well defined CSS driven structure adds a level of efficiency and greater ease in modifying the appearance of a website.

What if one could maintain his lawn in a CSS sense? Using a hand held device he enters height and color values, and instantly every blade of grass on the lawn is exactly the same height and color (wouldn't that be nice). A scenario such as this might apply to the copy on a website. Changing the font size, color, name, etc. for every page in a site would undoubtedly be cumbersome. Defining a single CSS object from which all copy elements reference allows for dramatic modifications to the appearance of all copy on all pages in a snap.

Consider maintaining landscape elements in a predictable cascading effect. One may want all bushes to be of equal width and height. However, they may want to define the color and petal size of the flowers produced based on the species of plant. In this scenario we would reference two CSS objects for each bush. The first is the same for each bush, doing all the trimming so that each plant is of equal width and height. The second is specific to each species, defining what the flowers will look like. This scenario might represent the layout of a web page. A general layout such as equal columns with equidistant spacing. However, the similarities may end there as we may want to implement some type of distinction between each column. Whether the distinction is a background graphic, borders, or some other attribute, those instructions may be provided by means of a subsequent reference that adds more specific detail to the individual columns.

The analogies mentioned should provide general understanding about CSS. One could certainly go into great depth regarding specific implementations and practices.