Css

Introduction

Selectors

Simple Selector

The body is known as the simple selector and the background-color:#cccc99; is the property name and value

body {
    background-color:#cccc99;
}

id Selector

#myid {
    background-color:#cccc99;
}

class Selector

.myClass {
    font-style:italic;
}

You can group selector with a comma.

h1,h2 {
    background-color:#cccc99;
}

descendant selector

This will only effect the

elements below a div tag.

div p {
   background-color:#ddddaa;
}

child selector

This will only effect the child and not descendant

elements below a div tag.

div > p {
   background-color:#ddddaa;
}

<div>
  <form>
    <p>I'm a descendant but not a child</p>
  </form>
  <p>I'm a child</p>
</div>

attribute selector

This will only effect if the attribute matches.

img[alt=spacer] {
   padding:0px;
}

<img src="gradient.jpg" alt="spacer">

psuedo selector

This will only effect if the pseudo is true.

a:visited {color: #dddddd; }
== Specifying CSS Property Values ==
* keywords
** thing, thick, larger
* Physical measurements
** inches (in), points (pt), picas(pc)
* Screen measurements
** pixels
* Relative measurements
** %, em
* Color codes
** #rrggbb, rbg(r,g,b)
* Fonts
** Helvetica, sans-serif
* Functional notation
** rgb(r,g,b), url("http://test.com")

= Cascading and Inheritance =
== Ordering rules ==
Rules last applied based on last read. I.E. in this case paragraphs will be Green
<syntaxhighlight lang="css">
p 
{
  background-color:Gray;
}

p 
{
  background-color:Green;
}