deed02392/jsbin.difuz.css

## jsbin.difuz.css
body {
  font-family: arial;
  cursor: crosshair;
}
h1 {
  color: #00FF00;
  text-align: center;
}
h2 {
  border: thin dotted green;
}
h3 {
  letter-spacing: 5px;
}
p {
  font-size: 14px;
}
strong {
  font-weight: ;
}
#intro {
  color: blue;
}
.shout {
  text-transform: uppercase;
}
ol {
  list-style: lower-roman;
}
ul {
  list-style: square;
}

## jsbin.difuz.html
<!doctype html>
<html>
	<head>
		<title>Code Club</title>
	</head>
	<body>
		<h1>Awesome Page</h1>
		<h2>This is another heading</h2>
		<p>Hello! Here is a paragraph of text. It can be short or long, and it can <a href="surprise.html">contain links</a>. You can for example mark some words as <strong>important</strong> in <u>one way</u> or <em>another</em>.</p>
		<h3>Lists</h3>
		<p>Here is a list of things I like in order of preference:</p>
		<ol>
			<li>Kittens</li>
			<li>Space</li>
			<li>Lie-ins</li>
			<li>Playing games</li>
		</ol>
		<p>And here is a list of things I often do, but they are not in a particular order:</p>
		<ul>
			<li>Do my homework</li>
			<li>Read my favourite book</li>
			<li>Visit a friend</li>
			<li>Go for walks</li>
			<li>Watch films</li>
		</ul>
		<hr>
		<h3>Grouping things</h3>
		<div>
			<p>I have put this particular paragraph in a box. <code>&lt;div&gt;</code> is a box that you can put other things into. It comes in useful when you want to group things together.</p>
		</div>
		<div>
			<p class="notes_on_classes">You can use <code>classes</code> to annotate the elements in code. They can help you distinguish between the same elements that you might use for different things. <code>Classes</code> are not visible, but later you will learn how to use them to change appearance of things on the page.</p>
			<p class="notes_on_classes">You can have many elements with the same <code>class</code>.</p>
		</div>
		<div id="note_about_id">
			<p>You can also use <code>id</code> for a similar purpose: use it when you want to mark out a specific element</p>
			<p>You can only have <em>one</em> element with a specific <code>id</code> though, but as a bonus you can <a href="#kitten">link to that element</a> within the page.</p>
		</div>

		<hr>

		<!-- Oops, you've found me! How come the browser didn't show me? -->
		<!--
                _
                \`*-.
                 )  _`-.
                .  : `. .
                : _   '  \
                ; *` _.   `*-._
                `-.-'          `-.
                  ;       `       `.
                  :.       .        \
                  . \  .   :   .-'   .
                  '  `+.;  ;  '      :
                  :  '  |    ;       ;-.
                  ; '   : :`-:     _.`* ;
             .*' /  .*' ; .*`- +'  `*'
               `*-*   `*-*  `*-*'

		-->
		<!-- Anything in between the arrows at the beginning and end of this line is treated as comments. -->
		<!-- Comments are a way of marking an annotating your code so you can remember things better. -->
		<!-- The browser will hide them from viewers. -->

		<h3>Images</h3>
		<div id="kitten">
			<img src="http://bit.do/cc-spacecat " width="600" height="480" alt="This is the text you will see when you move the mouse over the picture">
			<p>Ooh, see how we introduced another tag? <code>&lt;img&gt;</code> (the image tag) lets you put in some pictures.</p>
		</div>

	</body>
</html>
	body {
	font-family: arial;
	cursor: crosshair;
	}
	h1 {
	color: #00FF00;
	text-align: center;
	}
	h2 {
	border: thin dotted green;
	}
	h3 {
	letter-spacing: 5px;
	}
	p {
	font-size: 14px;
	}
	strong {
	font-weight: ;
	}
	#intro {
	color: blue;
	}
	.shout {
	text-transform: uppercase;
	}
	ol {
	list-style: lower-roman;
	}
	ul {
	list-style: square;
	}
	<!doctype html>
	<html>
	<head>
	<title>Code Club</title>
	</head>
	<body>
	<h1>Awesome Page</h1>
	<h2>This is another heading</h2>
	<p>Hello! Here is a paragraph of text. It can be short or long, and it can <a href="surprise.html">contain links</a>. You can for example mark some words as <strong>important</strong> in <u>one way</u> or <em>another</em>.</p>
	<h3>Lists</h3>
	<p>Here is a list of things I like in order of preference:</p>
	<ol>
	<li>Kittens</li>
	<li>Space</li>
	<li>Lie-ins</li>
	<li>Playing games</li>
	</ol>
	<p>And here is a list of things I often do, but they are not in a particular order:</p>
	<ul>
	<li>Do my homework</li>
	<li>Read my favourite book</li>
	<li>Visit a friend</li>
	<li>Go for walks</li>
	<li>Watch films</li>
	</ul>
	<hr>
	<h3>Grouping things</h3>
	<div>
	<p>I have put this particular paragraph in a box. <code><div></code> is a box that you can put other things into. It comes in useful when you want to group things together.</p>
	</div>
	<div>
	<p class="notes_on_classes">You can use <code>classes</code> to annotate the elements in code. They can help you distinguish between the same elements that you might use for different things. <code>Classes</code> are not visible, but later you will learn how to use them to change appearance of things on the page.</p>
	<p class="notes_on_classes">You can have many elements with the same <code>class</code>.</p>
	</div>
	<div id="note_about_id">
	<p>You can also use <code>id</code> for a similar purpose: use it when you want to mark out a specific element</p>
	<p>You can only have <em>one</em> element with a specific <code>id</code> though, but as a bonus you can <a href="#kitten">link to that element</a> within the page.</p>
	</div>

	<hr>

	<!-- Oops, you've found me! How come the browser didn't show me? -->
	<!--
	_
	\`*-.
	) _`-.
	. : `. .
	: _ ' \
	; ` _. `-._
	`-.-' `-.
	; ` `.
	:. . \
	. \ . : .-' .
	' `+.; ; ' :
	: ' \| ; ;-.
	; ' : :`-: _.`* ;
	.' / .' ; .`- +' `'
	`- `- `-'

	-->
	<!-- Anything in between the arrows at the beginning and end of this line is treated as comments. -->
	<!-- Comments are a way of marking an annotating your code so you can remember things better. -->
	<!-- The browser will hide them from viewers. -->

	<h3>Images</h3>
	<div id="kitten">
	<img src="http://bit.do/cc-spacecat " width="600" height="480" alt="This is the text you will see when you move the mouse over the picture">
	<p>Ooh, see how we introduced another tag? <code><img></code> (the image tag) lets you put in some pictures.</p>
	</div>

	</body>
	</html>