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

other selectors

There are many other selectors. Here is an example.

ul: li:nth-child(3)
{
   background-color: #cccc99;
}

This sets the 3 child of the list to have background of #cccc99

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 Stylesheet

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

Specificity

This is the number associated with the rule. The highest rule is the rule which is applied.

• A Count of ID selectors
• B Count of class and attribute selectors
• C Count of type selectors

So

*                 /* a=0 b=0 c=0 -> specificity =     0  */
LI                /* a=0 b=0 c=1 -> specificity =     1  */  
UL LI             /* a=0 b=0 c=2 -> specificity =     2  */
LI.red            /* a=0 b=1 c=1 -> specificity =    11  */
#content          /* a=1 b=0 c=0 -> specificity =    100 */ 

Generally a more specific rule takes presidence. In devtools the styles appear in specificity order

Inheritance

Some properties are inherited when you use markup but some are not. Checkout [1] for details

CSS and the Box Model

The Big Three

• Margin (distance from outside to border)
• Border (border itself)
• Padding (distance from border to inside)