ist 561 session 3, feb 9, 2009--xhmtl and css basics

21
1 ! "#$%& " ( " ( )* )* +,"’’-. /-’"&’/&*" * " /+ - (&" ( " (’/ ’+ ( " (’// &"(** ’ 0 " ’" (" ’" " (* 0 ’’/ " (’ " - ’" " ( 2

Upload: da-garofalo

Post on 03-Sep-2014

1.249 views

Category:

Technology


0 download

DESCRIPTION

The presentation from the Feb 9, 2009 class which covered basics for using CSS (cascading style sheets) with XHTML pages.

TRANSCRIPT

Page 1: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

1

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

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

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

�����"�(������"�(�)����*��)����*��

� +��,"''���-��.� �/���-�'��"����&����'���/�����&��*���"���*�"������/��+��

� �-����(����&���"�(�����"�(����'���/����

� ��'������+�����(��

� �����"�(����'���/������/������&"(������**�����'��������0���������"��

� ���'�"�(�"�'"������'��

� ��"�(��*��������0�����'����'���/����

� �����"�(�����'�������"���'������

� -�'"��"�(���

2

Page 2: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

2

3

CSS AdvantagesCSS Advantages

� %�����������(���/�������(��'������������'

� ���'��"�����������&��*����������

� ���'����������������"����������������*�������'"� �����&��*��/��,�����(�

� 1�����"�''���*�''������*����

� 2��"����"���*�"��������

4

Page 3: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

3

��'"������'����'"������'��

� ��&"(����"���/�������&��/��+�����(��

�3����/�����'������"������&������������(

�#��'����'������/������"&"���'�*���

5

2*�������'��2*�������'��

� ��&"(����"���/��/���������"����&���+�����(�$�

�3����/��������4���'�5��'�*���

�#��'������/�����"���+�����(�����*���

Page 4: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

4

20�����'����'��20�����'����'��

� ��&"(����"���������������0��&"'��,"�/�$����&"'���0����"��

� �/��������4'"� �65��'�*����"���/��/���������"����&���+�����(�������"�����"��,"�/��/��$����&"'�

�*���������'���*���������'��

� �"*"'������20�����'����'��

8

Page 5: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

5

9

��������0���������0���*�'���*�'�

��&"(������+�����(�����"��'����'�����0�������''�,���� (����$

body { color: blue;background-color: yellow; }

�/"�����'��'������,�"�������"�(�/�0���"*�'���'���-�'��������/�,����'�,$

body { color: #0000FF;background-color: #FFFF00; }

10

Page 6: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

6

11

12

Page 7: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

7

13

14

Page 8: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

8

Page 9: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

9

��&"(��"�(��'���,"�/���&"(��"�(��'���,"�/���'"�������'"�����

� �/�����'��#���"����

� 7�'��.��������*�������'����'����"���������������-�'�����"��

20�*�'�.����&"(���������'�����0��"�����4/�5��'�*���.<h1 style="color:#ff0000">Heading text is red</h1>

20�*�'���.����&"(�����/�������0��"���/��/��"�(����������&"(������(������� (�����"���/��/��"�(

������������'����'����'����"����,"�/�8

<h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>

17

18

<style type ="text/css">body { background-color: #000000;

color: #FFFFFF;}</style>

Page 10: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

10

���2*�������'�����2*�������'��

<style type="text/css">body { background-color: #E6E6FA;

color: #191970;}h1 { background-color: #191970;

color: #E6E6FA;}h2 { background-color: #AEAED4;

color: #191970;}</style>

•�/��������'������������/��('���'����'����'���&����/�����"�����(�$

•�/����('���'���'��������-���"���&���4/�5����4/�5��'�*���������/��/�����/�����'����'��$

9�-"�,9�-"�,

�$ �������'"����/���������������������������+�����(�:

�$�+/�����"(�"�(�����(���/����������'������/����/����/���&��'����'����&�����0�������� (�������,/��"��"����(����������������&"(�������'����'���&������/���0����'��������� (�������'��:

;$������������"��������-����(�������"�(��*�������'���"�������&�"�'"������'��:

Page 11: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

11

��&"(��"�(���0��,"�/�����&"(��"�(���0��,"�/���

� ����������"���&������&"(��"�(���0�.

� &���<,�"(/�

� ��&"(������/����'������&���0�

� &���<���'�

� ��&"(�������0��������"��'"�����'�

� &���<�"=�

� ��&"(������/���"=���&��/����0�

� &���<&�*"'�

� ��&"(������/��&��������&�����&��/����0�

Page 12: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

12

p {font-family: Arial,Verdana, sans-serif;}

2*�������'���2*�������'���20�*�'�20�*�'�

<style type="text/css">body { background-color: #E6E6FA;

color: #191970;font-family: Arial, Verdana, sans-serif; }

h1 { background-color: #191970; color: #E6E6FA;line-height: 200%;font-family: Georgia, "Times New Roman", serif; }

h2 { background-color: #AEAED4;color: #191970;font-family: Georgia, "Times New Roman", serif; }

p {font-size: .90em; }ul {font-weight: bold; }</style>

Page 13: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

13

26

<style type="text/css">.new { color: #FF0000;

font-style: italic;}

</style>

<p class=“new”>This is text is red and in italics</p>

Page 14: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

14

<p id=“new”>This is text is red, large, and in italics</p>

27

<style type="text/css">#new { color: #FF0000;

font-size:2em; font-style: italic;

}</style>

28

Page 15: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

15

������4������4"-5�2'�*����20�*�'�"-5�2'�*����20�*�'�

� ��&"(��������(��&����������

� 2*������.

<style type="text/css">.footer { font-size: small;

text-align: center; }</style>

� XHTML:<div class=“footer">Copyright &copy; 2009</div>

29

30

Page 16: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

16

������4������4����5�2'�*����20�*�'������5�2'�*����20�*�'��

� 2*������.

<style type="text/css">.companyname { font-weight: bold;font-family: Georgia, "Times New Roman", serif;font-size: 1.25em;}</style>

� �����.<p>Your needs are important to us at <span

class=“companyname">Acme Web Design</span>.We will work with you to build your Web site.</p>

31

body {background-color:#E6E6FA;color:#000000;font-family:Arial, sans-serif;font-size:90%; }

h2 { color: #003366; }.nav { font-size: 16px;

font-weight: bold; }

body {background-color:#E6E6FA;color:#000000;font-family:Arial, sans-serif;font-size:90%; }

h2 { color: #003366; }.nav { font-size: 16px;

font-weight: bold; }

20�����'����'���/����20�����'����'���/����

� Multiple web pages can associate with the same external style sheet file.

32

site.cssindex.htm

clients.htm

about.htm

etc…

Page 17: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

17

33

<link rel="stylesheet" href="color.css" type="text/css" />

3�"�(�3�"�(���20�����'��20�����'���'���/������'���/���

To link to the external style sheet called color.css, the XHTML code placed in the header section is:

<link rel="stylesheet" href="color.css" type="text/css" />

body { background-color: #0000FF;color: #FFFFFF;

}

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

Page 18: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

18

9�-"�,9�-"�,

1. Can you provide a reason to use embedded styles? Where are embedded styles placed on a web page?

2. Can you describe a reason to use external styles? Where are external styles laced and how do web pages indicate they are using external styles?

3. Can you write the code to configure a web page to use an external style sheet called “mystyles.css”?

35

�����"�(�1�(�������"�(�1�(���������,"�/��������,"�/�����

#container { margin-left: auto;margin-right: auto;width:80%; }

Page 19: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

19

+;����7�'"��"��+;����7�'"��"��

�/���.66>"(��,$,;$��(6���<-�'"����6

%�"�'"�������(���"�(��������,"�/����%�"�'"�������(���"�(��������,"�/����

� 9�-"�,��/����"(���&��/����(�

� ��&"(����('���'�&���������'����������"���&����/��������'�����

� ����"&�����"��'��'�*�����?���/����4/�5��4/;5����������@������'�������'����'���&����/����"&�����$

� ����"&����(�����������/����'�(�����-"(��"����&����������������A���&"(��������������"�����'�������"�&������/$�

� ����������������������(���/��������"���*�����&��/���'�*����������'�����������������$

� 9�-"������������������$

� )�����������"(��"������A *�-�����'����������0�����'�$���&"'�

� 1'���"�(��������"�(������"*�����������"-"�"���,/�����"(�"�(���+����"��

Page 20: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

20

��������'��/���"�(��"����������'��/���"�(��"��� 7��"&������������"�(��/��.����8���*��'��"���/���"(/���������/������������������&���$

� /�� ��/�����������������"�(�B��"(���"�������&�.����,�������/�������������"���-�'��$

� 7��"&���/����/��C����D���*��'������������'���'���

� /�� ��/�������0��&��������'���������/�"���������"����������������-�'����&��������������(�$

� �&�������&���������,�� ���������������E�.� 9�-"�,��������

� !����*"����/��&"������'���/���"���������'"�$�)&�����/��������"��"���/����'�����-���/����'���/���"���������'"�$

� 7�'"���������������/���.66>"(��,$,;$��(6���<-�'"����

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

� "�������"����������"�(����'���/����9�'��������"����,"�/���'��������0�����,�����(���

� �-����"�'"������'�����*�������'��������0�����'����'��$

� �-����������'�����������������'��������"���'������$

� ��������"������7�'"��"���-"��/���.66>"(��,$,;$��(6���<-�'"����

40

Page 21: IST 561 Session 3, Feb 9, 2009--XHMTL and CSS basics

21