Basic Tricks with CSS~ IS 210 Internet Programming I

Jazz up horizontal rules:

hr { margin-top: .5em; margin-right: 60%; margin-bottom: 0; margin-left: .5em; border-top: solid; color:black; }

Create fake tables: I am not a table

.FakeTable{ border-width: 1px; border-style: solid; border-color: #0066FF; padding: 20px; background-color: lightyellow; width: 350px; }

<div style=" background-color: tan; -moz-border-radius: 9px; -ie-border-radius: 9px; -webkit-border-radius: 9px; padding: 10px; border-bottom: 3px solid #cccccc; border-right: 3px solid #cccccc;"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam metus tortor, ultrices vitae, vulputate sit amet, semper ut, sapien. Donec arcu. Sed at elit. Pellentesque aliquet, urna et accumsan mollis, nunc libero scelerisque purus, egestas congue lorem tellus pulvinar sapien. Nam nulla justo, nonummy at, tincidunt in, blandit in, leo.<p><p><p><p></p> </div>

Control line spacing between paragraphs, headings, etc.

h1, p { padding-top:0px; margin-top:0px; padding-bottom:1px; margin-bottom:1px; }

Place text on top of images

<div><!-- use this div to position the whole thing as needed --> <div style="position: relative; width: 200px; height: 100px; "><img src="images/kamiak.jpg" height="100" width="100" alt="Kamiak Butte" /> <div style="position: absolute; top: 0; left: 0; width: 200px"><h2>Place text on top of images</h2> </div> </div> </div>

Provide a stylesheet for the screen and another stylesheet for printing.

<link href="style_screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="style_print.css" rel="stylesheet" type="text/css" media="print" />