ist 561 session 5, march 9, 2009--finetuning css
DESCRIPTION
A presentation about finetuning Cascading Style Sheets (CSS) for web pages.TRANSCRIPT
![Page 1: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/1.jpg)
�������������
���������� ������������������������
![Page 2: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/2.jpg)
�� ������ ����� ��
� � ��������������������� ! "������#��$���%�������&'���(�$#
! "��#�����)�*���$#��&���#�����'
! � ��%���+�,��)��
2
! � ��%���+�,��)��
! %����'$���'�*����&'���(�$#��$���'�%��
! %����'$���'�#������$-��&'���(�$#��$���'�%��
! .��#��'�%���&'���(�$#�����$����
![Page 3: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/3.jpg)
CSS Page Layout Overview
� /0%�"���--��)#�����&$*��� �)�������1
� "���*���*��������$&&��#����%�����#����# ��-��'
3
���# ��-��'
� 2����#������--���&��#����#��)���'����*�&'���(�$#����# �%��
3,-&��� � ##& 44����)��*���#(�'��� ##& 44��������)���-� ##& 44������&����-� ##& 44����#�$'�������-
![Page 4: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/4.jpg)
CSS Page Layout Advantages� ���#���#(&�'�& (����#���� �#(�����&�#�����-��#�$�#$��� 5�#��#���(��-�����)��$-��#�� 3�������#��-��#������ �������)�&'���(�$#����#���
4
� �������)�&'���(�$#����#���� �������)�������*���#(� �*���#(�#��)�������#(��������-$�#�&���-�)��#(&��� �$&&��#����# ����-�#���/�*
![Page 5: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/5.jpg)
��� ��� ������� �� �� ���
� ���$�����# ���6����$�����-�*��������$&&��#����%��
5
� 7��������8�.����98�.��)�&'���(�$#�$���'�#*���������&��)$�#���#(�)��&�� ���������'�#��$���%���
![Page 6: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/6.jpg)
������� ����
� %��#��#! ��,#�:���*�&'�����-��#�����# �����#����
� 5))��'! ����*�#�����# �����#��#��)�# ��*��)��
� +��)��! +�#�����# ��&))��'�
6
! +�#�����# ��&))��'��)�# ��-�'��
� �'��! ��#��-�����# ���-&#(��&���*�#�����# �����-��#��)�);���#����-��#�
![Page 7: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/7.jpg)
���� ����
� +�������)��&�(�������-��#�����# ����)���# �(������)�)����# ��/�*�&'��)��$-��#
� <���-���������-#������� � ##& 44����*���*������-4#$#�����48�.=�)=%��42��-�=<���� #-
![Page 8: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/8.jpg)
!�� ���������������
8
% �'���# �����#������������-��#�������#����#��� �����#���$�)��# �������&&��<���-���������-#������� � ##& 44����*���(��#>���-4��������#4 #-�?#�����'4���4&���#�����'4
h1 { background-color:#cccccc;padding:5px;color: #000000;
}#myContent { position: relative;
left:30px;font-family:Arial,sans-serif;
}
![Page 9: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/9.jpg)
"#�����������������5�������(��&��������# �����#������������-��#����# ��*����������)��
9
h1 { background-color:#cccccc;h1 { background-color:#cccccc;padding:5px;color: #000000;
}#content {position: absolute;
left:200;top:100;font-family:Arial,sans-serif;width:300;
}
<���-������������� ##& 44���?)���$������$#�����-4@&'�A�*���$#�.(�$#�
![Page 10: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/10.jpg)
"#�����������������$� � %��
![Page 11: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/11.jpg)
��� ����%����
� 3��-��#��# #����-�#��B���#C����# ����' #�������#���)�������# ���
11
h1 { background-color:#cccccc;padding:5px;
������#���)�������# ���# ��*����������)��������# ������-��#������#��������'$��)�$���'�# �����#�&��&��#(��� % ��6��$#� ##& 44����-,)���'����-�$4���#$#����4
padding:5px;color: #000000;
}p { font-family:Arial,sans-serif;}#yls {float:right;
margin: 0 0 5px 5px;border: solid;
}
![Page 12: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/12.jpg)
���%� ����%����
� %����'$���� ����)���������-��#����)��&�(�)�
! display:none ;� � �����-��#��������#�*��)��&�(�)�
! display:block ;� � �����-��#�������)���)����*���6����-��#��??���������#�
12
� � �����-��#�������)���)����*���6����-��#��??���������#�����#$��(�������������-��#��$� ���� (&�����6�
! display:inline;� � �����-��#������*�����)���)���������������-��#�D���������#�����#$��(��*���6����-��#�D�$� ����E��F�
! ����# �����#������-���������-#��� � ##& 44'��6���# *��'����#4�#�& ���'��-4�� ���4���14��4�G4)��&�(?&��&��#(?�����&,
![Page 13: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/13.jpg)
&�'�������%����
� �)������# ���#�6��'���)���������-��#������/�*�&'��
� � ��)��$�#�>?��)�,���$�����B�C��
� 3��-��#����# � �' ���>?��)�,���$��������&&���
13
��)�,���$��������&&�������������#�&�������-��#����# �������>?��)�,���$������)���)����# ���-��������# ��&'��
� % ��6��$#� ##& 44�����0�� �������-4%��4&�=&��=>?��)�,��&
![Page 14: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/14.jpg)
�����%������( ��� ���� ��� ����
) ���� ������ &���#���� #�&� ���#� *�##�-� ��' #� ��)#
14
� ��)# � -��?��)# � -,?��)# � ��' #� -��? ��' #� -,? ��' #� >?��)�,� ����*���#(� ��������� ���#� ����� ���&
![Page 15: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/15.jpg)
!����
���/ #����# �����������#��$���%�������&'���(�$#@
���/ #����# ��)����������*�#��������#�����)�*���$#��&���#�����'@
15
���#�����)�*���$#��&���#�����'@
0��/ (���$�)�(�$�$���# ��>?��)�,�%���&��&��#(@
![Page 16: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/16.jpg)
��� ��
� ����$� � %��NOTE: Except for imagelogo, all elements on this page follow normal flow
![Page 17: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/17.jpg)
� ����� �� ��� ����� ��&&������#����# ��#������$-���D��#��)��$�#�*�6'��$�)������
� .��#?���$-�����'#���
17
� .��#?���$-�����'#���! ���# ����#H
! ��)# ���&,H
� "�' #?���$-�����#��#! -�'��?���# ����&,H
� ���#��' #�I�������& �#�J! ���# ���' #H
![Page 18: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/18.jpg)
� ����� �
� ��� ����
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;
18
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; }
![Page 19: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/19.jpg)
������������*����� �� ������
� 7������� ! ����#(���&&�����#��-����# ���������-��#�����&'�! ��I)�#J���##�������# ���#(���� ��#��! �����##��*$#�����# ��98�.�
19
! �����##��*$#�����# ��98�.�
� 7����) ! ����#(�������&�������#�����(��������-��#�����&'�! K���##�������# ���#(���� ��#��! �)�##��*$#�����# ��98�.�
![Page 20: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/20.jpg)
������� � � �*�� �� ��
� ������&#�������# ��&$�&��� ! �$� ����������������#�����)������
� ���-��#���--���(�$��)�������-�����
20
���#����-��$��#�#�����-����#�,#�����#��#�� �)����������&(��' #���)�*$##���
� ��$��� � ##& 44��)��'��'�����-4��*�##�
![Page 21: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/21.jpg)
����#��������%�
� �$��(�� ��6��(�#,�������� 7���/0%�%���L��)#���#��� ��6���(�#,�������! ##& 44;�'����0���'4���?���)#��4� %����'$���#�-&���(�*�6'��$�)�������
21
� %����'$���#�-&���(�*�6'��$�)�������� %����'$���#�-&���(�*��)���� 7�����--��#��#�����)�# ��$��,&��#�)����)�� ���M#��,&��#�(�$��&'���#�����6��,�#�(�# ���-��������*�������N� +��&#���#N
![Page 22: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/22.jpg)
��� ��� ����!��������
� <���))�#����������-#����#�( � ##& 44'��� ���-4���4! .�'��������#�������%���&'���(�$#���)����6��#��#$#�����
� ##& 44��*��#�#�&����-4�#�����4���4
22
� ##& 44��*��#�#�&����-4�#�����4���4! %�-&�� ����������#����#$#�������)�%��?���#�)���#��
� ##& 44-�(����*���-4����4���4! 3�����(������)��'?�)'����*�)�����&��
� ##& 44�����0���'4�#(��4%��4������'! /0%M�����#����%�������$����
� ##& 44����*�$���*�#���-4��*4�(�$#�4! �������#�������%���&'���(�$#�
� ##& 44����*���*���(���-4��)�,)�#4���4! �)����)�%����(�#,��������������#
![Page 23: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/23.jpg)
��� � ��
� %�����)�����?#$���'�%��)��'��#(���� ��#��#�������'$���&'���(�$#��
� +��&#���#�
� "�������'�# ��%�������$����
23
� "�������'�# ��%�������$����
� �#�#6���#�-��#��'��&�# ���#�� ����'(�
![Page 24: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/24.jpg)
![Page 25: IST 561 Session 5, March 9, 2009--Finetuning CSS](https://reader033.vdocument.in/reader033/viewer/2022052505/555a6d13d8b42a972b8b4ccd/html5/thumbnails/25.jpg)