Just when you begin to feel comfortable with HTML and really get to grips with website design along comes CSS. But don’t fear, if you could learn HTML, then CSS will be easier.
One of the main problems web developers face, is the number of different browsers that are likely to be used to read their website. Just when you get the site to work fine with Firefox, IE or some version of IE has a problem with it.
All browsers tend to render or interpret the HTML code slightly differently. So they all read the words correctly but the story doesn’t always come out the same.
This is where CSS or Cascading Style Sheets come into the picture. CSS is a programming language that specifically addresses the interpretation of the base HTML code. So, in essence, the HTML coding tells the browser what the web page consists of and where to find it and the CSS code tells the browser how to display it on the viewers monitor.
Occasionally your browser may read the HTML before it reads the CSS and then you have the cases where you get a momentary flash of un-configured text before the page loads correctly.
I’m sure most people who surf the net regularly have experienced this and it is one of the best examples of CSS at work. Another good example of this is when you open sites that are garbled with overlapping text and graphics that are clearly not what the author wanted as an end result. This happens when the CSS block is missing or corrupted.
This also happens when you open sites with a browser that does not support CSS such as those sometimes found on mobile phones. For this reason web developers need to think pro-actively when they design so that, in the event of the site being opened by a non-CSS enabled application, the content will at least make sense.
CSS is also particularly powerful when it comes to configuring content for different output protocols such as on screen, print or even speech and Braille browsers for impaired users. The code also tends to make for slicker, less complex site structures with minimal code repetition.
CSS coding syntax is also pretty simple by comparison and consists of 3 basic parts that are generally laid out in this way
selector { property: value}
Let’s break that down a bit more. The selector indicates the actual HTML item you wish to address for example the header of your page. The property part of the code indicates the exact property of the element that you wish to specify e.g. The font. The last part or value indicator tells the browser which property will be applied for example Arial.
The completed code would look something like this
h1 {font-family:arial)
The browser would read this as header one needs to have its font set to Arial. Nice and simple. You can also combine multiple properties and values.
h1 {font-family:arial;background:#eeeeee}
So the above would mean header one is Arial font as in the previous example but the second property, separated by a semi-colon, means that the background colour is grey.
This may all seem a little complex at first but how to use CSS is very simple once you get used to it and the language is a critical tool for ensuring the cross browser compatibility that allows us to view sites accurately and as their authors intended.
And it makes for much cleaner and organized HTML code, with all the styling code out of the way and in one place. This separation of style and content is more maintainable and also much more flexible.
