Advanced CSS

1. Advanced CSS

2. 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;

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

4. 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;}

5. 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;}

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

7. 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; }

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