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.

Concepts

Make a CSS sandbox!

Related pages