Explaining CSS as a skin

Explaining Cascading Style Sheets (CSS) is hard. They are a very important part of web development, yet as a basic concept, there isn't a good analogy to ground the concept into non-computer science language. CSS are about immediately changing the look of something without changing the underlying elements that it was created upon. One analogy that works fairly well is the idea of a skin. Changing a skin over an existing item, leaves the underlying item the same while changing the way it looks. The word skin has become the standard way of describing the assignment of different CSS to the underlying web page or web site. The analogy works; yet, in my opinion, stretching skin over technology is a bit harsh as an analogy.

To get a better sense of how altering CSS can change the underlying look of a web page try the w3schools tool for altering CSS elements.

The above description of assigning different CSS files to a web page or site to change its look has become common practice. Having multiple CSS files assigned depending on context is a practice used extensively with formatting web pages for different mobile devices (particularly with HTML5). CSS can also be used the other way, where there is one CSS assigned across all web pages of a web site. This single CSS file approach allows making style changes across the whole site by only altering the single CSS file.

So far we have looked at two scenarios when using CSS. First, changing the CSS file based on some external factor, like a mobile device. Second, having one CSS span all HTML files within a website. Either way the CSS provides a skin or look for a web page or web site. Both approaches have their benefits, most often both scenarios are used together. Some CSS elements should be global, regardless of external factor. Where some CSS elements should change. The mobile device serves as a good context for when both approaches should be used together. There are elements that you may want to be global across all devices, like font or background colour. And other elements that should change for each device, like number of columns or the right and left margins. In this situation you could have one CSS file for global elements and CSS files for each different device type.