CSS-Tips-Trick-Part1

<!-- CSS Tips and Tricks Part One(Selection,Drop cap, Check box, Radio button,Forms Element) ----->
1. font:font-style font-weight font-size/line-height font-family;
2. padding:0px 0px 0px 0px;
3. marging:0px 0px 0px 0px;
4. ::seclection{
	Your css goes here
}[Note we need to use declare browser pre-fix ]
5. Declare Total font-family for the site
	body{font-family:Helvetica,Arial,"Lucia Grande",sans-serif}

6.Drop Cap
p:first-child:first-letter{Your css goes here }

7./*Place Holder styling */
::-webkit-input-placeholder{
	color:blue;
}
::-moz-placeholder{
	color:blue;
}
::-ms-input-placeholder{
	color:blue;
}

8./*Remove dotted when click the link or element, remove the outline */
a:focus{
	outline:0;
}
input[type="text"]{
	outline:0;
}

9. customization of form Elements

/*Customize check-box*/
input[type="checkbox"] , input[type="radio"]{
	display:none;
}
input[type="checkbox"] + label:before{
	display:inline-block;
	background:#fff;
	content:"";
	border:1px solid #ccc;
	font-size:12px;
	height:16px;
	width:16px;
	line-height:16px;
	vertical-align:middle;
	margin:-2px 6px 0 0;
	text-align:center;
}
input[type="checkbox"]:checked + label:before{
	content:"\2713";
}
/*Radio Buttons */
input[type="radio"] + label:before{
	display:inline-block;
	background:#fff;
	content:"";
	border:1px solid #ccc;
	font-size:24px;
	height:12px;
	width:12px;
	border-radius:6px;
	line-height:12px;
	vertical-align:middle;
	margin:-2px 6px 0 0;
	text-align:center;
}
input[type="radio"]:checked + label:before{
	content:"\2022";
}

10. Form Element styling Tips and Tricks

input[type="text"],
textarea{
	border:1px solid #ccc;
	border-radius:3px;
	padding:.5em;
	outline:none;
	transition: box-shadow .2s ease-in-out;
}
label{
	display:block;
}

input[type="text"]:hover,
textarea:hover{
	box-shadow:0 0 3px rgba(116,185,239,.5 );
	transition: box-shadow .2s ease-in-out;
}
/*Focus*/
input[type="text"]:focus,
textarea:focus{
	box-shadow:0 0 3px rgba(116,185,239,1);
	border-color:#74b9ef;
}