| |
Cascading Style Sheets
Creating CSS
---------------
| Hand-Coding
vs. WYSIWYG, Implementation Methods, Browser
Support |
There are two ways to create Cascading Style sheets. You can 'hand-code'
using any normal text editor, such as BB edit,
or use a WYSIWYG (What you see is what you
get ) Web-page design application, such as Macromedia Dreamweaver, to write
the
code for you.
There are advantages and disadvantages for using either. With Dreamweaver,
you do not need to learn the syntax of the CSS language in order to create
style
sheets. The application will write the code for you, which will save
time. But, like most applications, you may run into bugs. This is
where basic knowledge
of hand-coding
becomes useful. When you are debugging a file, is it easier to figure
out which parts of the code do not work if you understand what the code
is actually doing as opposed to what it is supposed to be doing. If you
would like more detailed information on hand-coding , there are many resources
and guides on-line.
To start hand-coding a style sheet, go to the Coding CSS link.
To start creating style sheets in Dreamweaver, see the links for CSS in Dreamweaver MX. Check the Links page for more information on CSS support in Dreamweaver.
There are three methods of CSS implementation: external, embedded, and inline. Which method to use depends entirely on how large your website is and what type of maintenance will be kept.
For larger sites, i.e. consisting of more than four or five HTML pages, external style sheets are recommended. By creating an external CSS file that links to all the your pages, you can update the appearance of your pages by changing the values in just one file. This is great for management of large, sophisticated sites. For example, different departments of an organization can create their own departmental webpages yet still project a consistent overall organization image by sharing a few CSS files. External style sheets also save time, not only in terms of when you're updating or editing, but also download time. Since one file contains all the style instructions for a website, once it is downloaded, all the pages that are linked to it can refer to it. It is not downloaded every time a page is requested, which makes your website much smaller and quicker to download.
For smaller sites, maybe less than two to three pages, it may be easier to use embedded CSS. Embedded style sheets only affect the style of the pages they are written into. When you update the appearance of a website, you will have to edit every page. Inconsistency may arise if you miss any of the pages. Instead of one file, your style instructions are contained in every file and they will be downloaded every time a user sees a page from your site. This repeated action will slow download time. If your site is small and it does not contain many style instructions, then download and maintenance time should not be an issue.
Many web developers think that inline CSS should be avoided, because it really does not support the CSS philosophy of separation of content from appearance nor does it take advantage of CSS's site management capabilities (So when internal style sheets are mentioned, it usually refers to embedded style sheets.) Inline CSS is written among the rest of the HTML code, similar to presentational HTML tags. To edit, you would have to go through the page line by line to find the CSS code. This is not an efficient method of implementing CSS.
CSS properties, particularly positioning and extensions properties, are not supported by all browsers. Check the browser support tables to see which ones are better than others. Generally, the newer browsers have better support than the older ones.
Most browsers that do not support style sheets will ignore the style tags, located within the HTML head, which enclose the style sheets. Others though, will display the contents of the style sheets to the user. To avoid this, put your style tags inside an HTML comment, which does not display on the screen. This prevents the older browsers from displaying the style sheets' content, while allowing newer CSS-enhanced browsers to treat the contents of the style tags as a style sheet/s. HTML comments start with <! -- and end with -- >.
If you would like to have support for multiple browsers, you could create two style sheets, one to cover older browsers and the other for newer ones. External style sheets can be attached through the link and import methods, the most common being the link method. The import method is not recognized by older browsers, so you could use the link method to attach a style sheet for older browsers, saving the import method to attach a style sheet for the newer browsers. Thus, ensuring that your document will be readable in older browsers while maintaining CSS capabilities in newer ones.