ࡱ> n^@m_.կPNG  IHDR)\nsRGB pHYsod`PLTE>>>&&&44455**::??00$$İհհճ۳۳۳ѲѲѱİڰڶıʱʶĴķijܳܳܳĶĶĶGvIٴճ횉գ0ڻմ9ۨ]z=B$eeeeefDz°/&6.o2R'-걫HM<+r̍Jk,(.?Ym~ syrv0{k(̺,}bf[O6-zm1].3]5]^C_mwںpt_ ",6Vc5ͪ>븮U/.)Mۃ6t/UnɴڿŒvS^51ͱ,"έDžrǽp˳و5'Uϰޱ.!v>򳦻巚ڵ+ǝ]ձ-...鲹鳾<pߢâ,[tR6('LŤLkY"0묮Ɨ.GtE V $DM'teub}]uJ[=M4&ޥsw?e9DKF?ⷶ־?Ჹoz2&R;ee f "=wYlfq8%e 'sA2z ^,б.> dn&ts]v@|}VeN?$PA}tDHă7Vwںn˗yZmؗi4lGplQx8&_/np(C;µ=ѲѳycSѧGx~߰ղeۦ޶ԥ90հژذn³&"7ϜA2;𱹴ʷL.x4Э<إԮmsgޗ~͙$ϗ\K$'2.2..2.22.2.22.2..2.2..2.22.2.22.2..2.2..2.22.2..2.2..2.22.2.22.2..2.2..2.22.2.22.2..2.22.2.22.2..2.2..2.22.2.22.2..2.2..2.22.2. f3{,IENDB`>( / 00DTimes New RomanTTHܖ 0ܖDArialNew RomanTTHܖ 0ܖ DWingdingsRomanTTHܖ 0ܖ0DCourier NewmanTTHܖ 0ܖ1 C .  @n?" dd@  @@`` d+*""   & ' OPQRS3T]^`afghijn qrstuvwxyz{|}~O$$$b$^@m_.կ 0e0e A@A5%8c8c     ?1d0u0@Ty2 NP'p<'p@A)BCD|E?0 3333@80 1  7R ʚ;

51

White text on a black background!

Z,j>(CSS  General Format"HTML tag" { "CSS Property" : "Value" ; }

We chose the HTML element we wanted to manipulate. - p{ : ; } Then we chose the CSS attribute color. - p { color: ; } Next we chose the font color to be white. - p { color: white; }

51

We choose the HTML element Body - body { : ; } Then we chose the CSS attribute. - body { background-color: ; } Next we chose the background color to be black. - body { background-color: black; } r0 5/8" +Lk?@CSS  General Format and example!!()

51

Internal CSS

This page uses internal CSS. Using the style tag we are able to modify the appearance of HTML elements.

*Z*$V-Some pre-defined colorsHere are some of the colors and the predefined hexadecimal number Black 000000 Cyan 00FFFF Gray 808080 Teal 008080 Silver C0C0C0 Green 008000 White FFFFFF Olive 808000 Maroon 800000 Lime 00FF00 Red FF0000 Yellow FFFF00 Magenta FF00FF Purple 800080 Blue 0000FF Navy 000080"CZ/Text-level Styles [0Generic text-level stylesYou can predefine how you want a set of text to be displayed instead of the default given. Use tag: Example: text to be different In the style section, you define what you want for the span tag ie. span { font-size:150%; font-family=Verdana; color:maroon; }Lk-D<k-D<,. qF Internal CSS Exercise: ex6b.html use internal style definitions, construct the following page at the bottom. You need to modify or stylize the following: <p> - text in maroon <h2> - text in blue <b> - text in black (hint your default will be maroon based on the  paragraph setting <body> - gray.yPPy`5Types of Style - ClassesRecall that as styles are defined as element_name { property1: value; property2: value;} example: p {font-size: 150%; color: blue;} What if you want to have different types of  paragraphs ? You create  subclasses and define them as follows: element.classname { property1: value; property2: value;} example: p.bigblue {font-size: 150%; color: blue;} p.smallred {font-size; 50%; color: red;} &5+o& )+o33$ 33P& 2 !  a6Types of Style - Classes788t4 %= 3c8"Calling a  class 78Z8t4 %= 3  This will be normal This line will be in italic and blue this is normal bold
this is smaller bold
this is BIG BOLDER XZ1 b2 1!. d9External Cascading Style Sheet/When creating web pages, it is preferable to keep the style on a separate sheet Placing CSS in a separate file allows the web designer to completely differentiate between content(HTML) and design(CSS). It keeps your website design and content separate. It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag. You can make drastic changes to your web pages with just a few changes in a single CSS file. 00,  il@ Tbody { background-color: gray; } p { color: blue; } h3 { color: red; } UZU <html> <head> <link rel="stylesheet type="text/css" href= "myStyle.css" /> </head> <body> <h3> A Red Header </h3> <p>This paragraph has a blue font. The background color of this page is gray because we changed it with CSS! </p> </body> </html> 4Z>b   nB@Fun and Goodies  Pseudo ClassesProbably the coolest thing about CSS is the ability to add effects to your anchor tags, otherwise known as hyperlinks A link has four different states that it can be in that can be customized. link - this is a link that has not been used, nor is a mouse pointer hovering over it visited - this is a link that has been used before, but has no mouse on it hover - this is a link currently has a mouse pointer hovering over it/on it active - this is a link that is in the process of being clicked nPSEH<oCHow to define links?a:STATE'S NAME { attribute: value; } Style definition: a:link { color: blue; } a:visited { color: red; } a:hover { color: green; } HTML call: This is a special CSS LinkZ 0 ##pD How to remove default underline?ja:(STATE'S NAME) { attribute: value; } Style definition: a:link { color: blue; text-decoration: none; } a:visited { color: red; text-decoration: none; } a:hover { color: green; } More fancy a:link { text-decoration: none; color: gray; } a:visited { text-decoration: none; color: gray;} a:hover { text-decoration: none; color: maroon; font-weight: bolder; } NkQ~ 1) ) ) (ArE<Exercise 7  Modify exercise 5Modify your exercise 5. Copy the whole directory ex5 to ex7 directory Include an external cascading style sheet in both home.html and projects.html Modify the link so that the links have no underlines and when you  hover the links, it changes color. See sample code.  ,y  z/0'W Y htuvwxyz{|}~S   0` 3Wo+ff3̙` 33f33̙3` ! <yxG`wglZff` yE[AQpff3k` 31m̙3f` 3333̙3` O~̙Zƺ` ffff̙` ǵfZƺ` fff3fZ̙>?" dd@*?tZd@nK `7@d` n?" dd@   @@``PR    @ ` `0p>> ~v` (  T `   "`   6"  * \ }`  "}`  6P"}` * B  s *DjJ"`,$D  0  6 "@`  T Click to edit Master title style! !$  0 "@`  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S  0 #" `b@   H*0    0ƽ #" ``@   J* 0    0˽ "``  J* 0  `B  s *D"  H  0޽h ? fff3fZ̙___PPT10i. 3l+D='  = @B + HTML   0   p (   T   "  6"P  * <\   "  <P"p *   < "0 `s * hB  s *Dp" p \ Pp  "Pp   6"pPp * B   s *D"p,$ 0  6 "`@  T Click to edit Master title style! !  6 " `@   W#Click to edit Master subtitle style$ $  0 #" `b?  H*0    0x #" ``Aa   J* 0    0\2  #" ```  J* 0  H  0޽h ? fff3fZ̙80___PPT10. 3l 0 z``(  ` ` 0J2  P   2  R*    ` 0    2  T*   d ` c $ ?  2  ` 0  @ 2  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S ` 6R2  `P   R*    ` 6DW2  `  2  T*   H ` 0޽h ? ̙3380___PPT10.{p  0   (  x  c $ 2  `@ 2  H  0޽h ? ̙33   0 t<(  t~ t s *Lh2 @`  2  ~ t s *h2 @` 2  H t 0޽h ? ̙33   0 <(  ~  s *m2 @`  2  ~  s *w2 @` 2  H  0޽h ? ̙33   0 `<(  ~  s *X2 @`  2  ~  s *2 @` 2  H  0޽h ? ̙33$   0 $(  r  S L@`   r  S $@`  H  0޽h ? fff3fZ̙80___PPT10.$pyҫ$   0 $(  r  S \2 @`  2  r  S 2 @` 2  H  0޽h ? fff3fZ̙80___PPT10.$0   0 0(  x  c $L2 @`  2  x  c $ī2 @` 2  H  0޽h ? fff3fZ̙80___PPT10.$   0 <(  ~  s *02 @`  2  ~  s *02 @ 2  H  0޽h ? ̙33   0 _W0 2(  r  S 2 @`  2  = @`m 2 #"*@`m 2   Z2  ??h`m n&Makes solid colored block around text.'' @`  Z2  ??hm }Name color, #hexcolor  @`  Z2  ??@hm Vbackground-color @`  Z2  ??c `h @ @`  Z ??c h ~Named color, #hexcolor @`  Z  ??@c h Kcolor @`   Z ??# `c  x0Bolder is equivalent to what .. creates11 @`  Z ??# c  cBold, bolder, lighter, normal @`  Z' ??@# c  Q font-weight   @`   Z0 ??`#  @ @`   Zh2 ??#  ]Normal, italic, oblique @`   ZB ??@#  P font-style   @`    Z D ??C` w/Percent relative to font size of parent element00 @`   ZPN ??C MPercent @`  ZN ??@C O font-size   @`0  Zh ??`C 0Use quotations for multiple names: "Courier New"<1#  @`  ZXb ??C P Named font   @`  Z(z ??@C Q font-family   @`B  Zo ??@`B  T1 ??@C`CB  T1 ??@`B  T1 ??@# `# B  T1 ??@c `c B  T1 ??@h`hB  Zo ??@m`mB  Zo ??@@mB  T1 ??mB   T1 ??mB ! Zo ??``mH  0޽h ? fff3fZ̙80___PPT10.u!r$   0 @$(  r  S 2 @`  2  r  S 2 @` 2  H  0޽h ? fff3fZ̙80___PPT10.v!t|f   0 P f(   r   S @`   r   S `@`   :   3 A@ H   0޽h ? fff3fZ̙80___PPT10.e%@mn.   0 .(  2   `?? P r  S  @`   r  S p@`  B  # lD1?? `@   ` ??p W FPlaced Period here H  0޽h ? fff3fZ̙80___PPT10.!0 B$   0 $(  r  S @`   r  S @`  H  0޽h ? fff3fZ̙80___PPT10.!0b_   0  (  r  S P֭@`   x  c $֭@   r  S ׭   H  0޽h ? fff3fZ̙80___PPT10.!0 ^$   0 $(  r  S (@`   r  S @`  H  0޽h ? fff3fZ̙80___PPT10.!_q   0 F> (  r  S @  6  r  S |P     T6  ??0`  [ myStyle.css 2     TT6  ??p ? ex6b.html 2 H  0޽h ? fff3fZ̙80___PPT10.?%$   0 $(  r  S P26 @`  6  r  S |36 @` 6  H  0޽h ? fff3fZ̙80___PPT10.B%ܤ$   0  $(  r  S F6 @`  6  r  S `H6 @` 6  H  0޽h ? fff3fZ̙80___PPT10.C%*0   0 00(  x  c $ [6 @`  6  x  c $[6 @` 6  H  0޽h ? fff3fZ̙80___PPT10.C%*   0 @0(  x  c $pn6 @`  6  x  c $o6 @` 6  H  0޽h ? fff3fZ̙___PPT10i.A%3+D='  = @B + 0 x4(  xd x c $`   2  x s *p2 ` @  2   H x 0޽h ? ̙33- 0 4(  d  c $`   2   s *\2 ` @  2   H  0޽h ? ̙33. 0  4(  d  c $`   2   s *2 ` @  2   H  0޽h ? ̙33< 0 p4(  d  c $`   2   s *2 ` @  2   H  0޽h ? ̙33  0 `((  (X ( C `   2  ( S e2 ` @  2   H ( 0޽h ? ̙3380___PPT10.iLP = 0 p,(  ,X , C `   2  , S 2 ` @  2   H , 0޽h ? ̙3380___PPT10.iL > 0 0(  0X 0 C `   2  0 S 2 ` @  2   H 0 0޽h ? ̙3380___PPT10.iL ? 0 4(  4X 4 C `   2  4 S h2 ` @  2   H 4 0޽h ? ̙3380___PPT10.iL0 / 0 8(  8X 8 C `   2  8 S X2 ` @  2   H 8 0޽h ? ̙3380___PPT10.iLp 0 0 <(  <X < C `    < S Б` @    H < 0޽h ? ̙3380___PPT10.iLp F 0 @(  @X @ C `    @ S ` @    H @ 0޽h ? ̙3380___PPT10.iL" 5 0 D(  DX D C `    D S ` @    H D 0޽h ? ̙3380___PPT10.iLP/ 6 0 H(  HX H C `    H S ԭ` @    H H 0޽h ? ̙3380___PPT10.iL 8 0 L(  LX L C `    L S  ` @    H L 0޽h ? ̙3380___PPT10.iL0  9 0 P(  PX P C `   6  P S `6 ` @  6   H P 0޽h ? ̙3380___PPT10.iLI  @ 0 T(  TX T C `   6  T S <06 ` @  6   H T 0޽h ? ̙3380___PPT10.iL` B 0  X(  XX X C `   6  X S 8D6 ` @  6   H X 0޽h ? ̙3380___PPT10.iL` C 0 0\(  \X \ C `   6  \ S \X6 ` @  6   H \ 0޽h ? ̙3380___PPT10.iL D 0 @`(  `X ` C `   6  ` S m6 ` @  6   H ` 0޽h ? ̙3380___PPT10.iL E 0 Pd(  dX d C `   6  d S {6 ` @  6   H d 0޽h ? ̙3380___PPT10.iLr\VD^'0 > LV`jH`lۆ` uc בg`LbrPd|fhnPt^rµַ&:NbvF1Oh+'0, hp   $HTML and Web PagesTerence T. OwHTMLTerence T. Ow77Microsoft PowerPoint@4S@-@bjLGg  (  y--$xx--'--$UU--'ff--$=hh==--'--$AffAA--'ff--%UU--'̙--$m m m --'ff--% --'@Times New Roman-. f3(2 +&Cascading Style Sheets."System:-՜.+,0    On-screen Show51 Times New RomanArial Wingdings Courier NewHTMLCascading Style Sheets Next Level CSS Selector CSS Selector#Internal Local Styles: ex6a.htmlCSS General Format!CSS General Format and exampleSome pre-defined colorsText-level StylesGeneric text-level styles!Internal CSS Exercise: ex6b.htmlTypes of Style - ClassesTypes of Style - ClassesCalling a classExternal Cascading Style Sheet Slide 16!Fun and Goodies Pseudo ClassesHow to define links?!How to remove default underline?Exercise 7 Modify exercise 5  Fonts UsedDesign Template Slide Titles%_ Terence T. OwTerence T. Ow  !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnpqrstuvxyz{|}~Root EntrydO)PicturesCurrent UserSummaryInformation(oPowerPoint Document(DocumentSummaryInformation8w