Advanced CSS

CSS Backgrounds You already know: background-color:#BBDDFF; Some of you know how to use a picture: background-image:url('paper.gif'); You may know how to control if it repeats: background-repeat:repeat-x; or repeat-y, no-repeat Or if it’s fixed and doesn’t scroll: background-attachment:fixed;

CSS Backgrounds How about background-position? body{ background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:300px; }

CSS Links Get rid of underline to make the page look cleaner (except on hover/active): a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

CSS Tables Borders for the inside/outside of all tables: table, th, td { border: 1px solid black; } And collapse the borders to a single line: table { border-collapse:collapse; }

CSS Positioning Lock an element so it’s not affected by scrolling: #mydiv { position:absolute; left:100px; top:150px; }

CSS Overflow Show scroll bars if the content doesn’t fit within a DIV: div.scroll { background-color:#00FFFF; width:100px; height:100px; overflow:scroll; }

CSS Transparency/Opacity .whitebox   {   width:400px;   height:180px;   margin:30px 50px;   background-color:#ffffff;   border:1px solid black;   opacity:0.6;   }