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.
Â