| Article Index |
|---|
Page 1 of 2
CSS- it’s all about display and style, the sort of thing developers worry about, no programmers. In reality CSS is more critical than HTML5. After all, it really controls how the UI looks and even how it behaves. If you plan to create a custom handle then it is CSS you need to know.
You may say that it is CSS where the action happens and it is definitely much more important that a computer gets on top of CSS than anything else.
What generally happens, however, is that we focus on HTML5 learn some JavaScript only to later learn that there is a lot going on in the CSS we have ignored.
Separation of problems
Let’s consider a quick look a the idea.
In theory a web application depends on three important systems:
- JavaScript
In theory HTML is about language of the website page.
You use it to level up the different parts according to their meaning and part in the report. HTML has nothing to do with the way that things look and it has nothing to do with the manner they behave.
You mark up a piece of text as <, h1>, because it is the best level heading words in a pyramid of topics. You use the <, table>, label to indicate that the word is tabular data not because this implies any special formatting.
Of course in practice it usually isn’t a label that indicates the position of the object 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 reveal what the entity is.
When it comes to the way things look, CSS controls whatever, or it should do.
CSS can be used to attribute color, typefaces, design habits and so on. It is CSS that determines what a heading or a desk really looks like.  , If you keep to the separation of problems concept then you can change the way a web site looks just by changing the CSS.
Suddenly JavaScript makes things happen.
You write code to identify what the software does when the customer clicks a switch or a hyperlink say. The JavaScript makes things happen and process has nothing to do with the way things look or the structure of the page.
This is the important detachment of fears that is built into the current internet ( it didn’t start out this way ). To find out how a website or an application works you can look into three documents- the HTML file which gives you the natural structure of the UI, the CSS that determines what it looks like and the Java that determines how it behaves.
If only truth was like idea.
Which technologies for what?
Which of these three solutions is most important depends on the nature of the web site.
For a dynamic web site with lots of text and images next the HTML and the CSS are major dogs.
For a dynamic page and an application in particular the HTML plays much less of a responsibility and most of the work is over to CSS and JavaScript.
But due to the fact that CSS is proclaimed as being concerned with what the site or software looks like some programmers tend to largely 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 think and it isn’t only about how things look- it also strays into the concerns of both HTML and JavaScript.
Let’s get a quick look at CSS and its working principles just in case you have actually ignored it!
CSS a branch initialization speech
CSS is simple enough to know.
A design is a collection of ascribe settings. If you want to think about it from the Script point of view, a design is an example of the design element with attributes set to correct 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:
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:
.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;