A presentation about finetuning Cascading Style Sheets (CSS) for web pages.

2. 2
! quot; #$ % & ' ($#
! quot;# )* $ & #
# '
! % +, )
! %''$ * & ' ($ $ '
# %
! %''$ # $ & ' ($ $ '
- # %
! . #' % & ' ($#$

3. 3
CSS Page Layout Overview
/0 quot;
% -- ) # &*
$ )
1
quot; ** $& # %
& #
#-'
2 # -- & # #) ' *& '
($# #%
3 -&
,
#4
#4
& ) * #'
(
#4
#4
& )-
#4
#4
& &-
#4
#4
& #'
$ -

4. 4
CSS Page Layout Advantages
# #& '
( &( #
#
( &# -# #
$$
5# # (- )$ -#
3 #- #
)& ' ($##
) *#(
* ## )
( #
( -$#&
- ) #&
(
$& # #
& - #/ *

5. 5
$ # 6$ -*
$& # %
&
7 8.9 8 . )& '
($ $ ' *
# # & ) # #) &
$ (
'$%
#

6. 6
% ##
! ,: * '
# &
-##
#
5) '
)
! *# #
# # )#
*)
+)
! +# # &) '
)
)# - '
'
! #- # -&(
#
& *# #
- # ));#
-#

7. + )&( -## ) #(
)) # / * ' ) $
& -#
<- -#
#4
#4
& ** -4$
## 4
8 . )% 4 - =
== 2 <
#-

8. 8
!
% '# #
h1 { background-color:#cccccc;
-# # #
padding:5px;
# $)
color: #000000;
# &&
} <- -#
#myContent { position: relative; #4
#4
& * ( # -4
>
left:30px; ##?
4-
# '4#
4& '4
font-family:Arial,sans-serif;
}

9. 9
quot;#
5 (& # # -#
#* )
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#content {position: absolute;
left:200;
<-
top:100;
#4 ?
#4
&
font-family:Arial,sans-serif; )$ $# -4& '
@
width:300; A * $ . ($
# #
}

10. quot;# $ %

11. 11
%
3 - ## # -
# B # # '#
C
h1 { background-color:#cccccc; #) #
padding:5px; #* )
color: #000000; # -#
}
# ')
$
p { font-family:Arial,sans-serif;
$' # #
}
&&# (
#yls {float:right;
% 6$ #
margin: 0 0 5px 5px;
#4
# 4 -, '
& )
border: solid;
} -$ 4 ## 4
$

12. 12
% %
%' $ ) - # ) & ()
! display:none ;
-# # ) & ()
*
! display:block ;
-# )) *6 - #?? #
#(
$ -#
$ (& 6
! display:inline;
-# * )) -#D
# # (* 6 - # $
$ D EF
! # # - -#
# 4' 6 #* ' # #&
#4
& 4 '- 4
4 1 4 G ) & ( & #?
4 4 ?& ( &,

13. 13
&' %
) # #6 '
) -#
/* '
&
) $# ) , $
>?
BC
3 - # # ' >?
), $ &&
#&
-## >?
), $ ))
# - # &'
% 6$ #
#4
#4
& 0
-4 4 = =
% & & >?
), &

14. 14
% (
)
&#
#&
#
*# -
#
'#
)#
-? ) #
-, )
? #
'#
- ? '#
- , '#
?
>? ) ,
*# (
#
&

15. 15
!
/ ## #$ %
& ' ( $@
#
/ ##) *#
# )* $ & #
# '@
0 / ( $)( $$ # >? ) ,%
& & #@
(

16. $ %
NOTE: Except for imagelogo, all
elements on this page follow
normal flow

17. 17
&& ##
# $-D#
) $# 6 $ )
*'
.#
? $- '#
! ##H
! )# &H
,
quot;' #
? $- ##
! - '? # &H
,
#' #I & #J
! # '#
H

18. 18
body {margin:0;
font-family:Verdana, Arial, sans-serif; }
#wrapper { background-color:#e8b9e8;
color:#000066; }
#leftcolumn { float:left;
width:100px; }
#rightcolumn { margin-left:100px;
background-color:#ffffff;
color:#000000; }
#logo { background-color:#eeeeee;
color: #cc66cc;
font-size:x-large;
border-bottom: 1px solid #000000;
padding:10px; }
.content {padding:20px 20px 0 20px; }
#floatright {margin:10px;
float:right; }
.footer {font-size:xx-small;
text-align:center;
clear:right;
padding-bottom:20px; }
.navBar{ text-decoration:none;
margin: 15px;
display:block; }

19. 19
*
7
! #&
( & #- # -#
&'
! I # ##
)J ## ( #
! # *# # 9
#$ 8.
7 )
! #( & # ( -# &'
! K ## ## ( #
! ) # *# # 9
#$ 8.

20. 20
*
&# #&&
$
!$ # )
- # -- ()
$ -
# - $## - #,# ##
) & ' # )* #
( $#
$ # 4 )' '
#4
& -4 *##

21. 21
# %
$( 6 ( #,
7 /0 % L ) # #
% 6 ( #,
! # 4;
# 4'
& 0' ?4 )# 4
% ' #-& ( 6 $ )
$ *'
% ' #-& ( )
$ *
7 -- ## )# $ , #)
& )
M , # $ &' # 6 , # #
#& ( ( -
* N
+ &# # N

22. 22
!
< )#) -# #(
# 4'
#4
& -4 4
!.' # % &' ($# ) 6 # ##
$
# 4 * ##
#4
& & -4 # 44
! % -& # ##
$ )% ? #) #
# 4- (
#4
& * -4 44
!3 ( )')
?' *) &
#4
#4
& 0 '#4 4
4( % '
! /0 M # %
% $
#4
#4
& *$ * # -4 * ($ 4
4 #
! # % &' ($#
#4
#4
& * * ( -4 ) , # 4
)4
! ) )% ( #, #

23. 23
% ) ?# '
$ % ) '#(
## ' & ' ($
$ #
+ &# #
quot; '%
# $
# 6 # # ' &# #
# - '(