ࡱ> ( 9  jhttp://pubpages.unh.edu/~ehepp/CSS/CSSexperiment.htmljhttp://pubpages.unh.edu/~ehepp/CSS/CSSexperiment.htmlbhttp://pubpages.unh.edu/~ehepp/CSS/MarkTwain.htmlbhttp://pubpages.unh.edu/~ehepp/CSS/MarkTwain.html dhttp://pubpages.unh.edu/~ehepp/CSS/MarkTwain8.htmldhttp://pubpages.unh.edu/~ehepp/CSS/MarkTwain8.htmlZhttp://pubpages.unh.edu/~ehepp/CSS/mark8.htmlZhttp://pubpages.unh.edu/~ehepp/CSS/mark8.html/ 00DArialngsRomanllt0DGaramondRomanllt0 DTimes New Romanllt00DWingdingsRomanllt0@0.  @n?" dd@  @@`` b Z  C6     ) !"#$%&'()*+,-./01234567: ; =>@?  0e0e     A@ A5% 8c8c     ?1 d0u0@Ty2 NP'p<'pA)BCD|E||s " 0e@        @ABC DEEFGHIJK5%LMNOPQRSTUWYZ[ \]^_ `abN E5%  N E5%  N F   5%    !"?N@ABC DEFFGHIJK5%LMNOPQRSTUWYZ[ \]^_ `ab@856) ʚ;ʚ;g4<d<d8T 0ppp@ <4dddd8A10lP g4HdHdU 0 p@ pp0___PPT10 P___PPT92 DV?  O  =8CSS  Cascading Style Sheets 7& CSS - intro  "CSS  intro con t XInitially not well supported Now recommended by W3C  many design related HTML tags were slated to be made obsolete in favor of CSS (these tags are said to be deprecated) There exist other types of style sheets: JavaScript Style Sheets XSL  Extensible Style Sheets CSS is primary one used on the WebR6# +6#CSS - what it can do$(Text formatting and colors: Choose specific fonts and font sizes Set bolds, italics, underlines, text shadows Change text color and background color Change link colors or remove underlining Indent text, center text Transform sections of text to upper-, lower-, or mixed case Other special effects*Z Z (CSS  what it can do$WGraphical appearance and layout Set a background graphic and control its location, tiling, and scrolling Draw borders and outlines around sections of a page Set vertical and horizontal margins on all elements as well as margins for the page itself Flow text around images as well as other text Redefine how HTML tables and lists are presented > Z7ZZ 7(CSS  what it can do$XDynamic actions Mouseover effects on links Dynamically inserted content before or after HTML tags Automatic numbering of page elements Example: http://pubpages.unh.edu/~ehepp/CSS/MarkTwain.html (without formatting) http://pubpages.unh.edu/~ehepp/CSS/MarkTwain8.html (with formatting) Style sheet: http://pubpages.unh.edu/~ehepp/CSS/mark8.html jZwZ ZZZw L w12 -T0 T0 T0)V CSS - definitions$ +Style sheet File consisting of a number of CSS rules Cascade How style preferences are combined together when they appear to conflict Rule Defines what the HTML should look like and how it should behave in the window Example: All

tags should be presented with a green background and blue text  )!J!!  )JNJ 2CSS  parts of a CSS rule$selector {property: value;} Example: p {color: blue;} selector  3 types of CSS selectors: XHTML selector  indicates a specific mark-up element like <h2> or <p> Class selector  can be applied to any XHTML tag as you wish; eg. <p class =  bluecolor > ID selector  like class selectors, but usually applied once on the page to a particular XHTML tag for use with a JavaScript function; eg. <div id =  topofpage > declaration  {property: value;} property  attribute to be defined value  defines property!P!P!P!P%PD  KP!P<KP'%D!  <P  ` 8CSS  where to put the rulesIn an external document: These are called external or linked Used to affect a complete Web presentation Style changes only need to be made in one place, rather than in each individual document Produces a presentation with a consistent look and feel Create separate file with .css extension Use basic text editor like Notepad or Wordpad (Windows environment), SimpleText or TextEdit (Mac environment), or pico (UNIX environment) OR Use style sheet editor or some XHTML editors include support for CSS File needs to be located within public_html Good idea to place all style sheets in sub-directory of public_html called either CSS or STYLES Change permissions on .css file to be world readable; change permissions on style sheet sub-directory to be world executableHZ ZZ 1&| 9 4c @CSS  where to put rules (con t)$!Example: Basic style sheet: /* mystyles.css */ /* created for CS403-10 */ body { font-family: Arial; color: black; background-color: red; } h1 { color: green; } Linking the style sheet to XHTML page: <head><title>...</title> <link type =  text/css rel =  stylesheet href =  CSS/mystyles.css > </head> f ; 'ht      HCSS  where to put the rules (con t)$% xIn the head of the XHTML document: These are called embedded or internal Rules are in the same file as HTML so editing is easier at first  good for development purposes (plan to migrate rules to separate files later) Good for for rules that apply only to a specific page (this helps keep size of global style sheet relatively small) Use the <style> tag in the head of the document Example: <head><title>...</title> <style type =  text/css > <! - - h2 { color: red; } address { font-family: Verdana, sans-serif; font-size: smaller; } - -> </style> </head> <body> f#PdPPP#d   HCSS  where to put the rules (con t)$% HIn an XHTML tag: These are called inline Inline CSS is very similar to using XHTML presentation attributes  it only affects that single instance of the element Easier to add to your page as you go along; harder to maintain since they are scattered throughout your source code Style attribute can be set on nearly any XHTML tag that is displayed by the browser Use when you want to over-ride embedded or linked style sheets Does not contain selector  tag itself serves as selector Example: <table style =  font-family: Arial; font-size: large; > zPP8!PP8   *CSS  composing rules$Combining rules If rules share same selector you can combine them: p { color: blue; } p { font-size: large; } can be combined as: p { color: blue; font-size: large; } or: p { color: blue; font-size: large; }x!32)( *CSS  composing rulesCombining rules If rules share same declaration, you can combine them: p { color: blue; } address { color: blue; } can be combined as: p, address { color: blue; } \!74@CSS  representing colors in CSS$!(Straightforward hex notation: body { color: #CC66FF; } Short hex: body { color: #C6F; } rgb function: Provide a decimal triplet of rgb numbers (0  255) separated by commas: body { color: rgb(204,102,255); } OR Provide percentages: body { color rgb(80%, 40%, 100%); } P!P P!PPHP(!PP'!P H%%,[(PCSS  representing colors in CSS (con t))%"~Color names  there are 16 color names supported by browsers: @?*CSS  classes and ids$In addition to setting styles based on HTML elements, you can also have rules based on 2 optional HTML attributes: class and id Class Used to define a related group of HTML elements on a page Elements within a class can be of any type To create it, just name it: <p class =  abc > ... </p> Once you have defined a class in your HTML you can use it as a class selector in CSS; class selectors are indicated by a . before the name: .abc {color: blue; } You can combine an element selector with a class selector; then only those elements that are members of the class are selected: p.abc { font-family: Arial; } PP!PP!PP!PPy>:CSS  classes and ids (con t)id Similar to the class attribute but more restricted Must be unique  only one tag on a page can have a given id Id s attribute value must begin with a letter: Example: <a href =  next.html id =  next >Next Page</a> In CSS rule: #next { font-size: large }x0!2!0, N6CSS  using class selectors$LCombine class selectors with <div> tags to designate specific sections of a page that should receive special styling: ...<body> <div class =  headofpage > <h1>Great Places to Eat in Portsmouth</h1>... </div>... <div class =  footofpage > <hr /> &copy; Ellen Hepp, 2004. ... </div></body></html>4v!v, I <8'lCSS  using class selectors - <div> and <span> (con t)730<div> tag Divides your document into separate, distinct, sections Can be used strictly as organizational tool without formatting but becomes more effective if you add class attribute to label the division <span> tag Delimits a portion of xhtml content Allows you to change a portion of text Browsers treat span as another physical (content-based) style tag but default is to leave it alone E.g., <span style =  font-size: larger; >Hello!</span> (O Reilly)b     FCSS  using class selectors (con t)$  In CSS file: /* Top Heading of Page /* .headofpage { color: white; background-color: maroon; font-family: Verdana, sans-serif; } /* Bottom of Page */ .footofpage { color: green; background-color: white; font-family:  Times New Roman , serif; }0 ! ,( m ]BCSS  pseudo-classes and elements$"Pseudo-class selector is based on a set of predefined qualities that an HTML element can have: :active :hover :link :visited Can stand alone but is usually used with a type selector a:link {color: red; }d_ZZ9Z!Z_9RCSS  pseudo-classes and elements (con t)*&#Example: Typical body tag in HTML <body bgcolor =  #FFFFCC background =  mybg.jpg text =  #000066 link =  #FF0000 vlink =  #999999 alink =  #FFCC99 > To accomplish same thing using CSS (XHTML) body { background-color: #FFFFCC; background-image: url(mybg.jpg); color: #000066; } a:link { color: #FF0000; } a:visited { color: #999999; } a:active { color: #FFCC99; } |"y!+!"x+($ q  ^CSS  simple CSS properties for text formatting$0+Color  sets the foreground color of the element: h1 {color: blue; } Background-color  sets the background color body { background-color: purple; } Font-size  (easy method  think tee-shirt sizes) give value relative to the user s default text size Default text size has value of  normal Larger sizes go up in increments of about 20% xx-small * x-small * small * normal * large * x-large * xx-large Can use relative values larger and smaller Examples: dl { font-size: larger; } em { font-size: xx-large; } 2Z!Z-Z$!ZfZV ZA!Z5 Z7!Z Z " Z2-$fV@          7/CSS - simple CSS properties for text formatting0,vFont-family  can specify specific font (Arial) and/or generic font family (sans-serif) If a font is specified that is not installed on user s machine, browser will use default font if other options are not listed Examples: body {font-family: Arial, sans-serif; } h1 { font-family:  Courier New , monospace; } h2 { font-family:  Times New Roman , serif; } 5 generic font families in CSS are: serif * sans-serif * cursive * fantasy * monospace P!P$P3!PP$3,)  /CSS - simple CSS properties for text formatting0,pOther font properties: font-weight (makes text bolder or lighter) Specify values 100 to 900 (normal is 400) in increments of 100 Specify bold (700), bolder (+100), lighter (-100) font-variant (creates  small caps effect) Specify normal, small-caps font-style (creates italic or slanted effect) Specify italic, normal, oblique line-height (sets the height of the line but not text size) Specify normal, measurement, multiplier, percentage  +r+. <4 r   #     04, /CSS - simple CSS properties for text formatting0,font shorthand property Shorthand property has 2 effects: sets properties to default values and assigns specified values to designated properties Shorthand for: font-family, font-size, font-weight, font-variant, font-style, and line-height Format: selector { font: style variant weight size family } note: values for weight, size, and family must be in that order! Example: body { font: oblique small-caps small Verdana } ZZZ Z0Z Z 0 /CSS - simple CSS properties for text formatting0,Special text effects: selector { text-decoration: blink line-through overline underline none } Removing underlines on hyperlinks: a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } Za!Z#ZU!ZZ`#UPQA "!NCSS  backgrounds and background colors(&$^background-color property: Similar to bgcolor attribute in html Gives you more flexibility than bgcolor because it lets you change the background for specific parts of the page Values the background-color can take: Color names, rgb codes, triplets of numbers, or triplets of percentages transparent (default)  whatever background already exists will be shown inherit  setting a value equal to that of the containing block s valueFZZZ>&3}"^CSS  backgrounds and background colors (con t)0&,)background-image property Similar to background attribute in <body> tag Values for the background-image property: Image address url url will be calculated relative to wherever the rule appears Example: Selector { background-image: url(bg.gif); } Or Selector { background-image: url( bg.gif ); } Or Selector { background-image: url( bg.gif ); }^XF!X b` % & %^CSS  backgrounds and background colors (con t)0&,)background-repeat property Specifies whether or not the background image tiles across the screen Values for the background-repeat property: repeat (default) repeat-x repeat-y no-repeat inherit :q6q6&^CSS  backgrounds and background colors (con t)0&,)background-position property Use to change the location of the initial image Consists of two size values or percentages (one for horizontal and one for vertical) OR if only one value is given, it sets the horizontal position Values: A number and a unit (10px or 2em) In CSS 1em is defined as the total height of the current font in use px stands for pixel A percentage (50% 75%) Word values: top, bottom, left, right, center vZ"ZYZEZZ"YE  PX(^CSS  backgrounds and background colors (con t)0&,)|background-attachment property Images normally scroll with rest of the page but you can modify so that image does not move Values: scroll (default) fixed  image does not move relative to the original position of the page inherit  value does not inherit from containing block unless value is explicitly set to inherit@dd)^CSS  backgrounds and background colors (con t)0&,)bbackground shorthand property Allows you to set several properties at once List the values you want (in any order) as the value for background (values you do not set will be set to their default values) Example: body { color: white; background: url( bg.gif ) repeat-y fixed top left red; } J^!^ '-!6CSS  alignment and spacing$ztext-align property  defines the way in which text lines up with the left or right margins Values: center (centers the content) justify (justifies text on both sides) left (aligns content on the left) right (aligns content on the right) Example: h1 { font-family: Verdana, sans-serif; text-align: center; } dZZ ZB!ZZd B."FCSS  alignment and spacing (con t)$ text-indent property - indents the first line of an element by adding blank space (usually seen with

tags) Example: p {text-indent: 3em } Values: measurement (eg., 5em or 15px) negative measurement (sets a hanging indent) Percentage (value based on size of containing box)^y!yp/#FCSS  alignment and spacing (con t)$ vertical-align property  most useful for creating superscripts or subscripts Used only for inline elements OR table cells Values: baseline, bottom, middle, sub, super, text-top, text-bottom, top, or some measurement (+ or -) or percentage (+ or -) Example: .power { vertical-align: super; font-size: smaller; } Use in html by setting class attribute: x<span class =  power >2</span> = 64 !  9(%  0$FCSS  alignment and spacing (con t)$ white-space property  allows control of whitespace condensation and word wrapping Values: normal (normal word wrapping and whitespace condensation) nowrap (condenses whitespace but does not wrap lines) pre (wraps lines as in the source) Example: .poem { white-space: pre; } Use in html by setting class attribute: <div class =  poem > ... </div> [ZZ Z!ZH!ZZ[ ( P) J  2%2CSS  how cascading works$Cascade determines what rules apply: mystyles.css: body { background-color: white; color: black; } h1 { background-color: blue;} XHTML document: & <head><title> & </title> <link type =  text/css rel =  stylesheet href =  mystyles.css > <style type =  text/css > .myclass { background-color: red; } h1 { color: yellow; } </style></head> <body> <h1 style =  background-color: green; >Hello <em class =  myclass >World</em>!</h1> </body></html> See result at: http://pubpages.unh.edu/~ehepp/CSS/CSSexperiment.html4PZ!PPP!PE!P4Z  E&   w  &.T0/4#$'*+13 4   0` 3333ff3` 3333f33ff3` "3333̙ff3` Kf3̙` &e̙3g3f` f333̙po7` ___f3̙;/f9` ff3Lm` ff3LmNLm>?" dd@*?nAd@q<nAqFLK#M n?" dd@   @@``PR    M`2p>> &(    H? ?" `}  X Click to edit Master title style!!  @  H? ?" `  RClick to edit Master text styles Second level Third level Fourth level Fifth level!    S    6 #" `] `}  ^*     6䑺 #" ``   d*       6 #" `] `}  d*       C @ABCDE FjJ@3"0`B  s *DjJ"0 `0H  0޽h ? ___f3̙;/f9___PPT10i.  +D=' y= @B + Edge 0  (    Hj? ?"@  X Click to edit Master title style!!    Htm? ?"   [#Click to edit Master subtitle style$$    6,p #" `] `}  ^*     6u #" `]}   d*       6{ #" `] `}  d*       C @ABCDE F8c@3"@B  s *DjJ"  ,$0H  0޽h ? ___f3̙;/f9___PPT10i.  +ityD=' y= @B +0 0 *(     0̫ P    X*   0     Z* d  c $ ?    00  0  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S  6 _P   X*   6L _   Z* H  0޽h ? 3380___PPT10. ' (    0# P   # X*   0#    # Z*   6# _P  # X*   6p# _  # Z* H  0޽h ? 3380___PPT10._rC0  (  r  S     H  0޽h ? 33___PPT10i.0 +D=' y= @B + 0 W(  r  S \ `}     B  ?" `p %CIntroduced in late 1996 Provides a way to separate presentation from structure HTML Originally not intended to deliver graphic content and multimedia Designed to allow authors to define structure of document CSS Allows greater control of Web page design Works with existing HTML and XHTML tags to tell them how to behave U}%m%%3  }mL#H  0޽h ? ___f3̙;/f9___PPT10i._H+D=' y= @B + 0 @0(  x  c $ `}   x  c $P 0  H  0޽h ? 33___PPT10i.+D=' y= @B + 0 P0(  x  c $ `}   x  c $( `  H  0޽h ? 33___PPT10i.Q +D=' y= @B + 0 `*(  x  c $@h `}   r  S i   H  0޽h ? 33___PPT10i..+D=' y= @B + 0 p0(  x  c $tX `}   x  c $LY0P``  H  0޽h ? 33___PPT10i.Lj+D=' y= @B + 0  0(   x  c $u `}   x  c $8v `  H  0޽h ? 33___PPT10i.@'-+D=' y= @B + 0 (*(  (x ( c $ `}   r ( S d` 0   H ( 0޽h ? 33___PPT10i.PvQ+D=' y= @B + 0 ,*(  ,x , c $ `}   r , S ಒ   H , 0޽h ? 33___PPT10i.0+D=' y= @B + 0 8*(  8x 8 c $@ `}   r 8 S 0`   H 8 0޽h ? 33___PPT10i. +D=' y= @B +} 0 0$(  0r 0 S `Ӓ `   r 0 S Ԓ`  H 0 0޽h ? 33___PPT10i.@+D=' y= @B +} 0 4$(  4r 4 S d `   r 4 S <0`  H 4 0޽h ? 33___PPT10i.g+D=' y= @B +I 0 `X<(  <x < c $  `}   x < c $  `    < B ?"6@ NNN?N 7  < B ?"6@ NNN?N @ 2  < B ?"6@ NNN?N` p  < B ?"6@ NNN?N` p H < 0޽h ? 33___PPT10i.H+D=' y= @B + 0 @0(  @x @ c $@  `}   x @ c $  `   H @ 0޽h ? 33___PPT10i.+D=' y= @B + 0 D0(  Dx D c $h  `}   x D c $@!  `   H D 0޽h ? 33___PPT10i.sL+D=' y= @B + 0   (H(  Hx H c $<3  `}   x H c $4 0 `   n @` (H #"2&LLLLLLLL   H B>  ?"6@ NNN?N ` Pyellow @` H BG  ?"6@ NNN?N@ ` Pmaroon @` H BdP  ?"6@ NNN?N  Owhite @` H BZ  ?"6@ NNN?N@  Nlime @` H BlK  ?"6@ NNN?N |   Nteal @` H Bk  ?"6@ NNN?N@|  Ogreen @` H Bt  ?"6@ NNN?N 0 |  Psilver @` H B ~  ?"6@ NNN?N@0 |  Ngray @` H Bho  ?"6@ NNN?N 0  Mred @`  H Bl  ?"6@ NNN?N@ 0  Qfuchsia @`  H Bt  ?"6@ NNN?N   Ppurple @`  H B|  ?"6@ NNN?N@  Nblue @`  H B  ?"6@ NNN?N L Oolive @`  H B  ?"6@ NNN?N@L  Oblack @`  H B  ?"6@ NNN?N L Nnavy @` H B  ?"6@ NNN?N@ L Naqua @`B H <o ?"0@NNN?N@B H 61 ?"0@NNN?N@LLB H 61 ?"0@NNN?N@B H 61 ?"0@NNN?N@  B H 61 ?"0@NNN?N@0 0 B H 61 ?"0@NNN?N@| | B H 61 ?"0@NNN?N@  B H 61 ?"0@NNN?N@B  H <o ?"0@NNN?N@``B !H <o ?"0@NNN?N@@`B "H 61 ?"0@NNN?N  `B #H <o ?"0@NNN?N`H H 0޽h ? 33___PPT10i.Rp+D=' y= @B +} 0 d$(  dr d S m `P0   r d S x 0`   H d 0޽h ? 33___PPT10i. 'n+D=' y= @B + 0 h0(  hx h c $$  `}   x h c $  p   H h 0޽h ? 33___PPT10i.@Cwp+D=' y= @B + 0 l0(  lx l c $  `}   x l c $  `   H l 0޽h ? 33___PPT10i.+D=' y= @B +} 0 $(  r  S ,! `}  ! r  S ! ` ! H  0޽h ? ___f3̙;/f9___PPT10i._ tu+D=' y= @B + 0 t0(  tx t c $! `}  ! x t c $|! ` ! H t 0޽h ? 33___PPT10i.a+D=' y= @B + 0 x0(  xx x c $h! `}  ! x x c $@! ` ! H x 0޽h ? 33___PPT10i.p+D=' y= @B + 0 |0(  |x | c $,/! `}  ! x | c $@`` ! H | 0޽h ? 33___PPT10i.+D=' y= @B + 0 *(  x  c $,?! `}  ! r  S *!  ` ! H  0޽h ? 33___PPT10i.pJ+D=' y= @B + 0 0(  x  c $K! `}  ! x  c $L! ` ! H  0޽h ? 33___PPT10i..+D=' y= @B + 0  *(  x  c $\]! `}  ! r  S 4^!  ! H  0޽h ? 33___PPT10i.0ў+D=' y= @B + 0 *(  x  c $h! `}  ! r  S h! ` ! H  0޽h ? 33___PPT10i.u+D=' y= @B +  0 00(  x  c $}! `}  ! x  c $~! ` ! H  0޽h ? 33___PPT10i. 3+D=' y= @B + 0 @0(  x  c $! `}  ! x  c $! ` ! H  0޽h ? 33___PPT10i.`k+D=' y= @B + 0 `*(  r  S !`  ! x  c $Ę! ` ! H  0޽h ? 33___PPT10i.ЧM+D=' y= @B + 0 *(  r  S !``}  ! x  c $! ` ! H  0޽h ? 33___PPT10i.+D=' y= @B +} 0 $(  r  S !P   ! r  S x!`P ! H  0޽h ? 33___PPT10i.p<%+D=' y= @B + 0 *(  r  S d.`  ! x  c $! `  H  0޽h ? 33___PPT10i.+D=' y= @B + 0 *(  r  S T!   ! x  c $,! ` ! H  0޽h ? 33___PPT10i.0oG+D=' y= @B + 0 0(  x  c $! `}  ! x  c $L! ` ! H  0޽h ? 33___PPT10i.z+D=' y= @B + 0 0(  x  c $! `}  ! x  c $! ` ! H  0޽h ? 33___PPT10i.{0+D=' y= @B + 0  *(  x  c $x! `}  ! r  S ! ! H  0޽h ? 33___PPT10i.|P+D=' y= @B + 0 0*(  x  c $4 # `}  # r  S  #0 # H  0޽h ? 33___PPT10i.~g+D=' y= @B +  0 P0(  x  c $\# `}  # x  c $4#0 ` # H  0޽h ? 33___PPT10i.ņ+D=' y= @B + 0 `X(  XX X C     # X S (2#  0  # Media =  media-type Can link style sheets for specific types of output devices (eg. Hand-held wireless devices, printers)  use media= media-type attribute where default is  screen (visual, on-screen, display) Other values of media-type are : printer, braille, aural (speech synthesis), all Rel =  relationship Realtionship is stylesheet Type =  content-type Content-type is the styling language which is text/css Href =  url Location of stylesheet (do not link to someone else s) Q!  K "H X 0޽h ? 3380___PPT10.E8 0 p\(  \X \ C      \ S d  0    H \ 0޽h ? 3380___PPT10.0 LDp(  pX p C     #D p S H#  0  # The <div> tag: <div> tag divides your document into separate, distinct sections. It can be used as an organizational tool, without any kind of formatting, but it becomes more effective when used with the id and class attributes to label the divisions. Using CSS you can define different distinct display styles for those portions of your document; eg. Header, footer, abstract, body, conclusion, etc. (O Reilly) Other ways to control the alignment and flow of text include the paragraph <p> and break <br /> tags The <span> tag <span> tag delimits a portion of content (constrained by the normal tag-nesting rules). Browsers treat the tag as another physical or content-based style tag except that the default meaning of the tag is to leave the text alone. It allows you to apply style to an arbitrary section of text. (deprecated)>]< H p 0޽h ? 3380___PPT10..^b0 Pr(  X  C     #  S Y#  0  # t"Bgcolor attribute can only be set on <body>, <table>, <tr>, <th>, <td> tags Inherit is the same as setting a value equal to that of the containing block s value, whereas transparent just makes the background so that it can be seen through. It is the difference between painting the ceiling blue and installing a window on the roof  if the sky is blue anyway, they will look the same. (From SAMS CSS)60SH  0޽h ? 3380___PPT10.Pw0 WOp(  X  C     #O  S 0j#  0  # YIf rule is contained in an external style sheet that is located at: http://pubpages.unh.edu/~ehepp/CSS/mystyles.css then bg.gif will be found in the CSS directory. If the rule were part of an embedded style sheet or inline style attribute on the index.html page, then the image bg.gif would be found in public_html (same directory as index.html)tK(w   H  0޽h ? 3380___PPT10.PI,0 ~(  X  C     #~  S w#  0  # Repeat  tile horizontally and vertically Repeat-x  only tile along the x-axis Repeat-y  only tile along the y-axis No-repeat  do not tile  display the image only once Inherit  inherit the background-repeat value of the containing block5H  0޽h ? 3380___PPT10. .0 ~(  X  C     #~  S W#  0  # VALUE: Size size Percent% percent% Top Left Right Bottom Center Top left Top center Top right Left center Center center Center right Bottom left Bottom center Bottom right P a(H  0޽h ? 3380___PPT10. z0 ( (  X  C     #   S #  0  #  Line-height: initially determined by the font-size property s value; a font that is 12pt tall will have a line height of 12pt in most cases; Line-height property allows you to adjust the height of the line by using one of the values; normal (use default line height) measurement (sets the line height to a particular value) multiplier (number without units like 2 or 1.5  gets multiplied by the font-size value) percentage (150% is same as multiplier of 1.5)H  0޽h ? 3380___PPT10.q!P1$0 TL@(  X  C     #L  S #  0  # ^Whitespace condensation  browsers condense all whitespace and consider it as if there is only one space when rendering page Word wrapping  when content exceeds the width of the containing box, browser continues content on the next line Nowrap value  no automatic line inserts  can lead to horizontal scrolling (similar to old <nobr /> tag) Pre  very similar to <pre> tag; also sets the font to a monospace font (courier new)l & WC H  0޽h ? 3380___PPT10.~@^%0 $`(  X  C     #  S ܨ#  0  # $Hello World! This is an experiment to determine how rules cascade. Box behiind Hello World is green, red, and green; box behind this... Is blue. Background of page is white; h1 text is all yellow. (see http://pubpages.unh.edu/~ehepp/CSS/CSSexperiment.html (Mystyles.css is in same directory)0%8>H. H  0޽h ? 3380___PPT10.>0 TLp(  X  C     #L  S #  0  # nA:link and a:visited are mutually exclusive A {color: yellow} will cause all links, even <a name =  topofpage > to be yellow (usually do not want this so specify a:link and a:visited)\ P 5 H  0޽h ? 3380___PPT10.\~rpq @fV<^Ee K {M"D`!v&)+V[#.0_335cf#I8:k=?lB{r'v & z91Oh+'0H hp    $08 CSS Cascading Style SheetsPreferred CustomerEdgeRaymond Greenlaw16Microsoft PowerPoint@wY@@(g Gg  (  y--$xx--'@Garamond-.  2 s1>."System-̙-- % % --'̙--%"EE--'@Garamond-. f3 2 (CSS .-@Garamond-. f3 2 ($>.-@Garamond-. f3(2 (-Cascading Style Sheets.-՜.+,D՜.+,    7On-screen Show{'  ,Arial GaramondTimes New Roman WingdingsEdgeCSS Cascading Style Sheets CSS - introCSS intro contCSS - what it can doCSS what it can doCSS what it can doCSS - definitionsCSS parts of a CSS ruleCSS where to put the rules!CSS where to put rules (cont)%CSS where to put the rules (cont)%CSS where to put the rules (cont)CSS composing rulesCSS composing rules!CSS representing colors in CSS)CSS representing colors in CSS (cont)CSS classes and idsCSS classes and ids (cont)CSS using class selectors7CSS using class selectors -

and (cont)$CSS using class selectors (cont)"CSS pseudo-classes and elements*CSS pseudo-classes and elements (cont)0CSS simple CSS properties for text formatting0CSS - simple CSS properties for text formatting0CSS - simple CSS properties for text formatting0CSS - simple CSS properties for text formatting0CSS - simple CSS properties for text formatting(CSS backgrounds and background colors0CSS backgrounds and background colors (cont)0CSS backgrounds and background colors (cont)0CSS backgrounds and background colors (cont)0CSS backgrounds and background colors (cont)0CSS backgrounds and background colors (cont)CSS alignment and spacing$CSS alignment and spacing (cont)$CSS alignment and spacing (cont)$CSS alignment and spacing (cont)CSS how cascading works  Fonts UsedDesign Template Slide Titles' 8@ _PID_HLINKSAh6http://pubpages.unh.edu/~ehepp/CSS/CSSexperiment.html2http://pubpages.unh.edu/~ehepp/CSS/MarkTwain.html3http://pubpages.unh.edu/~ehepp/CSS/MarkTwain8.html.http://pubpages.unh.edu/~ehepp/CSS/mark8.html(_zRaymond GreenlawRaymond Greenlaw  !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~Root EntrydO)Current UserSummaryInformation(PowerPoint Document({DocumentSummaryInformation8