CSS Basics Example

dabblet.css

/**
 * CSS Basics Example
 */

#primary {
	width: 70%;
	margin: 50px auto;
	padding: 20px;
	background: #eee;
	border: solid #ddd;
	border-width: 0 3px 3px 0;
}

h1 {
	font-family: Didot, "PT Serif", serif;
	color: #a00;
}

img {
	float: right;
	margin-left: 1em;
}

p {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* makes sure #primary contains floats */
#primary:after {
	content: "";
	display: table;
	clear: both;
}

dabblet.html

<div id="primary">
	<h1 class="site-title">Amazing Example</h1>
	<img src="https://farm5.staticflickr.com/4253/35576957152_028054afdd_m.jpg" width="240" height="160" alt="Frenchy Wapuu @ registration" />
	<p>Instantly break out into full speed gallop across the house for no reason destroy couch. Scratch the box caticus cuteicus. Jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans. Dream about hunting birds massacre a bird in the living room and then look like the cutest and most innocent animal on the planet meowing chowing and wowing. Lick face hiss at owner, pee a lot, and meow repeatedly scratch at fence purrrrrr eat muffins and poutine until owner comes back where is my slave?</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}