There are various ways to use CSS markup in your site pages. You can link external stylesheets to your HTML pages, define CSS elements directly in your HTML code, but what is the best solution? Let's the describe the most popular of them and show their pros and cons...

This article is most useful if you are somewhat familiar with HTML and CSS. I explain the concepts well enough that you do not have to be an expert, but I want to provide material that will introduce you to more advanced design in ways you can understand..

CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied. It is also always critical to always keep in mind your target audience and the average internet connection speed these users have. By using styles sheets to their full advantage, you can help keep your web page size down to a minimum...

1. The content is separated from the design

Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet! This Of course, generates some great flexibility. This flexibility is not available when your website is using tables for layout, inline font tags or inline defined colors.

A single CSS file can contain positioning, layout, font, colors and style information for an entire web site.

2. You site uses less bandwidth and loads faster...

If you are still designing with tables then you are missing out on a lot of the benefits of cascading style sheets (CSS). Tables were not supposed to be used for designing but unfortunately it has been the standard for a long time. Not any more..

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It's also possible (and often desirable) to position objects within a container. It's simple to do too.

Learn how to have a fixed width layout website, and the content floated in the middle of the screen, with pre IE 6 compatability.

It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.

One of the main reasons for having to use images on any web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using just HTML, so images need to be used. Putting these images into the HTML document with a table layout can create a large amount of superfluous code. Using the power of CSS we'll create the following box with round corners, without an <img> tag in sight.

Learn how to shorten those CSS font rules.