![]() Tight.Philosophy movie |
![]() 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. |
![]() CSS |
![]() Today we are talking about version 2 rev 1 |
![]() Formal definition |
![]() Tutorial |
![]() Browser compliance test Acid 2 test |
![]() CSS is Cascading Style Sheets |
![]() A way of describing presentation of HTML data |
![]() Fast example |
![]() without |
![]() with |
![]() Define presentation |
![]() of existing HTML tags |
![]() Designed to separate presentation from data |
![]() specific elements (id attribute) |
![]() classes of tags (class attribute) |
![]() 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 |
![]() By using external style sheets |
![]() control the look of multiple websites at once |
![]() reduce bandwidth demands |
![]() CSS Rule Format |
![]() Syntax: |
![]() selector[,selector] {property:value[; property:value ... ]} |
![]() examples |
![]() body {color:black} |
![]() h1{font-family:"sans serif"; font-weight:bold} |
![]() selectors may be grouped: |
![]() h1,h2,h3 {font-weight:bold} |
![]() selector may be a "class" |
![]() .rightAlign {text-align:right} |
![]() <img src="..." alt=".." class="rightAlign"/> |
![]() selector may be a tag and a class |
![]() p.rightAlign{text-align:right} |
![]() <p class="rightAlign"> |
![]() selector may be an "id" |
![]() #rightParagraph{text-align:right} |
![]() <p id="rightParagraph"> |
![]() selector may a tag and id |
![]() p#rightParagraph{text-align:right} |
![]() psuedo classes |
![]() special cases |
![]() :active,:focus:hover:link:visited:first-child:lang |
![]() a:hover{color:rgb(10,0,100)} |
![]() psuedo elements |
![]() :first-line,:first-letter |
![]() :before |
![]() :after |
![]() media types |
![]() @all, @aural, @braille,@embossed, @handheld, @print,@projection,@screen,@tty,@tv |
![]() Comments are like C/ Java |
![]() /* */ |
![]() 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 |
![]() User Style Sheet |
![]() typically specified in the browser for accesibility |
![]() The cascade |
![]() How do you reference an external style sheet? |
![]() How do you create an internal style sheet? |
![]() How do you create an inline style sheet? |
![]() The effect of multiple style sheets |
![]() attributes can be overridden separately |
![]() Some specific style elements |
![]() Basics |
![]() background |
![]() color, image, repeat, attachment, position |
![]() text |
![]() color, direction, text-align, text-transform |
![]() font |
![]() style, variant, weight, size |
![]() borders |
![]() color, width, four sides |
![]() margins, padding |
![]() %, length |
![]() list-style, list-style-image |
![]() Advanced |
![]() height, width |
![]() auto |
![]() display |
![]() inline, none,block table |
![]() float |
![]() position |
![]() visibility |
![]() cursor |
![]() positioning |
![]() z-index |
![]() Simple Style Sheet Demo |
![]() Elaborate Style Sheet Demo |
![]() Accessing CSS with Javascript and DOM |