Cacher is the code snippet organizer for pro developers

<!-- Web Font -->


<div class="wrap">
paragraph

</div>

<style>


/* ---------------------------
	Web Fonts
----------------------------- */

@font-face {
    font-weight: bold;
    font-style: normal;
    font-family: 'DroidSerifBold';
    src: url('fonts/DroidSerif-Bold-webfont.eot');
    src: url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSerif-Bold-webfont.woff') format('woff'),
         url('fonts/fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
}

/* --------------------------
	Icon Fonts - icomoon
----------------------------- */

@font-face {
	font-family: 'icomoon';
	src:url('icons/icomoon.eot');
	src:url('icons/icomoon.eot?#iefix') format('embedded-opentype'),
		url('icons/icomoon.woff') format('woff'),
		url('icons/icomoon.ttf') format('truetype'),
		url('icons/icomoon.svg#icomoon') format('svg');
}

/* --------------------------
	Page Styles
----------------------------- */

body {
	color: #333;
	font-size: 1.125em;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.6;
}
.wrap {
	position: relative;
	margin: 0 auto;
	max-width: 58%;
}
.wrap:before {
	position: absolute;
	top: -31px;
	left: 45%;
	z-index: 100;
	padding: .4em;
	border-radius: 50%;
	background:#2B9BD4;
	color: #FFF;
	content: "\e002";
	font-size: 1.9em;
	font-family: 'icomoon';
	line-height: 1;
	-webkit-font-smoothing: antialiased; /* smooth icon */
}
.intro {
	margin-top: 3.15em;
}
.title {
	position: relative;
	padding: .82em 0 0 0;
	border-top: 1px solid rgba(51,52,52,.4);
	text-align: center;
	font-family: "ff-tisa-web-pro", serif;
	line-height: 1.33;
    -webkit-font-feature-settings: "liga", "dlig"; /*  font that supports ligatures - join the two letters - will combine into a single glyph - like - f i letter together */
}
h2 {
	margin: 1.25em 0 0 0;
	color: #2B9BD4;
	letter-spacing: -2px;
	font-size: 2em;
	font-family: 'DroidSerifBold', Georgia, serif;
	line-height: 1.1;
}

/* --------------------------
	Media Queries
----------------------------- */

@media screen and (max-width: 599px) {
	body {
		font-size: 1em;
	}
	.wrap {
		max-width: 85%;
	}
	h2 {
		font-size: 1.6em;
	}
}
@media screen and (min-width: 980px) {
	.wrap {
		max-width: 600px;
	}
} 

</style>

<!-- Text Properties -->

	<p>
        hello
		</p>


<style>

h1 {
	color:#dfdfdf;
	text-transform: capitalize;
	text-shadow: 0 -1px #767676, 0 -2px #262626, 0 0 8px rgb(62, 106, 168);
	/* horizontal offset - vertical offset - blur - color */
}

/* line height = 1.2 */

p {
	font-size: 1.5em;
	line-height: 1.5em; /* the browser multiply this number by the font size */
	text-align: left;
	text-decoration: underline;
	text-indent: 1.5em; /* first line of paragraph indent */
	white-space: normal; /* white space between words pre - nowrap -pre-line */
	text-shadow: 1px 1px 4px #000;    /* left right offset -  distance to the top of bottom - blur - color */
}

/* inside box */

.text-overflow{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;/* cut the text put ... at final */
}

.word-wrap{
    word-spacing: break-word; /* put everything inside the box */
}

</style>

<!-- Responsive Text and Vertical Rhythm  -->


<link rel="stylesheet" href="http://basehold.it/24">

<div class="wrap">
paragraph

</div>

<style>

/*  Typography scale 

body   18px  =  1.125em   
title  72px  =  4em
h2     36px  =  2em
h3     24px  =  1.33em
code   16px  =  1rem back to 16px
*/

/* Base line height is 24px */

/* fittext plugin to responsive title 

basehold.it great to text line height */

/* ---------------------
	Reset Margins
------------------------ */

body, h1, h2, h3, p {
	margin: 0;
}

/* ---------------------
	Page Styles
------------------------ */

* {
	box-sizing: border-box;
} 

body {
	padding: 2.95em 0;
	color: #333;	
	font-family: 'PT Serif', serif;
	font-size: 1.125em;
	line-height: 1.62; /* 29px */   /* 1.62 * 18px font-size*/
}

.wrap {
	margin: 0 auto;
	max-width: 58%;
}
.title {
	font-size: 4em; /* 72 px    */
	margin-bottom: .78em; 
	font-family: 'PT Sans Narrow', sans-serif;
	line-height: 1;
}
h2, h3 {
	font-family: 'PT Sans', sans-serif;
}
h2 {
	margin: 1.35em 0 .8em 0;
	color: #2B9BD4;
	letter-spacing: -1px; 
	font-size: 2em; /* 36px */
	line-height: 1.1;
}
h3 {
	margin: 1.7em 0 .8em 0;
	color: #222;
	font-size: 1.33em;  /* 24 px */
}
p {
	margin: 1.6em 0;
}

blockquote {
	position: relative;
	margin: 0 0 0 3em;
	padding: 0 1.7em 0 0;
	color: rgba(34,34,34, .8);
	font-style: italic;
}
blockquote:before {
	position: absolute;
	top: -30px;
	left: -55px;
	color: rgba(77,195,255,.5);
	content: "\201C";
	font-size: 4.5em;
}

.code {
	padding: 1.1em;
	border: 1px solid #dae0a7;
	background: #eef2ca;
	color: #ccc;
	color: rgba(34,34,34, .8);
	white-space: pre;
	font-size: 1rem;  /* back to 16px */
	font-family: 'Consolas', monospace;
	line-height: 1.35;
}


/* New viewport relative units - modern websites */

.title {
	font-size: 6.6vw; /* viewport width */
	margin-bottom: .78em; 
	font-family: 'PT Sans Narrow', sans-serif;
	line-height: 1;
}




/* ---------------------
	Media Queries 
------------------------ */


@media screen and (max-width: 599px) {
	body {
		font-size: 1em;
	}
	.title{
		font-size: 3em;
	}
	.wrap {
		max-width: 85%;
	}
}

@media screen and (min-width: 980px) {
	.wrap {
		max-width: 600px;
	}
} 


</style>

<!-- Font Properties 
family typeface - serif - sans serif
typeface - helvetica - arial 

Typography Tips

   Don't use <b> or <i> or weight - instead use <strong> and <em> 
   pay attention to the space of font

   use common html entities -->

<body>

<div>
<p>hello</p>
</div>
</body>

<style>

div{
	font-family: helvetica, arial, "sans serif"; /* font stack with spaces use "" */
	font: italic small-caps bold .9em/1.1 arial,helvetica,sans-serif; /* shorthand */
	font-size: 12px;
	font-variant: small-caps;
}

</style>