1 / 18

Learn about Cascading Style Sheets

Learn about Cascading Style Sheets. LACUNY Web Management Roundtable October 21, 2005 http://www.lehman.edu/provost/library/CSS/CSS.ppt. CSS Separate Style From Structure of a Web Page. Specify point size and font of text; Set margins within a web page;

martin-dunn
Download Presentation

Learn about Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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. LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  3. Font Appearance of an Element • HTML code <H3 align="center"><font face="times new roman, times, serif" color="#800000">special Collections</a></font></h3> • CSS rule H1 { Font-family: times new roman, 'serif'; Color: #800000; Text-align: center; } LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  4. Understanding Style Rules • The style characteristics for an HTML element are expressed by Style Rules . • A set of style rules is called a Style Sheet. • Style rules are contained in the <STYLE> element in the document’s <HEAD> section. <Head> <Style type=“text/css”> P {color:blue; font-size: 24pt;} </Style> </Head> LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  5. Understanding Style Rules • A Style Rule is composed of two parts: a selector and a declaration. TH {color: red;}. • The Selector indicates the element to which the rule is applied. • The Declaration determines the property values of a selector. Declaration Selector LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  6. Understanding Style Rules • The Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:). • The 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 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  7. Using the <STYLE> Element • The <STYLE> element is always positioned in the <HEAD> section of the document. • The <STYLE> element always contains <TYPE> attribute. The value “text/css” defines the style language as Cascading Style Sheets. <Head> <Style type=“text/css”> P {color:blue; font-size: 24pt;} </Style> </Head> LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  8. 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 <STYLE> 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;} LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  9. Linking to an External Style Sheet • To link a Web page to an external style sheet a <LINK> element should be added within <HEAD> element of a document with the URL to a style sheet. It tells the browser to find a specified style sheet. <Head> <Title>Demo_1</Title> <Style type=“text/css”> <Link href=“style_1.css” Rel=“stylsheet”> </Style> </Head> LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  10. Linking to an External Style Sheet 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 <Head> <Title>Demo_1</Title> <Style type=“text/css”> <Link href=“style1.css”Rel=“stylsheet”> </Style> </Head> LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  11. 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 Element Class Selector A.nav:link {color:#FF3300; text-decoration: none;} LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  12. 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;} <a href="http://www.eric.org" class="nav">ERIC</a> LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  13. Example 1http://www.lehman.edu/provost/library/CSS/demo_1.htm CSS Style Sheet http://www.lehman.edu/provost/library/CSS/style_1.htm LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  14. Example 2http://www.lehman.edu/provost/library/CSS/demo_2.htm CSS Style Sheet http://www.lehman.edu/provost/library/CSS/style_2.htm LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  15. Example 3http://www.lehman.edu/provost/library/CSS/demo_3.htm CSS Style Sheet http://www.lehman.edu/provost/library/CSS/style_3.htm LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  16. Lehman College Library Web Sitehttp://www.lehman.edu/provost/library//http://www.lehman.edu/provost/library/CSS/style.htm LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  17. 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 <Head> element <link rel="stylesheet" href="Welcome_files/style" type="text/css"> In the <Body> element <td align="center" height="25"><a class="nav" href="http://mail.lehman.edu">Check your Lehman e-mail account</a> </td> LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

  18. Useful Resources • Schengili-Roberts, Keith. Core CSS Cascading Style Sheets. 2nd 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/ • WDG Web Design Group <http://www.htmlhelp.com/reference/css/> LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu

More Related