ist 561 session 3, feb 9, 2009--xhmtl and css basics
DESCRIPTION
The presentation from the Feb 9, 2009 class which covered basics for using CSS (cascading style sheets) with XHTML pages.TRANSCRIPT
1
������������������������ ����������� �����������
���������������������� �
!��"���#$�%���&�'�
�����"�(������"�(�)����*��)����*��
� +��,"''���-��.� �/���-�'��"����&����'���/�����&��*���"���*�"������/��+��
� �-����(����&���"�(�����"�(����'���/����
� ��'������+�����(��
� �����"�(����'���/������/������&"(������**�����'��������0���������"��
� ���'�"�(�"�'"������'��
� ��"�(��*��������0�����'����'���/����
� �����"�(�����'�������"���'������
� -�'"��"�(���
2
2
3
CSS AdvantagesCSS Advantages
� %�����������(���/�������(��'������������'
� ���'��"�����������&��*����������
� ���'����������������"����������������*�������'"� �����&��*��/��,�����(�
� 1�����"�''���*�''������*����
� 2��"����"���*�"��������
4
3
��'"������'����'"������'��
� ��&"(����"���/�������&��/��+�����(��
�3����/�����'������"������&������������(
�#��'����'������/������"&"���'�*���
5
2*�������'��2*�������'��
� ��&"(����"���/��/���������"����&���+�����(�$�
�3����/��������4���'�5��'�*���
�#��'������/�����"���+�����(�����*���
4
20�����'����'��20�����'����'��
� ��&"(����"���������������0��&"'��,"�/�$����&"'���0����"��
� �/��������4'"� �65��'�*����"���/��/���������"����&���+�����(�������"�����"��,"�/��/��$����&"'�
�*���������'���*���������'��
� �"*"'������20�����'����'��
8
5
9
��������0���������0���*�'���*�'�
��&"(������+�����(�����"��'����'�����0�������''�,���� (����$
body { color: blue;background-color: yellow; }
�/"�����'��'������,�"�������"�(�/�0���"*�'���'���-�'��������/�,����'�,$
body { color: #0000FF;background-color: #FFFF00; }
10
6
11
12
7
13
14
8
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>
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����'��������� (�������'��:
;$������������"��������-����(�������"�(��*�������'���"�������&�"�'"������'��:
11
��&"(��"�(���0��,"�/�����&"(��"�(���0��,"�/���
� ����������"���&������&"(��"�(���0�.
� &���<,�"(/�
� ��&"(������/����'������&���0�
� &���<���'�
� ��&"(�������0��������"��'"�����'�
� &���<�"=�
� ��&"(������/���"=���&��/����0�
� &���<&�*"'�
� ��&"(������/��&��������&�����&��/����0�
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>
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>
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
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 © 2009</div>
29
30
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…
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;
}
������������ �����������
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%; }
19
+;����7�'"��"��+;����7�'"��"��
�/���.66>"(��,$,;$��(6���<-�'"����6
%�"�'"�������(���"�(��������,"�/����%�"�'"�������(���"�(��������,"�/����
� 9�-"�,��/����"(���&��/����(�
� ��&"(����('���'�&���������'����������"���&����/��������'�����
� ����"&�����"��'��'�*�����?���/����4/�5��4/;5����������@������'�������'����'���&����/����"&�����$
� ����"&����(�����������/����'�(�����-"(��"����&����������������A���&"(��������������"�����'�������"�&������/$�
� ����������������������(���/��������"���*�����&��/���'�*����������'�����������������$
� 9�-"������������������$
� )�����������"(��"������A *�-�����'����������0�����'�$���&"'�
� 1'���"�(��������"�(������"*�����������"-"�"���,/�����"(�"�(���+����"��
20
��������'��/���"�(��"����������'��/���"�(��"��� 7��"&������������"�(��/��.����8���*��'��"���/���"(/���������/������������������&���$
� /�� ��/�����������������"�(�B��"(���"�������&�.����,�������/�������������"���-�'��$
� 7��"&���/����/��C����D���*��'������������'���'���
� /�� ��/�������0��&��������'���������/�"���������"����������������-�'����&��������������(�$
� �&�������&���������,�� ���������������E�.� 9�-"�,��������
� !����*"����/��&"������'���/���"���������'"�$�)&�����/��������"��"���/����'�����-���/����'���/���"���������'"�$
� 7�'"���������������/���.66>"(��,$,;$��(6���<-�'"����
��**�����**���
� "�������"����������"�(����'���/����9�'��������"����,"�/���'��������0�����,�����(���
� �-����"�'"������'�����*�������'��������0�����'����'��$
� �-����������'�����������������'��������"���'������$
� ��������"������7�'"��"���-"��/���.66>"(��,$,;$��(6���<-�'"����
40
21