ALBERT WAVERINGBOBBY 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;

} http://border-radius.com/

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 stylinga: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

http://www.lingscars.com/ http://www.timecube.com/

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

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.