Course Final Exam (Mandatory)

*YOU MUST TAKE THE FINAL.*

Students who do not attend will be assigned a grade of F for this course.

Time: Tuesday Jun 3, Exam Period 1 Place: IPS8

 Students must bring their ID to enter the room to take the Exam.
 Students who are more than 20 min late will not be admitted.

The FINAL EXAM will cover all of CSS…

[1] CSS Basics:
(a) Style Rules and Style Rule Construction.
(b) Targeting elements by: Name, Class, ID, Context, State, etc
(c) Internal Style Sheets, etc.
[2] External Style Sheets, Alternate Sheets, and the Cascade
[3] Formatting with CSS:
(a) Font characteristics: font-families, sizes, etc.
(b) Text characteristics: text and background colors, spacing, etc.
[4] Layout with CSS:
(a) Basics, including the Flow, the Box Model, etc
(b) Absolute, Fixed, and Relative Positioning.
[5] XHTML: questions will assume appropriate XHTML knowledge.
 Course Project (continued)
Task: Apply CSS to the Web Directory you created for Mid-term:
[1] Formatting with CSS: Create a set of style rules which specify:
(a) Font characteristics of your site: font-families, sizes, etc.
(b) Text characteristics of your site: text and background colors, spacing, etc.
(c) Demonstrate targeting elements by: Name, Class, ID, Context, and State.
[2] Style Application: Create a set of sheets to apply your style-rules:
(a) An External style sheet containing a common set of styles:
 To provide a common ‘look and feel’ for the pages in your directory.
(b) An Internal style sheet for each page, containing page-specific styles:
 To provide central control for page-by-page variations.

[3] Layout with CSS: Create a new page for your directory, in which you:
(a) Define multiple divisions, and set the page layout with CSS…
 By moving the elements out of the normal flow.
(b) Demonstrate at least 2 of: Absolute, Fixed, and Relative Positioning.
[4] Include a 1-2 page Word file, explaining your CSS format/layout:
 Describing how each above requirement (1a-c; 2a-b; 3a-b) is fulfilled.

Submit by Midnight on Monday, Jun 2 :

1. By upload, to the Final Project folder of this class’s Submit Folder.
Name your submission using your Last Name, Student ID, and the word, Final.
I will prepare a folder for you called ‘Spring 2008 Final Project’
Lecture 13 – Layout with Styles (2)
Introduction
 In the last Lecture, we began our discussion of CSS Layout:
 Lecture 12: Layout with Styles
 Positioning elements in the Flow and the Box Model…
 In the context of a detailed, step-by-step example:
 A simple DNA Computing Web-page.

 In this Lecture, we continue our treatment:

 Setting element box properties:
 Border, Padding, and Margin widths;
 Setting element size (height and width)
 Positioning elements in 3D
 Via the z-index.
 Controlling Overflow
 Making elements Float
 in a ‘sea of text’.
 XHTML Code for Examples
• We will be using the XHTML code shown below for examples:

• Note 1: The text (body) continues past the illustrated code....

The Box Model (Let’s Review)
 Recall that in CSS every element in an xhtml page is enclosed…
 by an invisible, multi-layered box:

 From the inside-out, these 4 properties are:

 Content: The central portion, which contains the element;
 Padding: The space surrounding the content;
 Border: The outside edge of the padding;
 Margin: The space surrounding the border.
 Together, these determine the size of an element.
 Note: We have seen this before, with table data cells…
 For each element, we can control the size and position of each
box.
 And each of these box properties (and parts of properties), individually.
 This gives us very nice control over a page’s layout.
 Box Format 1: Setting the Border
 You may create a border around an element…
 And set its style, width, and/or color, using the border property.
#content{position:absolute; top:0px; left:30%; background-color:#fff;
border-left:1px solid black}
 First type border, then specify one or more of:
 The border-style property defines the border style:
 Values: none (default), dashed, solid, double, groove, ridge, inset, or outset.
 The border-width property sets the border thickness:
 Value is the desired width, using the usual units (e.g., border-width: 4px)
 The border-color property sets the border’s color:
 Value is a color name, or rgb color (e.g., border-color: red);
 Note: Individual border properties (e.g., border-style) take 1 to 4 values…
 If you specify 1 value only, it is applied to all 4 sides.
 2 values are applied to top/bottom and right/left, respectively.
 3 values are applied to the top, right/left, and bottom respectively.
 4 values are applied to the top, right, bottom, and left (clockwise).
 If desired, a suffix, -l may be applied to localize the style’s effect.
 Here, l = {top, bottom, right, left} (Ex, border-left:1px solid black)
 A 2nd suffix, -e may also be used to specify a single effect only:
 Here, e = {width, style, color} (Ex: border-style; border-left-style)
 Note: Borders are not inherited.
 Box Format 2: Setting the Padding
 You may set the space between an element’s content and border…
 using the padding property.
body{background-color:#fff; color:#000; padding:0;}
#content{position:absolute; top:0px; left:30%; background-color:#fff;
border-left:1px solid black; padding:20px;}
#navigation a{display:block; text-decoration:none; color:#fff;
padding-left:10px; padding-right:10px;}
h1{background-color:#339; color:#fff; padding:0 10px;}
 Note: you may change the padding thickness, but not the color.
 The color will be the back-ground’s color.
 The padding value specifies the desired padding width:
 In absolute units (e.g., 10px);
 Or in relative units (e.g., 0.1em, 10% (of the parent element’s width)).
 Similar to the border property, the padding may take from 1 to 4 values.
 See last page to review the behavior.
 Note: the last two styles in the above example are equivalent.
 You may also add a suffix to apply padding to a single side only:
 padding-top, padding-right, padding-left, padding-bottom.
 Note: Padding is not inherited.
 Box Format 3: Setting the Margins
 The amount of transparent space between elements…
 May be set using the margin property.
body{background-color:#fff; color:#000; padding:0;margin: 0 0 0 0}
#content{position:absolute; top:0px; left:30%; background-color:#fff;
border-left:1px solid black; padding:20px;}
#navigation a{display:block; text-decoration:none; color:#fff;
padding-left:10px; padding-right:10px;}
h1{background-color:#339; color:#fff; padding:0 10px;margin-top:10px}
h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0}
 The margin value specifies the desired margin width:
 In absolute units (e.g., 10px);
 or relative units (e.g., 0.1em, 10% (of the parent element’s width)).
 Or you may use auto, which centers the element in the available space.
 Similar to the border property, the margin may take from 1 to 4 values.
 See last page to review the behavior.
 You may also add a suffix to apply margin to a single side only:
 margin-top, margin-right, margin-left, margin-bottom.
 Note: The margins of several elements with non-zero margins…
 Will collapse to the value of the larger margin when stacked.
 Note: Margins are not inherited.
 Box Format 4: Setting the Height/Width
 The height and width of elements, including images and text
blocks…
 May be set using the height and width properties.
body{background-color:#fff; color:#000; padding:0;margin: 0 0 0 0}
#content{position:absolute; top:0px; left:30%; background-color:#fff;
border-left:1px solid black; padding:20px;}
#bg{positioning:fixed; top:0px; left:0%} #bg img{width:290px; height:700px}
#navigation a{display:block; text-decoration:none; color:#fff;
padding-left:10px; padding-right:10px;}
#navigation{width:27%}
h1{background-color:#339; color:#fff; padding:0 10px;margin-top:10px}
h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0}
 Values are specified as usual for a length:
 Using either absolute units (e.g., 100px);
 or relative units (e.g., 0.1em, 10% (of the parent element’s width)).
 You may also use auto, to let the browser calculate the value.
 This is intuitive: width = parent block width – (margins + padding + border)
 Note: With width / height, you are setting the content size.
 If you manually set the box-sizes to be larger than the parent box…
 The browser will over-ride you, and re-set the margins to try to fit.
 Box Format 5: 3D Positioning
 You may control the 3-D positioning of overlapping elements…
 By setting the z-index properties of each division.
body{background-color:#fff; color:#000; padding:0;margin: 0 0 0 0}
#content{position:absolute; top:0px; left:30%; background-color:#fff;
border-left:1px solid black; padding:20px; z-index:2}
#bg{positioning:absolute; top:0px; left:0%; z-index:1}
#bg img{width:290px; height:700px} #bg{positioning:fixed; top:0px; left:0%}
#bg img{width:290px; height:700px}
#navigation a{display:block; text-decoration:none; color:#fff;
padding-left:10px; padding-right:10px;}
#navigation{width:27%; z-index:3}
h1{background-color:#339; color:#fff; padding:0 10px;margin-top:10px}
h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0}

 Here, larger z-index values are at a higher level in the ‘stack’:

 Thus, the z-index is a measure of elevation.
 Both positive and negative values may be used (only relative values count);
 If you have nested z-indices, the ordering becomes hierarchical ...
 Indices defined at a high level (i.e., divs) set relative group height orderings;
 Indices defined at a lower level (i.e., sub-div) set heights within each group;

 Note: The z-index property is not inherited.

 Box Format 6: Overflow
 Occasionally, an element may not be contained in its parent’s box…
 For instance, consider the guest student, shown below...
h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0}
#guest img{background:#339; padding:5px; margin-left:5px; width:100px;
border:1px solid black; margin-top:7px;}
#guest{width:200px; height:200px; background:purple}
 At first, our guest has no trouble...
 As plenty of space in the parent division (#guest) has been allocated for
him…
 Box Format 6: Overflow (cont.)
 However, consider when space becomes limited…
 And the extra width and height are lost...
h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0}
#guest img{background:#339; padding:5px; margin-left:5px;width:100px
border:1px solid black; margin-top:7px;}
#guest{width:140px; height:100px;overflow:auto; background:purple
 Using the overflow property, we may still allow visitors to see our
guest...
 That is…the image part that is ‘out of the box’…
 (i.e., too large to fit in the parent #guest division);
 While also satisfying the new space limitations.
 In particular, the overflow property allows us to handle overflow.
 A value of:
 visible demands that we expand the parent element to allow a fit;
 hidden specifies that we hide any portions which are too large;
 scroll provides scrollbars (always) to allow free access;
 auto provides scrollbars, but only when necessary.
 In our case, the value of auto was selected, which provides scrollbars…
 Necessary for the height only.

 Box Format 7: Making Elements Float
 You may make an element appear to float in a sea of text…
 Using the float property.
h2{margin:0} h3{margin:15px 0 0 0} p{margin:5px 0}
#guest img{background:#339; padding:5px; margin-left:5px;
border:1px solid black; margin-top:7px;}
#guest{width:140px; height:100px;overflow:auto; background:purple; float:right}
 To wrap text around elements:
 Use the value, left to float the element to the far left;
 Use the value, right to float the element to the far right.

 A few points:
 This does not provide the exquisite control we are used to with CSS…
 Furthermore, floating tends to be a bit ‘buggy’ with browsers.
 The trick to making an element float inside of content:
 Always place the element directly before the content to be floated into/on.

 The clear property can be used repel floating elements…

 Values of right, left, both, or none keep the indicated sides clear of floating
elements.

 Note: The float property is not inherited.

Example Code Available
 You may obtain the xhtml/css code for my example:
 In the folder ‘Examples’

 This folder contains two versions of the example:

 Version 1: Fluid layout
 The example, just as we did it in class.
 ‘fluid layout’ refers to the use of %-values for positioning and sizing.
 Nice for demonstration; However, not so robust to browser re-sizing.
 Best only when the browser window size is set appropriately.

 Version 2: Non-fluid layout

 Uses absolute (pixel) values for positioning the div’s.
 Much nicer behavior (layout robust to browser window resizing).
 Paragraph text also justified ( #content p{text-align:justify} )
 Course Final Exam (Mandatory)
*YOU MUST TAKE THE FINAL.*
Students who do not attend will be assigned a grade of F for this course.

Time: Tuesday Jun 3, Exam Period 1 Place: IPS8

 Students must bring their ID to enter the room to take the Exam.
 Students who are more than 20 min late will not be admitted.

The FINAL EXAM will cover all of CSS…

[1] CSS Basics:
(a) Style Rules and Style Rule Construction.
(b) Targeting elements by: Name, Class, ID, Context, State, etc
(c) Internal Style Sheets, etc.
[2] External Style Sheets, Alternate Sheets, and the Cascade
[3] Formatting with CSS:
(a) Font characteristics: font-families, sizes, etc.
(b) Text characteristics: text and background colors, spacing, etc.
[4] Layout with CSS:
(a) Basics, including the Flow, the Box Model, etc
(b) Absolute, Fixed, and Relative Positioning.
[5] XHTML: questions will assume appropriate XHTML knowledge.