| Why do I like Cascading Styles Sheets (CSS) and | | | | you're done! |
| what makes CSS so great. The answer only makes | | | | But with CSS what do you do if you want one |
| sense if you know what CSS is. | | | | paragraph or a set of paragraphs to look different? |
| The Holy Grail of CSS is to separate the content of | | | | You define a class. If you have a right column where |
| a web page from the instructions that control what it | | | | you display ads in your CSS, you would define a class |
| looks like. This makes it much easier for various | | | | and give it a name such as ".rcol", then you would |
| devices to display the web page correctly. The same | | | | define the necessary items that you want to look |
| page would display correctly on all standard web | | | | different (p tags for example). ".rcol p" would be |
| browsers (Internet Explorer, FireFox, Opera, | | | | used to control how a paragraph tag was rendered. |
| Netscape, etc.), and devices used by persons with a | | | | You simply add "class=rcol" to the paragraph tag, or |
| handicap, cell phones, other devices, and | | | | the table tag if it's in a table, or div tag if it's in a div, |
| yet-to-be-developed interfaces. The web site | | | | etc. |
| designer would not have to make separate pages for | | | | This is also where the cascading in CSS comes into |
| these devices. However, reality is different and here | | | | play: the default definitions cascade down into a class |
| in the real world CSS does not do all these things. It | | | | as long as the class does not contain something that |
| does have enough positive points to make it | | | | overrides the default. This means that in our example |
| worthwhile to learn and incorporate it into your web | | | | text rendered in a paragraph tag looks different for |
| pages. | | | | the rcol class, but because that's the only thing we've |
| There are multiple ways to control how something | | | | defined for rcol, everything else would use the same |
| looks on a web page. The color, size, and font used | | | | styles as the rest of the page. |
| for a headline or for a paragraph of text can be | | | | You can also define size and positioning for objects in |
| defined with in-line styles and tags. The term "in-line" | | | | CSS. This is one place where we hit the real world of |
| means that the commands for controlling the color, | | | | CSS pretty hard. Not all browsers support the size |
| size, and font are mixed in with the content. This | | | | and position commands the same way. This leads to |
| makes the source code for the page cluttered and | | | | hacks that define a position and then use a command |
| hard to read and edit when you want to update it or | | | | that is known. For example, to cause Internet |
| fix something. Also, because you're repeating the | | | | Explorer to bail out of the CSS, after that line you |
| same commands over and over throughout the | | | | use a position command that Netscape for example |
| page, the file size of the page gets largër and | | | | understands. CSS uses the last definition of an object |
| hence slower for those browsing your site. | | | | so this technique can be used to "trick" or "hack" |
| As opposed to in-line styles, CSS is not repeated | | | | CSS into working across more browsers than it |
| throughout the page. CSS can be defined in the head | | | | normally would. |
| section, or put in a separate file and referenced from | | | | I don't recommend doing this. One reason is that it's |
| the HTML file, or both. CSS consists of definitions of | | | | messy and easy to forget why you did something. |
| how a page component should render itself on the | | | | The other reason is because as browsers are |
| page. For example, you can define that a headline | | | | updated, or new devices come online, they may not |
| should be blue, 24 point, centered text and that a | | | | follow these unwritten and unsupported hacks and |
| paragraph should be black, 12 point, justified text. | | | | your pages are apt to be all messed up. To get |
| Once that is defined, any normal HTML paragraph | | | | around this I usually use CSS as much as I possibly |
| tags or headline tags would use these definitions | | | | can and then use tables and in-line definitions to |
| when rendered. | | | | control positioning and size. Some people will go to |
| You can define almost all the normal HTML objects | | | | great lengths to use CSS for everything, even |
| this way; background color, background image, | | | | replacing all tables, but here in the real world, you |
| background image position, tables, cells, images, divs, | | | | should get the page built, functioning, and in a form |
| etc. This leaves your HTML code clean and much | | | | that can be used reliably on as many platforms as |
| easier to read. Just like those Ronco TV commercials, | | | | possible. |
| there's more! If you have a multi-page web site and | | | | Not all web site software packages like Microsoft |
| you use CSS and all your CSS definitions are in a | | | | Front Page, Dreamweaver, or Adobe GoLive, etc. |
| separate file, you have one place to go to change | | | | fully support CSS. You'll have to do some coding |
| the look and feel of all the pages in your site. Imagine | | | | manually. Don't worry, it's not that hard. I have an |
| if you have a 50 page site and you learn that the | | | | online course that can teach you how, just follow the |
| size of your text in all your paragraphs is too small or | | | | link at the end of this article. Take the time to learn |
| the wrong color to maximize salës: instead of | | | | CSS and implement it in your web pages. It will be |
| having to edit 50 pages and change the definition of | | | | time well spent. |
| each paragraph, you simply edit the CSS file and | | | | |