CSS3 Rocks - Building a Custom CSS Button
CSS3 Rocks - Building a Custom CSS Button
Written by David Conrad   
Article Index
CSS3 Rocks - Building a Custom CSS Button
A functional button

CSS - its 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 if 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:


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. 

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. Lookout 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.

Last Updated ( Monday, 07 November 2011 )

Copyright © 2016 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.