title:
  re-optimzer:
  browser:
  css link references:
  media queries:
  JS Sources:

  notepad:

position:
   
 
   
% , px
   
   


   
   
background:
image:
position:
repeat:
attach:
size:
color:
box-shadow:
border:
border-top:
border-left:
border-right:
border-bottom:
 
   
 
typography:

andale mono arial arial black courier comic sans ms garamond helvetica impact palatino papyrus serif sans tahoma times new roman verdana
px
color:
fontFamily:
fontVarient:
fontStyle:
fontWeight:
lineHeight:
letterSpacing:
wordSpacing:
textTransform:
textDecoration:
textAlign:
wordWrap:
white-space:
TextShadow:
advanced:
display:
overflow-x:
overflow-y:
opacity:
outline:
resize:
float:
z-index:
cursor:
list-style:
content:
vAlign:
transition:
transform:
filter:
appearance:
elements:
class:
text:
class:
type:
value:
class:
custom:
  elements


<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <link type="text/css" rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css"/> <style type="text/css"> html, body { height: 100%; }</style> </head> <body> </body> </html>
Please head to W3.org for the official documentation reguarding CSS.
Official documentation on "Default style sheet for HTML 4".

flukeout.github.io is an interactive game to help you learn CSS Selectors.

Introduction to CSS:

As always you use your HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within CSS (Cascading Style Sheet) which allows you to separate your web sites HTML content from it's style.

There's a few different ways to add CSS. You can call an external stylesheet 

<link href="http://fonts.googleapis.com/css?family=Actor:regular" rel="stylesheet" type="text/css">
<style type=”text/css”>
  @import url("path-to-file.css");
</style>
or as a style attribute for html elements.

<div style="color: green;">hello world</div>

Selecting elements:

Most elements in CSS can be styled from their...

<tag> name

div {
  color: green;
}

.class name

div.im_a_classname {
  color: green;
}

#ID

div#im_a_id {
  color: green;
}

attribute name a[title]

input[type=text] {
  color: green;
}
attribute value a[href="http://mmd.sourceforge.net/"]
and by using pseudo selectors input[type=text]:focus.

Here are some examples of pseudo selectors

a:link, a:visited, div:hover, div:active {
  color: green;
}
Notice I separated each selector with a comma to target another selector. This is how you would apply the same style to multiple elements.

a:link

This selector styles anchors that have not been clicked yet.

a:visited

This selector styles anchors that have already been clicked, hence "visited".

:hover

This selector styles an element when hovered over.

:active

This selector styles an element when it's activated (being clicked on or otherwise activated).

:nth-child(2)

This selector styles an the secend element of it's selector.

input[type=text]:not(.numbers)

This is a negation selector. This selector will style all your input text elements, but will not style one with the class numbers.

*

This is a universal selector which matches any element.

div img

Here's how you would style direct descendants of an element.

ul > li

We're using the > selector in this case to style the children of an unordered list (the ul element)

If you're looking for a more advanced tutorial please checkout this article on The 30 CSS Selectors you Must Memorize.

If you're looking for an online playground for testing and sharing HTML, CSS and JavaScript code snippets you may want to checkout Codepen.