1. October 21, 20051 Learn about Cascading Style Sheets LACUNY Web Management Roundtable October 21, 2005 http://www.lehman.edu/provost/library/CSS/CSS.ppt

2. October 21, 20052 CSS Separate Style From Structure of a Web Page Specify point size and font of text; Set margins within a web page; Create a distinctive style for individual web pages or sets of web pages; Format style to one element of a web page or to a numerous pages; Control color of different elements of a web page; Etc.

3. October 21, 20053 Font Appearance of an Element HTML code SPECIAL COLLECTION CSS rule H3 { Font-family: times new roman, 'serif'; Color: #800000; Text-align: center; }

4. October 21, 20054 Understanding Style Rules Style RulesThe style characteristics for an HTML element are expressed by Style Rules. Style SheetA set of style rules is called a Style Sheet. Style rules are contained in the element in the document’s section. P {color:blue; font-size: 24pt;}

5. October 21, 20055 Understanding Style Rules Style RuleA Style Rule is composed of two parts: a selector and a declaration. TH {color: red;}. SelectorThe Selector indicates the element to which the rule is applied. DeclarationThe Declaration determines the property values of a selector. Selector Declaration

6. October 21, 20056 Understanding Style Rules PropertyThe Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:). ValueThe Value expresses specification of a property, such as red for color, arial for font family, 12 pt for font-size, and is followed by a semicolon (;). P {color: red;} Property Value

7. October 21, 20057 Using the Element The element is always positioned in the section of the document. The element always contains attribute. The value “text/css” defines the style language as Cascading Style Sheets. P {color:blue; font-size: 24pt;}

8. October 21, 20058 Using External Style Sheet Style Rules can be expressed in an external Style Sheet - a text document that doesn’t contain any HTML code. There is no element in an external style sheet. External Style Sheet has a.css extension. http://www.lehman.edu/provost/library/CSS/style_1.htm h1, h2, h3 {font-family: verdana, arial, 'sans serif'; color: #9933FF; text-align: center;}

9. October 21, 20059 Linking to an External Style Sheet To link a Web page to an external style sheet a element should be added within element of a document with the URL to a style sheet. It tells the browser to find a specified style sheet. Demo_1

10. October 21, 200510 Linking to an External Style Sheet Demo_1 HREF attribute states the relative URL to the style sheet The REL attribute describes the relationship between the current document and the document identified by the href attribute

11. October 21, 200511 Using the Class Attribute Selector CLASS is an HTML attribute that assigns a class name to any HTML element on a Web page. Can be used to identify which style sheet rules should be applied for the particular element of a Web page A.nav:link {color:#FF3300; text-decoration: none;} Class Selector Element

12. October 21, 200512 Using the Class Attribute Selector A class name is created by declaring a style rule and adding (.) flag character indicating that the selector is a class selector. Add it to HTML code of a Web page by using the CLASS attribute. A.nav:link {color:#FF3300; text-decoration: none;} ERIC

13. October 21, 200513 Example 1 Example 1 http://www.lehman.edu/provost/library/CSS/demo_1.htm http://www.lehman.edu/provost/library/CSS/demo_1.htm CSS Style Sheet http://www.lehman.edu/provost/libr ary/CSS/style_1.htm

14. October 21, 200514 Example 2 Example 2 http://www.lehman.edu/provost/library/CSS/demo_2.htm http://www.lehman.edu/provost/library/CSS/demo_2.htm CSS Style Sheet http://www.lehman.edu/provost/libr ary/CSS/style_2.htm

15. October 21, 200515 Example 3 Example 3 http://www.lehman.edu/provost/library/CSS/demo_3.htm http://www.lehman.edu/provost/library/CSS/demo_3.htm CSS Style Sheet http://www.lehman.edu/provost/libr ary/CSS/style_3.htm

16. October 21, 200516 Lehman College Library Web Site Lehman College Library Web Site http://www.lehman.edu/provost/library// http://www.lehman.edu/provost/library/CSS/style.htm http://www.lehman.edu/provost/library/CSS/style.htm

17. October 21, 200517 Lehman College Library Web Site CSS A.nav:link { color: #990000; font-size: 12px; line-height: 14px; font-family: arial, verdana, geneva, helvetica; text-decoration: none; } A.nav:visited { color: #CC3333; font-size: 12px; line-height: 14px; font- family: arial, verdana, geneva, helvetica; text-decoration: none; } HTML In the element In the element Check your Lehman e-mail account

18. October 21, 200518 Useful Resources Schengili-Roberts, Keith. Core CSS Cascading Style Sheets. 2 nd ed. Upper Saddle River, NJ: Prentice Hall PTR, 2004. Sklar, Joel. Designing Web Pages with Cascading Style Sheets. Course Technology, Incorporated, 2001. W3C http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/ WDG Web Design Group http://www.htmlhelp.com/reference/css