CSS: A Marriage of Art and Technology

by Jerome Carter on May 14, 2012 · 0 comments

Most of my development efforts have been focused on desktop and traditional client/server applications.   The move to PHP and the web has been an eye-opener.    Wanting to understand  web technologies from the ground up, I have been creating simple web applications from scratch.   News Flash — FrontPage and other website builders make this look far easier than it really is!   Just building a simple site has entailed dealing with HTML, XML, JavaScript, Cascading Style Sheets (CSS), PHP, MySQL, Apache, and NetBeans.  This isn’t a complaint, just an observation and props to web developers.   These technologies, while useful, are not that exciting except CSS with which I have fallen in love.

A typical web application page contains some of each of the following items: content, client-side processing code, server-side processing code, and the style/design.  The content, such as a paragraph of this post, consists of text and HTML markup.   JavaScript is used for client-side processing and performing actions on the page being viewed (e.g. changing the color of a button or the appearance of a menu).    Database access, important algorithms, and the like, are handled by PHP on the server.  CSS manages appearance and layout.

Cascading Style Sheets provide a system for defining and applying rules to elements of a web page.  A paragraph is an example of a page element.  Here is how a paragraph of text might appear in HTML.

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis purus et ipsum adipiscing nec ultrices arcu ornare. Etiam volutpat nisl et urna posuere nec viverra ipsum fringilla. Nunc vitae cursus ipsum.  </p>

<p> and </p> are opening and closing HTML tags. They tell the browser that the content between them is to be treated as a paragraph.

Using CSS, the following rule tells the browser to render the paragraph as bold, blue, and in the large Georgia font.

p { font-family: Georgia;
font-size: large;
font-weight: bold;
color: #0000FF;
}

Voila!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis purus et ipsum adipiscing nec ultrices arcu ornare. Etiam volutpat nisl et urna posuere nec viverra ipsum fringilla. Nunc vitae cursus ipsum.

Style rules can be combined and stored in a single style sheet that is then linked to HTML pages.     This ability to completely separate the appearance and layout of web pages from their content is one of the features that makes CSS so wonderful!    Using CSS, it is possible to completely change the appearance of a site in a few seconds.  Further, style sheets may be assigned on a per-page basis, making it easy to make subsections of a website distinctive.

Another ramification of the separation CSS allows between appearance and content is that those working on the design of a site may work in parallel with (and often independently of) those writing the programming code for the site.    Such an arrangement allows for greater project productivity.

The development flexibility afforded by CSS does not come at the cost of creativity.  I am continually amazed by what can be achieved using CSS.   Not quite feeling my enthusiasm?  Then take a peek at Zen Garden, a site created to demonstrate what CSS and a little imagination can do (Link to Zen Garden).

On the home page look at the upper left-hand section of the page.  You will see a  paragraph that begins, “A demonstration of what can be accomplished visually…” At the end of the paragraph you will see  two light-grey links: html file and css file.    Click on the html file link to see the raw content of the page and the css file link in to see the style sheet responsible for the page’s initial  appearance and layout.   Impressed?  There‘s more…  Go to the menu on the right side of the page and click “View All Designs.”  This will take you to a gallery of user-submitted style sheets.  Each of the 210 designs in the gallery uses the same plain HTML file that you viewed via the html file link.

I don’t have the talent to produce styles as beautiful and sophisticated as those on  Zen Garden. Nevertheless,  even with my limited design abilities, the separation of concerns that style sheets allow has boosted my productivity.  Learning CSS , I have come to appreciate the artistry of web designers and perusing Zen Garden submissions has some of the feel of visiting an art gallery.  Try it with your favorite beverage.  As Mr. Monk would say, “You’ll thank me later.”

 

Facebooktwitterpinterestlinkedinmail

Leave a Comment

{ 0 comments… add one now }

Previous post:

Next post: