@font-face

Add this on your css

@font-face {
	font-family: Font Name;
	src: url('filename.extension');
}

Example
@font-face {
	font-family: Palatino Linotype;
	font-weight: bold;
	src: url('Palatino-Bold.ttf');
}

Then, use this by calling the font-family style.
h1{ font-family: Palatino Linotype; }

 

CSS Advanced Selectors 1

parent > child

Finds all child elements that are direct children of the parent.

Ex.

div#divname > p{color:red;} -> change all p tags that is direct child of div tag #divname to color red.

—

prev + next

Finds rhe next elements that are next to previous elements. Note: this only allow selection of one sibling.

Ex.

p.tagname + p {color:red;} -> Change all p tag next to p.tagname to color red.

—

prev ~ siblings

Same with above expect this allows selection of all siblings.

Ex.

div#divname ~ * {border:1px solid red;} -> Change all border to color of siblings of div #divname

 

CSS – shadow effect

BOX SHADOW
div.boxshadow {
/*horizontal offset, vertical offset, blur radius, spread radius, color*/

-moz-box-shadow: 15px 15px 15px 0 #333;
-webkit-box-shadow: 15px 15px 15px 0 #333;
box-shadow: 15px 15px 15px 0 #333;
}

INNER SHADOW
div.boxshadow {
/*horizontal offset, vertical offset, blur radius, spread radius, color*/

-moz-box-shadow:inset 15px 15px 15px 0 #333;
-webkit-box-shadow:inset15px 15px 15px 0 #333;
box-shadow:nset 15px 15px 15px 0 #333;
}

MULTIPLE SHADOW

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime,
-20px -15px 30px blue, 20px -15px 30px red;

 

Remove Outline on Buttons on Clicked

/* For Firefox and other browsers except IE8*/

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner{border:0px;}

/* This if for Internet Explorer 8 */

input[type="submit"]:focus, input[type="button"]:focus{outline:none;}

 

CSS Selector’s Essentials

Pattern	Meaning	Selector type
*	Matches any element	Universal selector
E	Matches any E element (i.e., any element of type E)	Type selectors
E F	Matches any F element that is a descendant of an E element	Descendant selectors
E > F	Matches any F element that is a child of an element E	Child selectors
E:first-child	Matches element E when it is the first child of its parent	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active	Matches E during certain user actions.	The dynamic pseudo-classes
E:hover	Matches E during certain user actions.	The dynamic pseudo-classes
E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-classes
E + F	Matches any F element immediately preceded by an element E.	Adjacent selectors
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).	Attribute selectors
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.	Attribute selectors
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.	Attribute selectors
E[xml:lang|="en"]	Matches any E element whose “xml:lang” attribute value has a hyphen-separated list of values beginning (from the left) with “en”.	Attribute selectors
E:first-line	Matches the first formatted line of an E element.	The :first-line pseudo-element
E:first-letter	Matches the first formatted letter of an E element.	The :first-letter pseudo-element
E:before	Matches/creates generated content before an E element.	The :before pseudo-element
E:after	Matches/creates generated content after an E element.	The :after pseudo-element
E.classid	The same as E[class~=classid]	Class selectors
E#myid	Matches any E element id equal to “myid”.	ID selectors
@page :first	Specifies style for the first page of a document	Page pseudo-classes
@page :left	Specifies style for the left pages of a document	Page pseudo-classes
@page :right	Specifies style for the right pages of a document	Page pseudo-classes

 

@media

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

@media media_type { property{attribute:value; } }

change the media_type to any below.

 

CSS text-shadow

Use text shadow to add a shadow effect on your styles.

text-shadow:#color, x-coordinate relative to text, y-coordinate relative to the text, blur-radius;

Example:

#id_name{text-shadow:#fff 1px 2px 3px;}