Why CSS are Better than Templates
I was introduced to mark-up language in 1997 through a HTML 3.0 workshop. After years of only green, blue or black screens with white text, I welcomed the capability to display ‘formatted’ text with graphics. But the resulting web pages were sloppy and fell short of good design standards. Most pages had only one text column with cartoon-like images that didn’t line-up and often butted against text.
Creating HTML documents was also tedious. Each section of text had to be individually coded and the same coding was often repeated throughout the HTML. What’s more, revising pages meant weeding through the HTML to change intricate lines of code.
Several years later, I heard about Cascading Style Sheets (CSS) and how they saved time and improved quality. Based on their name, I thought CSS were like templates created for every possible web scenario and that you just needed to drop in text/images to produce a page. This sounded great but also limiting; I was sure there wasn’t a CSS to fit every screen’s requirements.
During early classes in this tool development course, I discovered my template concept was inaccurate. More importantly, I learned how practical and versatile CSS are and how they improve design quality on the web.
Practicality
Rather than serving as finite templates, I’ve learned CSS cite specific directions on how content will be displayed or ‘styled’ and can be applied to infinite screen applications. These directions can be embedded internally in the <head> section of the HTML file they format or kept in external CSS files and referenced in the HTML.*
These directions or rules are written in a specific syntax and stated once in the CSS, as outlined in the Figure 2 example. This functionality enables you to change an entire website’s appearance by just making one change in its corresponding CSS – saving significant web creation and maintenance time.
This benefit is even more relevant in today’s world, where pages are viewed on multiple platforms at different screen sizes. To ensure content is effectively displayed on all platforms/devices, CSS now includes ‘media query’ syntax that specifies screen size parameters, layout orientations and other elements for each environment. I can’t imagine the extra time it would take to produce/maintain these responsive designs without CSS.
Versatility and Design Value
CSS has also evolved with web functionality to become extremely versatile. CSS 3.0, the most current version of CSS, contains options to style almost any element or ‘property,’ such as font-kerning, opacity or border-radius, with a broad range of values. It can even format dynamic content, such as animations and pseudo-class states of an element, such as a colour change when a mouse hovers over it.
Better quality web design and typography is now possible thanks in part to the range of properties that can be styled. In addition, use of the ‘box model’ properties to define layout details surrounding each element on a page also improve the overall design of web pages.
After learning about CSS, I think HTML documents are more like a template or shell. They define the structure of a page and you ‘fill’ them with content. However, without the addition of CSS to complement HTML in this manner, I doubt web development would have evolved to produce the aesthetically pleasing pages we have today in the same timeframe.
*Each CSS rule can also be embedded in the main <body> of the HTML code as a style attribute. However, this defeats CSS' time-saving value because style attributes then work in the same way as HTML codling alone would.
