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