cascading style sheets ine2720 web application software development essential materials

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



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



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



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, …



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)



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



88

W3C CSS Validation W3C CSS Validation ServiceService http://jigsaw.w3.org/css-validator/



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?



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



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.



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



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; ; }}



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 …



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;}



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>



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>

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>

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>



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>

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"> -->

</STYLE></STYLE> </HEAD></HEAD>

<BODY> <BODY> ......

<P <P IDID==""foofoo"">> ... ...

</p> </p> </BODY></BODY>



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>



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;};}



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; }; }



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>



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;}



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;}



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



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>



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>



3030

Fizzics1.html, ResultFizzics1.html, Result(no style sheet)(no style sheet)

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"> --> </STYLE></STYLE> </HEAD></HEAD>



3232

Fizzics2.html, ResultFizzics2.html, Result(with style sheet)(with style sheet)



3333

How to Select, inherit?How to Select, inherit?

<html>

<head>

<title>

<h1>

<p>

<body>

<i>



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.



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; }}

......



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;}

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">  </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>



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. ......



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



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.



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



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



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



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



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 } }



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 } }



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;

}



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>



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; }; }



5050

CampBearClaw.html, CampBearClaw.html, ResultResult



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



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



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 } }



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, ...



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% } }



5656

Bates.htmlBates.html



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



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); }; }



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; }; }

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 </UL></UL></BODY></BODY></HTML></HTML>



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;;

}}



6262

Cabinets.html, ResultCabinets.html, Result



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



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, …



6565

Box Display PropertiesBox Display Properties

MarginMargin, , borderborder, , paddingpadding and and contentcontent

This is the Contentpadding

padding

border

margin

border

margin



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);;

}}



6767

The Bounding BoxThe Bounding Box



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

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>--></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,



7070

Psalm23.html, ResultPsalm23.html, Result

The float property can be usedto implement “drop capital”



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



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



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))



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>



7575

LAYER, ResultLAYER, Result

Netscape 4 layers can specify the relative order of the layers.



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>



7777

ILAYER, ResultILAYER, Result

Using TOP in ILAYER can move text up or down in the current paragraph.



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



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>



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.



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).



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

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>--></STYLE> ...</STYLE> ...

8484

Dynamically Changing Dynamically Changing a Layer’s Visibility, a Layer’s Visibility, ExampleExample<SCRIPT TYPE="text/javascript"><SCRIPT TYPE="text/javascript">//--></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>...



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>



8686

Dynamically Changing Dynamically Changing a Layer’s Visibility, a Layer’s Visibility, ResultResult

Selecting a button displays a hidden layer.



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



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



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>



9090

CSS ListsCSS Lists



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");;

}}



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"> …



9393

CSS CursorsCSS Cursors



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, …



9595

CSS CompatibilityCSS Compatibility Reference



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.



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



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.



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?



100100

Converting an existing Converting an existing pagepageDemo!Demo!



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>>



102102

Skin a Menu? Demo!Skin a Menu? Demo!



103103


<<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>>



104104

Skin an Input Form? Skin an Input Form? Demo!Demo!



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>>



106106

Sneaking out of the Sneaking out of the box? Demo!box? Demo!



107107


<<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>>



108108

CSS ToolsCSS Tools

Style Master, layout MasterStyle Master, layout Master



109109

SelectORacleSelectORacle

http://gallery.theopalgroup.com/selectoracle/



110110

CSSCheckCSSCheck

http://www.htmlhelp.com/tools/csscheck/



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/



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/



113113



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



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!

cascading style sheets ine2720 web application software development essential materials

Documents

style sheet rules

style sheets work

style external

css introduction

use css

html file css

web developers

content of web sites