Web Development Intensive

Discussions:

• Basic CSS selectors
• Block vs. inline elements
• Understanding CSS margin and padding properties
• Using container (a.k.a. wrapper) divs
• The secret to layout: float and clear

Basic CSS examples

• Using basic CSS selectors – this example shows how to use basic CSS selectors to change the style of elements in the XHTML that have particular ids and class names.
• Using basic CSS selectors (again) – this the example we went over first thing in Class 2.  It is very similar to the previous example, except it introduces the concept of using <span> tags to apply styles to pieces of text.
• Using CSS classes – this is a simple example indicating how to use the “class” attribute of XHTML elements in order to apply a particular style to those elements in the CSS file.
• Using descendent selectors – this example exhibits the use of CSS selectors that apply only to descendents of a particular XHTML element.  In other words, these selectors only change the style of those elements that are nested inside of another element.
• Margins & padding – this example is meant to illustrate the difference between the “margin” and “padding” CSS properties.  We will adjust those properties for each of the two boxes on this page, and see how the display changes.
• Centering content on the page – this example shows how to use the margin property of an element to center it within its parent element.

CSS Layout examples

• Basic row/column layout
• Three column layout – this example builds off of the technique of using float and clear properties to create layouts.  In this example, we have a more complicated layout with an uneven number of columns in each row.
• Tall column layout – this example once again uses the float and clear properties to create a more sophisticated layout with columns of uneven heights.

Practical CSS tips

• A tip when converting design comps to XHTML & CSS code: use a comp as a background image
• Tools for reverse-engineering any website’s XHTML & CSS code
• Be aware that the web browsers each have their own default style sheets that you may have to override with your own.

In-class assignments

• In-class assignment #1: mouse
• In-class assignment #2: simple float and clear
• In-class assignment #3: advanced float and clear
• Solution to in-class assignment #1: mouse
• Solution to in-class assignment #3: float and clear

Homework assignment

• Homework assignment: converting wireframes to XHTML code