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

p 
{
  background-color:Gray;
}

p 
{
  background-color:Green;
}

Developer Tools

Chrome shows the user agent stylesheet as well as your stylesheet

CSS Reset

This can be used to reset to styles regardless of browser to reset.