25

IST 561 Session 5, March 9, 2009--Finetuning CSS

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: IST 561 Session 5, March 9, 2009--Finetuning CSS

�������������

���������� ������������������������

Page 2: IST 561 Session 5, March 9, 2009--Finetuning CSS

�� ������ ����� ��

� � ��������������������� ! "������#��$���%�������&'���(�$#

! "��#�����)�*���$#��&���#�����'

! � ��%���+�,��)��

2

! � ��%���+�,��)��

! %����'$���'�*����&'���(�$#��$���'�%��

! %����'$���'�#������$-��&'���(�$#��$���'�%��

! .��#��'�%���&'���(�$#�����$����

Page 3: IST 561 Session 5, March 9, 2009--Finetuning CSS

CSS Page Layout Overview

� /0%�"���--��)#�����&$*��� �)�������1

� "���*���*��������$&&��#����%�����#����# ��-��'

3

���# ��-��'

� 2����#������--���&��#����#��)���'����*�&'���(�$#����# �%��

3,-&��� � ##& 44����)��*���#(�'��� ##& 44��������)���-� ##& 44������&����-� ##& 44����#�$'�������-

Page 4: IST 561 Session 5, March 9, 2009--Finetuning CSS

CSS Page Layout Advantages� ���#���#(&�'�& (����#���� �#(�����&�#�����-��#�$�#$��� 5�#��#���(��-�����)��$-��#�� 3�������#��-��#������ �������)�&'���(�$#����#���

4

� �������)�&'���(�$#����#���� �������)�������*���#(� �*���#(�#��)�������#(��������-$�#�&���-�)��#(&��� �$&&��#����# ����-�#���/�*

Page 5: IST 561 Session 5, March 9, 2009--Finetuning CSS

��� ��� ������� �� �� ���

� ���$�����# ���6����$�����-�*��������$&&��#����%��

5

� 7��������8�.����98�.��)�&'���(�$#�$���'�#*���������&��)$�#���#(�)��&�� ���������'�#��$���%���

Page 6: IST 561 Session 5, March 9, 2009--Finetuning CSS

������� ����

� %��#��#! ��,#�:���*�&'�����-��#�����# �����#����

� 5))��'! ����*�#�����# �����#��#��)�# ��*��)��

� +��)��! +�#�����# ��&))��'�

6

! +�#�����# ��&))��'��)�# ��-�'��

� �'��! ��#��-�����# ���-&#(��&���*�#�����# �����-��#��)�);���#����-��#�

Page 7: IST 561 Session 5, March 9, 2009--Finetuning CSS

���� ����

� +�������)��&�(�������-��#�����# ����)���# �(������)�)����# ��/�*�&'��)��$-��#

� <���-���������-#������� � ##& 44����*���*������-4#$#�����48�.=�)=%��42��-�=<���� #-

Page 8: IST 561 Session 5, March 9, 2009--Finetuning CSS

!�� ���������������

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

"#�����������������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

"#�����������������$� � %��

Page 11: IST 561 Session 5, March 9, 2009--Finetuning CSS

��� ����%����

� 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

���%� ����%����

� %����'$���� ����)���������-��#����)��&�(�)�

! 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

&�'�������%����

� �)������# ���#�6��'���)���������-��#������/�*�&'��

� � ��)��$�#�>?��)�,���$�����B�C��

� 3��-��#����# � �' ���>?��)�,���$��������&&���

13

��)�,���$��������&&�������������#�&�������-��#����# �������>?��)�,���$������)���)����# ���-��������# ��&'��

� % ��6��$#� ##& 44�����0�� �������-4%��4&�=&��=>?��)�,��&

Page 14: IST 561 Session 5, March 9, 2009--Finetuning CSS

�����%������( ��� ���� ��� ����

) ���� ������ &���#���� #�&� ���#� *�##�-� ��' #� ��)#

14

� ��)# � -��?��)# � -,?��)# � ��' #� -��? ��' #� -,? ��' #� >?��)�,� ����*���#(� ��������� ���#� ����� ���&

Page 15: IST 561 Session 5, March 9, 2009--Finetuning CSS

!����

���/ #����# �����������#��$���%�������&'���(�$#@

���/ #����# ��)����������*�#��������#�����)�*���$#��&���#�����'@

15

���#�����)�*���$#��&���#�����'@

0��/ (���$�)�(�$�$���# ��>?��)�,�%���&��&��#(@

Page 16: IST 561 Session 5, March 9, 2009--Finetuning CSS

��� ��

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

Page 17: IST 561 Session 5, March 9, 2009--Finetuning CSS

� ����� �� ��� ����� ��&&������#����# ��#������$-���D��#��)��$�#�*�6'��$�)������

� .��#?���$-�����'#���

17

� .��#?���$-�����'#���! ���# ����#H

! ��)# ���&,H

� "�' #?���$-�����#��#! -�'��?���# ����&,H

� ���#��' #�I�������& �#�J! ���# ���' #H

Page 18: IST 561 Session 5, March 9, 2009--Finetuning CSS

� ����� �

� ��� ����

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

������������*����� �� ������

� 7������� ! ����#(���&&�����#��-����# ���������-��#�����&'�! ��I)�#J���##�������# ���#(���� ��#��! �����##��*$#�����# ��98�.�

19

! �����##��*$#�����# ��98�.�

� 7����) ! ����#(�������&�������#�����(��������-��#�����&'�! K���##�������# ���#(���� ��#��! �)�##��*$#�����# ��98�.�

Page 20: IST 561 Session 5, March 9, 2009--Finetuning CSS

������� � � �*�� �� ��

� ������&#�������# ��&$�&��� ! �$� ����������������#�����)������

� ���-��#���--���(�$��)�������-�����

20

���#����-��$��#�#�����-����#�,#�����#��#�� �)����������&(��' #���)�*$##���

� ��$��� � ##& 44��)��'��'�����-4��*�##�

Page 21: IST 561 Session 5, March 9, 2009--Finetuning CSS

����#��������%�

� �$��(�� ��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

��� ��� ����!��������

� <���))�#����������-#����#�( � ##& 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

��� � ��

� %�����)�����?#$���'�%��)��'��#(���� ��#��#�������'$���&'���(�$#��

� +��&#���#�

� "�������'�# ��%�������$����

23

� "�������'�# ��%�������$����

� �#�#6���#�-��#��'��&�# ���#�� ����'(�

Page 24: IST 561 Session 5, March 9, 2009--Finetuning CSS
Page 25: IST 561 Session 5, March 9, 2009--Finetuning CSS