1. Cascading Style Sheets CSS2 - a bit more advanced

2. Import @import “…”; or @import url( … ); media types can follow it @media media_type {…css…} akin to: if( media_type == true ) { } example: @import “fancy.css” print, screen;

3. CSS use in html Internally … …css… … Externally

4. Display display: none; (hide) display: inline; (fits in the line) display: block; (alone on its own line) display: table-row, table-column, table-cell, inline-table

5. Printing page-break-before page-break-after page-break-inside auto, always, avoid, left, right @page {margin properties…}

6. pseudo-class selectors selector:pseudoClass used for generic situations and events :link :visited :hover :active :focus :first-child :lang etc a:visited anchor tags the user clicked on before

7. Example.myclass:hover the pseudo-class is PART of the selector Browser’s search: Find all tags with class=”myclass” Is the mouse ‘hovering’ over that tag?

8. text pseudo-element selectors :before = before the content :after = after the content {content: “text”} = lets you insert text! :first-letter :first-line

9. event pseudo-element selectors :visited (visited anchor link) :active (working anchor link) :hover (mouse over) :focus (forms)

10. Box Model All Elements (tags) have a box around them. width, height margin, padding,border position: top,left,bottom,right

12. Positions & Dimensions width, height top,left,bottom,right must be positioned to use auto or inherit (used in CSS cascades) ##% = relative to parent units: mm,cm,in,px,pt,pc,em,ex

13. Relative Units Save YOU time long-term % percentage of available size em 1= size of 1 (one) line of parent’s text ex 1= half of em = 0.5 em

14. example h1{ font-size: 0.5em; } ALL tags are now half size (50%) note - text height based

15. absolute Positioning positions relative to PARENT position scrolls with the PARENT position bottom is the bottom of document going off the page can cause browser to make document larger negative positions (left/right/top/bottom) are allowed

16. video

17. fixed Positioning positioned ON THE WINDOW bottom is the bottom of the window’s page viewing area does NOT scroll with the the page adjusts to when the window does

18. video

19. z-index Layering control Multiple positioned boxes overlapping cause a layering problem, this solves it only works on boxes that are positioned 0 and up back to front auto = default behavior

20. video

21. float Positioning left or right The box moves to the left or right of the area (contained by parent) text flows around the box works diagrams or photos in text documents

22. video

23. relative Positioning Position relative to the text flow (sibling text and tags) If the text moves, it moves Example: sub-text or super-text (1 st 2 nd X² ) negative positions allowed

24. video

25. tricks bugs (look up the Acid Tests for CSS) there are IE specific comments that help in coding around IE bugs Absolute positioning inside a PARENT with relative positioning can be useful Combining positioning, tables, float can create interesting situations (bugs too)

26. Inspectors & Editors Most desktop browsers have add-ons for developers to do layout Firefox’s Web Developer add-on has LIVE CSS editing that displays changes instantly FireBug provides an inspector for firebug

27. HINT Inspectors like FireBug View properties of a tag View built-in browser CSS properties of a tag You can change any CSS property you can see and copy them from other tags

28. video