3.7: Seven super CSS tricks

No. 1: Bordered heading

This gives you a great looking heading.

.dotted {
    border-bottom-style: dotted;
    border-bottom-width: 2px;
    padding:.25em;
    }

Here is how the style looks

Change the border-bottom-style to dashed for yet another look:

.dashed {
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    padding:.25em;
    }

A smaller heading with a dashed border

No. 2: Text in a box

This text is set up with borders and padding. Its class is named box. Note that it picks up the font size, font family, text indent, color and line height from the earlier paragraph selector. Look at the code below to see how it’s done:

p.box 
  {
   margin-top:6px;
   margin-bottom:6px;
   border-style: solid;
   border-width: 2px;
   border-color: #999;
   padding:12px;
   background-color:#dedede;
   }

No. 3: Using an image as a list bullet

This unordered list uses an image for its bullet. The image was created in PhotoShop and exported for the Web:

Note the syntax for finding the bullet image in this stylesheet code:

ul.bulletblue {
   list-style-image: url('img/bulletblue.gif');
   }

Later on, we will learn how to make a bullet in PhotoShop. You can click and copy any of the ones below:

Blue Bullet  Blue Bullet  Blue Bullet  Blue Bullet  Blue Bullet 

No. 4: Nested lists

To set up this outline style of lists, first create ordered and unordered list specifications, and a list item specification, on your stylesheet:

ul
{
	list-style-type: disc;
	margin: 0 0 .25em 0;
}
ol
{
	list-style-type: decimal;
	margin: 0 0 .25em 0;
}
li { 		
	font-size: 13pt;
	text-indent: 0;

Now, create the list style for lists inside of a list item:

li ul { list-style-type: circle; }

li ol { list-style-type: lower-latin; }

The lists are then nested: Each sublist is contained within the list element above it, like this:

   <ol>
   <li>Ut wisis enim ad minim veniam
      <ol>
      <li>quis nostrud exerci tution</li>
      <li>nisi ut aliquip ex ea commodo</li>
	  </li>
	<li>in vulputate velit esse molestie
             <ul>
	         <li>consequat, vel illum dolore</li>
	         <li>eu feugiat nulla facilisis</li>
             </ul>
	</li>
     </ol>
     

Here is how it looks:

  1. Ut wisis enim ad minim veniam
    1. quis nostrud exerci tution
    2. nisi ut aliquip ex ea commodo
    3. in vulputate velit esse molestie
      • consequat, vel illum dolore
      • eu feugiat nulla facilisis

No. 5: Lists with bullets inside paragraphs

This is a nice effect for long list items, such as literary quotations:


Here is the stylesheet code:

ul.inside { 
            list-style-image: url('images/bulletred.gif');
            list-style-position: inside; 
            }

No. 6: Link rollover effect

You can get a neat rollover effect by setting your link specifications on your stylesheet like this:

a {
	color: #600;
	text-decoration: none;
     }
a:visited {
	color: #600;
	text-decoration: none;
     }
a:hover {
	color: #FF0;
	text-decoration: none;
	background-color: #666;
    }

Note how it works with these links:

University of St. Thomas

RotoDesign

No. 7: Fancy horizontal rules

Why settle for plain old hr specs? Here is an alternative:

hr { 
     background-color: #36d; 
     height: 8px;
     width: 50%;
     border-bottom: 4px solid #c00;
     width: 50%;
     margin-top: 24px;
     margin-bottom: 24px; 
     } 

And the code:

<hr />

Note that I used top and bottom margins to space out the rule. Here is how it looks: