CSS and HTML Examples

Michael has been asking about how to set the margins around images for word wrap in HTML. One solution is to create an element in the CSS for the image and then assign that element a specific margin value.

I've slung together an HTML page that has an internal CSS specification illustrating this approach. The text and the image are totally arbitraty--the image has been cropped along the colored edge so you can tell that the margins are not in the image file.

The file shows you how to do other useful HTML things, too:

1. The CSS shows you how to "float" an image inside a chunk of text with "float" and how to set the alignment (right or left side of the text).

2. The style includes a simple approach to setting up, over, down, and visited specifications for your hyperlinks. You can also turn off the automatic underlining of links.

3. The link itself includes the "target" attribute with the "_blank" value that opens a new browser window for the linked file. This is a simpler approach than the JavaScript one on the syllabus page for the class, but you can't specify the size (or other features) of the new window.

4. The "../default.html" in the link is a relative path (as opposed to the full URL, which would be the absolute path) out of the "Resources" directory (where the "brat_css.html" file is located) and into the "394" directory (which contains the "Resources" directory). You can use these relative paths to link files nested within your own directory structure.

Please write me with any questions or problems you're encountering. We'll spend some time in class on basic stuff next week to make sure you're ready to put together the "beta" releases of your first paper.