* Keep in mind that this was built as a PRESENTATION, not a set of HTML tutorial pages.
* The GREEN links will open a second (sometimes a third) tab or window in your browser so you can see what I'm doing.
* The RED text blocks are examples of code.
* The format of these pages serve a purpose - this is the background image for them.
Fun Things to Do with CSS
Intro
I'm going to talk about some cool things that can be done with CSS. I'll show you some really outrageous examples but then tone them down a bit for use on our more conservative pages. I only have an hour so I'm going to fly through these pretty quickly but this tutorial is online so you can look at these examples and I'm always around to answer questions.* Remember that styles CHANGE. Some people wouldn't be caught dead in last year's clothes or hair style but there are pages on the Internet that haven't changed their looks in 20 years. With CSS, it's very simple and easy to change a color, a font face or a button; anything to create a new look for an old site.
* I was recently asked for my most important piece of advice for re-designing a web site and my answer is - NEVER work in the original folder, not even for a very simple change. Create a new folder and name it new-[county] or rename the old one old-[county]. That way, you won't mess up the old site while you're working on the new one. If you do mess up, you can easily re-upload the old page while you fix the new one.
CSS has been around for a long time; it was proposed in 1994 and the first version was released in 1996. We're now on version 4, released 24th of March 2017. The original purpose of CSS was to quickly re-design and/or re-decorate HTML code but it has morphed drastically to include other uses. You can now draw with CSS and there are some basic functions included that, when intergrated with HTML and/or JavaScript, can produce some startling and innovative designs.
People are often terrified when I tell them to replace something in their HTML code and I can remember when I was just as terrified. To make HTML less scary, think of it like this.
- HTML is a page full of ELEMENTS.
- An ELEMENT is a BOX.
- CSS is a set of INSTRUCTIONS.
- You can use CSS to tell a browser WHERE to put the BOXES
- You can use CSS to tell a browser HOW TO DISPLAY the BOXES.
Animated Menus - This demo is no longer available to view but the code is still available. Click it for MY adaptation.
So, those are some of the more amazing things that can be done with CSS but we're going to focus on some less complex items that we can use on our TXGenWeb pages.