1. COS 125
DAY 20

2. Agenda Capstone Progress Report Due April 6 Assignment #6 due April 6
Due at Midnight
Next Class, April 6 will be a Help session for Assignment 6
Next Quiz (Quiz #4)
April 9
Chap 6 -12
Castro Chap 8, 9, 10, 11 and 12
20 M/C questions, 4 Short Essay
60 min
Website for text book
Lecture/Discuss
Layout With Styles
Style Sheets for Printing

3. Learning Objectives Layout a Web Page using CSS
Understand the Box model
Understand the absolute, relative and fixed positioning avialable in CSS
Understand the display property
Change background colors, images and attachments
Use the width and height properties

4. Layout with Styles Allows for more possibilities than xHTML layout
Can create Liquid layouts that expand or contract with browser window
Separate layout from Content allowing you to change layout without re-coding WebPage
Examples of everything in this lecture available at

5. Structuring Your Pages
Divide your page in logical sections using the <div> element
Name each division using the id attribute
id=“daName”
Put the sections in order in your XHTML page
Use header (h1, h2, h3 etc ) in a consistent fashion

6. The Box Model
For CSS, every element is in an invisible Box that has the following
Content (middle)
Padding (between content & Border)
Border (Around element)
Margin (Between element border and next element)
Boxes are either block level (new paragraph) or inline (on same line)
xHTML flow from top to bottom with line breaks around block level elements

7. Box Model
Margin
Border
Content
Padding

8. Controlling the flow (position)
4 ways to position an element box
Static – with the flow
Absolute – in a fixed position relative to parent element
Fixed – in a fixed position relative to browser
Relative – with respect to default position in the flow
If boxes overlap you can control which goes over which using z-index

9. Displaying and Hiding Elements
You can control how the browser display an element using the property display:
h1{display;”value”}
Values can be
none hides the element
block displays element as block level
inline displays the element as inline
list-item displays the element as thought you has used <li> tag (covered later)

10. Positioning Elements Absolutely
Elements in a xHTML web page flow in the order they appear in the xHTML
You can take them out of the flow and position them wherever you want with respect to their parent
Selector{postion:absolute; top:v; left:v; bottom:v; left:v}
Generally you use
top or bottom
left or right
V is desired distance you want offset from parent in absolute (12px) or relative values (1em, 1.5em) or as a percentage of parent (10%)
Can cause overlaps
Percentages create “liquid” layouts

11. Fixing an Element in the Browser Windows
Cause an element to fixed..doesn’t move when the page is scrolled
Doesn’t work in IE; works in Netscape
Selector{Postion:fixed; top:v; left:v; bottom:v; left:v}
V is desired distance you want offset from browser in specific (12px) or relative to parent values (1em, 1.5em) or as a percentage of browser (10%)
Can (and most likely will) cause overlaps

12. Offsetting Elements in the Natural flow
Every element as a “natural” location based on page flow
You can moved the an element relative to its natural position
Does not effect any other element in page
Selector{Postion:realtive; top:v; left:v; bottom:v; left:v}
V is desired distance you want offset from natural location in absolute (12px) or relative values (1em, 1.5em) Can cause overlaps

13. Changing backgrounds
Every element including the page itself can have its own background
To set background color
selector{background-color:”blue” or “#336677” or rgb(200,100,34) or transparent}
To use a background image
selector{background-image:url(image.gif)}
If you use both color and image the color will be used until the image is loaded and will be seen through any transparent parts of the image
To repeat background image
background-repeat:repeat or repeat-x or repeat-y or no-repeat
To fix background relative to element
background-attachment:fixed or scroll
To specify position of background
background-position: x y
To do all at once
background:url(image.gif) repeat-x fixed bottom left;
Default setting
background:transparent none repeat scroll top left

14. Changing the foreground color
selector{color:colorname or #rrggbb or rgb(r,g,b) or rgb(r%, g%, b%)
Foreground doesn’t work on image (img) element

15. Changing the cursor You can set how the cursor looks in each element
Selector{cursor:value}
Value can be
Pointer
default
crosshair
move
wait
help
text
x-resize
X can be n, s e or w or combinations

16. Setting the Border Every element can have a border Border-style: type
Type can be dotted, dashed, solid, double, groove, ridge, inset, or outset
Border-width: Npx
If you give 4 values one value you can modify each side
Border-width: 2px 3px 4px 5px
Top = 2, right= 3, bottom = 4 , left = 5
Border-color: colorname 0r #rrggbb or rgb(r,g,b) or rgb(r%,g%,b%)
Can also just effect one side using
border-top-style:
Shorthand
border-side-property: value(s)

17. Adding padding From inside out of an element Selector{padding:x}
Content, padding, border, margin
Selector{padding:x}
X = size in px (10px) or relative (2em) or percentage (10%)
Can also set padding by side
padding-top:x
padding-left:x
Margin
Border
Content
Padding

18. Setting margins Margins are outside of the border Selector{marging:x}
X = size in px (10px) or relative (2em) or percentage (10%)
Can also set margin by side
margin-top:x
margin-left:x
If two elements with margins touch the space between their borders is the larger of the two margins and not the sum of the two margins

19. Setting the height and width of elements
You can set the height and width as a absolute values or relative to parent element
Selector{width:w;height:h}
Setting w or h to auto allows the browser to calculate
Exampes
#banner{width:100%; height:auto}
img{width:200px, height:auto}

20. Positioning elements in 3D
You can effect in which “layer” each element appears
Very important when you have overlap
selector{z-index:n}
The highest n goes on top
The lowest n goes to the bottom
Think of n as the elevation of the element
Children will assume the z-index of parent first then will be in “Z” order versus their siblings

21. Determining Overflow
What happens when the content of an element is larger than the “box” you have created for it??
Condition can be controlled via overflow property
Selector{overflow:value}
Value can
Hidden (invisible)
Visible (makes the box bigger)
Scroll (forces scroll bars)
Auto (scroll bars only when necessary)
Problems with IE 6

22. Making elements float You can make elements “float” in a “sea” of text
This property has buggy results
Selector{float:left or right)
Elements “float” in the direction selected
If more than one element is floated in the same direction they will stack in the order they appear in xHTML

23. Controlling whether or not elements can floats next to another
If you don’t want anything float to the left right or both of a particular element
Selector{clear:left or right or both}
Example
#banner{clear:both}
#blockhouse{clear:left}

24. Aligning Elements Vertically
Selector{vertical-align:value}
Value can be
baseline -- bottom of element lines up with bottom of parent
middle -– middle of element lines up with middle of parent
sub – lines up below parent
super –lines up above parent
text-top – top of element aligns to top of parent
text-bottom – align the bottom of element to bottom of parent
top –aligns top of element to top of tallest element in the same line
bottom- aligns bottom of element to bottom of lowest element in the same line

25. Learning Objectives Use Media-specific style sheets
Understand the difference between screen and print styles
Specify when pages will break in a style sheet for printing
Identify print-specific properties using rule.

26. Media-Specific Style Sheets
You can designate a stylesheets to be used only for printing, for screen display or for both.
Use attribute “media=“print” or “screen” or “all” in the open link or style tag
You can also import using
@import “print.css” print;
Example
<link rel=”stylesheet” media=“print” type=“text/css” href=“print.css”>
<link rel=”stylesheet” media=“screen” type=“text/css” href=“screen.css”>

27. How Print Style Sheets Differ
Can be the same or very different from screen version
Some suggestions
Use points instead of pixels for sizing
12points instead of 15px
Hide sections like sidebars, banners or ads
display:none
Remove background colors and images
Adjust margins
Set page breaks
Let viewers know that printouts are different than viewed pages
Test the print out (print preview) and adjust if necessary

28. Controlling Page Breaks
WebPages can be very long
Use CSS to control where the contents are printed relative to printer page
Where page breaks occur
Page-break-before:values
Page-break-after:values
Page-break-inside:values
Values are “auto” “always” or “avoid”
Examples
p{page-break-inside:avoid}
h1,h2,h3{page-break-before:always}

29. Other print Specific CSS properties
These do not work in IE or Netscape (yet!)
You can predefine printing pages
@page :left or :right or :first “name”{ stuff }
Stuff can be
Size:w h w=width of page h=height of page
Margin:x
Marks:kind
Any other property:value pairs
Example
@print :first{size 8.5in 11in; margin:1in marks:none}
@print legal{size 8.5in 14in; marger 1in 0.5in 1im 0.5in}
Use predefined rule
Selector{page:legal;}

30. Widows and Orphans
Orphan is a term used to describe a single word appearing at the bottom of a paragraph or column.
A widow is a single word or short phrase appearing alone at the top of column.
To modify using css
Selector{orphans:n}
Selector{widows:n}
N is minimum number of lines to appear at the top (widow) or bottom (orphan) of a page
p{orphans:4;widows:4}