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;
}