Make a CSS sandbox!

This is useful for creating a sandbox within which to play with learning CSS.

Get a nice text editor, then you can make a file called index.html file and include a reference to the CSS file using a link line, for example:

<html> <head> <link rel="stylesheet" href="POPUPexample.css"> </head> <body class="MAIN"> <h1>Heading</h1> <div class='MAINdialog'>Hello World!</div> </body> </html>

It is best practice to put CSS into its own file - following the separation of concerns principle.

You can just use Open File… from your browser to open this up - make sure you have a POPUPexample.css file in the same directory, for example:

.MAIN > * { font-family : Arial, Helvetica, sans-serif; } .MAIN > h1{ color: rgb(118, 109, 199); } .MAINdialog{ background-color: rgb(226, 225, 243); height: 1000px; }

There are some example rules to get you started. You’ll need to learn about CSS selectors and CSS units.

Notice in this sandbox I am using simple namespace prefixes for the code.

Â