Concept

• You can have different bullet types
• You can have different numbering
• Renumbering is still automatic, but if you move nested lists around it doesn't maintain the hierarchy. No automatic outlining, IOW

Syntax

element { list-style-type: type; }

Example

      ul {
        list-style-type: circle;
      }
      ul {
        list-style-type: none;
      }
      ol {
        list-style-type: lower-alpha;
      }
    

Concepts

• Every block-level element has these three aspects.
• Margin is obvious
• Borders are cool because you can set width, style and color
• Padding is less obvious. Tables is a good example.
• PBM is the order, going from inside out. This is called the CSS Box Model.
• Vital to understand this because the browser has to calculate percentages, ems, pixels, etc. to figure out the overall page layout.

Syntax Examples

[element] {
	margin: 12px;
}
[element] {
	padding: 12px;
}
[element] {
	margin-top: 2ex;
	margin-right: 1em;
	margin-bottom: 2ex;
	margin-left: 2em;
}
[element] {
	margin: 0;
	padding: 5px;
	padding-left: 20px;
}
    

First example sets a 12 pixel margin around the entire block.

Second example does the same but sets padding rather than margin. The margin setting would be inherited from a higher order in the cascade.

Third example sets the same margin top and bottom, but sets different margins left and right.

Fourth example sets a zero margin. Then it sets a 5 pixel padding on all four sides, including the left side. Then it sets a 20 pixel padding on the left only. Because the padding-left statement comes after the padding statement, it overrides the left side setting.

Examples

img { margin: 2em; }
body {
	margin-left: 10%;
	margin-right: 10%;
}
h1 {
	border-bottom: 3px double #777;
	border-top: 3px double #777;
}
    

Borders

tableborder0.html

Note the difference between border="1" in the XHTML and a styled table border.

I set a double border and made it green so we can more easily see the effects of other styles as we go on.

Here is how we turn on borders on the interior.

tableborder1.html

A few things to notice

1. There are no borders around the table headings because we only did the <td> tag not the <th> tag
2. There is a space between each of the cells because that's the default. This may vary by browser
3. There's only a single box around the last row because of the colspan.
4. The edges of the outside boxes are still within the table border; each occupies its own space

What happens if we put a border on tr instead of td?
tableborder2.html

What happens if we put a border on th instead of td?
tableborder3.html

What happens if we put a border on everything? (well, really only on td and th)

tableborder4.html

But what I we do about that empty space between cells?

Collapse it!

Border-collapse

tableborder5.html

Yay! This is starting to show some potential now.

Styling the borders

(uses background colors)

IE doesn't honor borders on the <thead>, <tbody> and <tfoot> sections, but you can do most other kinds of styling. I can sort of see why, as the example shows how awkwardly these are handled.

tableborder6.html

Significant difference here between the browsers.

Look at how poorly the double line of the <thead> intersects with the double line of the table border, and how it doesn't appear at all in IE7.

Margins and Padding

tablemargin0.html

Margins or padding on the <table> tag apply to the edges of the entire table.

tablemargin1.html

To manipulate the interior of the table you have to work on th and td. Here is an example showing padding (margins don't have much effect on the interior of a table). Also, neither margin nor padding have any effect on tr, tbody, thead or tfoot.

tablemargin2.html

Usually you will tweak the sides of cells differently, like this:

tablemargin3.html

Vertical Alignment

When any one cell is forced to word wrap, the vertical alignment of the cells on either side is centered. This is rarely what you want. Shrink your browser window to see what I mean.

Fix this with vertical-align: center;

tablemargin4.html

Horizontal Alignment

You can right-align, left-align or center, but there is no decimal align. In this example I have centered my footer and right-aligned the Number of Founders. Note that the syntax is not horizontal-align; it is text-align.

tablemargin5.html

Note: the Defenders line here is intentionally wrong, to illustrate what happens if you forget to add the class.

Also note that I had to create a class just for the right-aligned cells and had to call that in each cell tag. I also didn't like how close the number was to the vertical cell dividing line, so I added some right padding to move the numbers over a bit.

white-space: nowrap

Finally, sometimes you don't want word wrap. Here, I turn it off for the headers.

tablemargin6.html

I also styled the footer a bit more, styled the caption, and made better-looking borders. I also centered the table.

see tablemargin6.css for the styles

Tbody, thead, tfoot

Lets you style each section separately

thead and tfoot are supposed to repeat across pages; they do in FF but not in IE

<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>

Concept: Document Flow

• Left to right, top to bottom
• Each thing flows into the next available slot, left to right, top to bottom
• Where it appears in the code, that's where it goes on the screen

Interrupting the document flow

Some tags force a block element to an "unnatural" position. Example: making an image appear on the right instead of the left, or letting text "flow" around the image instead of treating the image as an in-line element.

You can do this, but now you are the one who has to keep track of the document flow. More to the point, you have to be aware of browser differences, screen size, etc.

The more you interrupt the document flow, the more browser and platform issues intrude. This is what causes most of the talk about browser incompatibilities, and that CSS is hard or doesn't work.

It's also the reason why people choose to use tables to force page layout, or even resort to Flash etc. to achieve certain layouts.

Float

• This style causes the element to "float" to the side designated
• There is no float: center
• Text then flows around the element, which is taken out of the normal document flow
• Analogous (but not identical) to align: right

Clear

• Sometimes you want to force the next element to begin below the floated element
• Use clear: both, or clear: right or clear: left
• Important: you will normally use this inline or will use a classed element

Examples

      img { float: right; }
      p { clear: both }
    

Exercise 6: Clear

Concepts

Selectors let you define under what conditions a style takes effect. Classes let you assign a name to an element and have the style take effect only when named. Inheritance determines what style a browser chooses when there is a conflict.

Classes

This is the easiest to understand because it's under your control. There are two kinds: classes and IDs. The ID is a special case of class in that an ID is to be used once and only once per page. It's useful for doing things like defining the header or the navigation menu. We'll do IDs in a later workshop.

Classes let you define types of paragraphs or types of tables or lists or headings or whatever. Assign styles to that, and the style gets applies only when you explicitly name it in your html code.

Important: classes require that you assign the name in your CSS file strong that you invoke the name in your HTML file.

        element.classname { 
        style; 
        style; 
        ...; 
        }
      

p.revised {
  font-size: .8em;
  font-style: italic;
  text-align: right;
}
table.stafflist {
  background-color: #ed6;
  color: #000;
  margin-right: 10%;
  margin-left: 10%;
}
      

Exercise 7: Classes

Selectors

There are several types of selectors, of which we'll cover two today: group selectors and child selectors. Group selectors let you assign styles to a group or list of elements. The elements are separated by commas. Child selectrs let you assign a style to an element that applies only when the second element is a child of the first. The elements must be separated by a space.

h1, h2, h3, h3, h4, h5, h6 {
  font-family: palatino, garamond, serif;
}
th, td {
  padding: .5em;
  border: 1px solid #000;
}
      

ol ul {
  list-style-type: none;
}
table.stafflist th {
  background-color: #062;
  color: #e8e8e8;
}
      

Inheritance

This is the "cascade" part of Cascading Style Sheets. It establishes the rules for how a browser resolves conflicts between styles. There is an antecedal rule, though, that isn't about conflicts and which is one of our most useful tools, and that is technically what inheritance is about.

First rule: every element inherits the styles of the parent.

The parent of all is the tag html, so anything you assign to that gets inherited by everything. For some pretty obscure technical reasons, we usually group html with body, so any general style gets applied like this (for example):

html, body {
  background-color: #fff;
  color: #000;
  font-family: arial, helvetica, sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0;
}
    

Thus, any paragraph or table or whatever contained within the body inherits those properties, and we don't have to re-state them.