• about css
• review: div & span, class & id
• css box model
• Absolute and relative positioning
• Float and clearing float
• Z-index positioning
• Two-Column Page Layout
• Fragment identifiers
• readings

• Advantages:
  • greater typography control
  • style is separate from structure
  • potentially smaller documents
  • easier site maintenance
  • increased page layout control
  • increased accessibility
  • ability to define styles for multiple media types
• Disadvantages:
  • There still remain issues with the lack of uniform browser support of CSS
  • If you are already adept at designing page layout using tables, your productivity will temporarily drop as you learn to configure page layout with CSS.

span and div

div and span are tagsets which allow you to define your own blocks of code for styling. Both of them require either a class or id to be assigned.

• Use div to define a block of code that can be styled and positioned using css. The div tag is a block-element tag
  

  <div class="contentblock">content</div>

• Use span to define a block of code for styling. The span tag is an in-line element, and thus is not appropriate for positioning.
  

  <span class="tabledata">content</span>

class or id?

• Configure a class:
  • If the style may apply to more than one element on a page
  • Use the . (dot) notation in the style sheet.
  • Use the class attribute in the XHTML.
• Configure an id:
  • If the style is specific to only one element on a page
  • Use the # notation in the style sheet.
  • Use the id attribute in the XHTML.

• as far as a style sheet is concerned, everything in your HTML is inside a box
• from the outside in it looks like this:
  
  margin

  border

  padding
  this is some content
• content: text & web page elements in the container
• padding: area between the content and the margin
• border: between the padding and the margin
• margin: determines the empty space between the element and adjacent elements

1. Work through Hands-On Practice 6.1 starting on page 225 of text.

Relative positioning:

Changes the location of an element in relation to where it would otherwise appear in normal flow.

Absolute positioning:

Fixes location of an element outside normal flow. Location is specified with respect to the container element.

1. Work through Relative Postioning section starting on page 226 of text.
2. Next, work through Hands-On Practice 6.2 starting on page 228 of text.

Float property

Elements that seem to "float" on the right or left side of either the browser window or another element are often configured using the float property.

.floatright {float: right;}
<img src="file.jpg" class="floatright>

z-index fixes the layer an element displays on within a display context

1. Work through Hands-On Practice 6.3 starting on page 231 of text.
2. Create a folder called float to store your files in.
3. Try the clear property (see page 232)
4. Try the overflow approach to clear a float (see page 233) [OPTIONAL]

The instructor will lead you through:

• section 6.6 CSS Two-Column Page Layout starting on page 235.
• section 6.7 Hyperlinks in an Unordered List
• Hands-On Practice 6.4 CSS Interactity with Pseudo-Classes, starting on page 241

• Fragment Identifiers p. 279
• Hands-On Practice 7.4 p. 285 (possibly for optional homework)
• Choices for different devices, incl. print and mobile
• Media queries and responsive design p. 300 & 306