Cascading Style Sheets With HTML And Any Languages

2003/02/05

E7(FG 0.'"G HI3 J5JKL0ILM NO '*

CSS
First Edition
!"

: # $%&
.,/0 #'()* +*,-

: 1* 23 4$%,5*
1.$ +)* $()* 0*,6 $()* 1758 #'()*
By :
Sami AL-Rabai3h
Help With :
Mahmoud Hussain & Thamer Mohammed

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

1

Cascading Style Sheets With HTML And Any Languages
2003/02/05

789:9;'< =>/%? @-A BC- 7%D?)&0 E'<) F&GH<) IBJ $%&'%() *+),- &.,/0 1'2 34546
$%&'%() *+),- &.,/0? K:>L'M 394N'><) O7P4<) *:>Q R&S0 1'2 3T,>U- EJ?
3.V:4U%() O7;4/L><) W4T 3XY7;><) *- 3:M&N<) 3P4<) EJ 78M R&S<) 3P< Z,G0?
_NU. &-[) )B8Y \M&N% Z) *:/'5% ]E^ _2 `:4Y \':>J[ 7%&X% \Q? @- a<b?
O7;4/L- IB8Y 78M K>L. E'<) 3P4<) gh .3.V:4U%() 7807;4/L- _8U. cde'><)
EG< i)b @- j:4+? )BJ @- j:4+ @G< 3.V:4U%() K4N0 ?h klN<) c7M @- `:<? 3:><7T
3-,4N><) 78M d,2B- Z,G.? \>4N0 7- mn0 3-,4N- h&9:Y 34>'G- \07-,4N- Z,G0
cde'>4< Fd75o IBJ? ]E^ 78C- K8H. (? `4U:Y 3.V:4U%() O7;4/L><7M @G<?
_p>Y Ieq @T D)A )b) cde'><) O7-,4N- I,S. e+ 7- de9M K8- ,J 7- de9M 1.&N'<7Y
3P4< 3l5C<7M r7;<) a<BGY 3.V:4U%s< $>Q&0 )b) 7J7CN- e9H0 3:M&T O7>42 eQ,. 7&l2) E9l% Z) W4T 7Ct&q c7'G<) )BJ EY? 784J7U'0 ( Z) W4T u&qvY 3.V:4U%()
3:M&N<) 3P4<7M 78< 7q&^ *- 3.V:4U%() 3P4<7M g) 78<7;M O7;4/L><) @- @G>- de+
. 78M eL9% )b7- w&N0? )e:Q 78>8H0 Z) k:;M
Cascading Style ) _< 7J7CLLo? 34545<) IBJ @- W<?() 3Nl/<) hel% 7CJ @-?
O7P4<) {eq) W4T g,';0 w,6 z&o) 7l'2 \Nl'. w,6? ( Sheets
. $%&'%() *+),- K:>L0? &.,/0 EY 3.,:;<) *:|),><)?
Z) K4N% 7C%[ a<b? F&^7l- R&S<)? F&^7l- },|,><7M _oe% Z) W4T 7Ct&q e9<?
~40? k.e;<7M _:/0 1'G<) @- &:pGY cde'>4< •:€<)? _4><) 1l5. e+ a<b &:•
`:< c7'G<7Y _>- ]E^ )BJ Z) e9'Th? 3-,4N><) a< _t,0 W'q },|,><7M d?e0?
( „9Y 3;Ht ‚ƒ @- Z,G'. c7'2 a.e. @:M *|) 7%vY \07-,4N>M _M \07;Ht DeNM
. ( Style ) r7M •4N'. 7- _2 K8Y W4T )dD7+ a4NU0 Z) …) Zb†M 3:Y72 EJ? &:•
784:t7H0 ‡DvM c7'G<) )BJ O7.,';- $q&^ e9< cde'><) Eo) a< r,+) 3.78C<) EY?
c7'G<) )BJ *|?? O7.,'5><) *:>Q 167C. EG< _>><) _:LH'<7M r7p- _2 R&^?
HTML r7M Z,Y&N. ( @- 7-h 34:4+ 3Y&N- ,<? HTML r) 3P4M @:Yd7N4<
K88Q)? )bˆ EG< )e:Q 7J,>8H:< Style r) W4T K8'6)dD „9Y )?V2&. Z) Z,N:/'5:Y
e.&. mn^ eQ? )bˆ jp>Y ECN. )b7- Z,Y&N.? \%,>Q&'. Z) Z,N:/'5. Style D,2
39l5><) \'Y&N- ‰eT *- O7.e'C><) ŠNM EY D,Q,><) Style r) ~4- EY &:P. Z)
~4><) )BJ K8H. Z) *:/'5. c7'G<) )B8< \'6)dD rjo @- _+() W4T HTML r7M
. Z7>.() ~N|) )BJ? \M 3t7n<) \075>< ~:€.? ]7S. 7>2 &:P.? )e:Q
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

2

Cascading Style Sheets With HTML And Any Languages
2003/02/05

? 3;HL<) K+d _6&. Zh v/o gh \M eU.? c7'G<) )BJ h&9. mn^ gh @- ),Q&CY
7>2 cde'><) EovY F&9H<) IBJ $;0 I&2b) w,6 gB<) _:>.() W4T 78M v/n<) *+,a<b D)eT‹ E<7:4<) 7%&86? K4N0 @- ]7S0 7- _:% W4T? O7-,4N><7M ie- W4T 7Ct&q
e+ v/o _Lq )bˆ aC- F&:Pt 3-,4N>Y Fd,t _€Y) EY 7C4NU0 Z) W4T u&qvY
. 78:4T e9C<) 7ClCU.
samialr@hotmail.com
)]7TD aC- EHG:Y *:l4< 7LLn- `:<? E%7U- c7'G<) )BJ Z) ,J 7CJ I&2b) 7- &o)?
EM&N<) c7S<) W<) 38Q,><) 1'G<) IBJ @- e.V><) _>T W4T Fde9<)? •:Y,'<7M 7C<
. \'-h? \CŒ,< &:n<) \M 7>M \'+7Œ •&H:<
&o) mn^ g[ \l5%? c7'G<) )BJ 3+&6 ‰eT F,o() @- ,Qdh r,+) Z) ECH6Ž.?
7CCG<? c7'G<) )BJ R&ΠEY DD&'% 7C4NQ 7- )BJ? F&S'C- OeM F&J7X<) IBJ ~6s4Y
3:>^78<) 3:%Dd() 3G4>><) O7l'G- ŠNM EY 7:%?&'G<) `:<? 7.D7T 7M7'G2 I7CNlŒ
15% ?h 7C+,9;M •75- gh? 7C.e< 39•,- \.e< *lŒ ‡,9q W4T …) e>;M 7C4Lq?
34‘75>4< _T7H<) ’&N. e+ 7C< \+,9q &2b &:PM *+,- gvM ID,Q? ?h 7C< c7'G<)
E'<) •‘7•,<) 78< 7C<76d†M 3H:€'5><) 32&S<) 346)&- rjo @- \N+,- •4P.? 3:%,%79<)
&2b W4T ~6v% @;%? c7'G<) )B8< 3.&GH<) 3:G4><) ‡,9q 7C:/N0 E'<) 78:4T 7C4Lq
*|? _l+ 34-72 7C07Œ7:'q) Bov% 7C4NU. $%&'%() 3Gl^ W4T Z75%() I)&. 7- @G< a<b
. 7C>6h _>;. ]E^ gh

: # $%&
.,/0 $ -S #'()* +*,: 1* 23 4$%,5(/
$()* 1758 #'()* 1.$ +)* $()* 0*,6

7(X,Y

7L#Z [J(( – 7T7!"I U'J
^^_`ab_c`d`e`` : \']JG

*,V

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

3

Cascading Style Sheets With HTML And Any Languages
2003/02/05

: ,(g style h ,(Y/ HI[. \,IT.0i j,fg o
. 3>>L><) 3;HL<) K5Q EY ‰en'5><) K6,<) _o)eM 1'G. Z)
: h,k*
<p style="----style--h #'3 HI[.,fg---"> $.0G +I

J(p </p>

. head r) E>6? @:M 3;HL<) •hd EY 1'G. Z)
: h,k*
<head>
<style type ="text/css">
</style>
<head>

style h (|},F{ ) # '3 Ny'. ,fg

3;HL<) •hd @- \‘7Te'6) K'.? css 3P:LM _9'5- ~4- EY 1'G. Z)
: 3:<7'<) 3P:L<7M 1'G. K6? rjo @- 3>>L><)
<link rel ="stylesheet" type="text / css" href = uJ( E- .css" />
<head>------ E>6? @:M g) 3>>L><) 3;HL<) •hd EY 3P:L<) IBJ 1'G0?
</head>

3Y&N>4< „9Y )&2b 7>8Y . EN:lŒ &-) )BJ cde'>4< @:;|)? &:• ),%,G. e+ —:L<)
,J c,4/><) „9Y . R&S<) EY _:LH'<7M cde'><) 7>8:4T w&N'. w,6 @G<? 39l5><)
EY ?) 3;HL<) K5Q EY 7>J? style r) 3M7'G< r7G^) 3•j• eQ,. \%) 3Y&N-? 7>8'.˜d
.786hd
: ,Y-SZ +w x7

)]F E5V +w style h /,I3 +g

M v7F ,/ S$!f •

a<b &:•v0 Z,G.? 3Y?&N><) html r) ‰,6? @- K6? g) _o)D EY style r) 1'G.
style r) 1'2 @.B<) @:>6,<) @:M d,L;><) {e;<) ?) 34>U<) W4T „9Y style r)
. 3.)el<) K6? _o)D EY
: 7)7y'G Jk*
<p style="---"> KL0ILM 7fTG </p>

... 7.,6 r7p><) )BJ _4;C<
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

4

Cascading Style Sheets With HTML And Any Languages
2003/02/05

\l%7UM 7Cl'2 K• style r) K• _>U<7M u7n<) (p) ,J? html r) K6? 1'2 ]E^ r?)
K6,<) 7C94•) K• ("-----") E0d7^†M style r) _o)eM 7- 7%&Lq K• g?75. 3-jT
3-7N<) style r) 3P:t EJ? 3U:'C< 7C4t,0 )b) . p r) K6? 7C94•)? 34>U<) 7Cl'2?
. html r) ‰,6? @- K6? g) _o)D
Style = "--------------,gZ,Y• # 0( |},F{ HI[G ,fg-------------"

...

.0- 7)7y'G €0• Jk*

<h1 style = "--------------"> KL0ILM p*0/ </h1>
<tt style = "--------------"> KL0ILM </tt>
<img src ="cpu.gif" style = "------------"/>

----- Z7G- g) style r) )BJ _o)eM 1'G% Z) 1U. )b7- 7C%7Jb) W<) dD7l'. w,6 Z()
. \Y&N% w,6 7- )BJ? -------......... 78P:t ›Hq? 78>8Y ]zd79<) W4T _85:< ‰75+) W<) O)&:•v'<) K5+) w,6
-: font „{
em 7>J? •7:+ E0eq? eQ,. 7CJ? „n<) KUq e.e;'< ‰en'50? : font-size
.&p2) \-en'5><) 7C<7>T7M „l0&0 78%( a<b? 3:%7p<) ‰en'5% w,6 7CJ? pt ?
? word r) _p- \-en'5><) œ-)&l<) @- &p2) EY „n<) •7:+ Feq? EJ g)
‰en'5><) KU;<) de9. Z) *:/'5. K>L><) _NU0 a<BM E8Y frontpage
. 78-en'6) E'<) 3M7'G<) œ-)&M eq) EY \4:n'- \%( \l67C. gB<)
... 1'G0? ( font-size: ) -: 78'P:t?
<p style=" font-size : 10pt " > +/0

„{ </p>
+/0

„{

: p7If

„n<) },% e.e;'< ‰en'50? : font-family
... 1'G0? ( font-family : ) -: 78'P:t?
<p style = " font-family : Andalus " > +5 $LM „{ </p>

: p7If

„n<) Š.&N'< ‰en'50? : font-weight
...1'G0? ( font-weight : ) -: 78'P:t?
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

5

Cascading Style Sheets With HTML And Any Languages
2003/02/05

<p style = " font-weight : bold " > ‡.0% „• </p>

‡.0% „• : p7If
font-weight 1%7Q W<) bold ‰en'50 7>‘)D : ˆ82*
. cde'><) W4T •S% ( EG< a<b? 78C:q eCT &2B0 w,6 E'<) —:L<) ŠNM eQ,.?
*:>Q 3>4G<) Bov0 Z) g) Feq)? 3P:t EY —:L<) *:>Q *>U% Z) *:/'5% 3.78C<) EY
. \€.&N0? \T,%? „n<) KUq g) •l6 7>:Y 7J7%&2b E'<) O7HL<)
-: 3P:L<) =lL'Y
< p style = " font-size = 20pt ; font-family = Arial ; font-weight=bold
" > KL0ILM Š,)]‹ E7(FG </p>
: p7If
. ( ? ) ECN0 Fd7^() IBJ? ( ; ) K8C:M 7CN|? : ˆ82*
... Œ •J7J)G ,* €0L Ž*,3 h,k* N•f
<html>
<head>
<title> „{ E7(FG </title>
</head>
<body>
<p> 076•G

‘7!"G ’ Œ7J% $V'. M ’#,% „• “g </p>

<p style = " font-size : 20pt " > „{ Ep8 076•G Œ7J% $V'. „{ “g </p>
<p style = " font-size : 20pt ; color : #0000ff" > 076•G Œ7J% $V'. „{ “g
•Z–M ŒL' „{ Ep8 </p>
</body>
</html>

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

6

Cascading Style Sheets With HTML And Any Languages
2003/02/05

K< )b7>< _‘75'0 e9Y color @- œTVC0 (? a.e< 3;|)? $;lt) Fd,L<) Z) e9'T)
„9Y •490 jY 7JD&H>M 1'G0 E'<) Fe:q,<) 3>4G<) IB8Y font-color 3P:LM 78N€%
( ~n0 (? ( b),^ FeT7+ _G4Y ) FeT79<) @T Fb7^ 7J&l'T) 7J&:• eQ,. jY 78Y&Tˆ
. )eQ _:4+ DeT _M F&:p2 b),^ eQ,.
-: style h /,I[ +L,k Ž[— •
<head> r) E>6? @:M g) 3;HL<) •hd EY \'M7'2
: 7 ,I v7F ,/ HI[.
<head>
<style type = " text / css " >
- f7 * J(V 0F)G f7 * U'</style>

J% ,Y.0pL \ $.0L +I Š 076•I ,fg HI[L

<head>

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

7

Cascading Style Sheets With HTML And Any Languages
2003/02/05

-: 7>J? style E>6? @:M O)&:•v'<) 3M7'2 1U. \%) ›q( 7.,6 a<b _4;C<
: ,J? 3.)el<) K6?
<style type = " text / css " >

: ,J? 3.78C<) K6??
</style>

r) K5Q EY g) @:>6,<) @.BJ @:M 1'2) Z) @G>. )b7-? ~:2 aCJb EY d?e. e+
.... 3M7'G<) IB8< 3P:L<) EJ 7-? \4o)eM 1'G% Z) @G>. )b7- z&C< )b) style
*9. Z) e.&0 gB<) &:•v'<) \< *CL0 K• @-? e.&0 gB<) K6,<) K6) De;0 Z) 1U. (?)
....... p K6,<) @;% ’&HC< . ]E^ g) ?) h1 ?) p jp- K6,<) )BJ @G:< \:4T
: E<7'<72 1'G:Y
P

{ font-size : 14pt }

w,6 3;Ht •hd g) EY \N|?? style r) E>6? @:M 3P:L<) IBJ *|? eNM 7C8Y
w,6 3;HL<) Z) g) P r) E>6? @:M *|,. {eq ?) 34>Q g) W4T &:•v'<) *9.
...jp>Y 3;HL<) •hd EY 1'2 7>M F&^7l- \/M&0
<head>
<style type = " text / css " >
p
{ font-size : 14pt }
</style>
</head>
<body>
<p> KL0ILM Š,7fTG </p>
</body>

EY \l'G% w,6 ]E^ gvY ¤¥ „o KU;M O7:C90 3>42 7C< &8X0 w,6 r7p><) )BJ EY
.„n<) KUq EJ? 3:t7n<) IBJ Bov. w,6 <p> r) E>6? @:M 3;HL<) EY 7C>:>L0
-: EJ style r) E>6? @:M 3M7'G4< 3-7N<) 3P:L<) )b)
E-' E- { (|},F{

/,I3)076,I

v7‹ }

-:
h1

.0- Jk*

{ font-family : arial , impact ; color : #ff0000 }

&>q) 78%,< Z,G. w,6 <h1>-----</h1> E>6? @:M Z,G0 w,6 34>Q g) )b)
IBJ ~|h? ( ? ) ECN0 ( ; ) Z) 79M76 7C4+ e9< . impact ?) arial „n<) },%?
. E%7p<) •l/Y r?() eQ,. K< )b7Y ( ?) ) ECN0 ( , ) Z) 7€.) 3-,4N><)
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

8

Cascading Style Sheets With HTML And Any Languages
2003/02/05

em { font-size : 10pt ; font-weight : bold }

KUq Z,G. w,6 <em>---------</em> E>6? @:M 1'G0 w,6 34>Q g) )b)
. Š.&T 78/o ? ¤ƒ 78/o
....style r) K5Q EY 78N€%? —:L<) *:>Q *>UC< Z()?
<style type = " text / css " >
p

{ font-size : 14pt }

h1

{ font-family : arial , impact ; color : #ff0000 }

Em { font-size : 10pt ; font-weight : bold }
</style>
... ((F( )]F J% S0". œ'- •,* €0L 2*,3 M,k* “••f
... style h Ž• # ,Yv7‹ 4$.$V U'- J% œ0 If
<html>
<head>
<title> E7(FI ‘7!"G </title>
<style type = " text / css " >
sup { position :relative ; top : -1ex }
sub { position :relative ; bottom : -1ex}
</style>
</head>
<body>
</p> 076,G ’ 07Ÿ 1* 0YˆG œ'- J(V<p>
<p> internet <sup> Arab world </sup> </p>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain
© 2003 - 2004

9

Cascading Style Sheets With HTML And Any Languages
2003/02/05

<p> network <sub> IT </sub> </p>
</body>
</html>

... 78CN|? E'<) Fe.eU<) O7-,4N><)? r7p><) )BJ W4T 7C079:4N0 *€C<
position : relative @G< a<b EY e.eQ (? html E>6? 7>J sub ? sup
eL9% )b7- 7-) top ? bottom ? right ? left : 3:<7'<) K:9<) 7JeNM Bov0?
@:M Fd,L;><) 34>U<) _LH0 E'<) 3q)A() d)e9- ,8Y ex Feq,M eq)? 1<75M
Œ .0- Jk* “••f ,YJ!O K!I3 +I J(p 1% <sub> <sup> h +(-: 7)7y'G
sup { position : relative ; top : -2ex}
<p> internet <sup>Arab world</sup> </p>
-: p7If
ª- 3Y75><)

Arab world

internet

sup { position : relative ; top : -3ex}
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 10
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

<p> internet <sup>Arab world</sup> </p>
-: p7If
Arab world

internet
•7:9<) ,J? (-1) *€% Z) EN:l/<) &-() @G< _G<) W4T •l/C. )BJ W4T •l/C. 7-?
-: @:N.&6 @:<7p- BovC<? \'Q7q 7C- jG< @G<? 167C><)
sup { position : relative ; top : -1ex}
<p> internet <sup>Arab world</sup> </p>

-: p7If

internet

Arab world

sub { position : relative ; bottom : -1ex }
<p> internet <sub>Arab world</sub> </p>
-: p7If

internet

Arab world

... sub ? sup E>6? c 3t7n<) 3-7N<) 3P:L<) )b)
Position : relative ; 3q)A‹) I7U0ˆ : 3q)A() d)e9- ex
-: ˆ82*
7>2.. 3Q7;<) 15q @:>6,<) @.BJ &:• z&o) 3>6?7M 39M75<) 3P:L<) ‰)en'6) @G>.
ª– @- &l2) 3q)A) E/N. ‚– a<B2? . ª– @- _+) 3q)A) E/N. ¤– Z) 7CXq( \%)
1<75<) @- (eM $-en'6) )b) @G<? 3q)A() OD)A 1<75<7M DeN<) D)A 7- _2 )b)
$l'2 ,< g) K:J7H><7M 3:5GT 3+jT W4T _L;0 w,5Y ª– @- reM ª+ g) 1Q,W<) gDŽ. w,6 ¤– @- reM ¤+ K+&Y 3+D &p2) Z,GC<? ... bottom =lL0 top
... eq)? d)e9>M I7U0() `GT 3q)A()
-: , .0- M,k*
sup { position : relative ; top : +2ex }
<p> internet <sup>Arab world</sup> </p>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 11
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

-: p7If
internet Arab world
}7l0) _€Y() a<B< 39:+D E0v0 ( `:.79><) Z) 7>2 K:J7H<7M cj9%) eQ,. $Xq( a4N<
. 1<75<) EJ? () 780&2b E'<) 3P:L<)
34-72 7C07-,4N- Z,G0 EG< position : relative r) 3P:t W4T 7CY&N0 7C%) 7>M
•490 (?..7:‘78% 7J7C:8%)? 78CT k.e;<) 7C4>2) Z,GC< 78< 3:%7p<) 3P:L<) W4T w&N'C<
-: 7>J? @:'P:t &:• eQ,. (
position : absolut

position : relative

78< *‘7S<) ‰)en'6()? position : absolute EJ? 3:%7p<) 3P:L<) W4T w&N'C< )b)
7C- _G<? D,G<7M &:P0 Z) *:/'50 79M76 $4+ 7>2 7NlŒ? d,L<) W4T 7J&:•v0 ,J
.. VUN. @< K8Y @-? })eM() a:4T $%)? =|,% 7CJ @;% g) \07-)en'6)
.. Fd,L<) IB8M style r) _o)eM 1'G0?
< img src= "pic.gif" style= " position : absolute ; top : 0px ; left : 0px
; z-index : 1 " >

-: 3P:L<) IBJ _4;C<?
w,6 @.) g) Fd,L<) *+,- 78M ECN%? position : absolute 7Cl'2 ]E^ r?)
.....O7J7U0() 7Cl'2 K• IeNM E0v0 w,6 E'<) O7J7U0(7M IDe;%? ~:2? Z,G0
W4T) EY Fd,L<) *| 78M ECN% top 3>4GY (3^7S<)) 3;HL<) 3q75- @- 7Jd)e9-?
\< 7C4+ K•? W4T() @- 3;HL<) 3Y7q @T (_5GM ƒ) Fd,L<) _LH. d)e9>M 3;HL<)
3Y7q @T _5GM ƒ d)e9>M d75:<) 38Q 78N| W4T(7M 78N€0 Z) eNM g) left
. d75:<) @- 3;HL<)
IBJ? index-z : 1 7Cl'2 K• ... d75:<) W<) W4T() EY Fd,L<) *| r,9% 7C%v2?
@- &p2) 7CN|? ,< g) a<BM ECN% )b7>Y O79l/<) DeN'M =>50 E8Y )eQ 3>8- 3P:L<)
Fd,L<) style c 7CN|? ,4Y 78M u7n<) style r) Feq)? _G< *€% w,5Y Fd,t
z&o() Fd,L<) style EY 7CN|? ,<? W<?() 39l/<) 78M ECN% index-z : 1
. W<?() Fd,L<) ‡,Y E0v0 w,6 78%) g) 3:%7p<) 39l/<) 78M ECN% index-z : 2
78+,Y *€%? Fd,t *€% Z) e.&% 7C%) 7C|&Y a< r,+) 7%) a<b Fe‘7Y 7- r,90 Z) @G>.
7:4N<) 39l/<) EY 34>U<) &8X0? W4H5<) 39l/<) EY Fd,L<) &8X0 k:;M 3:N- 34>Q
\< *€% mC<) 7-) _H6() EY 78N€% Z) e.&% E'<) Fd,L4< index-z : 1 r) 1'G:Y
. 79M76 I7%&2b 7- &:5H0 7- z&%? (7p- BovC<... index-z : 2
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 12
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

<img src = " pic-gif " style = " position : absolute ; top : 2px ; right :
3px ; index-z : 1 >
<p style = " position : absolute ; top : 2px ; right : 3px ; index-z : 2 >
pc-computer </p>

-: N.0- Ž[—/ h,k( “g ŽJ)f
w,6 (?) $l'2 Fd,L<) Z) 7>M `:< Z) g) D,G<) 1:0&0 K8- `:< ›q( ]E^ r?)
index-z : r) „9Y 7C>8. 7CJ . 3:%7p<) 39l/<) Z,G0 34>U<)? W<?() 39l/<) Z,G0
index-z:ª W<?() 39l/<) ECN. index-z :¤1:0&'<) `:<? 39l/<) De;. w,6 gB<)
*|,< index-z:‚ eQ? ,4Y Fd,L<) ‡,Y E070 w,6 78%) g) 3:%7p<) 39l/<) ECN.
. mC<) ?) 34>U<) ‡,Y
-: ‘!- ,* J% 2*,3 M,k*
<html >
<head>
<title>Š,T!" </title>
</head>
<body>
<p> < img src ="LOG1.gif" style =" position: absolute ; top: 0px;
left: 0px; z-index: 1" alt = "first positioned image" > </p>
<p style = "position : absolute; top: 60px; left: 15px;
z-index: 3; font-size: 20pt; " ><b> Positioned Text </b></p>
<p> <img src = "LOG2.gif" style = " position: absolute; top: 0px;
left: 0px; z-index: 2" alt = "second positioned image " /> </p>
</body>
</html>

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 13
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

‰en'5'Y postion : absolute 7-h 3q)Aj< ‰en'50 position : relative )b)
– right – left – top ) K:9<) Z)Bov. Z7C•‹)? O79l/<) e.e;0 ? *+,><) e.e;'<
... ( bottom
(¤) .39l/<) e.e;'< a<b? index-z : ‰en'5% position : absolute r) EY?
(¤) 39lŒ ‡,Y E070 w,6 E'<) 39l/<) ECN0 (ª) ? _H6() @- W<?() 39l/<) ECN0
39l/<) @- hel. K:+&'<) Z) g) (ª) 39l/<) ‡,Y E0v0 w,6 E'<) 39l/<) ECN0 (‚)?
. DeN<) FD7.A 15;M 784l+ 7- E/P0 E'<)? 78+,Y E'<) O79l/<) E0v0 K• W4H5<)
E5V +w Ny'G \ 1[(. +I NO'( 7]J• ’ background Ž ¦ '• “••f
\ 1[(. +I E7T §O,fL E6 7y 0Iw (7O v7‹ Ž[ Ny œ'- style h
-: Ny'G
background-color : #e6e0bd
. *+,><) 3:H4o Z,< e.e;'< ‰en'50?
background-image : url(logo.gif)
\9l6? @:6,+ @:M 1'2 Fd,L<) K6) Z) ›q(? Fd,t *+,><) 3:H4o _NU< ‰en'50?
g,';. gB<) ~4><) `H% EY $%72 ,4Y Fd,L<) *+,- D)e'-) 78M eL9%? url Fd7lT
_GS<) )B8M 1'G'Y a<b &:• $%72 ,< 7-) Fd,L<) K6) 3M7'GM EH'GCY style \:4T
_o)D D,Q,- ~4><) )BJ? pc \>6) ~4- EY Fd,L<) Z) g) url(pc/logo.gif)
ECN. a<BY url(../pc/logo.gif) 1'G0 ?) style r) ~4- W4T g,';. gB<) ~4><)
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 14
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

7>8%) g) &o) ~4- EY D,Q,- style r) Z)? pc \>6) ~4- EY FD,Q,- Fd,L<) Z)
html r) •d7- )b) cde'><) ze< 3Y?&N- d,-() IBJ Z) e9'T) ~4><) `H% EY 75:<
background-position : bottom
Z) 7C|&'Y) ,4Y a<b @- 1UN'0 ( 3:H4n<) EY Fd,L<) *+,- e.e;'< ‰en'50?
KUq s>'< d&G'0 ( Fd,t $%72?) 3;HL<) KU;M $5:< 78%) g) F&:Pt Fd,L<)
7C8Y ( IBJ eNM 7J&2B% w,6 E'<) 3P:L<) EY FV:><) IBJ w&N% w,6? 3^7S<)
&‘)V<) ='H. Z) 7>Y 3;HL<) EY Z7G- g) EY *+,>4< \'M7• 3:H4n2 78N€% Z) *:/'5%
*:/'50? 3:H4n2 I7%Deq gB<) Z7G>M Fd,L<) IBJ &8X0 w,6 *+,><) EY 3;Ht g)
@:>:<) 38Q W4T() EY 7Je.d) r,90 Z) @G>- g) $+,<) `H% EY @:J7U0) ‰en'50 Z)
.. _GSM 3P:L<) 1'G% w,6 7C8Y
( ; ) g) (? )1'G% K< )b7>< $4‘750 a4N<? background-position : top right
@< )b) (? )34>U<) IBJ EY _J @:>:<) W4T) EY 78N| r,9% 7C%v2 7C%( 78l'G% K< @;CY
- left - center - bottom – top ) K:9<) 3P:L<) IBJ Bo70? ..K8C:M ( ; ) 1'G%
...( right
background-repeat : no-repeat
a<b ~:2 _‘75'0 a4N<.. d&G'0 ( 3:H4n2 7J7CN|? E'<) Fd,L<) _NQ EY ‰en'50?
*M&M Fd,L<) IBJ KUq Z72? aN+,>< 3:H4n2 Fd,t $N|? a%h ’&'Y) a< r,9%
3;HL<) s>0 Z) W<) F&^7l- d&G'0 w,6 Fd,L<) IBJ Z7Y aN+,- 3;Ht KUq
7C|&'Y) ,< @G<? ( 3;HL<) *Md KU;M 78%() O)&- *Md) d&G'0 w,6 78%) g) 34-72
@- 1%7UM „9Y &8X0 Z) 7Je.&0 a%v2 g) d&G'0 Z) Z?D EJ 7>2 Fd,L<) e.&0 a%)
EY *|,0 E'<) no-repeat d?D A&l. 7C8Y jp- 78HL'C- EY ?) 3;HL<) 1%),Q
ODd) )b) 7-) .d&G'0 Z) 7Je.d) ( r,90 a%72 g) position-repeat : no-repeat
position-repeat : .......3P:t Z) g) „9Y repeat 1'G0 Z) *:/'5'Y d&G'0 Z)
..d&G'0 ( 784NU< no-repeat ?) d&G'0 784NU< repeat @:4GS<) eq) Bov0
position-attachment : fixed
EY W9l0 Z) 3:H4n<) 7%Dd) ,< jp>Y 3:H4n4< O7lp<) ?) 32&;<) 3Ht ]7/Tˆ EY ‰en'50?
Z) 1U:Y _H6()? W4T() W<) 3;HL<) a.&;'M mnS<) ‰7+ ,< W'q 3;HL<) _H6)
EJ ‰en'5>4< 3.˜&<) 3.78% $%72 ,< g) _H6() EY *+,><) &‘)V< F&J7¯ W9l0
rV% ,< W'q 7-) .3;HL4< \'.˜d 3.78% EY \< &8X0 Z) 1U:Y 3;HL<) ~L'C*- Fd,L<) i&;'0 w,6 78':9M z&:< 3;HL<) _H6) W<) scroll r7M ‰en'5><)
Z) (ˆ 7C:4T 7>Y 79M76 I7%&2b 7- B:HC0 7%Dd) ,4Y.. _H6() EY W9l0 k:;M &‘)V<) 32&q
IBJ 1'G% K< ,< 7-) .. fixed 3>4G<) position-attachment : 1%7UM 1'G%
7J)&. ( k:;M 3;HL<) _H6) EY _H6(7M $N|? ,< 3:H4n<) &8X0 w,5Y 3P:L<)
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 15
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

g)) 3;HL<) 3.78C< _L. Z) W<) _H6() W<) scroll r7M rV% ,< (ˆ 3;HL4< &‘)V<)
..(3:H4n<) W4T style _< &:•v0 g) Z?D 3:H4n<) *|,< gD7N<) *|,<)
... 79l6 O&2b E'<) —:L<) *:>Q *>U. j-72 (7p- BovC<
<html>
<head>
<title>ŒI/,6 7]J• Ny </title>
<style type = "text/css">
body { background-image: url(logo.gif);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; }
p

{ font-size: 18pt;
color: #000000;
text-indent: 1em;
font-family: arial, sans-serif; }

</style>
</head>
<body>
<center><h1> windows xp </h1></center>
<br><br>
<p>
,g 0. NO'(J 0} © T!. ª7)/ Ž]-M,/ 0YˆG T!G 4Z'F Ž pL \
,fO0"G h,k( “g +w
h©L ,* Ž3 Ž]-M
)]F ,/ h©f. E ' I8 ,g 0. 'Yw (ŒI.«Z H58) )]F Ž]- +w
T!G ’ )]F ,/ h©L ,(Y* Ž]-M 1* . © +w 4Z'F K7T/ ,* Ž3 Ž]-M
)]F ,/
07Ÿ “g 1[ Œ * h©fG h©L ,* Ž[w Œ * j0)IG 4Z'F \•/ 0} ©J ¬,!"L +" . “g ŒI/,6
4Z'F $.0L h'TL ,*$f w ŒI/,6 T7G +Yw E(F( Œ*${I- ’“ ’0F! ¬ ${ 'Yw -7)‹
$FTL 1)L ,fYw ,f.$ U'J ( f ( ,/ )]F Ž]- +f L M ,fYw Z,57 1* )]F Ž]- +w
,f(Y. M “g ,Y '" Ž]-M
4$I(* )]F KL,3 'Jw ,Y 0} © .«0 !5f/ )]F Ž]T!G ,* €07 )]F Ž]0} © h©f. \ \ # )]FJ Z,57 Ž]-•/ Œ 0YˆG \ Hp7w
7]J{3 4Z'F Ny #'3 ,f!I3 $T N.0- Ž[—/ •'w ®,f!I3 ’“ #'[ +w ¯$)If . . ,Yf*
4Z'F ®“g Z0[IG M \ Œ7J. ’“ #'[ ,fI/,I[/ ,L#$8 E6 )]F uFIf* +w \'[G ª7)/
+G•. ,YI y +I 4Z'F \M • • Š#$8 , !i 4$8 4Z'‹ „Tw $.Z ’ )]F °(G I8
, !i ,T/,- Œf% ,f6$)G ’“ 4Z'FJ Š,!k #'3 K!I3 E6 )]F Ep8 N/Z 1* ŽO ,Y(p8
h E- 1(y ,g,f y • “ 7]J{ ,/ Œ"!G0( |},F{ J% h$G ±7‹ 1* ®,L03• ,* Ž3
‘JTG M ²Z$I( +• ... )]F ,/ 0Yˆ. œ'- ’“ |f |},F• ,L03• • • $ / body
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 16
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

Ž3 +w ‘7• • H!5G M ª7)/ ³.Z$I ,/ ,Y/ j$(L \ ,f‹08 $TJw Š,*'J ( 40k3 1*
$O E7(FG v ’ html h N* LZ,T* $V J7JO Œv7‹ ŒG,*'J * style h \´w h '8M
0Yˆ. • O'* Ž V +w +][G M ,g$8' html h,w )...KL0ILM NO '( Z'"* ’ ,Y •0"I.
...( / “V .0)- Š,5( Œ N•G Œf.©G •J p. style h,w ‘}2 Ž[— ,/
</p>
<h1> MST </h1>
</body>
</html>

-: ( order & unorder list) \l0&><) &:P<? \l0&><) K‘),94< style r) K:>L0 o
—:L<) @- 3P:t g) 7-h 79M76 O&2b E'<) —:L<) `H% 78< 7C>:>L0 EY ‰en'5%
Fe.eU<) (3:t7n<)) 3P:L<) @G< \M u7n<) \>:>L0 7C- jG4Y a< 72?&'- )B8Y 39M75<)
-: EJ K‘),9<7M 3t7n<)
@- 3;HL<) 3Y7q @T 3>‘79<) 3M7'2 eNM 78M eL9%? Margin-left : 75px
Feq,<) IBJ?) _5GM °± d)e9>M 3Y7;<) IBJ @T mC<) eN'l. Z) k:;M @:>:<)
.. E<7'<) _GS<) &X%) d75:<) I7U0†M (7CJ 3-en'5><)

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 17
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05
w,8 ®“g \ ·0]L
.Z,57 1* )]F

1- PC-PARTS
h +g ®“g
Margin
..…Left
75 Z $T(/
!5f/ Ž5[/
,YJ!O ,* J%

d
a

a- CD-ROM
b-CPU
2- INTERNET

@- mC<) _LH0 E'<) 3Y75><) 78M ECN% margin-left )b)
E8Y 7C< 7-) mC4< 3l5C<7M d75:4< EJ )b) ) 7C< 3l5C<7M `:<? mC4< 3l5C<7M d75:<) 38Q
Feq? @- (eM _>N'50 Z) @G>. 3:t7n<) IB8< 3l5C<7M F&:o) 3-,4N-? ..( @:>:<)
.cm &'>'C5<) Feq? px_5Gl<)
3Y7q EJ? 784l+ 7- @T °± d)e9>M 3q)A) OBo) ª ? ¤ 3>+&><) 3>‘79<) : 3Xqj@- °± d)e9>M 3q)A) OBo) e9Y b ? a c $>+d E'<) 3>‘79<) 7-) z&5:<) 3;HL<)
de90 3q)A() Z) g) eL+) )b7- $>8Y a%) e9'T) . ª ? ¤ 3>+&><) 3>‘79<) g) 784l+ 7EY margin 1'G0 Z) aCG>. \%) 7>2 ... 3;HL<) 3Y7q @- 7>‘)D `:<? 784l+ 7- @? margin-bottom ? margin-top @G>- g) O7J7U0() @- —:t FeT
O7+?[) &p2) ‰en'5% K‘),9<) EY 7CCG<? ‰)en'6() 15q a<b? margin-right
Z,G0 7-eCT margin-right ? 3.V:4U%() 3P4<7M K‘),9<) Z,G0 7-eCT margin-left
. 3:M&N<7M K‘),9<)
<html dir = "rtl ">
<head>
<title> E} 'T </title>
<style type= text/css >
ul { margin-right: 75px ; color : #ff0000 }
ul ul { margin-right : 15px ; color : #0000ff }
</style>
</head>
<body>
<H1>KL0ILM </H1>
<UL>
<LI>Š,30X NO '*
<LI> 7F{X NO '*
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 18
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

<UL>
<LI> 7Y7w0G
<LI> 7(J%
<LI> 7L2% </LI>
</UL>
<LI> .Z,!•& NO '*
<LI>$.0/ NO '*</LI>
</UL>
</body>
</html>

7CJ .a|&'N0 e+ E'<) K:J7H><) ŠNM =|,C< Fd,L<) W<) &XC% Z) _l+ D,G<) _4;C<
........ E<7'2 $l'2 E'<) 3P:L<7M aN- _Lq `l4<) Z) e9'T) @G<? =|)? ]E^ _2
?) •:l/'<) )BJ BHC. Z) e.d) r,+) EC%v2 7CJ ul ul { margin-right : 15px }
•l/. @< (ˆ? ´&S<) )BJ &Y,'. Z) 1U. g) 3>‘7+ 784o)eM 3>‘7+ O]7Q )b) D,G<)
\< $;'Y K• W<?() 3>‘79<) @>| $%72? 3:Ln^ *+),- $4+ EC%) $XqjY D,G<)
´&S<) ]7Q 7CJ )b) 3:%jT) ? 3:>4T ? 3:8:Y&0 W<) 3:LnS<) *+),><) ~CL0 3>‘7+
~:CL0 Z) g) K‘),9<) IB8< F&^7l- D,G<) •lŒ a<B< 3>‘7+ _o)D 3>‘7+ g) 79l/3>42? 3:LnS<) *+),><) 3>42 @- _5GM ¤± 3q)A) d)e9>M ]7Q 3:LnS<) *+),><)
WC>:<) 3;HL<) 3Y7q @- _5GM °± 3q)A) d)e9>M O]7Q 785H% 3:LnS<) *+),><)
Z),<() •:l/0 W<) 3Y7|) .. „9Y Feq)? 3>‘7+ g) 78M u7n<) D,G<) 78:4T •lŒ 78%(
.. Feq)? _2 W4T

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 19
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

-: ,Y7J% style h ‘7!"G ( link ) 7! —I Š2‹'
a { color: #0000ff }
78%,< =lL. w,6 ( link) 3:lNS0 34t? g) Z) W<) gDŽ0 w,6 3P:L<) IBJ?
.‡dA)
a: hover { color: #efb026 }
&8X. w,6 •?7><) 785-j. Z) D&U>M 3:lNS0 34t? g) Z) ECN0 3P:L<) IBJ?
79l5- I7%Deq gB<) ‡dA() Z,4<) @- 78%,< &:P'. w,6 g) E<790&l<) Z,4<7M 78%,<
34t,<) @T •?7><) eN'l. Z) D&U>M @G< .. E<790&l<) Z,4<) W<) 3:lNS'<) Ojt,4<
‡dA() Z,4<) g) 3:lNS'<) Ojt,4< I7%Deq gB<) 78%,< W<) 34t,<) *Q&0 3:lNS'<)
a: active { color: #ff0000 }
_l+ \/P€2 ) •?7><7M 78:4T „P€0 w,6 3:lNS0 34t? g) Z) ECN0 3P:L<) IBJ?
‡dA() Z,4<) @- &:P'. w,6 78%,< Z) g) &>q() Z,<) 78%,< =lL. w,6 ( r,oe<)
I7%Deq gB<) &>q() Z,4<) W<) K• E<790&l<) Z,4<) W<) 3:lNS'<) Ojt,4< I7%Deq gB<)
.. 7CJ
a: visited { color: #ab1784 }
Z,4<) 78%,< =lL0 w,6 780d7.A K0 3:lNS0 34t? g) Z) 3P:L<) IBJ ECN0?
78%,< &:P'M a<b? _l+ @- 34t,<) IBJ $4oD a%) &‘)V4< r,9% 7C%v2?) ge-&9<)
=lL:< 3:lNS'<) Ojt,4< 79l5- I7%Deq gB<) ‡dA() Z,4<) EP40 78%) g) .\':lp0?
.(780d7.A K0 E'<) 34t,<) g) Z,4<) )BJ W4T „9Y 34t,<) IBJ $lp0? )ge-&9<) Z,4<)
\%( 7CJ \0&2b ECCG<? m% g) W4T \9l/% Z) @G>. K:>L0 &2b) Z) D?) 3.78C<) EY
,J? 3:lNS'<) 34t,<) $;0 „o *|? ,J? 3:lNS'<) Ojt,<) EY ‰)en'6‹) *‘7^
_o)D \-en'6) w,6 7CJ ECCG< html r) ‰,6? @- K6? g) _o)eM E<7'2 1'G.
: ,J? 3:lNS'<) Ojt,<) 3P:t
a { color: #0000ff ; text-decoration: underline }

784G^ =lL. g) „o 78';0 *| ? ‡dA() Z,4<7M 78N| 3:lNS0 34t? g) Z) g)
-: E<7'2
EM&N<) c,67;<)

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 20
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

-: Eg h,[X 4$% J% +G•G \ 1[(. 7‹,{ ®“g
3>4G<) $;0 „o *|? e.&0 $C2 )b) : text-decoration: underline
. 3>4G<) $;0 „o *|? ‰eT e.&0 $C2 )b) : text-decoration: none
‡,Y „n<) &8X. Z) e.&0 $C2 )b) : text-decoration: overline
. 3>4G<)
EY „n<) &8X. Z) e.&0 $C2 )b) : text-decoration: line-through
. <blink> ,J? html K6? $l'2 a%v2 g) 3>4G<) ~LC-:E<7'2 EJ? _l+ @- 7J&2B% K< 3P:t 7€.) &2BC<. text r) O)&:•v0 7%&2b 7C%) 7>M?
(eM 3:<7'<) K:9<) Bov0 Z) @G>.? W4T(7M mC<) *| ECN0 gBJ? text-align : top
...( center – bottom – right – left ) top @...®,L03• ,* J% 2*,3 M,k* “••f
<html>
<head> <title> 7! —I Š2‹'

J% Š 076•G </title>

<style type = " text/css ">
a { color: #0000ff ; text-decoration: none }
a: hover { color: #efb026 ; text-decoration:
underline }
a: active { color: #ff0000 }
a: visited { color: #ab1784}
p { color: #ff0000 ; font-weight: bold}
</style>
</head>
<body>
<p> .Z,!• NO '( 7! —G Š2‹ </p>
<a href=" http://www.cnn.com " alt= "NEWS"> CNN
NEWS </a>
<a href=" http://www.bbc.com " alt= "NEWS"> BBC
NEWS </a>
<br>
<a href=" http://www.aljazera.com " alt= "NEWS">
ALJAZERA NEWS </a>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 21
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

</body>
</html>

... _:4;'< µ7';. ( r7p><) )BJ Z) e9'T)

r) K>L0 a%) ,J? K8- r)Ž6 a<7lM &/n. K<h •l6 7- _2 R&^ K0 7- eNM @G<?
eQ,.? p K6? &2b 7- _2 Z) ECN. )B8Y p r) K6,< ’&HC< jp- @:N- K6,< style
@G< style r) EY \< 78'>>t E'<) O7HL<) Bov. w,6 ]E^ g) ?) m% \4o)eM
O7HL<) IBJ Bov. ( p r) K6? _o)eM 1'2 m% g) _NU0 Z) jp- e.&0 a%) ’&HC<
e.&0 Zv2 3>>L><) 3;HL<) EY $%72 E'<) u,LC<) *:>Q 780Bo) E'<) O7HL<) g)
g) K6,<) a<b `HCM $N|? E'<) u,LC<) 3:9M @T „9Y O)B<7M mC<) )BJ V:>0 Z)
`H% @:M 1'G0 E'<) u,LC<) 3:9M @T ~4'n. Z) O)B<7M mC<) )B8< e.d) r,90 a%v2
... _;<) ,J 7- z&C< ¶ \4GS><) IBJ _p>M _>N<) 7>Y K6,<)
$5:< aM 3t7o 3P:t K>L0 Z) *:/'5'Y style sheets r) 3%?&- A&l0 7CJ
@- K6? g) W4T •:l/'<) a<b g&U0 Z) ODd) )b) a:4T 7- _GY K6? gvM „l0&K>L. ~:2 z&C< a<b ~:2 html r) K6? _o)D \>6) ETe'50 Z) html r) ‰,6?
.. WTe'5. ~:2?

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 22
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

.my-style { color: #ff0000 ; font-weight: bold }

+w Œ"TL N•L
v7F E- h
\ $.0L +I
,Y((FL

)ŒO'L \ $.0L +I Š,]F
‘7!"I J%
Œ7%$I5L œ'- +I

v7F E$ / ,(7w

3/9% \4l+ *|? ieCT @- K6) g) 1'2) K6,<) K6) 1'G0 Z) @- reM a:4T 7- _2 )b)
.(.)
?) K:>L'<) a<b \:4T *9. Z) e.&0 K6? g7M De;0 Z) a:4T 7- _2 ..¶\:Te'5% ~:2
<h1> r) E>6? @:M O]7Q E'<) Fd7lN<) W4T \N+,0 Z) e.&0 a%) ’&HC< &:•v'<)
&:•v'<) ?) •:l/'<) ,J my-style I7C:>6) gB<) ‡,Y I7C>>t gB<) K:>L'<) Z72?
:- E<7'2 \'M7'2 \4NY a:4T 7- _2 )b) \+,% Z) e.&% gB<)
<h1 class = " my-style " > ,fg 076•I ‘!". œ'- </h1>

-: E<7'2 \'l'2 ?) \'>>t gB<) &:•v'<) ]7Te'6) 39.&Œ )b)
class = " ŒI. $!/ +I

"Tf 07Ÿ 1* ŒI((‹ ’“ E7(FI E- "

... e.&0 K6? g) _o)D @- Z,G. Z) 1U. ]7Te'6() Z) ›q(
.. 2*,3 M,k* “•,f
<html>
<head> <title> 076•I ¾,%$I- </title>
<style type ="text/css">
h2 { font-family: arial ; color: #c9ccf2 }
p
{ font-size: 14pt ; color: #17982d }
.red { color: #ff0000 ; font-size: 16pt }
</style>
</head>
<body>
<h2>E-' “g 17/ Ny'. \ 'f% ’M #$8 ’“ 076•I Œ7J% 0Yˆ. œ'-</h2>
<br>
<p> E-' “g 17/ |L ’M #$8 ’“ 076•I Œ7J% 0Yˆ. œ'- </p>
<p class = "red" > 17/ HI[. |L ’M K y +I Š 076•I |f “g J% 0YˆG 1
E-À $f- ’“ E7(FI 076•G Œ7J% 0Yˆ. œ'- Ž/ E-' “g
red</p>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 23
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

<body>
</html>

-: style h +w EYI* ${I- span div 1.0Ff
@:M ]E^ g) ?) m% ?) &-) &L;% Z) e.&% Z) _l+ Z7-en'5. Z)&LCN<) Z)BJ
@- @:>6,2 7>J&2B% Z) @G>. 7C8Y 78:4T wd7N'><) html r) ‰,6? &:• @:>6?
IB8M Z7l'G. g) 784o)eM class r) ETe'5%? &:lN'<) A7Q )b) html r) ‰,6?
.3P:L<)
<span class ="red”> ®,f(‹ ’“ 076•I ,/ |f 06•I. œ'- ,fg </span>
<div class ="red”> ®,f(‹ ’“ 076•I ,/ |f 06•I. œ'- ,fg </div>

-: ,Yf* h,[X 4$ / \,7G•. \ 1[(*
<style type ="text/css">
span { background-color: #ccffcc ; font-size: 18pt }
<style>
Š“•
076•I

<span> ¾,%$I- x7 Œ/ ‹,• Š 076•G ,f y ,fg </span>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 24
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

k.e;<) )BJ? div _< 1'G. span _< 1'G. 7- _GY div _< 3l5C<7M r7;<) a<B2?
-: EJ? @.&LCN<) @.B8< m‘7Ln<) ŠNM &2B% Z) W<) 7%D,9.
-: margin-top : .5em
margin- ? margin-bottom ) g) O7J7U0j< _G^ @- &p27M E0v0 Z) @G>.?
EJ 7- 7-) )eQ 39:+D Feq? EJ? em Feq,<7M •790? ( margin-right ? left
3Y7;<) g) mC<7M @:Œ7;><) d7Œ‹)? ·-78<) eNM E0v0 E'<) 3Y75><) d)e9- ECN'Y
Z) @G>.) ( margin r) 1%7UM d,2B><) I7U0() 15q) µd7n<) @- 3Œ7;><)
margin: ) 3P:L<) IB8M 7Jeq,< margin r) 1'G0 7-eCNY (O7J7U0() _2 _>N'5%
rjo @- &p2) =|,% w,6? O7J7U0‹) *:>Q @- .5em 3Y75- Bov. (.5em
. _H6() EY _GS<)
-: padding-top : .5em
? padding-bottom ) g) O7J7U0j< _G^ @- &p27M E0v0 Z) @G>-?
34t7H<) 3Y75><) E8Y 78M ECN% )b7- 7-) ( padding-right ? padding-left
Feq,M •790? mC4< 39tj><) (@G>-) 1%),U<) *:>Q W'q ?) 1%),U<) @- 1%7U<
_2 _>N'5% Z) @G>.) \J7U0†M j2? mC<) r,q ·-),8<) g) 7€.) em r)
( padding: .5em ) _GS<) )B8M 7Jeq,< padding r) 1'G% 7-eCNY (O7J7U0()
_GS<) rjo @- &p2) =|,% w,6? O7J7U0() *:>Q @- .5em 3Y75- Bov. w,6
. _H6() EY
margin
boder

.5em
’ 4Z'F
|f
( center )..0• ¾+X

padding

-: float: left
w,6 E'<) 38U<) ECN0 EJ? float : right ,J? &o) _G^ W4T E0v0 Z) @G>.?
Z) w&T) .\.,';0 7- _GM g) 34-72 78'q75- g) span ?) divr) 3q75- 78M Z,G0
7- K8H0 w,6? (7p- Bov% w,5Y •490 ( @G< c,4/><) K8Y EY j:4+ 7CJ 1Nt &-()
left ?) clear : right 1'G.? @:J7U0() `H% Bov.? clear &LCT eQ,. 7>2 1'2
&:• F&:o() 3P:L<) IBJ? d75:<) ?) @:>:4< \:4T Z72 7- W4T D,N. Z) ECN. )BJ?
.]ES<7M K4N<) c7M @- 7CJ 780&2b @G<? &:lN'<) A7Q )b) _:4+ _GSM (ˆ 3-en'5By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 25
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

 div span h 17/ • •0] ,* ¬'y'( ,/ ¾+X EgM \M +G•f o
)bˆ *:/'5% @G< d,-() a:4T „4'n0 ( EG< K8C:M ‡&H<) O7J7'>M _oe% Z) e.&% (
&:•v'<) 78< _>N0? &/6 rVC0) ~+,0 _>N0 div Z) ,J ‡&H<) r,9% Z) &:lN'<) A7Q
~:2 .. &>'5'Y span r) 7-) 7JeNM E0v0 w,6 E'<) D),2() W<) 3l5C<7M ( u7n<)
¶ a<b
.. *.&5<) r7p><) )BJ W<) &XCC<
<style type =”text/css">
p
{ color :#ff0000 }
div

{ color: #0000ff}

</style>

076•I
J% NT.

<p> E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. œ'- J(p ®“g +w
<div> E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. E6 J(p ®“g +w 0"- h©f. œ'..0"- h©f. E6
</div>
1(y 1[ ( p ) E-' ,g,f((‹ +I (¦ '{ ) Š 076•I ,Y7J% ‘!". œ'- J(p ®“g +w
Ž3 \ ’ 17IT/,5 17IJ(p 1* ,YT!- ,* N* '‹'* +G•G 1 J(p \ ’ $.$V 0". 0"- +w \'[G œ'- Ž(p 1* J(V
</p>

... + ,I3 0YˆG œ'- p7If
K6,<) )B8< I7C>>t 7>2 &:•v'<) 78:4T *+,. w,6 34>U<) IBJ EY
..0"- h©f. E6 E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. E6 J(p ®“g +w 0"- h©f. œ'-

( p ) K6,< 7J7C>>t E'<) (u),n<)) O)&:•v'<) 78:4T •l/. w,6 34>U<) IBJ EY
@:'4>U<) @- 789l6 7- *- 3<,t,- E0v0 @< 34>U<) Z) g) e.eQ &/6 @>| @G<?
&/6 EY Z,G0 w,6 _>U<) @- 34>Q _2 Z) g) @:'9M75<)
-: ˆ82*
*- 3<,t,- E0v0 K< 78CG< p K6? @>| $%72 $9l6 E'<) _>U<) *:>Q Z) ›q(
K• W<?[) 34>U<) W4T •lŒ p r) K6? Z) g) 7JD&H>M F&9Y _2 O]7Q _M 78€NM
*|,<)?) \>6? •4P.? 78C- )]VQ Bov:< div r) K6? 34>U<) ~L'C- ’&'T)
g) \9l6 gB<) &/5<) `H% EY div r) K6? @>| gB<) mC<) 1'G. Z) EN:l/<)
Z) _M _L;. K< a<b @G< eNM •4P. K< p r) K6? Z( a<b? p r) K6? W4T g,';><)
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 26
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

.. &/6 rV% K• ( div K6,< g) ) 78M u7n<) &:•v'<) •lŒ? &/6 $<V% 34>U<)
EY @G< 34>U<) IBJ $l'2 div r) K6? •4• eNM @G< 34>U4< 3:9M i7CJ Z72 7NlŒ?
•4•) K• 7J79l6 @.B<) @.&/5<) `H% @>| E0v0 Z) @- (eM 78M u7o e.eQ &/6
.. p r) K6?
span h,/ 1[ h,k( x]L HI[f

<style type =”text/css">
p
{ color :#ff0000 }
span { color: #0000ff }
</style>
076•I
J% NT.

<p> E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. œ'- J(p ®“g +w
<span> E-' “Y ®,f((‹ ,(3 076•I ,Y7J% “]f. œ'- J(p ®“g +w </span>
0"5 x]L 1(y 1[ .. ( p ) E-' ®,f((‹ ,(3 076•I ,Y7J% “]f. œ'- J(p ®“g +w
. ,YIT!- 17IJ 17IJ(pJ 0"5 x]L 1(y +G•G œ'- J(p ®“g \ ’
</p>

-: p7If
w,6 34>U<) IBJ EY K6,<) )B8< I7C>>t 7>2 &:•v'<) 78:4T BHC. w,6 34>U<) IBJ EY
7>2 &:•v'<) 78:4T BHC. w,6 34>U<) IBJ EY K6,<) )B8< I7C>>t 7>2 &:•v'<) 78:4T BHC.
@>| E0v0 w,6 34>U<) IBJ Z) g) &/5<) `H% @>| @G<? .. ( p ) K6,< I7C>>t
. 78'9l6 @:'4<) @:'4>U4< &/5<) `H%
:- ˆ82*
7C8Y ...IBJ 3U:'C<)? div c 3t7n<) @:'9M75<) @:'U:'C<) @:M wj'o‹) $Xq( a4N<
.. 34>Q _G< e.eQ &/6 eQ,. ( g) \€NlM (,t,- ]7Q
.. 0• , .0- M,k* “•,f
<p>KL0IL <span style =” color: #ff0000”>KL0IL </span>KL0IL </p>
-: p7If

$%&'%7'%&'%7'%&'%)
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 27
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

<p> KL0IL <div style =” color: #ff0000”> KL0IL </div> KL0IL </p>

-: p7If
$%&'%)
$%&'%)
$%&'%)
... =|?) _GSM ‡&H<) $Xq( a4N<
( ‰7T _GSM ) -: div ? span @- _G< \4-72 \4p-) BovC<
<html dir="rtl">
<head>
<title>div</title>
<style type = "text/css">
div { background-color: #ffccff;
margin-bottom: .5em }
</style>
</head>
<body>
<div style = "width: 10%"> )]F Ep8 1* %a^ J(p ®“g “••G œ'- ’
</div>
<div style = "width: 30%; text-align: center">
X,— Ep8 1* %a^ ,gZ $T* 8,5* “••. ª7)/ uFIf( ,/ |f Ž p. œ'- ,fg
e^ +g Œ FF{( 8,5( \M 40X,!* 0"- h©f. œ'5w |f # $I* • • 1% # – •´w
X,— Ep8 1* %</div>
<div style = "width: 20%; height: 30%; overflow: scroll">
%a^ Z $T(/ ·0
¬,]GZM ª78 1* 8,5( \'[G \ Š#$8 J(p ®“g +w ,fg
Z,! Z'Y• N* X,— Ep8 1*</div>
</body>
</html>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 28
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

... 7.,6 r7p><) )BJ _4;C<
e^ \%) e9'T) @G< a.e< =|)? ]E^ _GY cde'><) Eo) a< e.eQ eQ,. ( e9'T)
K>t) K• 3;HL<) •hd EY div _< style r) K>t) ~:2 ,J 7>8<?) @.&-) aJ7l'%)
a< $4+ 7%) cde'><) Eo) 3;HL<) K5Q EY div r) K6? _o)D div _< style 7€.)
•hd EY K:>L'<) @- )]VQ $l'2 7%7Y D,G<) 3M7'2 EY \'9.&Œ 7C- jG< Z) 79M76
EC%) c7M @- _M klN<) c7M @- `:< )BJ? div r) K6? _o)D \C- )]VQ? 3;HL<)
@;CY Feq)? 3;Ht EY @:'9.&/<) *>U% Z) @G>. \%) EJ? 3-,4N- a< _t?) Z) e.d)
jY a<b @- $UTV%) $%) )b)? a< i?&'- &-()? ..a<B2 `:<h @:'9.&/<) 7C>4N0
‡,Y $%) \l'2)? 7CJ D,Q,- &:• div K6? _o)D D,Q,><) D,G<) Z) &l'T) a:4T
EHY a:4T ( œ07C<) `H% E/N. w,6 3;HL<) •hd EY D,Q,><) r?() 1%7UM
78N>U. 3.78C<) EHY 39.&/<) $%72 7>8- 78N:>Q O)&:•v'<) •l/0 w,6 @:'<7;<)
. 78N:>Q 78N€.?
KN% overflow: scroll D,G<) )BJ D,Q? ,8Y aJ7l'%) e^ gB<) E%7p<) &-() 7-)
*€0 Z) ODd) )b†Y a07-,4N- W<) 78H|) )b) a:4T Fe.eQ 3P:t IB8Y cde'><) Eo)
„9Y 3P:L<) IBJ 3M7'2 (ˆ a:4T 7>Y ( scroll ) – span r) ?) div r) 3q75><
. 78>6) @- 3;|)? 78%) *+,0)?

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 29
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

: ˆ82*
_9•) Z) e.d) ( 7%7Y 79M76 a< 39M75<) 3P:L<) g&2b ‰eT @- œTVC0 ( cde'><) Eo)
3P:L<) K8H0 )BGJ \'+? ]E^ _G< @G< _>- )BJ 7%) K4T) 7%7Y ›H;<) F&pGM a:4T
.. „9Y 78XH;0 a%) @- _€Y) 78XH;'Y
.... a< 72?&'- \4:4;'Y a< Z7;'-) I&l'T)? spanr)? div r) W4T &o) (7p<html dir="rtl">
<head>
<title>div & span</title>
<style type = "text/css">
div { background-color: #efefef;
margin-bottom: .5em;
font-size: 1.5em;
width: 50% }
p { text-align: justify; color:#ff0000 }
</style>
</head>
<body>
<div style = "text-align: center">
²0 \ Z'"( </div>
<div style = "float: left; margin: .5em;
text-align: right">
j07Ÿ x7 M U ¬$!G \ N7"I5G Žg #$). \ N7"I5. ’“ $78' KL </div>
<p>
’Z'"* 1* \'[G \ +w -("G Kf3 • ²Z$I( +••w ŒGZ$O ŒG,. 'g Œ8'(i ,f* 2[
’•w ®,f(IG ,* Ž7L J% j$%,5f ,fg 1)fw • • +w ##0IG 2w Œ*$TG J% 17J*,
KL0ILM
,YJ(3•/ *S H5[* Œ!5[* \'[. Œ ŽFL +/0% U$TG
</p>
<div style = "float: right; padding: .5em;
text-align: right">
KL0ILÄ NO '* 0.'"G E7(FG</div>
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 30
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

<p>
•G,)]F ‘L 0 h,(p 0)5 w,y& 7]73 J% ²Z$I( +• EJ IG œ'- ,fg
Ž!O 0!F Š03• $T EJ I $ / ¬ $/M 07[]I 1* 27JO 07F 1* 27JO 'g •7J% ,* Ž[w
¬ $/M ©7(IJ h'‹' Å,I]* 'Yw ¾+X Ž3
<span style = "float: left"> welcome to cascading style sheets
</span></p>
</body>
</html>

W4T 39l/><) ?) 3N+),<) ( m‘7Ln<) ) O)&:•v'<) EJ 3-,4N- &o) 7C.e< E9M Z()
: (border) O)d7Œ‹)
w&N0 w,6 d,L><) r7p><) W<) &XC0 Z) D&U>M $%7Y a< 78Ht) Z) *:/'6) (?
?) (border) d7Œ‹) a>6 r7G^) @- _G^ g) 3:4G^ E8Y 78C- Feq)? _2 _G^
. \>:>L0
-: ,Y *, ±7F
-: \<7G^)? border-width :
border-width : thick o
border-width : medium o
border-width : thin o
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 31
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

-: 78<7G^h? border-style :
border-style : groove o
border-style : inset o
border-style : outset o
border-style : ridge o
border-style : solid o
border-style :double o

border-color:
border- _GS<) )B8M 1'G0 )b) D,6() Z,4<) ’&HC< Ie.&0 Z,< g) \l%7UM *€0?
...Ie.d) gB<) d7Œ‹) Z,< \M eL+) )BJ? color: #000000
r7p><) )BJ @G:<? 79M76 78< 7C+&/0 d7GY) FeT \M *>Q) w,6? j-72 jp- BovC<
-: •M75<) EY \< 7C+&/0 7>T 7C< 3NQ)&: 3XqjK:XC'< Fe:Q 39.&Œ E8Y class r) g) ]7Te'6‹) W4T K‘7+ )BJ 7C<7p- _NQ) w,6
... 78< 7C07>:>L0? 7%d7GY) },C0? O)d7Œ¹< 7t,Lo? 7%d7GY)
<html >
<head>
<title>borders</title>
<style type = "text/css">
body { background-color: #ccffcc }
div

{ text-align: center;
margin-bottom: 1em;
padding: .5em }

.thick { border-width: thick }
.medium { border-width: medium }
.thin { border-width: thin }
.groove { border-style: groove }
.inset { border-style: inset }
By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 32
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

.outset { border-style: outset }
.orange { border-color: orange }
.black { border-color: black }
</style>
</head>
<body>
<div class = "thick groove">This text has a border</div>
<div class = "medium groove">This text has a border</div>
<div class = "thin groove">This text has a border</div>
<p class = "thin orange inset">A thin orange line...</p>
<p class = "medium black outset">
And a thicker black line</p>
</body>
</html>

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 33
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

-: style h ,Y/ HI[. \ 1[(. T.0i 0• ,f7J% +T/ • o
1'G0 Z) e.&0 ( a%) ’&HC< 7CJ Fe.eU<) F&GH<) @G< 79M76 I7%&2b 7- _2 •lŒ 7CJ
D,G<) 1'G0 Z) e.&0 ( g) a';Ht `H% EY (styler) D,2 g)) style _< a>:>L0
<head>--- r) E>6? @:M 3;HL<) •h&M html r) 3;Ht EY style r7M u7n<)
\:4T &:•v'<) •:l/0 c,4/><) K6,<) _o)D EY 3;HL<) K5Q _o)eM (? ---</head>
W4T g,';0 „9Y g) 3t7o 3;Ht 78< e.&0 a%) g) <p style------->------</p>
... ( css ) D)e'-†M 78C.Vn0? 78>:>L0 ,J a:4T gB<) _2 )b) style r) D,2
:7>J? style r) E>6? @:M d,L;- Z,G. Z) &:• @- style r) D,2 1'2) @G<
<style type ="text/css”>
.
.
</style>
.. 0k3 -y'f Ž7JO $ / M,k* “••L œ'- #'[ HI3 „Tw

@:M g) html r) 3;Ht •hd EY ‡,Y D,G<) )BJ 1'G0 Z) 1U. E%7p<) ES<)
D)e'-†M I7%vS%) gB<) style r) ~4- ]7Te'6ˆ D,2 )BJ? ) )BGJ head r) E>6?
.. ( css
<head>
<link rel =”stylesheet" type ="text/css" hreaf=” uJ( E- .css" />
</head>

a07;Ht ?) html O7;Ht \M eQ,. gB<) ~4><) `H% EY Z72 ,< \N€0 ~4><) K6)
=:;L<) ID)e'-) *€0 a%7Y &o) ~4- EY g) a<b &:• Z72 ,< 7-) 3P< gvM 3>>L><)
...( src =---) d,L<) ]7Te'6) 3:H:2 c7'G<) r?) EY 7%&2b 7>2
:2*,3 M,k*
P
Em
.key1

{ color: #ff0000 }
{ color: #ffffff ; background-color: #000000 }
{ color: #000000 }

,fLS ·0]f (css ) # $I*´/ ®,fˆ]8 ®,f!I3 \ $ / style h uJ( ,f(7(FG “g \ ·0]L
,fI)]‹ Œ/ $V'G œ'- ’“ uJ( x]L +w ®,fˆ]8 ,fL ·0w J% mystyle.css ®,f7(... €0• v ’ html h,/ ,Y((FL œ'- +I
..... style h 17(- 17/ ,(g0F8 E style h #'[ +I/,I3 \ Æ8M : ˆ82*

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 34
© 2003 - 2004

Cascading Style Sheets With HTML And Any Languages
2003/02/05

-: html h )]‹ E7(FG o

<html dir="rtl">
<head> <title> KL0ILM Š,7fTG HI3 J5J-</title>

<link rel ="stylesheet" type ="text/css" href =" mystyle.css" />
</head>
<body>
<p> +/0 Z'"( ®'V0. ,* Ž3 J% ’'I)G œ'- KL0ILM Š,7fTG HI3 J5J-</p>
<p class="key1"> \ Z'"( Š,7)G N*</p>
<p> <em> MST</em> </p>
</body>
</html>

By Sami AL-Rabai3h Help With : Thamer Mohammed & Mahmoud Hussain 35
© 2003 - 2004

Sign up to vote on this title
UsefulNot useful