TXGenWeb & CSS

Fun Things to Do with CSS

Holiday Decor

One of the best things about CSS is that you can change your decor instantly site-wide. I rebuilt my Galveston pages right before Halloween and I thought it would be fun to create a Halloween theme for it. I did so and now I can simply change my CSS file to create a whole new look.

There are a couple of ways to accomplish this.
HEAD OF HTML DOC
<head>
<title>TXGenWeb & CSS</title>
<link rel="shortcut icon" href="http://www.galveston.org/favicon.ico">
<link rel="stylesheet" type="text/css" href="includes/galveston.css">
</head>

First is to set up your CSS in multiple files.
For this example, I'll save one file as galveston.css - my default - and the other will be original-blue.css - the file that contains all the blue decor I created. I also have halloween.css, christmas.css and simple-brown.css. When I want to change the look, I delete what's in galveston.css and copy everything in halloween.css to galveston.css. Save it, upload it and now everything has changed. After Halloween, I can change to my simple-brown.css for autumn colors.

The second (and easier) method is to use a Server Side Include (SSI) to hold the stylesheet reference.
*Note that this method interferes with your ability to see your changes without uploading your pages.
Instead of putting your stylesheet line in the Head of the page, put it in a separate file called stylesheet.htm.
In the Head of all your pages, where you had the stylesheet line, use

When you want to change your site's decor, change the name of the CSS file in the stylesheet file.

stylesheet.htm contains only one line unless you want to include a Google Font.

To change decor:

Fun Things to Do with CSS

Holiday Decor

Responsive Design