CSS - it's all about presentation and style, the sort of thing designers worry about, not programmers. In fact CSS is more important than HTML5. After all, it actually controls how the UI looks and even how it behaves. If you plan to build a custom control then it is CSS you need to learn.

For some reason we have all signed up to the strange idea that HTML5 is the technology that is going to save us from the proprietary technology of the likes of Apple and Microsoft. While there are some good new things in HTML5, like Canvas and a range of useful APIs, it really isn't HTML5 that is the important part of the deal.

You could argue that it is CSS where the action happens and it is probably far more important that a programmer gets on top of CSS than anything else.

What usually happens, however, is that we focus on HTML5 learn some JavaScript only to later discover that there is a lot going on in the CSS we have ignored.

Separation of concerns

Let's take a brief look a the theory.

In principle a web app depends on three key technologies:

• HTML

• CSS

• JavaScript

In principle HTML is about semantics of the web page.

You use it to mark up the different sections according to their meaning and role in the document. HTML has nothing to do with the way that things look and it has nothing to do with the way they behave.

You mark up a piece of text as <h1> because it is the top level heading text in a hierarchy of headings. You use the <table> tag to indicate that the text is tabular data not because this implies any particular formatting.

Of course in practice there often isn't a tag that indicates the role of the entity in the page but HTML5 has introduced a lot of new ones and if you can't find the right one you can always fall back on the age old ploy of adding class="mytag" to indicate what the entity is.

When it comes to the way things look, CSS controls everything, or it should do.

CSS can be used to assign color, fonts, layout behavior and so on. It is CSS that determines what a heading or a table actually looks like.  If you keep to the separation of concerns idea then you can change the way a web page looks simply by changing the CSS.

Finally JavaScript makes things happen.

You write code to determine what the app does when the user clicks a button or a link say. The JavaScript makes things happen and principle has nothing to do with the way things look or the structure of the page.

This is the fundamental separation of concerns that is built into the modern web (it didn't start out this way). To find out how a page or an app works you can look into three files - the HTML file which gives you the logical structure of the UI, the CSS that determines what it looks like and the JavaScript that determines how it behaves.

If only reality was like theory.

Which technology for what?

Which of these three technologies is most important depends on the nature of the web page.

For a static web page with lots of text and pictures then the HTML and the CSS are top dogs.

For a dynamic page and an app in particular the HTML plays much less of a role and most of the work is down to CSS and JavaScript.

However due to the fact that CSS is proclaimed as being concerned with what the page or app looks like many programmers tend to mostly ignore it preferring to focus on the HTML and the interaction the DOM it creates and the JavaScript. This is perhaps a mistake because CSS is more powerful than you might imagine and it isn't just about how things look - it also strays into the concerns of both HTML and JavaScript.

Let's take a brief look at CSS and its operating principles just in case you have really ignored it!

CSS a tree initialization language

CSS is easy enough to understand.

A style is a collection of attribute settings. If you want to think about it from the JavaScript point of view, a style is an instance of the style object with properties set to appropriate values. However you need to note that when you access a style object via JavaScript you are working with the DOM equivalent of an in-line CSS specification rather than a style sheet. There is a DOM interface to the style sheet but this is another story.

That is, every object in the DOM or in the page element hierarchy if you prefer has an instance of the style object. The style object has properties that are used to determine how the parent object is displayed and in some instances how it behaves.

For example a button object has a style property which in turn has a width property that you can set:

button.style.width=100;

All a style sheet does is to set the properties of all the style objects to create an initial presentation of the page.

A style sheet is a collection of styles i.e. property value assignments and rules for associating these styles with particular objects in the DOM.

To pick out which object in the DOM the style is to be applied to a selector rule is used. This can be used to specify not only the identity or class of the object but also its position in the DOM hierarchy and even its current state. It is the sophistication of the CSS selector which makes CSS so powerful compared to other object initialization languages.

To recap:

• All style rules are of the form:

selector { list of attribute value pairs }

• The DOM is then searched for nodes that meet the selection specification. If a node matches the selector then its style object is initialized to the values specified in the list. Notice that multiple objects could match the selector and hence the style could be applied to many objects.

• Styles are applied in a specific order and at the end of the process each element has a well defined style object. 

CSS Selectors

Clearly the nature of the selector specification is important and it is an interesting example of a language that can be used to specify nodes in a tree structure.

For example,in the case of:

div > p:first-child {color:Blue }

the selector specifies a <p> that is the first child of a <div> and the style will indeed only be applied to paragraphs that are the first child of a div.

CSS selectors are powerful and almost as much fun as regular expressions and if you haven't got to grips with them you should.

They are also the way selectors are specified within the ever-popular jQuery so they are worth learning about even if you don't plan to work with CSS.

Look out for a future article on CSS selectors.

In most cases, however, selectors take the form of either an element name, e.g. div or table, an id, or a class specifier. For the remainder of this article these are all we will use, plus some other simple cases as needed. 

Beyond the look of it

At this point you might be thinking that CSS is just about applying style, some color and a font change say to elements that match the selector but there is more. You can include state information in selectors and this starts the slow slide of CSS into the area of behavior.

The easiest way to show how much CSS moves into the area of behavior is to demonstrate with the creation of a button. If I asked you how to create a custom button you might well start to think about a JavaScript widget or something similar. However CSS is powerful enough to create a custom button very easily.

The first thing we have to work out is which HTML tag to use for the basis of the button. In most cases the tag of choice is the <a> or link tag. The reason for this odd choice is that the HTML specification says that this is the archetypal clickable object and it supports all of the properties and events that we need for a button or anything that the user can click.

So our custom button is indicated in the HTML as:

<a href="/" class="button">Send email</a>

Notice that we have already ruined HTML as a semantic markup language because it isn't obvious that this <a> tag is a button. This has caused programmers in particular to waste a lot of time trying to figure out where the buttons are in an app when all there seems to be is a long list of apparently useless <a> tags.

Our first task is to customize the button's layout behavior so that it fits in with other elements.

We need to allow multiple buttons on a single line. One way of doing this is to float the button left but a better way is to set it to behave as an in-line element that fits in the flow of text and can be organized using line breaks. We also want to retain a block element display area so setting display to inline-block gives use the behavior we need. We also don't want the button's text to be split across multiple lines - this would split the button across lines.

So the CSS starts off:

<style type="text/css">
 .button{
   display: inline-block;
   white-space: nowrap;

Next we need to customize the font to be sans serif and we need to remove the standard underlining and color used for link text:

   font: bold 15px/20px Arial, Helvetica;
   text-decoration: none;
   color: #333;

So far we have the text of a button but not its body. All we really have to do to mark out the button is provide some padding around the text and a border - but it looks better with rounded corners:

   padding: 8px;
   border: 1px solid #777;
   border-radius: 2px;