LESSON 1
Parts of this first section may be review for many of you. Please bear with me. Read through it and re-familiarize yourselves with the material and don't be surprised if you learn something new. :) There is a lot of reading this week. I promise there won't be as much during the rest of the course. There are a few "required" reading links. Please ensure that you do read those as well the actual lesson material. Please also read the "resource" links if you have time. Save the links for future reference. Even if some of it doesn't make total sense to you now, understanding will come with working with these things throughout the course.
Please note: Much of the material here should be at least familiar to you. If, after reading through this material as well as the resource/required reading you are totally confused, you are not in the right classroom. Let me know as soon as possible (before the second lesson is posted) and we'll transfer you to the appropriate class.
Display
Before we can talk about display we need to touch on the classification of elements:
Block Level
paragraphs, headings, lists, tables, div, body
Block level elements are displayed, or at least begin, on a line by themselves; beginning on a new line and forcing the next element to do the same. Block level elements can only be children (be used between other tag sets) of other block level elements and not always then..
Inline
a, em, span and most replaced elements such as images and form inputs
Inline elements do not force anything to start on a new line. They can be children of pretty well any other element.
List-item
li is basically the only list-item in HTML. List-items are specially defined to have a presentation marker of some sort (bullet, number, or letter)
display : block | inline | list-item | none | inline-block
There are several more values, but we'll not go over them here.
In theory, display makes it possible to change the structural definition of your page.
If you wanted to make sure that every image appeared on it's own line, you could do this:
img { display : block; }
If you were to define the following rule in your style sheet:
p { display : inline; }
There would be no blank lines between your paragraphs because the p tag has now been changed from a block to an inline element.
Suppose you were setting up a print sheet didn't want any images that appear on the web page to show up at all when the page was printed, you would set this rule in your print style sheet:
img { display : none; }
Even the space that images normally leave for themselves when they're not visible for any reason is ignored if you set the display to none.
A handy way to utilize the none value would be to set up a paragraph that only non CSS compliant browsers would see.
<p style="display : none;">This site was designed using CSS. If you're seeing this paragraph, your browser is not CSS-aware. These pages should still be readable.</p>
Most people would not see this paragraph unless they viewed your code source. Only those people who are using browsers that don't recognize CSS would actually see it in the body of your page.
.list { display : list; }
Now elements that have the list class applied should appear as if they're list items. You must add a margin-left in order for bullets to appear.
.iblock { display : inline-block; }
inline-block is new to CSS 2.1 It causes an element to generate a block box inside while the element itself remains an inline element. You can style an inline-block with padding, margins, and borders etc.
Continued...
