ALBERT WAVERING BOBBY SENG

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

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

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; }   Generate circle-rounded corner CSS

Rounded Corners

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

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

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

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)

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

Website Design  What makes a good website?

Website Design: Don’t  

Website Design: Still Don’t 

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.