 |
|
| This page offers some introductory basics on Cascading Style Sheets (CSS) |
| Why Use CSS |
Lets say I code up several pages of my new website and use a nice big chunky font size for the site header at
the top of each page. Several days later I'm testing my site and conclude that the font is way too big and overwhelming and I
also want to try a different font. If I have used a CSS style sheet to control these parameters, then I can change the style
sheet entires and have all my pages change. Without CSS you have to add the necessary HTML control tags to each paragraph, to
each table cell, in far too many places. Your HTML file size gets bigger with all that HTML code and it is a major chore to
overhaul the site. Far too much work to endure on a large site. |
Styles In
Microsoft Word |
Some of you are familiar with Microsoft Word (a word processing application). With Word, you can use the
default styles for the various heading levels, or you can change the built in styles. You can also create your own styles and
apply them throughout your document. Some of the parameters you can set (for each style) are font type, size, color and
indentation. Once your document has been typed up, you can re-format your styles, using the style editor, with the results
effective throughout the document. |
CSS
Styles |
You can do much the same thing with CSS in that you can declare the styles that you wish to use in a page and
have those styles effective throughout the page. You can also create a separate CSS page that all your pages refer to. Change
the coding in the CSS control page and the styling changes on all your pages. |
Cascading
Priority |
Lets say that your HTML code has specified a particular font size for a paragraph or segment of text. In that
case CCS cannot control the font size for that segment of text. Remove the font size control from the HTML and the CCS
styling, at the top of the page, can specify the font size for that style, where ever it is used on the page. If the font
size, for that style, is specified at the top of the page, then the linked to page cannot control the font size for that
style. In order for the linked to CSS style sheet to control your web site, you must remove the style coding at all the higher
priority levels. |
| Tables |
There is much more to CSS than controlling font size, color, etc. For example, CSS can do much more
efficiently what we often do with tables, resulting in smaller file sizes that load faster. |
Browser
Compatibility |
The older browsers don't support CSS, especially the most recent editions of CSS. If an older browser does
not support Javascript, then your navigation system may fail entirely. If a visitor's browser does not support CSS, then it
ends up using your default HTML formatting. Worst case scenarios are not nearly as catastrophic as they can be with
Javascript, flash, etc. Standard HTML text sizes are rendered differently on a MAC vs a PC. This is one of the many areas of
browser incompatibility that CSS sets out to solve. |
Start Out
Simple |
All webmasters who take their role seriously should be learning about CSS as it is taking on a growing value
and strength in website design. There is a lot to learn about CSS and yet you can start out real simple and experimentally
nibble your way into it a little bit at a time. |
Church Website
Example |
Webmaster John Gales comments that the Green Bay Seventh-day
Adventist Church website makes extensive use of CSS. |
| Websites to visit, to dig deeper into this topic |
 |
Dave Raggett's Adding a touch of style |
|
Boogie Jack's Introduction to Cascading Style Sheets |
|
Listamatic -- Dozens of ways to present an HTML list
(e.g. for navigation) using CSS. Some are truly amazing. |
|
CSS (Style Sheets) by Website Tips |
