| If you haven't heard of CSS, it's short for Cascading | | | | haven't, just hop over to Check out the navigation at |
| Style Sheets. I'm not going to go through what it is. | | | | the top and the navigation on the right and links |
| There are many free articles and resources about | | | | throughout the site. These were done using CSS |
| CSS out there in the wild wild web. | | | | only. No images required. Just view the source code |
| Instead, I'm going to share with you why I decided | | | | and you'll find that the navigation is a simple |
| to switch to a CSS based design. | | | | unordered list. |
| I've known about CSS for quite awhile now but I | | | | 2. Separate content from design |
| used it minimally on my sites. Mainly to control the | | | | This one's a bit hard to explain. The best way I can |
| default font used in my web pages and also to | | | | think of to explain this is to point you to Hop over |
| define certain styles that I seem to use over and | | | | there now. You'll see a list of styles you can select. |
| over again. I never gave much thought about using | | | | Click on a few and you'll see what I mean. The |
| CSS to it's greatest potential. | | | | content remains the same but the design is totally |
| I guess it was because I was already good at making | | | | different. This comes in really handy when you'd like |
| web sites the way I made them, i.e. using tables. I | | | | to change the look of your site without touching |
| didn't want to have to learn a totally new way of | | | | your HTML web pages. Just change one CSS file and |
| doing things. So I stuck to tables for as long as I | | | | your whole web site has a new look. |
| could. | | | | 3. No more tables ... almost |
| Unfortunately, 'as long as I could' turned out to be | | | | You no longer need extensive use of tables. No more |
| until the middle of last month. | | | | nesting tables within tables. No more figuring out |
| It started with my WebSite Workshop members | | | | which closing table tags belong to which tables. No |
| area. I had added a new section and needed to | | | | more deleting a single table cell and having your |
| update my navigation. I had a roll-over navigation, | | | | whole web site resemble chaos. You'll still, however, |
| pretty much like the one I have at The only | | | | need tables to tabulate your data. But that's about it. |
| difference is that when someone clicks on a button, | | | | 4. Easy site-wide changes |
| a secondary navigation will appear below. | | | | Need to change the color or size of your H1 tags? All |
| I used images as my navigation buttons. So, in order | | | | you have to do is change the color and size once in |
| to add one more section, I had to create a new | | | | your CSS file and all H1 tags in your web pages will |
| image for that section and resize all the other button | | | | change. |
| images so they would all fit nicely in one line. To top | | | | 5. More design effects |
| it off, I had two sets of images. One for the default | | | | CSS offers you more design effects than normal |
| button and another that replaces the default button | | | | HTML. With HTML you can change the color, font |
| when someone hovers over it. Thus, creating a roll | | | | and style of your content. With CSS you can change |
| over effect. | | | | the background color (e.g. set it to yellow to create a |
| After creating the button images, there was also the | | | | highlighter effect), create borders, change letter |
| need to use tables to arrange them nicely in a row. | | | | spacing, word spacing .... |
| And this whole table had to go into a row in the main | | | | 6. Faster loading time |
| table of the page. | | | | Reduced table use and reduced image use will lead us |
| After a few solid hours into it, I started thinking, this | | | | to faster loading time. Need I say more? |
| is crazy. There must be an easier way to do this. All I | | | | 7. Search engine friendly |
| wanted to do was add ONE more section. | | | | Now that all your design code is in your CSS file, |
| I did a quick search on the net and realized that | | | | what is left in your web pages? You got it ... content. |
| there was an easier way ... using CSS. | | | | That's not all, with CSS, you can even put your |
| I spent some time reading articles on CSS. Not so | | | | navigation text and other 'non-content' content at |
| much about what it is or how to code it but rather | | | | the bottom of your HTML file but make it 'appear' at |
| what it could do and was I in for a surprise. | | | | the top using CSS. This way, search engines will find |
| Apparently, it could do more than I gave it credit for. | | | | the more important content first. |
| Here are just some cools things about CSS: | | | | Enough said. I think now you can understand why I'm |
| 1. Create roll over effects with ease | | | | so excited about switching to a CSS based site |
| CSS makes it really easy to create roll over effects. | | | | design. |
| You've probably seen this all over the web. If you | | | | |