1. ALBERT WAVERING BOBBY SENG

2. Week 3: CSS  Quiz  Announcements/questions/etc  Homework

3. CSS Abilities  visibility: hidden  Box Model  Border  border-style: solid, etc  Outline  outline-style  Margin  margin-top, -right, -bottom, -left  Padding  padding-top, etc

4. CSS Rounded Corners  Useful tool for elements  Using circles or ellipses #rounded{ height: 5em; width: 12em; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; }  http://border-radius.com/ http://border-radius.com/  Generate circle-rounded corner CSS

5. Rounded Corners

6. CSS Positioning  Static  Default mode  Always positioned with respect to HTML flow  Fixed  Positioned relative to the browser window  Relative  Positioned relative to its normal position  Absolute  Positioned relative to the first non-static parent element

7. CSS Float  Refers to ‘pushing’ elements horizontally to one side or the other  float:right

8. CSS Align  Align block (full width + line break) elements horizontally.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }

9. CSS Pseudo-classes  Example: anchor styling a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */  Some more (if interested, look up online)

10. CSS Psuedo-elements  :first-line  :first-letter  :before  :after

11. Website Design  What makes a good website?

12. Website Design: Don’t  http://www.lingscars.com/ http://www.lingscars.com/  http://www.timecube.com/ http://www.timecube.com/

13. Website Design: Still Don’t  http://www.provenancedigital.com/ http://www.provenancedigital.com/

14. Homework 3  Select a topic that interests you.  Create a website about this topic with at least three pages (separate HTML files)  Pages should include a sidebar and content area as shown in class. Pages should be styled with a separate CSS file.