ALBERT WAVERING
BOBBY SENG
CPSP 229D: WEB DESIGN
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 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
 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.