GET UGCS

1. GET UGCS For Next Week’s class because I said so. That is my final answer. No Ifs, ands, or Buts. (insert other affirmatives here)

2. PA 70c – Giordon Stark Fun CSS Tricks

3. Table of Contents • Review of Last Time • Let’s learn some tricks! • More on Floats • Absolute Positioning inside Relative Positioning • Positioning in General • Vertical Alignment • Child and Sibling Selectors • CSS Transparency • Sprites, Efficiency, and Cool Date Display

4. A Review of Last Time Because not everyone has perfect memory recall.

5. The Box Model (again)

6. The Clean Slates • Have you ever thought that it would make sense to have a ‘blank slate’ html tag that had absolutely zero styles? • For Block Level elements: division tag. • Div, nav, section, aside, header, footer, etc… (HTML5) • For Inline elements: span tag. • <span></span> • Neither really have any HTML attributes which makes them perfect canvases for styling pages.

7. CSS Properties • Float • Push it as far as possible to the right or to the left, and allow text to wrap around it • Required with variable height columns • Clear • Used on a floated element to force it below adjacent floats • These are very hard to master. If you ever get confused on how they work, Google “CSS Floats” for examples. • http://css.maxdesign.com.au/floatutorial/tutorial0801.htm • http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

8. CSS Properties • Absolute & Fixed Positioning • Position is determined by its offset values (top, left, right, bottom) from its containing element • Removed from the normal flow • The containing block is the nearest element outside it that has a position of absolute, relative or fixed • If there is no such element, the browser window is used • If it is fixed positioning, the browser window is ALWAYS used • Relative Positioning • Position is determined by its offset values • Not removed from normal flow • The containing block of their closest, block-level ancestor • For absolute elements the containing element can be an inline element (not for relatively positioned elements)

9. CSS Properties • Stacking Order – use the z-index! • Two things determine the stacking order: the stacking context and the z-index value • An element with a higher z-index appears in front of an element with a lower z-index • When two elements have the same value (or if neither has been assigned a value) the source order is used • Stacking context also determines the stacking order • http://www.brainjar.com/css/positioning/stackdemo.html • Finally, some elements just get overlapped regardless of z-index: “Overlapping plug-ins” • Example: http://www.its.caltech.edu/~kratsg/ • (if time permits)

10. Summary • For a quick reference to other properties and their values, just use w3schools website: • Categorized (in particular, look at pseudo-elements) • http://www.w3schools.com/cssref/default.asp • For a list of supported units • http://www.w3schools.com/cssref/css_units.asp • For a (short) list of colors • http://www.w3schools.com/cssref/css_colors.asp • For a list of selectors • http://www.w3schools.com/cssref/css_selectors.asp • When in doubt, Google is your friend.

11. Tips and Tricks Time to spice up your code

12. A brief word… • I don’t intend to rewrite the world of CSS as it is. • I’ll explain many of the CSS tricks and tips using website blogs as I feel they have the best explanation. • I will try to summarize key points of each website as needed. • Want a background image that stretched the whole page…? Here’s how to do it (note, not very simple!) • http://css-tricks.com/perfect-full-page-background-image/

13. More on Floats • http://css-tricks.com/all-about-floats/ • CSS Positioning Property • “Floated elements remain a part of the flow of the web page.” - “Absolutely positioned page elements are removed from the flow of the webpage…” • “…floats can be used to create entire web layouts.” • “An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.” • “If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.” • Three Methods of Clearing Floats: • Empty Div Method, Overflow Method, Easy Clearing Method • Overflow Method is explained here: http://css-tricks.com/the-css-overflow-property/

14. Absolute Positioning inside Relative Positioning • http://css-tricks.com/absolute-positioning-inside-relative-positioning/ • “A page element with relative positioning gives you the control to absolutely position children elements inside of it.” • Why do we want it? • Certain buttons, functionality, and simplicity • Combining this with the :after , :before selectors and the content attribute – we can insert anything possible! • http://www.w3schools.com/cssref/pr_gen_content.asp

15. Positioning in General • http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ To kind of drive the point home from last week… • 4 values: Static (default), Relative, Absolute, Fixed • Static • “the element will flow into the page as it normally would” • Relative • “What it really means is “relative to itself”.” • Absolute • Position anywhere you want; use top/left/right/bottom to position • “Remember that these values will be relative to the next parent element with relative (or absolute) positioning.” • Trade-Off: “these elements are removed from the flow of elements on the page” • Fixed • “A fixed position element is positioned relative to the viewport, or the browser window itself.”

16. Vertical Alignment • http://css-tricks.com/what-is-vertical-align/ • Really no summary, just look at the link and check out the images for examples of each value. • Possible values are: • Top and Bottom • Text-Top and Text-Bottom • Baseline • Middle • Sub and Super • *Note: it makes sense only for tables and images*

17. Child and Sibling Selectors • http://css-tricks.com/child-and-sibling-selectors/ • Descendant Selector • “… select any list items that are anywhere underneath an unordered list in the markup structure…” • Child Combinator Selector • “… select list items that are direct children of an unordered list...” • Adjacent/General Sibling Combinator Selector • “… select an element that is directly after another specific element…” • “… element being selected doesn’t need immediately succeed the first element, but can appear anywhere after it…” • For list of the specifications from W3C: • http://www.w3.org/TR/css3-selectors/#selectors

18. CSS Transparency • Use opacity or rgba! Opacity applies to the whole element while rgba allows you to create semi-transparent background or font colors. p, nav { background-color: rgba(0,0,0,0.5); } div { opacity: 0.75; }

19. Sprites and Efficiency • http://css-tricks.com/css-sprites/ • A sprite is a HUGE image. • Why have sprites? • Calling and loading one file of 10 KB size is faster than calling and loading 10 files of 1 KB size each. • How to do it? • Use Paint or GIMP and a lot of elbow grease • Use http://spriteme.org/ • What can’t they do? • Repeating graphics

20. Sprites and Date Display • http://css-tricks.com/date-display-with-sprites/ • http://learningjquery.com/ • Somewhat self-explanatory. • The text-indent method is used for hiding the text and replacing it with an image • http://css-tricks.com/css-image-replacement/ • It also applies the ability to have multiple classes inside one tag

21. Lists to Links http://css.maxdesign.com.au/listamatic/ Similar to ZenGarden, it applies many different stylesheets to the same list to create amazing displays We’ll use the links on my website as a basic example… and see how flexible it can be!

22. More CSS3 Stuff It’s pretty hard to go over EVERYTHING out there, but for a list of cool things: http://www.zenelements.com/blog/css3-introduction/ We’ll also look at the transform/transition examples that I’ve created so you get an idea of it.

23. Practice Session (last week) Making Magic

24. Exercise/Homework • This is the second week of creating your layout page (one page) for your student website. You should have • Visualized your site layout • Developed a skeleton. • Developed the CSS. • This week, you will improve upon your code • Use as many html5 features as you can • Instead of divs everywhere, try grouping them into nav or section or aside or header or footer (learn.caltech.edu example) • Use as many accessibility attributes (title, alt, etc…) • Make the site visually appealing using the latest features of CSS3 • Transparency, gradients, transformations, hovers • Make sure to put your website online (using ugcs for instance) with index.html and main.css as your files.