Bookmarklet basics - change any website's background colour

(1) Drag the below to your bookmarks bar.

Change Background Colour

(2) Now click on your new bookmarklet and follow the prompt.

(3) This magic is achieved by the following bookmarklet code being inserted in place of a web URL

<a href='javascript:void(document.body.style.backgroundColor=
prompt("Type%20a%20colour%20for%20the%20background",""))'>Change Background Colour</a>

(4) This is good, but it would be better if we deactivated the ability to use the bookmarklet in place on the webpage. To do this we add an onclick event to the link, that reads something like this:

onclick="alert('Drag me to your bookmarks bar'); return false;"

(5) Now let's add style information as well, we'll do this in place for this example but in real world use you'd separate the CSS styles from the HTML.

style="background-color: darkgrey; border-radius: 10px; color: white; margin-left: 1em; margin-right: 1em; padding: 5px; text-decoration:none;"

(6) Finally, here's the fully polished button, try clicking on it:

  Change Background Colour

(7) And here's the underlying code:

<a href="javascript:void(document.body.style.backgroundColor=prompt("Type%20a%20colour%20for%20the%20background",""))" imageanchor="1" onclick="alert('Drag me to your bookmarks bar'); return false;" style="background-color: darkgrey; border-radius: 10px; color: white; margin-left: 1em; margin-right: 1em; padding: 5px; text-decoration: none; word-wrap:break-word;">Change Background Colour</a>

(8) Now you've come this far I recommend turning to a more detailed web tutorial to learn some of the more advanced possibilities, for example this one.