learn about cascading style sheets lacuny web management roundtable october 21, 2005
Post on 14-Dec-2015
216 Views
Preview:
TRANSCRIPT
Learn about Cascading Learn about Cascading Style SheetsStyle Sheets
LACUNY Web Management Roundtable
October 21, 2005
http://www.lehman.edu/provost/library/CSS/CSS.ppt
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
2
CSS Separate Style From CSS Separate Style From Structure of a Web PageStructure 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.
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
3
Font Appearance of an ElementFont Appearance of an Element
• HTML code<H3 align="center"> <font face="times
new roman, times, serif" color="#800000">SPECIAL COLLECTION</a></font></h3>
• CSS ruleH3
{
Font-family: times new roman, 'serif';
Color: #800000;
Text-align: center;
}
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
4
Understanding Style RulesUnderstanding Style Rules
• The style characteristics for an HTML element are expressed by Style Rules Style Rules .
• A set of style rules is called a Style SheetStyle 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>
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
5
Understanding Style RulesUnderstanding Style Rules
• A Style RuleStyle Rule is composed of two parts: a selector and a declaration.
TH {color: red;}.• The SelectorSelector indicates the element to which the
rule is applied.• The DeclarationDeclaration determines the property values
of a selector.
Selector Declaration
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
6
Understanding Style RulesUnderstanding Style Rules
• The PropertyProperty specifies a characteristic, such as color, font-family, position, and is followed by a colon (:).
• The ValueValue 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
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
7
Using the <STYLE> ElementUsing 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>
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
8
Using External Style SheetUsing 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;}
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
9
Linking to an External Style Linking to an External Style SheetSheet
• 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>
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
10
Linking to an External Style Linking to an External Style SheetSheet
<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
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
11
Using the Class Attribute Using the Class Attribute SelectorSelector
• 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
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
12
Using the Class Attribute Using the Class Attribute SelectorSelector
• 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>
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
13
Example 1Example 1http://www.lehman.edu/provost/library/CSS/demo_1.htmhttp://www.lehman.edu/provost/library/CSS/demo_1.htm
CSS Style Sheet
http://www.lehman.edu/provost/library/CSS/style_1.htm
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
14
Example 2Example 2http://www.lehman.edu/provost/library/CSS/demo_2.htm
CSS Style Sheet
http://www.lehman.edu/provost/library/CSS/style_2.htm
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
15
Example 3Example 3http://www.lehman.edu/provost/library/CSS/demo_3.htm
CSS Style Sheet
http://www.lehman.edu/provost/library/CSS/style_3.htm
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
16
Lehman College Library Web Site http://www.lehman.edu/provost/library//
http://www.lehman.edu/provost/library/CSS/style.htm
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
17
Lehman College Library Web SiteLehman College Library Web Site
CSSA.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; }
HTMLIn 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>
October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu
18
Useful ResourcesUseful 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/>
top related