CSS
Some CSS
CSS stands for Cascading Style Sheets. In properly coded websites the content and presentation are kept separate - the content is in the XHTML, whilst the CSS controls the presentation.
There are three different way of adding CSS to a page, listed in highest to lowest priority order;
- Inline Styles
- The CSS is written directly into the tags, e.g.
<a href="/index.shtml" style="color: #FF0000;">Red Link</a>. This does not represent separation of content and presentation, does not allow code reuse and is quite restrictive. I generally only ever use this for coding HTML emails. - Embedded Styles
- This method means the CSS is written into the HTML document itself, usually into the
<head>at the top of the page. Class and ID definitions can be created and reused within the page but if these definitions are used on other pages then this is not an efficient method. - External Style Sheets
- A document is created that contains class and ID definitions that are used on multiple pages, if not the entire site, and then it is loaded into each page. The browser can then cache this document which reduces bandwidth and page load time.
Higher priority styles, i.e. Inline Styles, will override the lower priority styles. This is useful if, for example, you had an element that you wanted to appear in green on 99 pages of your 100 page website, and red on the final page. You could then setup a class to make the element green and put that in your External Style Sheet document, but use an Inline Style on the 100th page to make the element red. I've used inline styles here to make the text red and green - I didn't want to create a class and add it to the external style sheet for the sake of colouring four words.
Another advantage of using external style sheets is that you can completely change the look and feel of a website without touching the XHTML or structure of the site. CSS Zen Garden demonstrates this in action.
Hand Code CSS
I always hand code CSS - it means I know exactly what is happening and why. I also have a pretty good understanding of what is supported by the different browsers and platforms so I can avoid using any CSS hacks - I think they are generally a symptom of not understanding the code and will cause far more problems than they fix.
It is well documented how varied CSS support is across the major browsers, particularly with Internet Explorer, and it can sometimes be a challenge to get IE 6 to behave properly. My prefered method for dealing with IE's quirks is an IE specific external style sheet that is loaded using Conditional Comments. I prefer this method to using Javascript and generally its only required to switch transparent PNGs for GIFs and sort out any hasLayout issues. This site has an IE specific style sheet that targets IE 7 and below.