logging in or signing up CSS ankush85 Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: Embed: Flash iPad Copy Does not support media & animations WordPress Embed Customize Embed URL: Copy Thumbnail: Copy The presentation is successfully added In Your Favorites. Views: 4097 Category: Education License: All Rights Reserved Like it (2) Dislike it (1) Added: May 11, 2009 This Presentation is Public Favorites: 2 Presentation Description No description available. Comments Posting comment... Premium member Presentation Transcript Learn about Cascading Style Sheets : Learn about Cascading Style Sheets CSS Separate Style From Structure of a Web Page : 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. Font Appearance of an Element : 3 Font Appearance of an Element HTML code <H3 align="center"> <font face="times new roman, times, serif" color="#800000">SPECIAL COLLECTION</a></font></h3> CSS rule H3 { Font-family: times new roman, 'serif'; Color: #800000; Text-align: center; } Understanding Style Rules : 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> Understanding Style Rules : 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. Selector Declaration Understanding Style Rules : October 21, 2005 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 Using the <STYLE> Element : 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> Using External Style Sheet : 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;} Linking to an External Style Sheet : 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> Linking to an External Style Sheet : October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 10 Linking to an External Style Sheet <Head> <Title>Demo_1</Title> <Style type=“text/css”> <Link href=“style1.css” Rel=“stylsheet”> </Style> </Head> 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 Using the Class Attribute Selector : 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 A.nav:link {color:#FF3300; text-decoration: none;} Class Selector Element Using the Class Attribute Selector : October 21, 2005 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> Example 1http://www.lehman.edu/provost/library/CSS/demo_1.htm : 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 Example 2http://www.lehman.edu/provost/library/CSS/demo_2.htm : 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 Example 3http://www.lehman.edu/provost/library/CSS/demo_3.htm : 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 Lehman College Library Web Site http://www.lehman.edu/provost/library//http://www.lehman.edu/provost/library/CSS/style.htm : 16 Lehman College Library Web Site http://www.lehman.edu/provost/library//http://www.lehman.edu/provost/library/CSS/style.htm Lehman College Library Web Site : 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> Slide 18: October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 18 You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
CSS ankush85 Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: Embed: Flash iPad Copy Does not support media & animations WordPress Embed Customize Embed URL: Copy Thumbnail: Copy The presentation is successfully added In Your Favorites. Views: 4097 Category: Education License: All Rights Reserved Like it (2) Dislike it (1) Added: May 11, 2009 This Presentation is Public Favorites: 2 Presentation Description No description available. Comments Posting comment... Premium member Presentation Transcript Learn about Cascading Style Sheets : Learn about Cascading Style Sheets CSS Separate Style From Structure of a Web Page : 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. Font Appearance of an Element : 3 Font Appearance of an Element HTML code <H3 align="center"> <font face="times new roman, times, serif" color="#800000">SPECIAL COLLECTION</a></font></h3> CSS rule H3 { Font-family: times new roman, 'serif'; Color: #800000; Text-align: center; } Understanding Style Rules : 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> Understanding Style Rules : 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. Selector Declaration Understanding Style Rules : October 21, 2005 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 Using the <STYLE> Element : 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> Using External Style Sheet : 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;} Linking to an External Style Sheet : 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> Linking to an External Style Sheet : October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 10 Linking to an External Style Sheet <Head> <Title>Demo_1</Title> <Style type=“text/css”> <Link href=“style1.css” Rel=“stylsheet”> </Style> </Head> 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 Using the Class Attribute Selector : 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 A.nav:link {color:#FF3300; text-decoration: none;} Class Selector Element Using the Class Attribute Selector : October 21, 2005 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> Example 1http://www.lehman.edu/provost/library/CSS/demo_1.htm : 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 Example 2http://www.lehman.edu/provost/library/CSS/demo_2.htm : 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 Example 3http://www.lehman.edu/provost/library/CSS/demo_3.htm : 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 Lehman College Library Web Site http://www.lehman.edu/provost/library//http://www.lehman.edu/provost/library/CSS/style.htm : 16 Lehman College Library Web Site http://www.lehman.edu/provost/library//http://www.lehman.edu/provost/library/CSS/style.htm Lehman College Library Web Site : 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> Slide 18: October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 18