FOR NEXT WEEK’S CLASS BECAUSE I SAID SO. THAT IS MY FINAL ANSWER. NO IFS, ANDS, OR BUTS. (INSERT OTHER AFFIRMATIVES HERE) GET UGCS

FUN CSS TRICKS PA 70c – Giordon Stark

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

BECAUSE NOT EVERYONE HAS PERFECT MEMORY RECALL. A Review of Last Time

The Box Model (again)

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.  Neither really have any HTML attributes which makes them perfect canvases for styling pages.

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.  

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)

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  Finally, some elements just get overlapped regardless of z-index: “Overlapping plug-ins” Example:  (if time permits)

Summary For a quick reference to other properties and their values, just use w3schools website:  Categorized (in particular, look at pseudo-elements)  For a list of supported units  For a (short) list of colors  For a list of selectors  When in doubt, Google is your friend.

TIME TO SPICE UP YOUR CODE Tips and Tricks

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!) 

More on 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: overflow-property/ overflow-property/

Absolute Positioning inside Relative Positioning relative-positioning/ 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! 

Positioning in General they-differ/ 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.”

Vertical Alignment 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*

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: 

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

Sprites and Efficiency 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 What can’t they do?  Repeating graphics

Sprites and Date Display Somewhat self-explanatory. The text-indent method is used for hiding the text and replacing it with an image  It also applies the ability to have multiple classes inside one tag

Lists to Links 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!

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

MAKING MAGIC Practice Session (last week)

Exercise/Homework This is the second week of creating your layout page (one page) for your student website. You should have 1. Visualized your site layout 2. Developed a skeleton. 3. 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.