1. ADVANCED CSS: (LAYERED) DISPLAY & PRESENTATION PA 70b – Giordon Stark

2. Table of Contents Review of Last Time Introduction to Layouts Elaboration on and More CSS Properties Let’s learn some CSS!  Display, Dimension, Position, Layering Practice Sessions  Recreation and Adaptation: Getting rid of tables

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

4. Terminology Rule  Contains the selector and one or more declarations Selector  A group of styles – creates the link between the element and rules to apply  3 types: HTML Tag Selector, Class Selector, ID Selector Declaration  A property and value pair, uses the format “property:value;”  W3C:

5. The CSS “Recipe” Internal CSS /* CSS here */ Inline CSS (use sparingly, if at all!) ” /> External CSS  File Type:.css  No necessary ‘wrappers’ 

6. Selectors Tag Selectors – Multiple Elements hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} Class Selectors – Multiple Elements.headline {font-family:arial; font-size:14px; color:red}  HTML: stuff other stuff ID Selectors – Singular Element #layer1 {position:absolute; left:100;top:100; z-Index:0}  HTML: stuff

7. Multiple Style Sheets + Cascading Styles are specified  inside an HTML element  inside the head section of an HTML page  in an external CSS file When you have multiple style sheets for one page, including both internal, external, and inline; CSS cascades all the rules into one singular rule. The hierarchy is (from highest priority to lowest)  Inline Style  Internal Style Sheet  External Style Sheet  Browser Default An example: http://w3schools.com/css/css_howto.asphttp://w3schools.com/css/css_howto.asp

8. Inline Elements versus Block Elements Block level elements include  Heading  Division  Paragraph  Blockquote  Ordered and Unordered Lists Inline elements include  Span  Anchor

9. Block Level and Inline Elements Block Level elements display text on its own line (line breaks before and after) – my definition of ‘layout’ elements Rules  Block Level elements can contain other block-level elements and inline elements  Inline elements cannot contain block-level elements Bad Example Heading Fixed Example Heading

10. Block Level and Inline Elements In CSS  Inline elements are used for changing  Colors (background and text)  Font styles (font weight, text decoration, font family, etc..)  Block level elements are used for changing  Positioning declarations (locational)  Dimensional declarations (width and height)  Padding and Margins Major Differences  Block elements take 100% of available width (of their parent element)  Takes whatever height it needs to fill its content

11. Some Tips and Tricks Let’s do a quick refresher and learn some extra tricks on our CSS coding:  http://www.thefloatingfrog.co.uk/2008/09/10-css- shorthand-techniques-youll-use-everyday/ http://www.thefloatingfrog.co.uk/2008/09/10-css- shorthand-techniques-youll-use-everyday/  http://carsonified.com/blog/features/design/creating-sexy- stylesheets/ http://carsonified.com/blog/features/design/creating-sexy- stylesheets/  http://stylizedweb.com/2008/03/12/most-used-css-tricks/ http://stylizedweb.com/2008/03/12/most-used-css-tricks/  http://www.smashingmagazine.com/2008/11/12/12- principles-for-keeping-your-code-clean/ http://www.smashingmagazine.com/2008/11/12/12- principles-for-keeping-your-code-clean/

12. GOOD LAYOUTS, GOOD CSS, GOOD TIMES… Introduction to Layouts

13. Good Layouts What should a good layout have?  Header  Footer  Content  Left and/or Right Columns  Navigation  Menu  Logo/Banner Where might these be on a page?

14. CSS and Layouts A major benefit is that you’re no longer forced to use tables to create layouts with complete control  http://www.yourhtmlsource.com/examples/positioning2.html http://www.yourhtmlsource.com/examples/positioning2.html  http://www.howtocreate.co.uk/tutorials/positionExample.ph p http://www.howtocreate.co.uk/tutorials/positionExample.ph p We use block level elements (divs) and inline elements (span) to make these layouts Don’t forget about the box model, everything is made possible!

15. The Box Model (again)

16. WHY DO WE CARE ABOUT THESE TWO? HOW ARE THEY GOOD FOR LAYOUTS? WHY DO WE CALL THEM “CLEAN SLATES”? Division and Span

17. Div (short for division) divides the content into individual sections. Each section can then have its own formatting, as specified by the CSS. Div is a block-level container, meaning that there is a line feed after the tag.

18. Division and Span Span is similar to div in that they both divide the content into individual sections. The difference is that span goes into a finer level, so we can span to format a single character if needed. There is no line feed after the tag.

19. 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.  For Inline elements: span tag.  Neither really have any HTML attributes applied by default which makes them perfect canvases for styling pages.

20. Division and Span So exactly how are they used in HTML?  http://essentialkeystrokes.com/css-classroom-div-vs-span/ http://essentialkeystrokes.com/css-classroom-div-vs-span/  http://www.html.net/tutorials/css/lesson8_ex2.asp http://www.html.net/tutorials/css/lesson8_ex2.asp

21. BECAUSE THE WORLD IS NOT ENOUGH… More CSS Properties!

22. CSS Properties Mainly, we’ll be talking about division and span. In fact, we’ll use website tutorials to make the point clearer… because nobody explains it better than these guys (other than me). Let’s learn about the following properties:  position: {absolute, relative, static, inherit};  top/left/right/bottom: {number};  float: {left, right, both, none};  clear: {left, right, both, none};

23. CSS Properties Websites  http://www.yourhtmlsource.com/stylesheets/csslayout.html http://www.yourhtmlsource.com/stylesheets/csslayout.html  http://www.brainjar.com/css/positioning/ http://www.brainjar.com/css/positioning/  http://www.barelyfitz.com/screencast/html- training/css/positioning/ http://www.barelyfitz.com/screencast/html- training/css/positioning/ We’ll summarize key concepts on the next few slides

24. 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/tutorial0801.htm  http://css.maxdesign.com.au/floatutorial/tutorial0901.htm http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

25. 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)

26. 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 http://www.brainjar.com/css/positioning/stackdemo.html Finally, some elements just get overlapped regardless of z-index: “Overlapping plug-ins”

27. 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 http://www.w3schools.com/cssref/default.asp For a list of supported units  http://www.w3schools.com/cssref/css_units.asp http://www.w3schools.com/cssref/css_units.asp For a (short) list of colors  http://www.w3schools.com/cssref/css_colors.asp http://www.w3schools.com/cssref/css_colors.asp For a list of selectors  http://www.w3schools.com/cssref/css_selectors.asp http://www.w3schools.com/cssref/css_selectors.asp When in doubt, Google is your friend.

28. RECREATION AND ADAPTATION ( DESTROYING TABLES EVERYWHERE! ) Practice Session

29. Baby Steps – The Exercise floatingLayout.html We’re going to recreate this layout step-by-step.  The layout we need to re-create is:  http://www.ugcs.caltech.edu/~kratsg/PA070b/Lecture3/example s/floatingLayout.png http://www.ugcs.caltech.edu/~kratsg/PA070b/Lecture3/example s/floatingLayout.png

30. THE START OF YOUR PROJECT! Exercise/Homework

31. No image! This is the first week of creating your layout page (one page) for your student website. To get started… 1. Visualize your site layout, draw it. Where do you want your (vertical/horizontal) navigation? Where’s your content? What colors do you want to use? (find those colors). 2. Develop a skeleton using the simplest of html elements: div, span, paragraph, heading, anchor links, lists. 3. Develop the CSS, starting with dimensions and positions, then working down to the coloring. (It helps if you add borders to the elements you’re moving, so you can see where they are). 4. Add in colors, themes, styles, and filler content. Personalize it and make it unique.

32. Exercise/Homework You will be graded on the following criteria:  Creativity  of layout – how original is the layout?  of color scheme – how well do the colors blend together? Clash?  Efficiency  How well is your layout separated from your styles?  100% Efficiency: http://www.csszengarden.com/http://www.csszengarden.com/  Etiquette  Is your code presentable, easy-to-read, indented, and structured properly?  Does it conform to standards of XHTML strict coding?

33. Example (don’t mimic this)

34. Another Example (don’t mimic this)