When you set out to start learning to handcode your sites in XHTML and CSS – and of course aiming to work towards the webstandards – there are a few things you should keep in mind. Below is my list of what to remember – it will become a little bit of a mixed bag of different bits but I hope it will give you something to think about – please feel free to share your thoughts…

» clear cache and history – save x 2 – preview & refresh

Just to point this out once more as it can be a bit much to remember when you’re just starting with all this…
when working with your 2 documents – the XHTML file and the CSS file – you will need to remember to save both files before previewing in the browser ! If you forget to save your changes in either file – you will not be able to see them applied and taking effect in the browser. So always remember to save twice – then preview and refresh your page.
At times you will also need to clear the cache of you browser, delete its history and restart the browser itself. This is only necessary when you suspect you might be experiencing glitches with your browser. So if your page doesn’t look as you expected, even after the page refresh, try clearing cache and history and restart your browser.
PREVIEWING: personally, I prefer to open the pages I work on directly in the browser – rather than using the preview options in the editors. By accessing the file directly with the browser I am not previewing a temporary version of the page – but rather the page itself.

» default font size in your browser’s preferences

As we all have different online habits – it is hard to judge how exactly the majority of people will view your website. Leaving aside the issues of what monitor resolution and size or which browser – the settings of the browser alone have an impact on how your site displays.
You yourself might have changed the default font size in your browser preferences as you might prefer smaller text display. Or you might have enlarged the default font size. This will affect how you perceive your own design while testing your code and previewing your page.
Most browsers have a default setting of 16pt when freshly installed – this font default is easily controlled with the right CSS rules. If you have changed this setting – your font settings in your CSS file might be very unsuitable for the standard settings used by your visitors. Ideally you will preview your own sites with this default font size of 16. This will be the most suitable starting point as many people never change their default preferences. Using em as font size and – keeping in mind any font resizing your site’s visitor might perform – you can ensure that your layout can handle different text sizes while degrading gracefully if pushed.

» keep you images perfectly sized and feather light

Obvious as it might become to you when you start working with webdesign – it is important not only to plan your site structure and page layout but also to prepare all graphics and other assets accordingly. Make sure that you know the exact size and function of any visual elements and edit each image individually to fit this size. Always keep the file size in pixel dimensions as well as actual file size in mind – a few pointers:

• edit all visuals to the exact pixel dimensions set in your page layout plan
• optimise all images and save them into your site project folder as jpgs or gifs
• for large background images – use soft blurs and tiled patterns to keep their file size down
• XHTML image tag: remember all details of your image tag such as the width and height (without the measurement units) and the ‘alt’ tag – including the closing forward slash:
  
  
  

» make sure to define all link states

In order to ensure that all your links will display as you designed – it is important edit your css to style all 4 states, regardless of whether you are planning to differentiate between each of them individually or not.
Strictly speaking – this is not necessary but proved to be the most reliable method, especially when creating more complex link rollovers. Browser like IE are easily confused and generally give more reliable results with all 4 link states defined.
You can list the button states in order to make several states use the same rules as shown below: