Last week, we learned a little bit about basic HTML (Hypertext Markup Language), how it started, how it works and how to read and write HTML “crudely”.

To recap, here’s what we did:

1. First, we took this block of text (Hypertext):

ACT I. PROLOGUE.Two households, both alike in dignity In fair Verona, where we lay our scene,From ancient grudge break to new mutiny,Where civil blood makes civil hands unclean.From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife. The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend. SCENE I. Verona. A public place.

2. Marked it up (Markup) like this:

<p>ACT I.<p>

<p>PROLOGUE.<p>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

<p>From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife.<p>

<p>The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.<p>

<p>SCENE I.<p>

<p>Verona. A public place.<p>

3. To make it appear like this when published online:

ACT I.

PROLOGUE.

Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.

In a nutshell, we took some plain block of text we wanted to publish online, marked it up using some simple tags to create a more readable, web friendly version that browsers like IE, Firefox, Safari, etc. will recognize. The tags we used: <p> </p> <h1> <h2> were just hypothetical sample tags, not necessarily real html tags, just to demonstrate how HTML works.

Believe it or not, there was a time when the web was really that simple. Plain, boring, unadorned text. That was before – until a new markup language was created – devoted to styling the look of a web page. The new markup language was called Cascading Style Sheets (CSS).

Going back to our definition of CSS:

CSS, or Cascading Style Sheets, is a W3C open standards programming language for specifying how a web page is presented. It allows web site designers to create formatting and layout for a web site independently of its content.

A bit of CSS history:

“According to the W3C, the CSS specification was drawn up in response to “pressure from authors for richer visual control.” The demand for better control of web pages was certainly there, but browsers in the late 1990s just weren’t up to the job. They implemented CSS very poorly or not at all. As a result, only the very brave or foolhardy adopted CSS in the early stages. Nevertheless, the W3C continued work on the specification and brought out a new version, CSS2, in 1998. This retained all the features of CSS1 and added some new ones.”

CSS gives you the power to set styling rules in one place. When you want to make changes to your web site, you make changes in that one place, and your whole web site changes automatically to reflect those new styles.

Why are they called “cascading” style sheets?

The cascade in CSS refers to the way that rules are added together and applied cumulatively. Think of the cascade in the literal sense of a waterfall or a river. As a river flows from the mountains to the sea, it starts off as a tiny trickle, but as more water is added through tributaries, it becomes bigger and more powerful. Yet the water in that original trickle is still part of the whole.

CSS works in a similar way. You can create a style rule that trickles down through the whole page. For example, it’s common to set the background and text colors in a rule for the body of the page. But lower down, new rules can be added that affect the font or size of the text without changing the color. And just like a river can break into a delta as it reaches the sea, you can break the CSS cascade into different strands, so that a sidebar looks different from the main content or footer of the page.

(source: Getting Started with CSS – David Powers)

With CSS, you can design your web page using different design elements, choose different fonts and font styles, add color, images and every design bling you can think of to jazz up your page. All this is done on a separate stylesheet that is linked to your main HTML code which means you can change the design elements anytime without recoding over and over. Simply put, CSS dresses up your drab and boring HTML and adds some “woop woop woop” to it – CSS style.

More next week.