Discuss the CSS box model and its elements
When in the Course of human events, it becomes necessary for one people to dissolve the linguistic and stylistic bands which have connected them with the World Wide Web, and to assume among the powers of the processing system, the separate and equal station to which the Laws of Physics and of George Boole entitle them, a decent respect to the opinions of stylistic desires and multiple webpages requires that they should declare the causes which impel them to the separation.
~Thomas Jefferson, if he were alive in 1996.
If HTML was the beginnings of civilization at the Tigris and Euphrates Rivers, CSS is the subsequent irrigation system...That's a bit of a stretch, but the unifying power and stylistic prowess that CSS affords is comparable to the infancy of HTML to the leaps made by CSS. Prior, if one wanted to adjust the look of a multi-page (or even singular) website, they would have to go line by line, page by page and apply the adjustments. CSS streamlined all of this, by creating one document that unified the style. If I sound excited (from the multiple hyperboles), it's because I feel a bit like Dorothy as she stepped into Oz from Kansas (another hyperbole) in that I am not only in a whole new world, but understanding what's "behind the curtain". Personal joys aside, CSS is quite the time saver and design enhancer- in its homogeny, logic, and cascading structure.
When one wishes to adjust a certain element on a website, be it universally (background-color), block/div (#header, #wrapper) or micro (class="leftfloat" becomes .leftfloat in CSS) one need only to adjust the CSS page-assuming the proper class and <div> terms have been identified in the HTML file. Text can float around images, shadows can appear around block elements (see below), and the size and presentation can adjust based on the size of the browser window. Elegant genius. This took the HTML webpage from a charming information display to art.And I mean, art... (Even in black and white these sites elevate design). This new design and programming format, created in 1996 and now on its third iteration, revolutionized the World Wide Web.
Box Model Elements
CSS divides its elements into inline and block elements. The block elements -header, nav, main, footer- also contain what's called the box model. Within that box model, we are able to manipulate many parts of the visual: the content itself (what font [with secondary and ternary options as well], size, placement, etc) and the area surrounding the content. This area is divided into several sections: the "padding" around the text, the border around said padding, the shadow around the outer-most ring, and the margin between the border and outer-line. One can adjust each element in size and color, opacity (shadow) or roundness (border).
By creating this box model, CSS unified the look of websites- streamlining the basic/navigational information for a logical and clean visual. CSS is a creative, succinct, intuitive language. It hopefully would have done Mr. Jefferson proud. Enough at least, to not mind the liberty taken with his words. Happy 4th of July, all.