Experiments with Cascading Style Sheets - Doing it with style

What it's all about...

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my first steps down this path.

CSS play, by the way, is now listed on the w3c.org website.

So I have created this site in the hope that it will help newcomers to CSS and show old hands that it is more than just a mechanism for styling your documents. It is oh so much more.

Because CSS play deals with experimental CSS that is exactly what you get JUST CSS, no javascript or any other programming language has been used in any of the demonstrations. For javascript demonstrations please click the javascript link in the main navigation bar which will take you to my other site which is dedicated to demonstrations using CSS and minimal, unobtrusive, javascript.

Use the correct DocType Definition (DTD)

Please , please, please note that for most of my demonstrations to work, especially in Internet Explorer, you MUST use a standards compliant !DOCTYPE, and for Internet Explorer this MUST be the first line of your (x)html.
Using <?xml version="1.0" encoding="UTF-8"?> will switch IE into quirks mode.

A list of the recommended DTDs can be found at the following link:
Recommended DTDs to use in your Web document.

A little bit about us


CSS play is a partnership between myself and my wife. My name is Stuart Nicholls, but known to everyone as just Stu. I am 68 years old, married with two children, worked as an electronics design draughtsman, until I resigned to become a self employed (freelance) web designer/adviser, and have a passion for computers and photography.

My wife is Fran Nicholls who assists in the day to day running of the site and also controls the accounts as well as having an input into the demonstrations.

We started out with computers in the 1980s when I began writing articles on the ZX81 and ZX Spectrum for the computer magazines of the time. I was also commissioned by McGraw-Hill to write two books on Z80 programming for the ZX Spectrum, Fran helped to produce the manuscripts for these books.

The web was the next big attraction and once more I have become hooked, as you can no doubt tell, with CSS. This site has been around since 2005 and is now at the forefront of CSS development.

We thank you all for your support and comments and should you wish to link back to CSSplay please feel free to use this button.

CSS play button

What has happened to my previous home pages?

The alternative styles and my javascript switcher have been dropped from this new layout, primarily because any changes I wanted to make to this home page required updating the CSS for every style.

However, these styles have not been lost. If you wish to see my previous home pages then visit my archives.

But where's the code?

I have had many emails asking where the code/style can be found for the various demonstrations.

Well the xhtml is always placed in the #info div, so examine the source code, find the <div id="info">.....</div> and in between is the 'code'.

In most case the style is embedded in the page <head>...</head>. This is done to keep it all together on the same page making it easier to find. In some cases the css is held in a separate file (where it should be) and is loaded in the normal way <link rel="stylesheet" media="all" type="text/css" href="path to css file.css" /> so just add this path to the address in your browser to see the css file.

Recent Pages

23-02-15Tic-tac-toe Player v PC
23-02-15Vimeo video Play/Pause button
16-02-15CSS form valid checking
06-02-15CSS responsive aspect ratios
01-02-15CSS video aspect ratio converter
12-01-15Tutorial autorun slideshow
18-10-14Left/right wrap around gallery
15-10-14Left/right auto play slides
14-10-14Basic auto play slideshow
13-10-14Responsive auto play gallery v2
10-10-14Responsive gallery with auto play
23-09-14CSS3 Tic-Tac-Toe Player v PC
16-09-14Imagemap with CSS hover
30-06-14EasySlide - Remix
20-06-14EasySlide - Responsive Slideshow
17-06-14Vimeo video hide control bar
11-06-14Vimeo video selectlist & controls
09-06-14Vimeo video autopause for IE8+
09-04-14CSS styling of 'Awesome Icons'
05-04-14British Flag with just one <div>
04-04-14CSS filter gallery with transitions
31-03-14CSS filter grayscale two ways
27-03-14CSS 'drop shadows' two methods
19-03-143D Swan Lake animation
10-01-15Responsive click/tap droplist
16-12-14Responsive click/tap menu
22-10-14Click/tap multi level menu
29-09-14Universal Slide In/Out Menu
03-09-14Responsive Droplist Menu
26-08-14Vertical Concertina Menu
15-08-14Responsive Slide down/up Menu
13-08-14Responsive Droplist Menu
25-03-143D Mega Menu
06-03-14Flexbox droplist menu
05-03-14Flexbox vertical accordion menu
24-02-14Click/Tap multi-level menu
18-02-14Team images and information
17-02-14Ring menu with zoom toggle
12-02-14Modern drill down menu
10-02-14Responsive multi-level menu #2
03-02-14Responsive multi-level menu
29-01-14PC, Tablet & Smartphone Concertina
27-01-14PC, Tablet & Smartphone Droplist
02-12-13PC, Tablet & Smartphone Menu v2
04-11-13PC, Tablet & Smartphone Menu
17-10-13Universal Mini Menu
15-09-14Responsive 'Wavy' Layout
05-09-14Responsive 'Slanty' Layout
26-08-14Responsive full screen slideshow
10-08-14CSS only responsive 'blinds' layout
06-08-14Responsive 'curtains' layout v2
04-08-14Responsive 'curtains' layout
05-03-14Basic flexbox 'sticky holy grail'
03-03-14Flexbox Layout with sticky footer
01-05-13Responsive layout
28-07-10CSS3 - 100% Background
04-02-093 columns - 7 variations
06-09-14Percent border and text size
24-04-13IE7/8 Responsive 'Backgrounds'
11-03-123D Jack-in-the-Box with Music
28-07-10CSS3 - 100% Background
12-06-07CSS rainbow revisited
12-06-07Snooker Cue revisited
28-09-13Windows 8 Touch Screen Gallery
09-02-13IE10 specific styling
01-10-10IE6 foreground pngFix
10-09-10timeAction Galleries
14-03-08IE6 AlphaImageLoader links

CSS play is worth...

According to several sources, CSS play is worth over £1,000,000 GBP
I will take £500,000 GBP if anyone is interested?

Follow CSS play

Facebook   Twitter   Facebook Fan Page

Multi-Browser Viewer

I do not normally endorse any products but in this case I am making an exception. I had been looking for an easy way to test my demos in IE6 on my Vista laptops and have found this product excellent. The help and support I have received has enabled me to at last test using IE6 without having to boot up my old XP PC.

This is highly recommended and can be found here Multi-Browser Viewer.


See the review on Make Use of :

Browser usage on CSS play

Date : 11th July 2014
Internet Explorer13.7
Opera Mini0.8

Soft Geometry Creative Industries