| The other day I was asked why I like Cascading | | | | and you're done! |
| Styles Sheets (CSS) and what makes CSS so great. | | | | You may be asking how to make one paragraph or a |
| Here's my answer to those questions. | | | | set of paragraphs look different than the default? |
| The Holy Grail of CSS it to completely separate web | | | | One way is to define a class for that item. If you |
| page content from the instructions that control its | | | | have a right column where you display ads, in your |
| look and feel. If this is achieved then it's much easier | | | | CSS you would make a class and give it a name such |
| for various devices to display the web page | | | | as ".rcol". You would define the necessary items for |
| correctly. For example the same page would display | | | | the class that you want to control (paragraph or |
| correctly on a standard web browser (Internet | | | | header tags). ".rcol p" would be used to control how |
| Explorer, FireFox, Opera, Netscape, etc.), devices | | | | a paragraph tag was rendered. To associate the class |
| used by persons with a handicap, cell phones, and | | | | to the object, simple add "class=rcol" to the |
| yet-to-be-developed interfaces. Nor would the web | | | | paragraph tag, or the table tag if it's in a table, or div |
| site designer have to make separate pages for some | | | | tag if it's in a div, etc. This is also where the term |
| of these devices. Reality is quite different though and | | | | cascading in CSS earns it's keep: the default |
| here in the real world CSS does not yet do all these | | | | definitions cascade down into a class as long as the |
| things. But it does have enough positive benefits to | | | | class does not contain something that overrides the |
| learn how it works and to incorporate it into your | | | | default. This means that in our example text |
| web pages. | | | | rendered in a paragraph tag looks different for the |
| There are a different ways to control how things | | | | rcol class. However, because that's the only thing |
| looks on a web page. For example, the color, size, | | | | we've defined for rcol, everything else would look |
| and font used for a headline or the color, size, and | | | | the same as the rest of the page. |
| font for a paragraph of text can be defined with | | | | You can also define size and positioning for objects in |
| in-line styles and tags. In-line means that these | | | | CSS. This is one place where we hit the real world of |
| formatting commands for controlling the color, size, | | | | CSS pretty hard. Not all browsers support the size |
| and font are mixed in with the content. This makes | | | | and position commands the same way. This leads to |
| the source code for the page much harder to read | | | | hacks that define a position and then use a command |
| and modify when you want to change it or fix a | | | | that is known, for example, to cause Internet |
| problem. In addition, because you're repeating the | | | | Explorer to bail out of the CSS, after that line you |
| same commands over and over down the page, it | | | | use a position command that Netscape for example |
| makes the file size of the page get larger and larger | | | | understands. CSS uses the last definition of an object |
| and less efficient (slower) for those browsing your | | | | so this technique can be used to "trick" or "hack" |
| site. | | | | CSS into working across more browsers than it |
| CSS is not repeated throughout the page. CSS can | | | | normally would. I don't recommend doing this. One |
| be defined in the head section of the HTML page, or | | | | reason is that it's messy and easy to forget why |
| put in a separate file and referenced from the HTML | | | | you did something. The other reason is because as |
| page, or you can even do both. CSS consists of | | | | browsers are updated, or new devices come online, |
| definitions of how a page component should look on | | | | they may not follow these unwritten and |
| the page or device. For example, you can define that | | | | unsupported hacks and your pages are apt to be all |
| a headline should be red, 26 point, right aligned text | | | | messed up. To get around this I usually use CSS as |
| and that a paragraph should be black, 10 point, left | | | | much as I possibly can and then use tables and in-line |
| aligned text. Any normal HTML paragraph tags or | | | | definitions to control positioning and size. Some |
| headline tags would use these definitions when | | | | people will go to great lengths to use CSS for |
| rendered. | | | | everything, even replacing all tables, but here in the |
| You can define pretty much all the normal HTML | | | | real world, your should get the page built, functioning, |
| objects this way; background color, background | | | | and in a form that can be used reliably on as many |
| image, background image position, tables, cells, | | | | platforms as possible. |
| images, divs, etc. This removes the clutter from your | | | | Not all web site software packages like Microsoft |
| HTML code and makes it much easier to read. But | | | | Front Page, Dreamweaver, or Adobe GoLive, etc. |
| wait, there's more! If you have a web site with more | | | | fully support CSS. |
| than one page and you use CSS, and, you put all | | | | You'll have to do some coding manually. Don't worry, |
| your CSS definitions in a separate file, you have only | | | | it's not that hard. I have an online course that can |
| one place to go to change the look and feel of all the | | | | teach you how, just follow the link at the end of this |
| pages in your site. If you have a 50 page site and | | | | article. |
| you learn that the size of your text is too small or | | | | Take the time to learn and understand CSS. |
| you used the wrong color to maximize sales: instead | | | | Implement it in your web pages. It will be time well |
| of having to edit 50 pages and change the definition | | | | spent. |
| of each paragraph tag, you simply edit the CSS file | | | | |