Styling that Page

The CSS file is where we are tasked with finding the tag we must change to make the view look like we want it.

Dr. Patrick Young CSS lecture notes (pdf, 30 pages)
Lean  css-positioning - interactive html css site
http://www.bruceontheloose.com/htmlcss/appendixes/css-reference.php
http://www.htmldog.com/guides/css/
http://dret.net/lectures/web-spring11/   a class with a lot useful material and references
http://codevisually.com/css-resources/page/2/
Intro CSS
the 30 css selectors you must memorize/
CSS parody
http://www.d.umn.edu/itss/training/online/webdesign/css.html
css attractive website
http://www.d.umn.edu/itss/training/online/webdesign/html.html
http://zomigi.com/
http://comminfo.rutgers.edu
http://multimedia.journalism.berkeley.edu/tutorials/cat/webdev
http://www.webdesignfromscratch.com/category/html-css/
http://www.underworldmagazines.com/category/mobile/
http://sixrevisions.com/css/20-useful-resources-for-learning-about-css3/#more-375
mozilla css Getting Started
http://www.css3.info/
http://www.youtube.com/watch?v=H3KESBQTD8k&list=PLE0F12F375F9E9266
http://www.youtube.com/watch?v=GwQMnpUsj8I
The format of a selector is as follows

   Selector {property : value}

Type selector – targets selector by element name, can have comma and wild card *

Contextual Selectors – apply style to properties based on context or relation to another element


Descendant selector: descendants of another element, list separated by space starting with the higher level element, can have commas separating multiple entries, and can be specified several levels deep

Child selector: like a descendant but specified by a specific parent of an element, indicated as child with greater than sign between elements >

Adjacent selector: elements that comes directly after a certain element with same parent, indicated with plus sign

Class and Id selectors - specified in regard to specific elements which are a class or a specific ids specified by user.

• For class you define it in terms of class in regards to a specific type selector with a dot separator. 
• To specify class selector to all elements within a class you can leave out the type selector 
• id selector target a single element and work like class selector except indicated with a #

Attribute selectors – targets specific attribute names or values

• Simple attribute: specified for an attribute for an element, indicated as element[attribute] 
• Exact attribute value : specified as element[attribute="myvalue"] 
• Partial attribute value: doesnt match whole word but search value within attribute value , specified as element[attribute~="myvalue"] 
• hyphen separated value : used for case where you look for value of ‘myvalue’ or starting with ‘myvalue-’ , indicated with |= 

Pseudeoclass selector : targets a group of elements such as an anchor. has a colon : after the anchor followed with the attribute kind (i.e. link, or name)

 there are others supported other than the anchor tag . i.e. :first-chld, :first-line, :first-letter,:before, :after

How you reference style sheets:

<link rel=style sheet href=file.css type=text/CSS />

or

@import url();

Document structure and inheritance
- parent child relationships
- sibling relationships
- descendants
- Inheritance : styles passed down to descendants

Overriding styles by nodes higher in hierarchy Can get presentation rules from several sources and conflicts

Passed down until overridden by command with more weight Resolve rules from competing style sheets

When user agent (ie browser) encounters element looks for all style rules that may apply Sorts out this out based on Style sheet origin

Least weight to greatest
1 User agent style sheet
2 reader style sheet
3 authorsyle sheets
4 !Important marked

External file sheets further down document greater precedence

Imported styles sheets override linked ones Embedded styles sheets override external ones Inline styles override other references

Selector More specific the selector the more priority it gets

Least to most priority for selectors follow

Individual element to pseudo element selector

Contextual selectors Class selectors Id selectors rule order Last one wins Display roles

Block level elements – line breaks before and after it and fills in width of the parent that contains it

Paragraph
Headings
Lists
Divs

Inline – no line breaks
Emphasized text
Anchors
None – Wont display
 List-item Run-in

Box model :


4 Background
3 Margin
2 Border
1 Padding
0 Element box around it

padding vs margin
a) padding - outer edge
b) margin - space between items

TRBL (Top Right Bottom Left)
-  margin: 2px 1px 3px 4px (top, right, bottom, left)

display inline vs block - display of block means multiple items can  NOT be displayed beside it (goes below), whereas inline means multiple items on same line (goes beside it)

Inner edge
Border
Margin
Outer edge

 Unit measures
    Pixel Pts Pc Em Ex In Mm Cm

 Color value
   % values