* Tight.Philosophy movie
wedge Admin
* 1) You can view all Summer Session courses, including Bren School of ICS courses, at www.summer.uci.edu or from the link on the undergraduate page of the ICS website. Students may enroll online, via fax or mail, or in person; details are available for each option at the Summer Sessions website.

2) Beginning this year, Summer Sessions is offering a full-time fee incentive program for all current and incoming UC students. UC students will only pay for up to eight units in course fees; i.e. students enrolling in 12 units will only pay for eight.
wedge CSS
wedge Today we are talking about version 2 rev 1
wedge Formal definition
* www.w3.org—CSS21
wedge Tutorial
* www.w3schools.com—css
wedge Browser compliance test Acid 2 test
* www.webstandards.org—test.html
wedge CSS is Cascading Style Sheets
wedge A way of describing presentation of HTML data
wedge Fast example
wedge without
* www.ics.uci.edu—example_00.html
wedge with
* www.ics.uci.edu—example_00_with.html
wedge Define presentation
* of existing HTML tags
* Designed to separate presentation from data
* specific elements (id attribute)
* classes of tags (class attribute)
wedge rule-based
* rules are usually stored in a "Style Sheet"
* styles can come from several places in a document, just like Javascript can come from several locations
* multiple style sheets "cascade" together
wedge By using external style sheets
* control the look of multiple websites at once
* reduce bandwidth demands
wedge CSS Rule Format
wedge Syntax:
* selector[,selector] {property:value[; property:value ... ]}
wedge examples
* body {color:black}
* h1{font-family:"sans serif"; font-weight:bold}
wedge selectors may be grouped:
* h1,h2,h3 {font-weight:bold}
wedge selector may be a "class"
* .rightAlign {text-align:right}
* <img src="..." alt=".." class="rightAlign"/>
wedge selector may be a tag and a class
* p.rightAlign{text-align:right}
* <p class="rightAlign">
wedge selector may be an "id"
* #rightParagraph{text-align:right}
* <p id="rightParagraph">
wedge selector may a tag and id
* p#rightParagraph{text-align:right}
wedge psuedo classes
* special cases
* :active,:focus:hover:link:visited:first-child:lang
* a:hover{color:rgb(10,0,100)}
wedge psuedo elements
* :first-line,:first-letter
* :before
* :after
wedge media types
* @all, @aural, @braille,@embossed, @handheld, @print,@projection,@screen,@tty,@tv
wedge Comments are like C/ Java
* /* */
wedge Where does the presentation come from, aka "cascading"
* Browser default is overrulled by
* External Style Sheet which is overulled by
* Internal Style Sheet which is overrulled by
* Inline style overrulled by
wedge User Style Sheet
* typically specified in the browser for accesibility
wedge The cascade
wedge How do you reference an external style sheet?
* www.ics.uci.edu—example_01.html
wedge How do you create an internal style sheet?
* www.ics.uci.edu—example_02.html
wedge How do you create an inline style sheet?
* www.ics.uci.edu—example_03.html
wedge The effect of multiple style sheets
* attributes can be overridden separately
wedge Some specific style elements
wedge Basics
wedge background
* color, image, repeat, attachment, position
* www.ics.uci.edu—example_04.html
wedge text
* color, direction, text-align, text-transform
wedge font
* style, variant, weight, size
wedge borders
* color, width, four sides
wedge margins, padding
* %, length
* list-style, list-style-image
wedge Advanced
wedge height, width
* auto
wedge display
* inline, none,block table
wedge float
* www.ics.uci.edu—example_05.html
* www.ics.uci.edu—example_06.html
* www.ics.uci.edu—example_07.html
* position
* visibility
* cursor
* positioning
wedge z-index
* www.w3schools.com—tryit.asp
wedge Simple Style Sheet Demo
* www.w3schools.com—demo_default.htm
wedge Elaborate Style Sheet Demo
* www.csszengarden.com
wedge Accessing CSS with Javascript and DOM
* www.ics.uci.edu—example_08.html