cascading style sheets ine2720 web application software development essential materials
TRANSCRIPT
Cascading Style SheetsCascading Style Sheets
INE2720INE2720
Web Application Software Web Application Software DevelopmentDevelopment
Essential MaterialsEssential Materials
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
22
Outline – Part AOutline – Part A
Introduction to CSSIntroduction to CSS How do Style Sheets work?How do Style Sheets work? W3C Validation ServiceW3C Validation Service CSS SyntaxCSS Syntax SelectorsSelectors Specifying style sheet rulesSpecifying style sheet rules Integrating StyleIntegrating Style
– External and inline style specificationsExternal and inline style specifications Style Sheet Precedence RulesStyle Sheet Precedence Rules
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
33
Outline – Part BOutline – Part B
PropertiesProperties– Font, Text style & layout propertiesFont, Text style & layout properties– Foreground & background propertiesForeground & background properties– Bounding Box PropertiesBounding Box Properties– Border, margin, padding propertiesBorder, margin, padding properties
CSS Lists & CursorsCSS Lists & Cursors CSS PositioningCSS Positioning
– Static, absolute, fixed, relative positioningStatic, absolute, fixed, relative positioning Standard Property UnitsStandard Property Units Netscape LAYERsNetscape LAYERs Creating layers through style sheetsCreating layers through style sheets
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
44
Outline – Part COutline – Part C
Important ConceptsImportant Concepts– Cascading, Inheritance & SelectionCascading, Inheritance & Selection
ExamplesExamples– Converting an existing pageConverting an existing page– How to Skin a menuHow to Skin a menu– Making an input form look goodMaking an input form look good– Sneaking out of the BoxSneaking out of the Box
CSS ToolsCSS Tools CSS CheckCSS Check
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
55
Why use CSS?Why use CSS?
Traditional HTML approach is to Traditional HTML approach is to ““hardcodehardcode” all the appearance ” all the appearance information into the page. information into the page.
If you have 100 pages.If you have 100 pages.– Edit the font and size of headingEdit the font and size of heading– Re-editRe-edit and and cause cause errorserrors
Also, ensure the Also, ensure the consistencyconsistency across the whole website, e.g. across the whole website, e.g. Press, …Press, …
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
66
Benefits of Cascading Benefits of Cascading Style SheetsStyle Sheets Provides a method for web developers to Provides a method for web developers to
separateseparate the appearance & the content of web the appearance & the content of web sites.sites.
Powerful and flexible way to specify the Powerful and flexible way to specify the formatting of HTML elementsformatting of HTML elements
– Can define font, size, background color, background Can define font, size, background color, background image, margins, etc.image, margins, etc.
Share style sheets across multiple documents Share style sheets across multiple documents or entire Web siteor entire Web site
– ReduceReduce development and maintenance time development and maintenance time Can specify a class definition for a style, Can specify a class definition for a style,
effectively defining new HTML elementseffectively defining new HTML elements Rules are applied in a hierarchical manner Rules are applied in a hierarchical manner
(precedence rules)(precedence rules)
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
77
How do Style Sheets How do Style Sheets work?work? CSS just suggests (not tells) the browser how to display the CSS just suggests (not tells) the browser how to display the
content of the HTML filecontent of the HTML file
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
88
W3C CSS Validation W3C CSS Validation ServiceService http://jigsaw.w3.org/css-validator/
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
99
Select an element in Select an element in the HTML filethe HTML file What is the difference between Statement, selector, What is the difference between Statement, selector,
declaration and properties?declaration and properties?
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1010
CSS ExampleCSS Example
body
{
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 1em;
text-align: justify;
}
/* CSS Comments */
A single statement
selector
declaration
3 propertiesCurly braces
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1111
CSS SyntaxCSS Syntax
StatementStatement must have a selector and a must have a selector and a declaration.declaration.
DeclarationDeclaration is one or more properties is one or more properties separated by semicolons “;”.separated by semicolons “;”.
PropertyProperty has name and value has name and value separated by colons “:”.separated by colons “:”.
ValueValue may have a unit as well. may have a unit as well. White spaceWhite space can improve the can improve the
readability of the style sheet.readability of the style sheet.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1212
Cascading Style Cascading Style SheetsSheets A simple text file with “.css suffix”A simple text file with “.css suffix” CSS, Level 1 (1996)CSS, Level 1 (1996)
– Concerned with applying simple styles to HTML elementsConcerned with applying simple styles to HTML elements– http://www.w3.org/TR/REC-CSS1http://www.w3.org/TR/REC-CSS1
CSS, Level 2 (1998)CSS, Level 2 (1998)– Incorporates and extends CSS-1Incorporates and extends CSS-1– Supports media-specific style sheets (visual browsers, aural devices, Supports media-specific style sheets (visual browsers, aural devices,
printers, braille devices)printers, braille devices)– http://www.w3.org/TR/REC-CSS2http://www.w3.org/TR/REC-CSS2
CSS, Level 3 (draft 2001)CSS, Level 3 (draft 2001)– Focused on modularization of the CSS specificationFocused on modularization of the CSS specification– http://www.w3.org/TR/css3-roadmap/http://www.w3.org/TR/css3-roadmap/
Note: Note: – CSS1 is supported by Netscape and Internet Explorer 4.x and aboveCSS1 is supported by Netscape and Internet Explorer 4.x and above– See http://www.webreview.com/style/css1/charts/mastergrid.shtml See http://www.webreview.com/style/css1/charts/mastergrid.shtml
for a summary of browser compatibilityfor a summary of browser compatibility
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1313
Specifying Style RulesSpecifying Style Rules
General form of ruleGeneral form of rule
selector selector {{ propertyproperty:: valuevalue;; } }
oror
selectorselector {{ property1property1:: value1value1;; property2property2:: value2value2;; ......
propertyNpropertyN:: valueNvalueN;; }}
ExampleExample H1H1 { { text-aligntext-align: : centercenter;;
colorcolor: : blueblue; ; }}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1414
CSS1 & CSS 2 CSS1 & CSS 2 SelectorsSelectors HTML element selectorsHTML element selectors Class selectorsClass selectors ID selectorsID selectors Contextual selectorsContextual selectors Link pseudo class selectorsLink pseudo class selectors Pseudo element selectorsPseudo element selectors Selector groupsSelector groups Dynamic pseudo class selectorsDynamic pseudo class selectors Child selectorsChild selectors More advanced selectors …More advanced selectors …
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1515
SelectorsSelectors
HTML element selectorsHTML element selectors– Select any of the elements on a page.Select any of the elements on a page.– E.g. <p> tagE.g. <p> tag
The selector is “p”The selector is “p”
Class selectorsClass selectors– The control by HTML element selectors is The control by HTML element selectors is
very powerful (over page design), but what if very powerful (over page design), but what if you want to change a specific paragraph or you want to change a specific paragraph or a few paragraphs?a few paragraphs?
– E.g. you can create 2 specific paragraphs.E.g. you can create 2 specific paragraphs. .question {font-weight: bold;}, .question {font-weight: bold;}, .answer {font-weight: 400;}.answer {font-weight: 400;} p.question {font-weight: bold;}, p.question {font-weight: bold;}, p.answerp.answer {font-weight: {font-weight:
400;}400;}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1616
HTML (Tag) SelectorHTML (Tag) Selector
Universal Selector Universal Selector -- * * {{ colorcolor:: blueblue;; }} SelectorSelector {{ PropertyProperty: : ValueValue; ; }} It is used when you want to redefine the It is used when you want to redefine the
general look for an entired HTML tag.general look for an entired HTML tag.<HTML><HEAD><style type="text/css">b {font-family:arial; font-size:14px; color:red;}</style></HEAD>
<BODY><b>This is a customized headline style bold</b></BODY></HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1717
Class selectorsClass selectors
To define an To define an element style classelement style class proceed the proceed the HTML element by a HTML element by a period period “.”“.” andand classclass name name “name”“name”
// Define an // Define an ""abstractabstract"" paragraph type paragraph type pp..abstractabstract { { margin-left: 0.5in;margin-left: 0.5in; margin-right: 0.5in;margin-right: 0.5in; font-style: italic; }font-style: italic; }
To useTo use, supply the name of the style class in the , supply the name of the style class in the CLASS attributeCLASS attribute of the HTML element of the HTML element
<h1>New Advances in Physics</h1><h1>New Advances in Physics</h1> <<pp classclass==""abstractabstract"">>
This paper gives the solution to three previouslyThis paper gives the solution to three previouslyunsolved problems: turning lead into gold, unsolved problems: turning lead into gold, antigravity, and a practical perpetual motion machine.antigravity, and a practical perpetual motion machine.</p></p>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1818
Defining Style ClassesDefining Style Classes
To define a To define a global style classglobal style class, omit the , omit the element nameelement name
// Style available to all elements// Style available to all elements.blue.blue { color: blue; font-weight: bold } { color: blue; font-weight: bold }
To use, simple specify the style class in the To use, simple specify the style class in the CLASS attributeCLASS attribute of the HTML element of the HTML element
<h2 <h2 CLASSCLASS==""blueblue"">A Blue Heading</h2>>A Blue Heading</h2>
<!-- Apply to a section of text --><!-- Apply to a section of text -->This text is in the default color, butThis text is in the default color, but<SPAN<SPAN CLASS CLASS==""blueblue"">this text is blue.</SPAN>>this text is blue.</SPAN>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
1919
Class SelectorsClass Selectors
.ClassSelector {Property: Value;}.ClassSelector {Property: Value;} It is used when you want to define a style It is used when you want to define a style
that does not redefine an HTML tag entirely.that does not redefine an HTML tag entirely.
<HTML><HEAD><style type="text/css">.headline {font-family:arial; font-size:14px; color:red}</style></HEAD>
<BODY><b class="headline">This is a bold tag carrying the headline class</b><br><i class="headline">This is an italics tag carrying the headline class</i></BODY></HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2020
ID selectorsID selectors
An An IDID is like a class but can be applied only is like a class but can be applied only once in a documentonce in a document
<HEAD><HEAD><TITLE>...</TITLE><TITLE>...</TITLE>
<STYLE TYPE="text/css"><STYLE TYPE="text/css"> <!--<!-- #foo#foo { color: red } { color: red } -->-->
</STYLE></STYLE> </HEAD></HEAD>
<BODY> <BODY> ......
<P <P IDID==""foofoo"">> ... ...
</p> </p> </BODY></BODY>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2121
ID SelectorsID Selectors
#IDSelector {Property: Value;}#IDSelector {Property: Value;}<HTML><HEAD><style type="text/css">#layer1 {position:absolute; left:100;top:100; z-Index:0}#layer2 {position:absolute; left:140;top:140; z-Index:1}</style></HEAD>
<BODY><div ID="layer1"><table border="1" bgcolor="#FFCC00"><tr><td>LAYER 1<br>at 100,100</td></tr></table></div>
<div ID="layer2"><table border="1" bgcolor="#00CCFF"><tr><td>LAYER 2<br>at 140,140</td></tr></table></div></BODY>
</HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2222
SelectorsSelectors
Contextual selectorsContextual selectors– Provide fine tuned over the HTML elementsProvide fine tuned over the HTML elements
E.g. E.g. h1h1 strongstrong {text-decoration: underline} {text-decoration: underline} Select “Select “<<h1h1> … <> … <strongstrong> > selected selected </</strongstrong> … > …
</</h1h1>”>” This selects any strong element inside a heading of This selects any strong element inside a heading of
level 1.level 1.
Link pseudo class selectorsLink pseudo class selectors– Selector for normal links is Selector for normal links is a:linka:link– Visited links is Visited links is a:visiteda:visited– Hover links is Hover links is a:hovera:hover– Active links is Active links is a:activea:active– E.g. E.g. aa..offsiteoffsite::hoverhover { {colorcolor: : greengreen;};}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2323
Pseudo-Class and Pseudo-Class and Pseudo-elementPseudo-element Pseudo-class selectorPseudo-class selector
– Based on a set of predefined qualities that Based on a set of predefined qualities that an HTML element can possess.an HTML element can possess.
– No actual class attributes exist in the No actual class attributes exist in the markup.markup.
– :active, :first-child, :focus:active, :first-child, :focus– :hover, :link, :visited:hover, :link, :visited
Pseudo-element selectorPseudo-element selector– Identify a virtual element that doesn’t Identify a virtual element that doesn’t
exist in the markup.exist in the markup. :before, :after, :first-letter, :first-line:before, :after, :first-letter, :first-line E.g. E.g. pp::first-childfirst-child::first-linefirst-line { { font-sizefont-size: : largerlarger; }; }
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2424
CSS LinksCSS Links
PropertyProperty ValuesValues
a:linka:link Define the style for unvisited linksDefine the style for unvisited links
a:visiteda:visited Define the style for visited linksDefine the style for visited links
a:activea:active Define the style for active link (when you click on it)Define the style for active link (when you click on it)
a:hovera:hover Define the style for hovered link (when mouse move Define the style for hovered link (when mouse move over it)over it)
Hover
<style type="text/css">.class1 A:link {text-decoration: none}.class1 A:visited {text-decoration: none}.class1 A:active {text-decoration: none}.class1 A:hover {text-decoration: underline; color: red;}Background colored link
.class2 A:link {background: #FFCC00; text-decoration: none}
.class2 A:visited {background: #FFCC00; text-decoration: none}
.class2 A:active {background: #FFCC00; text-decoration: none}
.class2 A:hover {background: #FFCC00; font-weight:bold; color: red;}</style>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2525
SelectorsSelectors
Pseudo element selectorsPseudo element selectors– Usually the first letter and the first Usually the first letter and the first
line of a paragraph is different from line of a paragraph is different from the rest.the rest.
– E.g. E.g. blockquote:first-line, p:first-letterblockquote:first-line, p:first-letter Selector groupsSelector groups
– Simply a list of selectors separated Simply a list of selectors separated by commas.by commas.
– E.g. E.g. a:linka:link,, a:visited a:visited,, a:active a:active,, a:hover {font: Times a:hover {font: Times serif;}serif;}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2626
Selector GroupsSelector Groups
Without GroupingWithout Grouping
GroupingGrouping– Used when different selectors Used when different selectors
shared the same style.shared the same style.
.headlines{font-face:arial; color:black; background:yellow; font-weight:bold; font-size:14pt;}
.sublines {font-face:arial; color:black; background:yellow; font-weight:bold; font-size:12pt;}
.infotext {font-face:arial; color:black; background:yellow; font-weight:bold; font-size:10pt;}
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2727
Dynamic pseudo class Dynamic pseudo class selectorsselectors Apply to any element (not only links) in Apply to any element (not only links) in
thethe– Active stateActive state
While the mouse is being clicked on the selected While the mouse is being clicked on the selected element.element.
– Hover stateHover state While the mouse is over the selected element.While the mouse is over the selected element.
– Focus stateFocus state While the selected element has the keyboard focus.While the selected element has the keyboard focus.
– E.g. change the background color of a E.g. change the background color of a paragraph while the mouse is over it.paragraph while the mouse is over it.
p:hoverp:hover
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2828
Child selectorsChild selectors
Consider the contextual selector, no Consider the contextual selector, no matter how deeply nested, “div strong” matter how deeply nested, “div strong” will select <strong> elements inside will select <strong> elements inside <div><div>– <div><p> … <strong><div><p> … <strong>selectedselected</strong>…</p></div></strong>…</p></div>– <div> … <strong><div> … <strong>selectedselected</strong>…</div></strong>…</div>
Can we select the <strong> element directly Can we select the <strong> element directly inside <div>?inside <div>?– ““div>strongdiv>strong” can help!” can help!– <div><div><p><p> … … <strong><strong>not selectednot selected</strong></strong>……</p></p></div></div>– <div><div> … … <strong><strong>selectedselected</strong></strong>……</div></div>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
2929
Fizzics1.html, ExampleFizzics1.html, Example(no style sheet)(no style sheet)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE><TITLE>New Advances in PhysicsNew Advances in Physics</TITLE></TITLE></HEAD></HEAD><BODY><BODY><H1>New Advances in Physics</H1><H1>New Advances in Physics</H1>
<H2>Turning Gold into Lead</H2><H2>Turning Gold into Lead</H2>In a startling breakthrough, scientist B.O. "Gus" Fizzics In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a <STRONG>practical</STRONG> technique for has invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A>.<A HREF="give-us-your-gold.html">our transmutation thesis</A>.......
</BODY></BODY></HTML></HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3030
Fizzics1.html, ResultFizzics1.html, Result(no style sheet)(no style sheet)
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3131
Fizzics2.html, ExampleFizzics2.html, Example(with style sheet)(with style sheet)
Style informationStyle information <HEAD><HEAD> <TITLE>Document Title</TITLE><TITLE>Document Title</TITLE> <STYLE TYPE="text/css"><STYLE TYPE="text/css"> <!--<!-- BODY BODY { { backgroundbackground:: URL(images/confetti-background.jpg)URL(images/confetti-background.jpg);; } } H1 H1 { { text-aligntext-align:: centercenter;; font-familyfont-family:: BlackoutBlackout; ; }} H2 H2 { { font-familyfont-family:: MeppDisplayShadowMeppDisplayShadow; ; }} STRONG STRONG { { text-decorationtext-decoration:: underlineunderline;; }} -->--> </STYLE></STYLE> </HEAD></HEAD>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3232
Fizzics2.html, ResultFizzics2.html, Result(with style sheet)(with style sheet)
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3333
How to Select, inherit?How to Select, inherit?
<html>
<head>
<title>
<h1>
<p>
<body>
<i>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3434
Where to Place it?Where to Place it?
We can add CSS to our pages at three We can add CSS to our pages at three different levels.different levels.– Single Tag CSSSingle Tag CSS
When the style is used in a single place of your When the style is used in a single place of your site.site.
– Add style for the entire pageAdd style for the entire page When the style appears more than once of your When the style appears more than once of your
pages.pages.
– Add style for the entire siteAdd style for the entire site When the style is used for more than one page.When the style is used for more than one page.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3535
External Style SheetsExternal Style Sheets
Specify link to external style sheet in the HEAD section Specify link to external style sheet in the HEAD section of the HTML documentof the HTML document
Simplify the site maintenance.Simplify the site maintenance.
<< linklink rel="stylesheet" rel="stylesheet" hrefhref="Sitestyle.css" // Absolute or relative link="Sitestyle.css" // Absolute or relative link typetype="text/css“="text/css“ >>
Sitestyle.cssSitestyle.css /* Example of an external style sheet *//* Example of an external style sheet */
H1H1 { { text-aligntext-align: center;: center; font-familyfont-family: Arial ;: Arial ; }} H2H2 { { colorcolor: #440000;: #440000; text-aligntext-align: center;: center; font-familyfont-family: Arial Black, Arial, Helvetica, sans-serif;: Arial Black, Arial, Helvetica, sans-serif; }}
......
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3636
External Style Sheet - External Style Sheet - Entire SiteEntire Site Write the entire CSS definition to an external text file.Write the entire CSS definition to an external text file.
<html><head><title>CSS Single Page</title><link rel=“stylesheet” href=“entire_site.css" type="text/css"></head>
<body><span class="headlines">Welcome to our example</span><br><div class="sublines">This is an example page using CSS.<br></div></body></html>
<entire_site.css>
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}.headlines {font-size:14pt;}.sublines {font-size:12pt;}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3737
Embedded Style Embedded Style Sheets - Single PageSheets - Single Page Simply add definition in the head Simply add definition in the head
section.section. Page becomes more compact, loads Page becomes more compact, loads
faster.faster.<html><head><title>CSS Single Page</title><style type="text/css"> <!--
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}.headlines {font-size:14pt;}.sublines {font-size:12pt;}--> </style></head>
<body><span class="headlines">Welcome to our example</span><br>
<div class="sublines">This is an example page using CSS.<br></div></body></html>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3838
Inline Style Inline Style SpecificationSpecification Use the Use the STYLE attributeSTYLE attribute defined for each defined for each
HTML element to directly specify the HTML element to directly specify the stylestyle
ExampleExample
...... <H1>New Advances in Physics</H1><H1>New Advances in Physics</H1> <P <P STYLESTYLE==““ margin-leftmargin-left:: 0.5in0.5in;; margin-rightmargin-right:: 0.5in0.5in;; font-stylefont-style:: italicitalic;;””>> This paper gives the solution to threeThis paper gives the solution to three previously unsolved problems: turning lead into gold,previously unsolved problems: turning lead into gold, antigravity, and a practical perpetual motion machine.antigravity, and a practical perpetual motion machine. ......
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
3939
Style Sheet Style Sheet Precedence RulesPrecedence Rules1.1. Rules marked “important” have the Rules marked “important” have the
highest priority (rarely used), highest priority (rarely used), overrides the normal order of cascade.overrides the normal order of cascade.
H1H1 { { colorcolor: : blackblack !important!important;;
font-familyfont-family: : sans-serifsans-serif; }; }
2.2. Author rules have precedence over Author rules have precedence over reader rulesreader rules
• Style sheet rules override browser Style sheet rules override browser preferencespreferences
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4040
Style Sheet Style Sheet Precedence Rules, Precedence Rules, cont.cont.3.3. More specific rules have precedence More specific rules have precedence
over less specific rulesover less specific rules
##foofoo { ... } // ID selector highest priority { ... } // ID selector highest priority PP..bigbig H1H1 { ... } // Class or Pseudo-class higher { ... } // Class or Pseudo-class higher
over elementover element PP STRONGSTRONG { ... } // Two tags higher than single tag { ... } // Two tags higher than single tag STRONGSTRONG { ... } { ... }
4.4. In case of tie, the last rule has priorityIn case of tie, the last rule has priority• Declared most recently has the highest Declared most recently has the highest
priority.priority.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4141
Outline – Part BOutline – Part B
PropertiesProperties– Font, Text style & layout propertiesFont, Text style & layout properties– Foreground & background propertiesForeground & background properties– Bounding Box PropertiesBounding Box Properties– Border, margin, padding propertiesBorder, margin, padding properties
CSS Lists & CursorsCSS Lists & Cursors CSS PositioningCSS Positioning
– Static, absolute, fixed, relative positioningStatic, absolute, fixed, relative positioning Standard Property UnitsStandard Property Units Netscape LAYERsNetscape LAYERs Creating layers through style sheetsCreating layers through style sheets
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4242
CSS PropertiesCSS Properties
It is a straightforward subject.It is a straightforward subject. But, how can we apply the But, how can we apply the
properties?properties? What kind of properties can we use?What kind of properties can we use? The fun part The fun part how to make your how to make your
sites become more sophisticated?sites become more sophisticated? It has the following formIt has the following form
– A property A property NAMENAME followed by a followed by a VALUEVALUE
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4343
Property CategoriesProperty Categories
Text style Text style – Fonts properties, …– Fonts properties, … Text layoutText layout – Text alignments, … – Text alignments, … Foreground & BackgroundForeground & Background BorderBorder MarginMargin PaddingPadding Page layoutPage layout Element typeElement type User interfaceUser interface
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4444
Text Style PropertiesText Style Properties
How text appears on the page?How text appears on the page?– Color, font-weight, Color, font-weight, – font-family, font-sizefont-family, font-size– Font-style, text-decoration, Font-style, text-decoration, – text-transform, text-shadow, text-transform, text-shadow, – font-size-adjust, font-stretchfont-size-adjust, font-stretch
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4545
Useful Font PropertiesUseful Font Properties
font-weightfont-weight– Relative weight (boldness) of fontRelative weight (boldness) of font– normalnormal | lighter | bold | bolder | 100 | 200 | ... | 900 | lighter | bold | bolder | 100 | 200 | ... | 900
H1H1 { { font-weightfont-weight : : 200200 } }
H2H2 { { font-weightfont-weight : : bolderbolder } }
font-stylefont-style– Font face type within a familyFont face type within a family– normalnormal | italic | oblique | italic | oblique
PP { { font-stylefont-style : : normalnormal } }
THTH { { font-stylefont-style : : italicitalic } }
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4646
Useful Font Properties, Useful Font Properties, cont.cont. font-sizefont-size
– Either relative or absolute size of fontEither relative or absolute size of font– pt, pc, in, cm, mm | em, ex, px, % |pt, pc, in, cm, mm | em, ex, px, % |
xx-large | x-large | large | xx-large | x-large | large | mediummedium | small | x-small | small | x-small ||xx-small | smaller | largerxx-small | smaller | larger
STRONGSTRONG { { font-sizefont-size: : 150%150% } } PP { { font-sizefont-size: : 14pt14pt } } PP { { font-sizefont-size: : xx-largexx-large } }
font-familyfont-family– Typeface family for the fontTypeface family for the font
H1H1 { { font-familyfont-family: : ArialArial } }
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4747
Font PropertyFont Property
PropertyProperty ValuesValues ExampleExample
font-familyfont-family Font nameFont name font-family: arialfont-family: arial
font-stylefont-style ItalicItalic font-style: italicfont-style: italic
font-variantfont-variant NormalNormal font-variant: font-variant: normalnormal
font-weightfont-weight BoldBold font-weight: boldfont-weight: bold
font-sizefont-size largelarge font-size:largefont-size:large
Example
b {
font-family:Arial, Helvetica;
font-size:12px;
font-weight:bold;
}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4848
CampBearClaw.html, CampBearClaw.html, ExampleExample<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE>Camp Bear Claw</TITLE><TITLE>Camp Bear Claw</TITLE> <LINK REL=STYLESHEET HREF="CampBearClaw.css" TYPE="text/css"><LINK REL=STYLESHEET HREF="CampBearClaw.css" TYPE="text/css"></HEAD></HEAD><BODY><BODY><H1>Camp Bear Claw</H1><H1>Camp Bear Claw</H1>We have the following activities:We have the following activities:<H2 <H2 CLASSCLASS="="archeryarchery">Archery</H2>">Archery</H2><H2 <H2 CLASSCLASS="="artsarts">Arts and Crafts</H2>">Arts and Crafts</H2><H2 <H2 CLASSCLASS="="horsebackhorseback">Horseback Riding</H2>">Horseback Riding</H2><H2 <H2 CLASSCLASS="="hikinghiking">Hiking</H2>">Hiking</H2><H2 <H2 CLASSCLASS="="campfirecampfire">Campfire Song Times</H2>">Campfire Song Times</H2><H2 <H2 CLASSCLASS="="javajava">Java Programming</H2>">Java Programming</H2></BODY></BODY></HTML></HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
4949
CampBearClaw.cssCampBearClaw.css
H1H1 { { text-aligntext-align: : centercenter; ; font-familyfont-family: : FunstuffFunstuff; }; }
H2H2..archeryarchery { { font-familyfont-family: : ArcheryDisplayArcheryDisplay;; }}
H2H2..artsarts { { font-familyfont-family: : ClampettsDisplayClampettsDisplay; }; }
H2H2..horsebackhorseback { { font-familyfont-family: : RodeoRodeo; }; }
H2H2..hikinghiking { { font-familyfont-family: : SnowtopCapsSnowtopCaps; }; }
H2H2..campfirecampfire { { font-familyfont-family: : Music HallMusic Hall; }; }
H2H2..javajava { { font-familyfont-family: : DigifaceDigiface; }; }
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5050
CampBearClaw.html, CampBearClaw.html, ResultResult
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5151
Text layout propertiesText layout properties
How text itself is layout on a page?How text itself is layout on a page?– Letter-spacingLetter-spacing– Word-spacingWord-spacing– Line-heightLine-height– Vertical-alignVertical-align– Text-indentText-indent– Text-alignText-align– DirectionDirection
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5252
Useful Text PropertiesUseful Text Properties
text-decorationtext-decoration– Describes text additions or “decorations” that are Describes text additions or “decorations” that are
added to the text of an elementadded to the text of an element– nonenone | underline | overline | line-through | blink | underline | overline | line-through | blink
PP { { text-decorationtext-decoration: : underlineunderline; }; }
vertical-alignvertical-align– Determines how elements are positioned Determines how elements are positioned verticallyvertically– top | bottom | top | bottom | baselinebaseline | middle | sub | super | text- | middle | sub | super | text-
top | text-bottom | %top | text-bottom | % text-aligntext-align
– Determines how paragraphs are positioned Determines how paragraphs are positioned horizontallyhorizontally
– leftleft | right | center | justify | right | center | justify
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5353
Useful Text Properties, Useful Text Properties, cont.cont. text-indenttext-indent
– Specifies the indentation of the Specifies the indentation of the firstfirst line of the line of the paragraphparagraph
– +/– pt, pc, in, cm, mm | +/– em, ex, px, % +/– pt, pc, in, cm, mm | +/– em, ex, px, %
PP { { text-indenttext-indent: : -25px-25px } /* Hanging indent */ } /* Hanging indent */
line-heightline-height– Specifies the distance between two consecutive Specifies the distance between two consecutive
baselines in a paragraphbaselines in a paragraph– normalnormal | number | pt, pc, in, cm, mm | em, ex, px, % | number | pt, pc, in, cm, mm | em, ex, px, %
..doubledouble { { line-heightline-height: : 200%200% } } ..tripletriple { { line-heightline-height: : 33 } /* 3x the font size */ } /* 3x the font size */ DIVDIV { { line-heightline-height: : 1.5em1.5em } }
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5454
Bates.htmlBates.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE>An Open Letter to the IRS</TITLE><TITLE>An Open Letter to the IRS</TITLE> <LINK REL=STYLESHEET HREF="Bates.css" TYPE="text/css"><LINK REL=STYLESHEET HREF="Bates.css" TYPE="text/css"></HEAD></HEAD><BODY BACKGROUND="images/bond-paper.jpg"><BODY BACKGROUND="images/bond-paper.jpg"><P <P CLASSCLASS==""rheadrhead"">>April 1, 2001April 1, 2001<HR><HR><P <P CLASSCLASS==""rheadrhead"">>William A. Bates<BR>William A. Bates<BR>Macrosoft Corporation<BR>Macrosoft Corporation<BR>Blumond, WA 12345Blumond, WA 12345<P <P CLASSCLASS==""lheadlhead"">>Internal Revenue Service<BR>Internal Revenue Service<BR>Philadelphia, PA 67890Philadelphia, PA 67890<P><P><BR><BR>Dear Sirs,Dear Sirs,<P <P CLASSCLASS==""bodybody"">>I am writing to inform you that, due to financial difficulties, ...I am writing to inform you that, due to financial difficulties, ...
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5555
Bates.cssBates.css
PP { { margin-topmargin-top: : 5px5px } }PP..rheadrhead { { text-aligntext-align: : rightright;; margin-rightmargin-right: : 0.5in0.5in;; font-familyfont-family: : sans-serifsans-serif } }PP..lheadlhead { { font-familyfont-family: : sans-serifsans-serif } }PP..bodybody { { text-aligntext-align: : justifyjustify;; text-indenttext-indent: : 0.5in0.5in } }PP..footfoot { { margin-leftmargin-left: : 60%60%;; line-heightline-height: : 300%300% } }
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5656
Bates.htmlBates.html
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5757
Background PropertiesBackground Properties
How the background of an How the background of an element appears?element appears?– Background-colorBackground-color– Background-imageBackground-image– Background-attachmentBackground-attachment– Background-repeatBackground-repeat– Background-positionBackground-position– backgroundbackground
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5858
Useful Foreground and Useful Foreground and Background PropertiesBackground Properties colorcolor
– Color of the text or foreground colorColor of the text or foreground color– color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb)
| rgb(rrr%, ggg%, bbb%)| rgb(rrr%, ggg%, bbb%)
PP { { colorcolor : : blueblue;};} H1H1 { { color color : : #00AABB#00AABB;};} H3H3 { { colorcolor : : rgb(255, 0, 0 )rgb(255, 0, 0 );} /* red */;} /* red */
background-imagebackground-image– nonenone | url( | url(filenamefilename))– Specifies an image to use as the background of Specifies an image to use as the background of
regionregion
H2H2 { { background-imagebackground-image: : url(Bluedrop.gif)url(Bluedrop.gif); }; }
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
5959
Useful Foreground and Useful Foreground and Background Properties, Background Properties, cont.cont. background-repeatbackground-repeat
– Specifies how to tile the image in the regionSpecifies how to tile the image in the region
– repeatrepeat | repeat-x | repeat-y | norepeat | repeat-x | repeat-y | norepeat
BODYBODY { { background-imagebackground-image: : url(Bluedot.gif)url(Bluedot.gif); ; background-repeatbackground-repeat: : repeat-xrepeat-x;;}}
backgroundbackground– Lets you combine properties in a single entryLets you combine properties in a single entry
PP { { backgroundbackground: : url(wallpaper.jpg) repeat-xurl(wallpaper.jpg) repeat-x; }; }
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6060
Cabinets.html, Cabinets.html, ExampleExample<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE>Joe's Cabinets</TITLE><TITLE>Joe's Cabinets</TITLE> <LINK REL=STYLESHEET HREF="Cabinets.css" TYPE="text/css"><LINK REL=STYLESHEET HREF="Cabinets.css" TYPE="text/css"></HEAD></HEAD><BODY><BODY><CENTER><CENTER><TABLE WIDTH=360 HEIGHT=199><TABLE WIDTH=360 HEIGHT=199> <TR><TD ALIGN="CENTER" <TR><TD ALIGN="CENTER" CLASSCLASS="="bannerbanner">Joe's Cabinets">Joe's Cabinets</TABLE></TABLE></CENTER></CENTER><P><P>Welcome to Joe's Cabinets. We specialize inWelcome to Joe's Cabinets. We specialize in<UL><UL> <LI>Custom Cabinets<LI>Custom Cabinets <LI>Kitchen Remodeling<LI>Kitchen Remodeling <!-- Etc --><!-- Etc --></UL></UL><!-- Etc --><!-- Etc --></BODY></BODY></HTML></HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6161
Cabinets.cssCabinets.css
..bannerbanner { {
backgroundbackground::url(images/boards.jpg) url(images/boards.jpg) repeat-xrepeat-x;;
font-sizefont-size: : 50pt50pt;;
font-familyfont-family: : Arial Rounded MT BoldArial Rounded MT Bold;;
}}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6262
Cabinets.html, ResultCabinets.html, Result
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6363
Border PropertiesBorder Properties
Any element may have a varying Any element may have a varying widths border and every border can widths border and every border can has its own color and style.has its own color and style.– Border-top-widthBorder-top-width– Border-right-widthBorder-right-width– Border-bottom-widthBorder-bottom-width– Border-left-widthBorder-left-width– Border-widthBorder-width– Border-colorBorder-color– Border-styleBorder-style
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6464
Margin & Padding Margin & Padding PropertiesProperties
MarginMargin is the space between an is the space between an element and the elements to its element and the elements to its top, left, bottom and right.top, left, bottom and right.– Margin-top, margin-left, …Margin-top, margin-left, …
PaddingPadding is the space between the is the space between the edge of an elements (border) and edge of an elements (border) and its contents.its contents.– Padding-top, padding-left, …Padding-top, padding-left, …
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6565
Box Display PropertiesBox Display Properties
MarginMargin, , borderborder, , paddingpadding and and contentcontent
This is the Contentpadding
padding
border
margin
border
margin
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6666
Properties of the Properties of the Bounding BoxBounding Box CSS assume that all elements result in CSS assume that all elements result in
one or more rectangular regions one or more rectangular regions (bounding box)(bounding box)
Styles can specify the Styles can specify the marginsmargins, , bordersborders, , and and paddingpadding of the bounding box of the bounding box
PP
{{
marginmargin:: 0.25in0.25in;;
borderborder:: 0.25in solid black0.25in solid black;;
paddingpadding:: 0.25in0.25in;;
backgroundbackground: : URL(images/bond-paper.jpg)URL(images/bond-paper.jpg);;
}}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6767
The Bounding BoxThe Bounding Box
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6868
Images and Floating Images and Floating ElementsElements width, heightwidth, height
– Specify a fixed size for an element (usually an Specify a fixed size for an element (usually an image)image)
– autoauto | pt, pc, in, cm, mm | em, ex, px | pt, pc, in, cm, mm | em, ex, px
IMGIMG..bulletbullet { { width width: : 50px50px; ; heightheight: : 50px50px; }; }
floatfloat– This property lets elements float into the left This property lets elements float into the left
or right margins where the text wrapping or right margins where the text wrapping aroundaround
– nonenone | left | right | left | right
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
6969
Psalm23.htmlPsalm23.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE>The 23rd Psalm</TITLE><TITLE>The 23rd Psalm</TITLE><STYLE><STYLE><!--<!--SPAN SPAN {{ floatfloat:: leftleft;; font-familyfont-family:: "Cushing Book""Cushing Book";; font-sizefont-size:: 75pt75pt;;}}-->--></STYLE></STYLE></HEAD></HEAD><BODY><BODY><H2 ALIGN="CENTER"><H2 ALIGN="CENTER">The 23rd Psalm (King James Version)</H2>The 23rd Psalm (King James Version)</H2><SPAN><SPAN>TT</SPAN></SPAN>he LORD is my shepherd; I shall not want.he LORD is my shepherd; I shall not want.He maketh me to lie down in green pastures: he leadeth me He maketh me to lie down in green pastures: he leadeth me beside the still waters. He restoreth my soul: he leadeth me beside the still waters. He restoreth my soul: he leadeth me in the paths of righteousness for his name's sake. Yea, in the paths of righteousness for his name's sake. Yea,
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7070
Psalm23.html, ResultPsalm23.html, Result
The float property can be usedto implement “drop capital”
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7171
Effect of Paragraph Effect of Paragraph Breaks, Example, cont.Breaks, Example, cont.
Adding a <P> element simply continues the flow
Adding <P STYLE="clear: left"> forces the next paragraph to start after the floating element
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7272
Netscape LayersNetscape Layers
Layers (LAYER and ILAYER elements) Layers (LAYER and ILAYER elements) allow you to:allow you to:– Place HTML markup in separate regionsPlace HTML markup in separate regions– Position each region on the pagePosition each region on the page
LAYER and ILAYER are only supported in LAYER and ILAYER are only supported in Netscape 4Netscape 4– Layers are not supported in Internet Layers are not supported in Internet
Explorer or Explorer or Netscape 6Netscape 6
– http://wp.netscape.com/download/archive.hthttp://wp.netscape.com/download/archive.htmlml
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7373
LAYER and ILAYERLAYER and ILAYER
LAYER elementLAYER element– The The LAYERLAYER element creates element creates regions regions
that have an absolute positionthat have an absolute position with with respect to the window or parent layerrespect to the window or parent layer
ILAYERILAYER– The The ILAYERILAYER element creates element creates inline inline
layerslayers (regions that are (regions that are embedded in embedded in the flow of the textthe flow of the text))
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7474
LAYER, ExampleLAYER, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE>Using ABOVE and BELOW</TITLE><TITLE>Using ABOVE and BELOW</TITLE></HEAD></HEAD><BODY><BODY><H1>Using <CODE>ABOVE</CODE> and <CODE>BELOW</CODE></H1><H1>Using <CODE>ABOVE</CODE> and <CODE>BELOW</CODE></H1><<LAYERLAYER ID="Top"ID="Top" LEFT=60 TOP=120LEFT=60 TOP=120 WIDTH=500 HEIGHT=100 BGCOLOR="#F5DEB3"WIDTH=500 HEIGHT=100 BGCOLOR="#F5DEB3">>This layer is on top, even though it appearsThis layer is on top, even though it appearsfirst in the HTML document.first in the HTML document.<</LAYER/LAYER>><<LAYERLAYER ID="Bottom"ID="Bottom" ABOVE="Top"ABOVE="Top" LEFT=10 TOP=70 LEFT=10 TOP=70 WIDTH=500 HEIGHT=100 BGCOLOR="gray"WIDTH=500 HEIGHT=100 BGCOLOR="gray">>This layer is on the bottom, even though it appearsThis layer is on the bottom, even though it appearssecond in the HTML document.second in the HTML document.<</LAYER/LAYER>></BODY></BODY></HTML></HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7575
LAYER, ResultLAYER, Result
Netscape 4 layers can specify the relative order of the layers.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7676
ILAYER, ExampleILAYER, Example<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE>Row, Row, Row Your Boat</TITLE><TITLE>Row, Row, Row Your Boat</TITLE></HEAD></HEAD><BODY><BODY><IMG SRC="images/Rowboat.gif" ALIGN="RIGHT"><IMG SRC="images/Rowboat.gif" ALIGN="RIGHT"><HR><HR><B>Row, Row, Row Your Boat</B><BR><B>Row, Row, Row Your Boat</B><BR>Row, row, row your boat<BR>Row, row, row your boat<BR>GentlyGently<ILAYER TOP=10><ILAYER TOP=10>downdown</ILAYER></ILAYER><ILAYER TOP=20><ILAYER TOP=20>thethe</ILAYER></ILAYER><ILAYER TOP=30><ILAYER TOP=30>streamstream<BR><BR>Merrily, merrily, merrily, merrily<BR>Merrily, merrily, merrily, merrily<BR>Life is but a dream<BR>Life is but a dream<BR><HR><HR></ILAYER></ILAYER></BODY></BODY></HTML></HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7777
ILAYER, ResultILAYER, Result
Using TOP in ILAYER can move text up or down in the current paragraph.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7878
Specifying Layers with Specifying Layers with Style SheetsStyle Sheets Style sheets provide an alternative to LAYER Style sheets provide an alternative to LAYER
and ILAYER elementsand ILAYER elements– Style sheet layers are supported by Style sheet layers are supported by bothboth Netscape Netscape
and Internet Explorerand Internet Explorer– However, However, Netscape layers Netscape layers are more completeare more complete
No equivalent style for No equivalent style for PAGEXPAGEX and and PAGEYPAGEY for for positioningpositioning
– Horizontal and vertical positions of the layer relative to Horizontal and vertical positions of the layer relative to the document’s windowthe document’s window
ProblemProblem– Netscape and IE use a different object model to Netscape and IE use a different object model to
refer to layersrefer to layers– See See
http://www.stopbadtherapy.com/standards.shtml http://www.stopbadtherapy.com/standards.shtml for creating cross-browser layersfor creating cross-browser layers
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
7979
Creating a Style Sheet Creating a Style Sheet LayerLayer Use an ID tag format to define a styleUse an ID tag format to define a style
##layer1layer1 { { positionposition: : absoluteabsolute; ;
leftleft: : 50px50px; ;
toptop: : 75px75px; ... }; ... }
Define the layer through a DIV or SPAN Define the layer through a DIV or SPAN elementelement
<SPAN <SPAN ID="layer1"ID="layer1">>
......
</SPAN></SPAN>
<DIV <DIV ID="layer2"ID="layer2">>
......
</DIV></DIV>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8080
SPAN and DIVSPAN and DIV
<SPAN><SPAN>– is an "is an "inline-taginline-tag" in HTML, meaning that no " in HTML, meaning that no
line breaks are inserted before or after the line breaks are inserted before or after the use of it.use of it.
<DIV><DIV> – is a "is a "block tagblock tag", meaning that line breaks ", meaning that line breaks
are automatically inserted to distance the are automatically inserted to distance the block from the surrounding content (like block from the surrounding content (like <P> or <TABLE> tags).<P> or <TABLE> tags).
– The whole block can be easily positioned on The whole block can be easily positioned on the page.the page.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8181
CSS PositioningCSS Positioning
Static positioningStatic positioning– A web browser gets the HTML file, parses it into A web browser gets the HTML file, parses it into
elements, apply styles. It is how pages are laid out elements, apply styles. It is how pages are laid out by the browser.by the browser.
Absolute positioningAbsolute positioning– An element will be located with respect to its An element will be located with respect to its
parent element.parent element. Fixed positioningFixed positioning
– The page scroll, the elements also scroll (remain The page scroll, the elements also scroll (remain fixed in the page).fixed in the page).
Relative positioningRelative positioning– Places an element with respect to where it would Places an element with respect to where it would
statically be positioned (i.e. relative to the positive statically be positioned (i.e. relative to the positive assigned by the browser).assigned by the browser).
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8282
Useful Layer Useful Layer PropertiesProperties left, topleft, top
– Specifies the left and top sides of the layer Specifies the left and top sides of the layer relative to the parent windowrelative to the parent window
positionposition– Describes how the position is defined to the Describes how the position is defined to the
parent windowparent window– absolute, relative, staticabsolute, relative, static
visibilityvisibility– Determines whether a layer is visible or Determines whether a layer is visible or
hiddenhidden– visible, hidden, inheritvisible, hidden, inherit
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8383
Dynamically Changing Dynamically Changing a Layer’s Visibility, a Layer’s Visibility, ExampleExample
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><HTML><HEAD> <TITLE>Changing Visibility Dynamically</TITLE><TITLE>Changing Visibility Dynamically</TITLE><STYLE><STYLE><!--<!--##layer1layer1 { { positionposition: : absoluteabsolute; ; leftleft: : 0.25in0.25in; ; toptop: : 1.5in1.5in;; colorcolor: : blackblack; ; background-colorbackground-color: : #F5DEB3#F5DEB3;; visibilityvisibility: : hiddenhidden; }; }##layer2layer2 { { positionposition: : absoluteabsolute; ; leftleft: : 0.25in0.25in; ; toptop: : 1.5in1.5in;; colorcolor: : #F5DEB3#F5DEB3; ; background-colorbackground-color: : blackblack;; visibilityvisibility: : hiddenhidden; }; }H1H1 { { text-aligntext-align: : centercenter;; font-familyfont-family: : ArialArial;; }}FORMFORM { { text-aligntext-align: : centercenter;; }}-->--></STYLE> ...</STYLE> ...
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8484
Dynamically Changing Dynamically Changing a Layer’s Visibility, a Layer’s Visibility, ExampleExample<SCRIPT TYPE="text/javascript"><SCRIPT TYPE="text/javascript"><!--<!--function display(value1, value2){function display(value1, value2){ if(document.layers) { // Test for Netscape.if(document.layers) { // Test for Netscape. document.layers.layer1.visibility = value1;document.layers.layer1.visibility = value1; document.layers.layer2.visibility = value2;document.layers.layer2.visibility = value2; } else {} else { document.all.layer1.style.visibility = value1; document.all.layer1.style.visibility = value1; document.all.layer2.style.visibility = value2; document.all.layer2.style.visibility = value2; }}}}//-->//--></SCRIPT></SCRIPT></HEAD></HEAD><BODY BGCOLOR="WHITE"><BODY BGCOLOR="WHITE"><H1>Changing Visibility Dynamically</H1><H1>Changing Visibility Dynamically</H1><FORM><FORM> <INPUT TYPE="BUTTON" VALUE="Show Layer1"<INPUT TYPE="BUTTON" VALUE="Show Layer1" onClick="onClick="display('visible', 'hidden')display('visible', 'hidden')">"> <INPUT TYPE="BUTTON" VALUE="Show Layer2"<INPUT TYPE="BUTTON" VALUE="Show Layer2" onClick="onClick="display('hidden', 'visible')display('hidden', 'visible')">"></FORM>...</FORM>...
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8585
Dynamically Changing Dynamically Changing a Layer’s Visibility, a Layer’s Visibility, ExampleExample
......
<DIV ID="layer1"><DIV ID="layer1">
<H1>This is layer1.</H1><H1>This is layer1.</H1>
</DIV></DIV>
<DIV ID="layer2"><DIV ID="layer2">
<H1>This is layer2.</H1><H1>This is layer2.</H1>
</DIV></DIV>
</BODY></BODY>
</HTML></HTML>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8686
Dynamically Changing Dynamically Changing a Layer’s Visibility, a Layer’s Visibility, ResultResult
Selecting a button displays a hidden layer.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8787
Length UnitsLength Units
Unit nameUnit name AbbreviationAbbreviation MeaningMeaning Relative?Relative?
EmEm EmEm The height of a fontThe height of a font YesYes
ExEx ExEx The height of the letter x in a fontThe height of the letter x in a font YesYes
PicaPica PcPc 1 pica is 12 points1 pica is 12 points NoNo
PointPoint PtPt 1/72 of an inch1/72 of an inch NoNo
PixelPixel PxPx One dot on a screenOne dot on a screen NoNo
MillimeterMillimeter MmMm Printing unitPrinting unit NoNo
CentimeterCentimeter CmCm Printing unitPrinting unit NoNo
InchInch InIn Printing unitPrinting unit nono
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8888
Element Type Element Type PropertiesProperties You can specify the display You can specify the display
properties for different types of properties for different types of element.element.– Set the type of bullet for a list item.Set the type of bullet for a list item.– DisplayDisplay– White-spaceWhite-space– List-style-typeList-style-type– List-style-imageList-style-image– List-style-positionList-style-position
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
8989
CSS ListsCSS Lists
PropertyProperty ValuesValues
List-style typeList-style type Define the look of the bullets in your listDefine the look of the bullets in your list
List-style List-style imageimage
Allow you to use a custom graphic for bulletsAllow you to use a custom graphic for bullets
List-style List-style positionposition
List-style position:outer – the second line align with the List-style position:outer – the second line align with the first line.first line.
List-style position:inner – the second line align with the List-style position:inner – the second line align with the bullet.bullet.
<html><head><style type="text/css">li.list1 {list-style: circle outside; color:green;} li.list2 {list-style: square inside; color:blue;}.blacktext {color:black;}</style></head><body><ul><li class="list1"><span class="blacktext">This is one black line</span><li class="list1">This is another line (not black line).</ul><br><ul><li class="list2"><span class="blacktext">This is one black line</span><li class="list2">This is another line (not black line).</ul></body></html>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9090
CSS ListsCSS Lists
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9191
User Interface User Interface PropertiesProperties Allow the shape of the cursor to be setAllow the shape of the cursor to be set
– Changing cursorsChanging cursors PointerPointer WaitWait East, WestEast, West
Introduce the system font conceptIntroduce the system font concept@font-face@font-face {{
font-familyfont-family: : "Robson Celtic""Robson Celtic";;
srcsrc:: url("http://site/fonts/rob-celt") url("http://site/fonts/rob-celt");;
}}
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9292
CSS CursorsCSS Cursors<html><html> <head><head> <title>Changing Cursors</title><title>Changing Cursors</title> <style type="text/css"><style type="text/css"> h3 { margin: 0.5em; padding: 0.25em; h3 { margin: 0.5em; padding: 0.25em; text-align: center;text-align: center; background-color: silver; color: black; }background-color: silver; color: black; } </style></style> </head></head> <body><body> <table width="100%"><tr><td valign="top"><table width="100%"><tr><td valign="top"> <h3 <h3 stylestyle="="cursor: crosshair;cursor: crosshair;">Crosshair</h3>">Crosshair</h3> <h3 <h3 stylestyle="="cursor: default;cursor: default;">Default</h3>">Default</h3> <h3 <h3 stylestyle="="cursor: help;cursor: help;">Help</h3>">Help</h3> <h3 <h3 stylestyle="="cursor: move;cursor: move;">Move</h3>">Move</h3> <h3 <h3 stylestyle="="cursor: pointer;cursor: pointer;">Pointer</h3>">Pointer</h3> <h3 <h3 stylestyle="="cursor: text;cursor: text;">Text</h3>">Text</h3> <h3 <h3 stylestyle="="cursor: wait;cursor: wait;">Wait</h3>">Wait</h3> <h3 <h3 stylestyle="="cursor: url('maus.cur'),cursor: url('maus.cur'), url('maus.tiff'),url('maus.tiff'), url('maus.gif'), auto;url('maus.gif'), auto;">URL</a>">URL</a> </td><td valign="top"> …</td><td valign="top"> …
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9393
CSS CursorsCSS Cursors
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9494
Property valueProperty value
Major kinds of value are:Major kinds of value are:– LengthLength
Can be positive or negativeCan be positive or negative
– PercentagePercentage pp { {widthwidth: : 75%75%;};}
– ColorColor Color keywords, hex, rgb colorsColor keywords, hex, rgb colors
– urlurl url(url(http://www.test.com/test.gifhttp://www.test.com/test.gif), or local files), or local files
– KeywordKeyword Bold, small, …Bold, small, …
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9595
CSS CompatibilityCSS Compatibility Reference
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9696
User Style SheetsUser Style Sheets
Create by the Create by the user and store user and store on the local on the local computer.computer.
It is especially It is especially useful for some useful for some people, including people, including those with visual those with visual disabilities.disabilities.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9797
Outline – Part COutline – Part C
Important ConceptsImportant Concepts– Cascading, Inheritance & SelectionCascading, Inheritance & Selection
ExamplesExamples– Converting an existing pageConverting an existing page– How to Skin a menuHow to Skin a menu– Making an input form look goodMaking an input form look good– Sneaking out of the BoxSneaking out of the Box
CSS ToolsCSS Tools CSS CheckCSS Check
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9898
Cascade & InheritanceCascade & Inheritance
The style sheets can be linked The style sheets can be linked together to create a hierarchy, and together to create a hierarchy, and this process of linking is called this process of linking is called cascading.cascading.
If you set a font-family property on If you set a font-family property on the “body” element, all the other the “body” element, all the other elements on the page will also have elements on the page will also have the same value (unless it is set by the same value (unless it is set by other rules).other rules).– Notice that not all properties will inherit.Notice that not all properties will inherit.
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
9999
CSS ExamplesCSS Examples
How to convert an existing page?How to convert an existing page? How to skin a Menu?How to skin a Menu? How to improve the outlook of an How to improve the outlook of an
input form?input form? How to put your articles into How to put your articles into
different boxes in a fancy way?different boxes in a fancy way?
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
100100
Converting an existing Converting an existing pagepageDemo!Demo!
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
101101
Example 1: Style SheetExample 1: Style Sheet
<<stylestyle type type="="text/csstext/css">"> body {margin: 4px; color: black; background: white;}body {margin: 4px; color: black; background: white;} table {width: 100%; margin: 0;}table {width: 100%; margin: 0;} table td {padding: 0; border-width: 0; vertical-align: top;table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}font-family: Verdana, Arial, Helvetica, sans-serif;} a:link {color: #990000;}a:link {color: #990000;} a:visited {color: #990099;}a:visited {color: #990099;} td#title {vertical-align: bottom; color: #442200;td#title {vertical-align: bottom; color: #442200; background: transparent url(topbg.gif) top left;background: transparent url(topbg.gif) top left; font: bold 200% Arial, Helvetica, Verdana, sans-serif;}font: bold 200% Arial, Helvetica, Verdana, sans-serif;} td#advert {width: 234px;}td#advert {width: 234px;} #content-top td {vertical-align: middle; color: white;#content-top td {vertical-align: middle; color: white; font-weight: bold; padding: 0.1em 0.2em 0;}font-weight: bold; padding: 0.1em 0.2em 0;} tr td#sidetop {background: #663300;tr td#sidetop {background: #663300; font: bold 115% Arial, Helvetica, Verdana, sans-serif;}font: bold 115% Arial, Helvetica, Verdana, sans-serif;} tr td#crumbs {background: #997753; font-size: 85%;}tr td#crumbs {background: #997753; font-size: 85%;} tr td#crumbs a:link {color: white;}tr td#crumbs a:link {color: white;} tr td#crumbs a:visited {color: gray;}tr td#crumbs a:visited {color: gray;} td#leftside {width: 120px; background: #EBDAC6;}td#leftside {width: 120px; background: #EBDAC6;} td#leftside td {border-bottom: 1px solid #A98763; font-size: 85%;td#leftside td {border-bottom: 1px solid #A98763; font-size: 85%; padding: 0 0 1px 0.33em;}padding: 0 0 1px 0.33em;} td#leftside table {margin-top: 3px;}td#leftside table {margin-top: 3px;} td#content {padding: 17px 42px;}td#content {padding: 17px 42px;} td#content p {font: 85% Arial, Helvetica, Verdana, sans-serif;}td#content p {font: 85% Arial, Helvetica, Verdana, sans-serif;} h1 {font: bold 150% Arial, Helvetica, Verdana, sans-serif;h1 {font: bold 150% Arial, Helvetica, Verdana, sans-serif; color: #602020; border-bottom: 3px solid #804040;color: #602020; border-bottom: 3px solid #804040; padding-bottom: 2px;}padding-bottom: 2px;}
div.pullquote {float: right; width: 140px; color: #A09080;div.pullquote {float: right; width: 140px; color: #A09080; border: solid #908070; border-width: 7px 0;border: solid #908070; border-width: 7px 0; font: bold 1em Arial, Helvetica, Verdana, sans-serif;font: bold 1em Arial, Helvetica, Verdana, sans-serif; padding: 3px 2px; margin: 1px 7px;}padding: 3px 2px; margin: 1px 7px;} td#rightside {width: 150px;}td#rightside {width: 150px;} td#rightside td {font-size: 66%; padding: 1px;}td#rightside td {font-size: 66%; padding: 1px;} td.head {background: #D6B58C; text-align: center; font-weight: btd.head {background: #D6B58C; text-align: center; font-weight: b
old;}old;} td#rightside th {font-size: 85%; padding: 2px;td#rightside th {font-size: 85%; padding: 2px; background: #774411; color: white;}background: #774411; color: white;} tr.even td {background: #F7F0E7; width: 50%;}tr.even td {background: #F7F0E7; width: 50%;} td.r3 {color: #660;}td.r3 {color: #660;} td.r5 {color: #060;}td.r5 {color: #060;} div#traveltip {border: 3px solid #804040; background: #EBDAC6;div#traveltip {border: 3px solid #804040; background: #EBDAC6; text-align: center; margin-top: 1.5em; padding: 8px; font-size: 6text-align: center; margin-top: 1.5em; padding: 8px; font-size: 6
6%;}6%;} tr#footer td {vertical-align: middle; font-size: 66%;tr#footer td {vertical-align: middle; font-size: 66%; border-top: 3px solid #EFE1D1;}border-top: 3px solid #EFE1D1;} td#feedback {text-align: center; padding: 0.2em;td#feedback {text-align: center; padding: 0.2em; background: #EFE1D1;}background: #EFE1D1;} tr#footer td#tg {font-size: 85%; text-align: center;}tr#footer td#tg {font-size: 85%; text-align: center;} td#copyright {text-align: right; font-style: italic; color: #999;}td#copyright {text-align: right; font-style: italic; color: #999;} </</stylestyle>>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
102102
Skin a Menu? Demo!Skin a Menu? Demo!
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
103103
Example 2: Style SheetExample 2: Style Sheet
<<stylestyle type type="="text/csstext/css">"> body {background-color: rgb(100%,98%,96%); color: black;}body {background-color: rgb(100%,98%,96%); color: black;} td {border-width: 0; padding: 0;}td {border-width: 0; padding: 0;} td#banner {border-bottom: 2px solid rgb(60%,50%,40%);}td#banner {border-bottom: 2px solid rgb(60%,50%,40%);} td#banner h1 {color: rgb(40%,30%,20%);td#banner h1 {color: rgb(40%,30%,20%); margin: 0; padding: 0.25em 0 0.125em 0;margin: 0; padding: 0.25em 0 0.125em 0; font: bold 150% sans-serif; letter-spacing: 0.5em;}font: bold 150% sans-serif; letter-spacing: 0.5em;} td#main {background-color: transparent; color: black;td#main {background-color: transparent; color: black; padding: 1em; font: 95% Times, serif;}padding: 1em; font: 95% Times, serif;} td#main h2 {font: bold 125% sans-serif;td#main h2 {font: bold 125% sans-serif; margin: 0.5em 1em; padding: 0;margin: 0.5em 1em; padding: 0; border-bottom: 1px solid rgb(80%,75%,70%);}border-bottom: 1px solid rgb(80%,75%,70%);} td#main p {margin: 1em 2.5em;}td#main p {margin: 1em 2.5em;} td#sidelinks {vertical-align: top;}td#sidelinks {vertical-align: top;} td#footer {background-color: transparent; color: rgb(70%,60%,50%);td#footer {background-color: transparent; color: rgb(70%,60%,50%); border-top: 1px solid rgb(60%,50%,40%);border-top: 1px solid rgb(60%,50%,40%); text-align: right; font-size: 85%;text-align: right; font-size: 85%; padding-top: 0.33em; font-style: italic;}padding-top: 0.33em; font-style: italic;} </</stylestyle>>
<<stylestyle type type="="text/csstext/css">"> /* menu styles *//* menu styles */ td#sidelinks a {display: block;td#sidelinks a {display: block; margin: 0 3px 0 0; padding: 1px 10px 1px 5px;margin: 0 3px 0 0; padding: 1px 10px 1px 5px; text-decoration: none;text-decoration: none; font: bold 100% Arial, Verdana, sans-serif;font: bold 100% Arial, Verdana, sans-serif; border-right: 1px solid rgb(60%,50%,40%);border-right: 1px solid rgb(60%,50%,40%); color: rgb(30%,30%,60%); background: transparent;}color: rgb(30%,30%,60%); background: transparent;} td#sidelinks a:visited {color: rgb(55%,55%,60%);}td#sidelinks a:visited {color: rgb(55%,55%,60%);} td#sidelinks h4 {background-color: transparent; color: rgb(30%,2td#sidelinks h4 {background-color: transparent; color: rgb(30%,2
0%,10%);0%,10%); margin: 0 3px 0 0; padding: 1em 0 0; margin: 0 3px 0 0; padding: 1em 0 0; font: bold 100% Arial, Verdana, sans-serif;font: bold 100% Arial, Verdana, sans-serif; border-right: 1px solid rgb(60%,50%,40%);border-right: 1px solid rgb(60%,50%,40%); border-bottom: 2px solid rgb(50%,40%,30%);}border-bottom: 2px solid rgb(50%,40%,30%);} td#sidelinks a:hover {background-color: rgb(100%,70%,70%);td#sidelinks a:hover {background-color: rgb(100%,70%,70%); color: rgb(50%,0%,0%);color: rgb(50%,0%,0%); border-right: 7px solid rgb(80%,30%,20%); border-right: 7px solid rgb(80%,30%,20%); padding-right: 7px; margin-right: 0;}padding-right: 7px; margin-right: 0;} td#sidelinks a#comment {td#sidelinks a#comment { background-color: rgb(100%,92%,90%); color: black;background-color: rgb(100%,92%,90%); color: black; border: 1px solid rgb(60%,50%,40%);border: 1px solid rgb(60%,50%,40%); border-right-width: 4px; padding-right: 7px;border-right-width: 4px; padding-right: 7px; margin-right: 3px;}margin-right: 3px;} </</stylestyle>>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
104104
Skin an Input Form? Skin an Input Form? Demo!Demo!
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
105105
Example 3: Style SheetExample 3: Style Sheet <<stylestyle type type="="text/csstext/css"" media media="="allall">"> td.lbl {font-weight: bold; text-align: right;}td.lbl {font-weight: bold; text-align: right;} div.formEnd {text-align: center; padding-top: 1em; margin-top: 1em;}div.formEnd {text-align: center; padding-top: 1em; margin-top: 1em;} </</stylestyle>> <<stylestyle type type="="text/csstext/css"" media media="="printprint">"> td {padding: 0.5em 0.125em;}td {padding: 0.5em 0.125em;} tr.required td.lbl {text-decoration: underline;}tr.required td.lbl {text-decoration: underline;} .writein {border-width: 0; border-bottom: 1px solid black;}.writein {border-width: 0; border-bottom: 1px solid black;} select.writein {display: none;}select.writein {display: none;} span#stateBlank {display: block; width: 10em; height: 1em; border-bottom: 1px sspan#stateBlank {display: block; width: 10em; height: 1em; border-bottom: 1px s
olid black;}olid black;} div#submitArea {display: none;}div#submitArea {display: none;} div#mailArea p:first-line {font-weight: bold;}div#mailArea p:first-line {font-weight: bold;} </</stylestyle>> <<stylestyle type type="="text/csstext/css"" media media="="screenscreen">"> h1 {font-family: sans-serif; border-bottom: 0.125em solid #F33; margin-bottom: h1 {font-family: sans-serif; border-bottom: 0.125em solid #F33; margin-bottom:
0;}0;} td {padding: 0.25em 1px;}td {padding: 0.25em 1px;} tr.required td.lbl {background: #FCC; border-left: 0.5em solid red;}tr.required td.lbl {background: #FCC; border-left: 0.5em solid red;} td.lbl {background: #CFC; border-left: 0.5em solid green;}td.lbl {background: #CFC; border-left: 0.5em solid green;} div#mailArea {display: none;}div#mailArea {display: none;} input.writein:focus {background: yellow;}input.writein:focus {background: yellow;} </</stylestyle>>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
106106
Sneaking out of the Sneaking out of the box? Demo!box? Demo!
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
107107
Example 4: Style SheetExample 4: Style Sheet
<<stylestyle type type="="text/csstext/css">"> body {background: #969; color: black;}body {background: #969; color: black;} div.wrap {background: #FDF; color: black; margin: 0 2em;}div.wrap {background: #FDF; color: black; margin: 0 2em;} p {margin: 0; padding: 0.5em 1em;}p {margin: 0; padding: 0.5em 1em;} h1, h2 {margin: 0; padding: 0 0.5em;}h1, h2 {margin: 0; padding: 0 0.5em;} div#p1 {margin: 0 2em 0 10em;}div#p1 {margin: 0 2em 0 10em;} div#p2 {margin: 0 10em 0 2em;}div#p2 {margin: 0 10em 0 2em;} div#menu {float: right; width: 5em;div#menu {float: right; width: 5em; padding: 0; margin: 0 -1.5em 0.25em 0.5em;padding: 0; margin: 0 -1.5em 0.25em 0.5em; border: 1px solid #747; background: white;}border: 1px solid #747; background: white;} div#menu a {display: block; text-align: center;div#menu a {display: block; text-align: center; padding: 0.2em 0.5em;}padding: 0.2em 0.5em;} div#footer {margin: 0 11em 0 2em; padding: 0.25em;div#footer {margin: 0 11em 0 2em; padding: 0.25em; text-align: center; font-style: italic; color: #969;}text-align: center; font-style: italic; color: #969;} </</stylestyle>>
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
108108
CSS ToolsCSS Tools
Style Master, layout MasterStyle Master, layout Master
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
109109
SelectORacleSelectORacle
http://gallery.theopalgroup.com/selectoracle/
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
110110
CSSCheckCSSCheck
http://www.htmlhelp.com/tools/csscheck/
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
111111
CSS1 Test SuiteCSS1 Test Suite
Use to test Use to test the the browser’s browser’s conformancconformance to CSS1 e to CSS1 specificationspecification..
http://www.w3.org/Style/CSS/Test/CSS1/current/
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
112112
CSS Current workCSS Current work
The Box modelThe Box model– Horizontal and vertical flowHorizontal and vertical flow
User interface enhancementsUser interface enhancements Scalable Vector Graphics (SVG)Scalable Vector Graphics (SVG) Selectors extensionSelectors extension …… Reference: Reference:
http://www.w3.org/Style/CSS/current-whttp://www.w3.org/Style/CSS/current-work/ork/
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
113113
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
114114
SummarySummary
Through style sheets you can specify the Through style sheets you can specify the general formatting of HTML elementsgeneral formatting of HTML elements
Use external style sheets to share styles Use external style sheets to share styles across all documents in the Web siteacross all documents in the Web site
Class definitions allow you to define Class definitions allow you to define multiple styles for an HTML elementmultiple styles for an HTML element
LAYERs are only supported by Netscape LAYERs are only supported by Netscape 4; however, a viable alternative are style 4; however, a viable alternative are style sheet layerssheet layers
INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment
All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.
115115
ReferencesReferences
Deitel: Chapter 6Deitel: Chapter 6 CWP: Chapter 5CWP: Chapter 5 Eric Meyer on CSSEric Meyer on CSS SAMS - CSSSAMS - CSS CSS TutorialCSS Tutorial ReferenceReference www.w3.org/Style/CSS/www.w3.org/Style/CSS/ Thank you for patience!Thank you for patience!