CSS Tips

Although you can do your entire website in Cascading Style Sheets, I am going to have you focus on a few "tricks" that CSS does better than straight HTML. For the tips that have help in our HTML book I will reference the page numbers. If you browse around on the Web, you can probably find other tips that allow CSS to improve your overall webdesign. I encourage you to look at all CSS you style in both Internet Explorer and Netscape. For now, stay with Internet Explorer. You will find some of these tips, while they work in both browsers, work differently. You need to consider whether the differences screw up your design or are tolerable. Here is my list:

Changing Line Height(p. 239) This technique lets you adjust the vertical space between lines of text. It is useful for making sections of text standout. I especially like small line heights. I used that style for this paragraph. The property:value is {line-height:n} where n is a number you multiply the normal height by. I used an n of 0.9.

Putting a Background on Text(p. 242) This technique lets you place a background color or image behind a section of text. It is useful for making sections of text standout. It can give an entire paragraph it's own background for dramatic effect. I also put an image behind the first paragraph to make it stand out. The property:value is {background:color or url(image.gif)}. If you view the code, you will see that I combined both properties into one <span> tag. The code looks like:span.height {line-height:0.9;background:url(lblubk.gif)}
Removing Underlining from Links(p. 246) This technique lets you removing underlining from links(visited,new, or hover). For example this link, click here is the color of a link but without the underlining. There are situations where you may not want your links underlined. The code for this is a:link {text-decoration:none} for links and a:visited {text-decoration:none} for visited links.
Changing Colors while hovering over Links This tip only works in Internet Explorer, but it is so cool that I include it in this list. This code allows your links to change color when the user hovers over them. It is attractive and functional in that the user knows they are about to click the correct link. Hopefully, new versions of Netscape will adopt this function! For example this link, click here changes to red when you pass over it. The code is a:hover {color:red;text-decoration:none}.
Absolute and Relative Positioning(p. 250-51) HTML always positions objects relative to other objects. Usually that is good because it makes sure that two things don't overlap each other. When you want 2 or more things to overlap, use relative and absolute positioning with styles.
1. Relative position moves an object relative to it's normal position. The code is img(or whatever object) {position:relative;top:x;right:x;left:x;bottom:x} where x is pixels of movement. You don't use all 4 positions, usually 1 or 2(top and right, or top and left, etc.).
2. Absolute position moves an object relative to it's "parent element". Usually the parent element is the body tag so therefore the object is positioned relative to the upper left corner of the browser window(the body). The code is img(or whatever object) {position:absolute;top:x;right:x;left:x;bottom:x} where x is pixels of movement. You don't use all 4 positions, usually 1 or 2(top and right, or top and left, etc.).
Look at our first page of this section on CSS to see an example of relative positioning. The second rhollhead is positions 20 pixels to the left and 20 pixels down from it's normal position.You need to experiment with both of these position values to see how they work.
Paragraph Margins One of the frustrations of HTML is getting text to indent other than lining up on the left or on the right. The margin property in stylesheets allows you to do that. I set the following nonsense paragraph up to align the margin 200 pixels from the left.

This is just nonsense stuff to demonstrate a left margin of 200 pixels. But while I've got your attention, don't you all think Rholl is the biggest dufous in the school? The code for this margin paragragh is p.marginl {margin-left:200}.

Using Icon Images as List Bullets It's kinda cool that CSS lets you replace the standard circle and disk bullets with your own images. I used a little image I created in Photoshop as my bullet on these pages. Not a big deal but the code is: ul {list-style:url(cs.gif) inside}

Index

Links