In last week’s Tech Tuesday we learned about HTML which is used to describe the content of a web page. Today, we will inspect something called Cascading Style Sheets (or CSS for short) which determines what that content looks like. All of this belongs to Step 7 of the web cycle where the web browser takes the information retrieve from a web server to display the page to the enduser.

For our purposes today we will look at a three item list.  You may recall that the list is defined by the and tags and each item is enclosed with and tags.  Without providing any additional information, the list will display something like this:

• First list item

• Second list item

• Third list item

Now that’s a pretty boring looking.  What if we wanted a list without bullets and instead have each item in a blue box with white text?  How would we tell the web browser to display our list that way? In order to do that we need to apply so-called “styles” to the HTML elements.

In the early days of web design and web browser technology (pre-CSS), there was already some support for styling elements but it was done by adding “style” attributes to the HTML elements themselves.  So for instance, I can get white text on a blue background by adding a style=“color: white; background-color: blue” attribute to each of the elements in the list. I would love to show what this looks like, but as it  turns out, I can’t insert a style attribute in the post (Tumblr’s HTML editor throws these attributes out).  So a description of how it works will have to do. Now there are several things wrong with the approach of adding style attributes directly to the HTML elements (known as an “inline” style).  First, all those style attributes would really clutter what your HTML looks like and make it much harder to read.  Second, what if you later want to change what the list looks like?  You would have to go back and change the style attribute for each list element.  Now imagine a web site with hundreds of lists on it. So that’s where CSS comes in.  CSS allows style information to be separated out from the HTML using a very simple yet powerful syntax: one or more selectors are followed by a list of properties and their values.  Huh? I will explain each of these in turn.  A selector determines which HTML elements the style should apply to.  So for instance, the “li” selector applies to all elements.  A property is something like “color” or “background-color” and the value is what you want that property to be, e.g. “white.” The list itself is enclosed in parentheses and properties are separate by semi-colons. So here is the CSS expression that would make every list item have white text on blue background: But where does that expression go? There are two possibilities.  We could embed it in the HTML by enclosing it with Generally these references to external style sheets go into the Now despite its deceptively simple syntax CSS is incredibly powerful and can dramatically change the look and feel of a site.  For instance, all of Tumblr themes work via CSS.  For a dramatic illustration you can head over to the CSS Zen Garden and explore a single site with dramatically different look and feel all based on CSS. The reason this is possible is because of the many different types and combinations of element selectors supported by CSS. If you want to learn more about how to actually style a list there is a great introduction that ends with a list with white text on blue background (as I had promised above).  Next Tech Tuesday we will look at how to add behaviors to a web page using Javascript, which is a programming language. P.S. Curious why it is called “Cascading”? Because you can have multiple CSS selectors referring to the same HTML element resulting in a “cascade” of styles for that element.

In last week’s Tech Tuesday we learned about HTML which is used to describe the content of a web page. Today, we will inspect something called Cascading Style Sheets (or CSS for short) which determines what that content looks like. All of this belongs to Step 7 of the web cycle where the web browser takes the information retrieve from a web server to display the page to the enduser.

For our purposes today we will look at a three item list.  You may recall that the list is defined by the and tags and each item is enclosed with and tags.  Without providing any additional information, the list will display something like this:

• First list item

• Second list item

• Third list item

Now that’s a pretty boring looking.  What if we wanted a list without bullets and instead have each item in a blue box with white text?  How would we tell the web browser to display our list that way? In order to do that we need to apply so-called “styles” to the HTML elements.

In the early days of web design and web browser technology (pre-CSS), there was already some support for styling elements but it was done by adding “style” attributes to the HTML elements themselves.  So for instance, I can get white text on a blue background by adding a style=“color: white; background-color: blue” attribute to each of the elements in the list. I would love to show what this looks like, but as it  turns out, I can’t insert a style attribute in the post (Tumblr’s HTML editor throws these attributes out).  So a description of how it works will have to do. Now there are several things wrong with the approach of adding style attributes directly to the HTML elements (known as an “inline” style).  First, all those style attributes would really clutter what your HTML looks like and make it much harder to read.  Second, what if you later want to change what the list looks like?  You would have to go back and change the style attribute for each list element.  Now imagine a web site with hundreds of lists on it. So that’s where CSS comes in.  CSS allows style information to be separated out from the HTML using a very simple yet powerful syntax: one or more selectors are followed by a list of properties and their values.  Huh? I will explain each of these in turn.  A selector determines which HTML elements the style should apply to.  So for instance, the “li” selector applies to all elements.  A property is something like “color” or “background-color” and the value is what you want that property to be, e.g. “white.” The list itself is enclosed in parentheses and properties are separate by semi-colons. So here is the CSS expression that would make every list item have white text on blue background: But where does that expression go? There are two possibilities.  We could embed it in the HTML by enclosing it with Generally these references to external style sheets go into the Now despite its deceptively simple syntax CSS is incredibly powerful and can dramatically change the look and feel of a site.  For instance, all of Tumblr themes work via CSS.  For a dramatic illustration you can head over to the CSS Zen Garden and explore a single site with dramatically different look and feel all based on CSS. The reason this is possible is because of the many different types and combinations of element selectors supported by CSS. If you want to learn more about how to actually style a list there is a great introduction that ends with a list with white text on blue background (as I had promised above).  Next Tech Tuesday we will look at how to add behaviors to a web page using Javascript, which is a programming language. P.S. Curious why it is called “Cascading”? Because you can have multiple CSS selectors referring to the same HTML element resulting in a “cascade” of styles for that element.