chrispoole.com

Quick Man Page Lookup

2011-10-24T00:00:00+01:00

I often find myself wanting to look up an option in a unix man page. This is a little function I wrote to save myself some typing. It’ll also successfully find text that’s written in bold font in the manual, which simple grepping will not do.

Put it in your .bashrc or .zshrc file. I’ve tested it with zsh on Mac OS X Snow Leopard.

gman () {
    3=${3:-'0'}
    man -- $1 | col -bx | if [[ $2 == "" ]]; then
        grep -Em2 -- "^ +$1"
    else
        if [[ $3 -lt 0 ]]; then
            grep -C${3#-} -- $2
        else
            grep -A$3 -- $2
        fi | more
    fi
}

Invoke it like this:

gman (program name) [search term] [[-]num]

Example usage

gman grep: Prints rough usage of the command grep

grep, egrep, fgrep - print lines matching a pattern
grep [options] PATTERN [FILE...]

gman grep -o: Prints lines matching -o in grep’s man page, usually explaining how to use it; There’s no need to add -- before the search term
gman grep -o 3: Same as above, showing the next 3 lines after each matching line
gman grep -o -3: Show 3 lines around each matching line
gman bash '!!' -20: Quickly check the event designators section of the bash manual

The output is passed to more, the pager program, so longer results won’t simply disappear off your screen.

Send reddit Saved Links to Pinboard

2011-08-01T00:00:00+01:00

This is a simple python¹ script to send saved links from reddit to Pinboard. They get added to your unread pile. It may be useful if reddit ever goes down.

Usage

Download the script here.

Go to your reddit preferences, and under content options, tick enable private RSS feeds. Then visit your private RSS feeds page and grab the link for the RSS feed for your saved links².

Use the RSS feed link when calling the script from the shell:

reddit_save_to_pinboard [-t] (saved links feed url) (pinboard username)
                             [pinboard password]

If no password is given, it’ll ask you for it. For example, here’s what I type in:

reddit_save_to_pinboard "http://www.reddit.com/saved.rss?feed=deadbeef18284e0c2c421&user=chrispoole" chrispoole mypinboardpassword

Further information

Each link is given two tags: reddit, and that link’s subreddit name.

By default, the Pinboard link is the submitted URL, with a link to the reddit comments page as the Pinboard comment.

If you like to use the reddit toolbar, use the -t option, which sets the toolbar link as the main Pinboard link, and adds the submitted URL in the comments. If you want to retain the usual behaviour of this script but still use the reddit toolbar for regular browsing, just don’t add the -t option.

Dependencies

You’ll need three modules that don’t come with Python by default:

BeautifulSoup
FeedParser
Python-Pinboard

BeautifulSoup³ and FeedParser are available on pypi, using pip. If you’re getting the error ImportError: pinboard module required., put the file pinboard.py (from the Python-Pinboard page) in the same directory as this script.

Change log

20111118: Major refactor, fixing a reddit toolbar issue on the way.
20111111: Reverse reddit feed entries so they match order shown on Pinboard.

Python comes as standard on Mac OS X, and many popular distributions of GNU/Linux.↩
It also works with the liked links (and others), if that’s what you want.↩
If you’re getting BeautifulSoup import errors, use the latest stable release: pip install BeautifulSoup==3.2.0.↩

Notes on My Backup Strategy: The Voldemort Approach

2011-08-01T00:00:00+01:00

Along with many others, I keep an increasing amount of memories and important documents on my computer. I don’t want to lose any of it. Here are my thoughts on backup systems, along with justifications:

Use multiple physical devices: Any drive or medium can and will fail.; I don’t trust a drive mechanism to work perfectly for the length of time I care about the data it holds, because it probably won’t.; The same applies to NAS arrays and the like; one drive controller means a single point of failure.
Use multiple physical locations: Fire and theft can occur, so offsite backups just make good sense.
Use multiple programs to do the backup: Tablets and paper have proven to last quite a long time. Software programs haven’t. So that I don’t put all my eggs in one basket, use a few different programs so that if I find some corruption in a backup when I come to restore, it may not be there in other backups from other programs.
Don’t use proprietary container formats: Along the same lines are the previous item, proprietary formats that only a few people know the blueprints to probably won’t last. Free, open formats stand a better chance.

Backup programs

I use Time Machine with my Mac, along with SuperDuper!. Time Machine is great for restoring the odd file, but SuperDuper! is essential if you care about minimal downtime when a hard drive fails. It could take hours to restore from a Time Machine backup, but (assuming you’re using SuperDuper! to backup to the same drive type as your main internal drive), you can just swap the drives out and keep working immediately.

Both programs simply copy files using the standard filesystem for storage: there are no weird storage containers to open first. Assuming you can still read the filesystem (usually HFS+ for current Macs) and the format of the file you’re wanting, everything should be fine.

For offsite backups and other small backups, I use Duplicity. I run it using a wrapper I wrote, Horcrux. It uses the tar file format, along with GnuPG for encryption. It also allows for incremental backups, so a full backup only needs to be completed periodically. Horcrux makes it easy to quickly create new backups using common arguments and options for Duplicity.

This kind of backup workflow leads me to keep small backups of essential files on many devices and drives, just in case, hence why I call my Duplicity wrapper Horcrux.

Simple Python Completion Source for Auto-Complete

2011-08-01T00:00:00+01:00

This is a plugin for Auto-Complete (in Emacs) which provides a quick, simple completion source for available python symbols.

You can of course use rope (with ropemacs), but on Mac OS X this is incredibly slow (typically taking 10 seconds to start a new python buffer), and using rope just for symbol completion is a bit like cracking a nut with a sledge hammer.

Installation

Download the plugin here.

Setup Auto-Complete in the usual fashion, and make sure it gets loaded for python buffers. Then, place ac-python.el in your load-path, and add

(require 'ac-python)

to your .emacs file (after loading Auto-Complete).

Usage

Python symbols will be completed by Auto-Complete, once Emacs learns about these symbols. This is the short-coming of the plugin, but it’s a small price to pay.

To teach Emacs about symbols in imported modules, Emacs needs to execute the Python source. This can be accomplished with python-send-buffer for example, often bound to C-c C-c. If a python process is already running, this is essentially instantaneous.

It works with both python.el and python-mode.el.

Horcrux: A Wrapper for Duplicity

2011-07-14T00:00:00+01:00

Duplicity is a backup program that allows you to store encrypted backups offsite while also allowing for incremental updates.

I take the Voldemort approach to backups, backing up mostly the same stuff to several different places, hence using similar options with Duplicity. To make this use case easier, I wrote Horcrux, a wrapper for Duplicity’s most commonly-used options. It also includes functionality to check a restored backup to periodically ensure your backups are working.

After a simple setup, you’ll be able to run

horcrux auto offsite1

to backup selected files and directories as part of your offsite1 backup. If you want to add a new backup, the setup is minimal, and you can run

horcrux auto offsite2

Both backups keep separate caches and use separate log files. They can backup different files and directories, and to different locations.

Installation

Download Horcrux.

Place it in your PATH somewhere, usually ~/bin.

First run

Run horcrux with no arguments. It’ll tell you that it’s created a file, ~/.horcrux/horcrux.conf. This is the global configuration file, which’ll be consulted for each backup. Open this file in your favourite text editor and edit the options (perhaps only the source directory and the encryption key ID).

Note that if you add a sign key (a good idea) and you use a subkey, you should give the subkey’s ID, not the ID of your main key. If you give the main key, the backup will still work (since gpg will choose your signing key automatically), but upon restore Duplicity will complain that the backup files have been signed with a different key.

The source directory is the directory containing the files and directories to be backed up. Each backup will then consult an exclude file, which will tell Duplicity which files should be ignored, and which should be part of the backup.

Basic usage

Horcrux is run from the command line with the following syntax:

horcrux [options] operation backup_name [restore path]

options and restore path are optional, but you must always tell Horcrux what you want it to do (the operation), and the name of the backup. The backup name can use most characters (letters, numbers, etc.) but should not use hyphens.

Configuration setup

Each backup run by Horcrux has a name and an exclude file. For example, let’s create a backup called offsite1. Create the following two files in the ~/.horcrux directory:

offsite1-config
offsite1-exclude

The config file should contain at least one variable: the destination path. If you’re backing up to a directory on a remote server somewhere, offsite1-config might look like this:

destination_path="rsync://username@your_server//home/username/backup/"

The URL follows the definitions allowed as described in Duplicity’s man page. You can also override variables set in the global configuration file; this is useful to be able to change the source directory or encryption key for one specific backup, for example.

The offsite1-exclude file also follows the syntax explains in Duplicity’s man page. Assuming the source directory is $HOME/, it looks something like this:

**/.DS_Store
+ /Users/username/.emacs
+ /Users/username/emacs
+ /Users/username/bin
+ /Users/username/.git*
+ /Users/username/.ssh
+ /Users/username/.zsh*
+ /Users/username/.horcrux
+ /Users/username/Documents/**/*.md
+ /Users/username/Documents/**/*.css
**/*

Duplicity likes the exclude syntax to use absolute path names, hence the redundancy here. Items starting with a + are to be included. Those without are to be excluded. The above lines will cause Duplicity to ignore any .DS_Store files (used by Mac OS X to store icon information in the Finder), then include several files and directories. Any .css files in any directory within my Documents directory will get backed up, as will the .horcrux directory, my emacs directory, and several files and directories starting with .zsh.

Duplicity stores a local cache of changes in ~/.cache/duplicity by default. If your source directory is the root of your home directory (the Horcrux default), then make sure you exclude this directory. I add the following line to some of my exclude files:

**/*[Cc]ache*

This will ensure that Duplicity excludes files and directories with the word cache in it, which also includes ~/.cache.

Your first backup

Now you should be ready to make your first backup. Duplicity first produces a full backup, and from then on can make incremental backups (i.e., only uploading the changed bits, to save time and space). To do this automatically, run

horcrux auto offsite1

All output sent to the screen will also be put in a log file in ~/.horcrux with the appropriate name. It’ll be compressed with bzip2, or pbzip2 if available.

If at any point you want to check the names of options to use, you can run horcrux help or horcrux -h.

Zero configuration for local drives

You might have a few external USB drives to use for backups, each of which have the directory backup inside them, so for each one you’d add

destination_path="file:///Volumes/drive_name/backup/"

destination_path="file:///media/drive_name/backup/"

to its configuration file¹ (assuming you’re using the same name for both the drive and the backup). In this case, there’s no need to have a configuration file at all. Horcrux will automatically look for such a directory, and if it exists, will use this as the destination path².

For example, if you connect a drive called offsite2, and add a directory backup, you can then add an exclude file offsite2-exclude to your Horcrux directory, and the backup files will automatically be sent to /Volumes/offsite2/backup.

Operations

Horcrux supports the following operations:

auto: Full backup if no filesets or last full backup is old (default 360 days), else incremental.
check: Check md5 hashes of files in a restored fileset against local fileset.; Requires md5deep.
clean: Clean local caches, removing files no longer needed.; Maps to duplicity cleanup --extra-clean --force.
full: Perform full backup.
inc: Perform incremental backup.
list: List files backed up in fileset.; Maps to duplicity list-current-files.
remove: Remove filesets, leaving latest n (default 3) full+inc filesets.; Maps to duplicity remove-all-but-n-full n --force.
restore: Restore certain files/directories or complete filesets.; Maps to duplicity restore.
status: Check collection status on fileset.; Maps to duplicity collection-status.
verify: Verify a backup. Not as thorough as check.; Maps to duplicity verify.

Running full will force a full backup; if auto is passed, Duplicity will choose this method if it doesn’t find a “recent” fileset at the backup destination³, otherwise it’ll run an incremental backup.

Restoring a backup

You can restore certain files from your backups, or certain directories, or the entire fileset. To do the latter, create a directory where you want to restore to, and then run

horcrux restore offsite1 /Some/restore/directory

The backup offsite1 will then be restored to /Some/restore/directory. You’ll be prompted for your GPG passphrase by Duplicity.

If you want to restore a certain file or directory, use the -f option:

horcrux -f somefile.txt restore offsite1 ~/restore_directory/somefile.txt

The file ~/restore_directory/somefile.txt will be written with the contents of somefile.txt from your backup. This file named with -f is relative to the source directory of the backup.

Restoring from a certain time

You can use the -t option to restore a file or directory from a certain time (assuming this time is between the first backup date and now). The following syntax is used:

YYYY-MM-DD, or interval using characters s, m, h, D, W, M, or Y. 1h78m, etc.

For example, a file could be restored from 2 weeks ago using

horcrux -t 2W -f somefile.txt restore offsite1 ~/restore_directory/somefile.txt

Again, this time format is shown in the output from horcrux help.

Checking a backup

This is a feature that isn’t provided by duplicity. It ensures that a restored backup is exactly the same as the local files that the backup is based on. Alternatively, it’ll show you exactly what files have been changed. It’s useful if you want to periodically check your backups.

First, you need to restore your backup to a directory. Then, run the command

horcrux check offsite1 /Some/restore/directory

md5deep will run through all files in the restore directory, and then compare the md5 hashes of each file with its equivalent in the backup’s source directory. If just one byte of a file is different its hash will also be different, and this will be recorded. The list of changed files will be stored in ~/.horcrux/offsite1-changed-hashes.log.bz2.

Removing old backup filesets

Performing a full backup followed by a few incremental backups produces the following structure on the backup side:

- full 1
    - incremental 1
    - incremental 2

If we then force a full backup then perform a few incremental backups, we’ll end up with

- full 1
    - incremental 1
    - incremental 2
- full 2
    - incremental 3
    - incremental 4

Future incremental backups (included those started by the auto operation) will be attached to full 2. If space is at a premium, the old backup chains can be removed using the remove operation. By default it’ll leave 3 chains, but this can be changed either globally in ~/.horcrux/horcrux.conf or for a particular backup using the -c option. If we run

horcrux -c1 remove offsite1

for the above backup, the result will be

- full 2
    - incremental 3
    - incremental 4

Options

Horcrux supports a number of options that can be used to change an option from the default. For example, perhaps you want to increase the verbosity of output from the default of 5 to the maximum of 9. You would run

horcrux -v9 auto offsite1

There are a number of possible options:

-a: use gpg-agent
-c: number of full filesets to leave during remove operation
-f: file to restore
-h: show help (this text)
-k: encryption key
-i: signing key
-n: dry run
-o: make auto operation run full backup if older than some time
-s: backup source
-t: time to restore file or directory from
-v: verbosity
-z: volume size in MB

If you run horcrux help then you’ll be reminded of these options, together with their current values (as set in ~/.horcrux/horcrux.conf).

Frequently asked questions

I want to check what will happen before I run a backup: Use the dry run option, giving a command like horcrux -n auto offsite1.; You could also use the paramtest operation, to very quickly check what parameters will be passed to Duplicity.
I want to backup to the same place, but with different names: I backup to a home server. Locally it has an address 192.168.1.2, but outside of my home network it has another address provided by DynDNS.; Use multiple configuration files, one for each location, with names like offsite3-local-config and offsite3-remote-config. In each one specify the correct destination_path.; Since it’s actually the same backup, it’ll just use the same exclude file as usual, offsite3-exclude.; Run the backup as either horcrux auto offsite3-local or horcrux auto offsite3-remote. The correct configuration file will be loaded.; All output will go into the same log file as usual, and the same local cache will be used.
I want to backup locally first, then upload somewhere: Create your backup-config file as usual, but also create a file called backup-local-config (for example). In this second file, make sure the backup destination is set to a local drive; the former file can still have a remote path.; Backup using horcrux auto backup-local, and then use scp, rsync, or whatever, to copy these files to the remote destination. You can run horcrux auto backup from then on. I often run something like this to maximise my upload bandwidth:

cd local_backup_dir
find . -name '*.gpg' -print0 | xargs -0I{} -n1 -P8 rsync -avhP {} \
    your.remote.server:backup

Reporting bugs

Please send me email to the usual address.

Requirements

duplicity
bzip2 or pbzip2 (to compress log files)
md5deep (for the verify operation)

Change log

20110718: Add support for gpg-agent with -a and use_agent in horcrux.conf.; Check for backup directory in /media/drive_name as well as /Volumes/drive_name.; Produce more output with paramtest operation (for debugging).

This feature assumes Mac OS X or another unix system where files are mounted in /media, such as Ubuntu.↩
See variable backup_basename in horcrux.conf.↩
See variable full_if_old in horcrux.conf. By default it’s 360 days.↩

How to Backup Your Pinboard Bookmarks

2011-06-01T00:00:00+01:00

I’ve been using Pinboard for several months now. It allows me view my bookmarks on different devices, and it grabs articles and links from my Instapaper and Twitter accounts.

If the bookmarks stored by Pinboard are important to you though, you shouldn’t trust Pinboard to back them up for you. This is a simple bash script to backup your Pinboard bookmarks to your local machine.

Assuming you have curl installed on your unix-like system, add the following to a file in your PATH (~/bin is the usual location), and change the username, password and backup directory values:

#!/bin/bash -

cookies=cookies.txt
username=johnsmith
password=hunter2
backup_dir="$HOME/"

printf "Backing up Pinboard bookmarks... "

curl -s -d "username=$username&password=$password" \
    'https://pinboard.in/auth/' -c $cookies > /dev/null 2>&1

curl -s -L -b $cookies -c $cookies \
    'https://pinboard.in/export/format:html/' | bzip2 -c > \
    "$backup_dir"/pinboard-bookmarks-`date "+%Y%m%d%H%M"`.htm.bz2

if [[ -f $cookies ]]; then
    rm $cookies;
fi

# Remove Pinboard bookmark backup files older than 14 days
find "$backup_dir" -name 'pinboard-bookmarks-*.htm.bz2' -type f -mtime \
    +14 -maxdepth 1 -print0 | xargs -0I{} rm {}

printf "Done.\n"

What it does

Firstly, curl visits the login page, entering your username and password, and grabbing the token that Pinboard returns, keeping it in the cookie jar.

Then curl sends a GET request to the page holding your bookmarks for export. I’ve chosen the html format, a legacy Netscape format that’s understood by lots of other services, but you could change this to json or xml. Before saving the bookmarks into a file (here, in my backup directory, but change this to suit your taste), it’s passed through bzip2 to compress the information to save space.

Finally, old backup files are removed.

How to Backup Your Instapaper Links

2011-06-01T00:00:00+01:00

Instapaper saves interesting articles you come across, so you can read them at a later date. Best of all, there’s a nice iPhone and iPad client, making reading longer articles a pleasure.

Here’s how to backup your links on a unix-like system (including Mac OS X):

#!/bin/bash -

username='john@example.com'
password='hunter2'
form_key=df7dfg7dfg7df89g
backup_dir="$HOME/"

cookies=cookies.txt
login_page='https://www.instapaper.com/user/login'
export_page='https://www.instapaper.com/export/html'

printf "Backing up Instapaper... "

curl -s -d "username=$username&password=$password" \
    $login_page -c $cookies > /dev/null 2>&1

curl -s -b $cookies -d "form_key=$form_key" $export_page \
    -c $cookies | bzip2 -c > \
    "$backup_dir"/instapaper-`date "+%Y%m%d%H%M"`.htm.bz2

if [[ -f $cookies ]]; then
    rm $cookies;
fi

# Remove Instapaper backup files older than 14 days
find "$backup_dir" -name 'instapaper-*.htm.bz2' -type f \
    -mtime +14 -maxdepth 1 -print0 | xargs -0I{} rm {}

printf "Done.\n"

Add your username and password, and then in your browser, view the source code to your Instapaper page, and search for form_key. It’ll have some strange value like the above. Replace the dummy value in the script with the value for your form_key.

Usage

Once this script is in an executable file, it can be called (manually or by cron or similar) to create a compressed backup file (currently in $HOME/). Backups older than 14 days will also get removed.

Wordpress Breadcrumbs

2004-01-01T00:00:00+00:00

This PhP script implements a breadcrumbs menu (see example below), which should work out of the box with Wordpress.

<?php
/*
 * quick and dirty breadcrumb menu
 * initially designed for wordpress
 */
function CPbreadcrumbs() {
    $CPtheFullUrl = $_SERVER["REQUEST_URI"];
    $CPurlArray=explode("/",$CPtheFullUrl);
    echo '<a href="/">Home</a>';
    while (list($CPj,$CPtext) = each($CPurlArray)) {
        $CPdir='';
        if ($CPj > 1) {
            $CPi=1;
            while ($CPi < $CPj) {
                $CPdir .= '/' . $CPurlArray[$CPi];
                $CPtext = $CPurlArray[$CPi];
                $CPi++;
            }
            if($CPj < count($CPurlArray)-1) echo ' &raquo; <a href="'.$CPdir.'">' . str_replace("-", " ", $CPtext) . '</a>';
        }
    }
    echo wp_title();
}
CPbreadcrumbs();
?>

To use it, just put that block of code into your Wordpress file where you want the menu to appear.

If you don’t use Wordpress but still want to use this, you may have to change REQUEST_URI at the start of the script to PHP_SELF. And then at the bottom, change wp_title() to be a function that gives the title of the current page.

CSS Hacks

2003-01-01T00:00:00+00:00

Introduction

OK, so you’re happily writing some CSS for your structured X/HTML. You get some nice effects in IE6, then test the page in Mozilla and find that widths are different, and you have all sorts of problems. Or, you get it working in Mozilla, try it in IE, and it doesn’t work.

Usually, it’s due to different (and incorrect) box models. Mozilla tends to display the CSS as it should be, but it does have the odd bug in it’s system. IE5 and IE5.5 have some CSS problems, and so some things would look different in these browsers compared to what they look like in, say, IE6. So, we want our CSS to look similar in these browsers:

Internet Explorer 5/5.5
Internet Explorer 6+
Mozilla/Netscape 6

I have combined IE5 and IE5.5 above as they both suffer from very similar CSS issues. IE6 has fixed a lot of problems, but it’s still far from perfect. Mozilla is very, very good, but as it has a different (and more correct) box model, it often renders the CSS differently to IE6. Note that Netscape 6 uses the same Gecko engine, and is infact just an earlier version of the current Mozilla release.

There are a couple of little CSS hacks that can be used to make the same (fairly simple) CSS work in all of the above browsers.

IE5/5.5 CSS parser bug

At first sight, a CSS parser bug seems to be a nightmare. However, it can be a blessing in disguise sometimes. If you add the following properties to your definitions:

voice-family: ""}""; 
voice-family:inherit;

Then the parser will close that CSS rule. Suppose you wanted to show the ‘hand’ cursor for an element other than a link (let’s say an image tag). You could do this:

img { cursor: pointer }

This is the valid value of the cursor definition to use. However, IE5/5.5 doesn’t use that value. They instead use the value hand. So, you could do the following:

img { cursor: hand }

But then, any other browsers (IE6, Mozilla etc.) would then not get a ‘hand’ cursor (as they use the valid value). You can take advantage of the IE5/5.5 parser bug by doing the following:

img { 
  cursor: hand; 
  voice-family: ""}""; 
  voice-family: inherit; 
  cursor: pointer; 
}

So, IE5/5.5 reads the first definition of this rule for the image tag. It makes a ‘hand’ cursor show when your mouse moves over images. Then, it reads the next two lines, and ends the rule with a } (as it should). It does’t even read the last rule.

IE6 or Mozilla comes along, and reads the first definiton of the rule. It changes the cursor to the hand value. However, as this is not a correct value in these browsers, it still shows the basic arrow. It then reads what we know as the IE5/5.5 parser bug. It is not affected by this bug, and keeps reading. The CSS that makes up the hack that we are creating also does not affect the style of the image element (or any element for that matter). So, it then gets to the final definition, and sets the value of the cursor definition to pointer. Now, a hand is shown in all browsers.

There you have it. You have a way of separating IE5/5.5 definitions from IE6 and Mozilla definitions. All browsers will show a ‘hand’ cursor now. Job done :-)

IE6 support

Even though Microsoft added a lot more when they created IE6, it still isn’t as good as Mozilla for its CSS support. Using the above method, we can separate IE5/5.5 from all the newer browsers. However, what if we want to separate IE6 from the other new browsers (that may render the CSS differently)?

We simply take advantage of IE6’s lack of proper support, and confuse it a little. Say we do this:

#myElement { width: 100px }

But due to different box models, borders etc. in Mozilla it becomes too long (it seems to infact be 110px). We can do this:

#myElement { width: 100px } 
html>body #myElement { width: 90px }

IE6 will read the first rule, and set the width of my element to the value of 100px. It then reads the next rule, but the html>body part of the selector confuses it. Naturally, it skips the definitions in that rule.

Mozilla comes along, sets the width the 100px, as IE6 did. However, Mozilla supports more CSS, and so understands the selector for the next rule. So, it changes the width to 90px. This will fix the width problems we have been having.

Please, try to code your CSS without using any of these hacks. However, if you really, really need to use a hack to get it working better in another browser, then do so. It certainly beats using JavaScript to detect the browser, then load a custom stylesheet from there!

DOM Image Rollover

2003-01-01T00:00:00+00:00

The good old image rollover, revamped for ease of use. No JavaScript knowledge required!

Demo
Download (with instructions)

Introduction to CSS

2003-01-01T00:00:00+00:00

Before continuing with the tutorials, please understand that you need a good knowledge of X/HTML before going on to learn CSS. This is assumed in these tutorials.

Introduction

CSS stands for Cascading Style Sheets, and is an on-going recommendation set by the W3C.

It is a pretty simple language, to define how elements on your page (like a link or a paragraph of text) are displayed to the visitor. The CSS is normally put into a style sheet, but can be added as an extra attribute to single elements (tags) in your X/HTML. I would recommend not using the latter method of using CSS, and stick to using it as part of a proper style sheet.

A style sheet can be written in an external text file (in a program such as Windows Notepad), like you may do with your X/HTML. This file can then be linked into your X/HTML, on any number of pages. This creates an instant major advantage to web developers: you can change only one file (the external CSS style sheet), and your entire site will change. That reason alone is good enough to stop coding all your styling information in the markup.

You can have more than one external style sheet in your documents. Maybe you want one sheet for the colors, one for the positioning of your elements, etc. It’s really up to you as a designer :)

What cascading means to you

If you have more than one style sheet, the CSS parser of the browser will read the first sheet, then the second, etc. If you have the same thing defined in more than once place, the first thing will be replaced by the second. More on this later.

How to use CSS

As a good designer, you want your pages to follow the same structure, i.e. menu top-left, title top-center, etc. This makes it easier for your visitors to browser round your site, and also makes it nice and simple to update your site.

You also need good structure to be able to take full advantage of CSS. This means valid X/HTML. Apart from improving other aspects of your document, valid markup helps enormously if you’re planning on having the bulk of your site styled by CSS.

Where to put the CSS

As explained above, the CSS can be in any of three places:

In a style sheet as part of the X/HTML document
In an additional attribute for almost any element
In an external style sheet

As part of the X/HTML document

You put the CSS code in the HEAD of your document, in between the following tags:

<style type="text/css">
  CSS stuff here
</style>

Of course, the code applies to elements in that document only.

The style attribute

If you wish to add some style to one particular element only, you can use this method. I do not use it however as it goes against my principal to separate the style of a document from it’s structure (i.e. to separate the CSS from the X/HTML). Here it is anyway:

<a href="index.htm" style="CSS stuff here">
  an example tag
</a>

External style sheet

This is my chosen method, and the chosen method of many people, for it’s sheer convenience in site building.

Simply create a blank text file in Notepad, and start typing your CSS. No X/HTML tags required. Call it something like style.css. Anything you like, as long as it has the .css file extension. Then, to add it to your X/HTML document, put this in the HEAD of your document:

<link rel="stylesheet" type="text/css" href="style.css">

You can add more to that tag, but that’s out of scope of this basic tutorial. The above tag is also for a XHTML document, having / at the end of it. Remove that for an HTML document, obviously.

One more thing!

Just a little addition to this basics tutorial. Bear in mind that whitespace is ignored by the CSS parsers, so you can format your CSS code any way you like, to make it more readable to you :-)