Web-based Application Development Lecture 5 January 24, 2006 Anita Raja

Agenda Cascading Style Sheets PTW Chapter 3 Attributes, Lists, and Tables PTW Chapter 4

Programming the Web using XHTML and JavaScript Chapter 3 Cascading Style Sheets

I’ll bet red headings would look nice

Internal Style Sheets Redefines the presentation rule (style) for certain elements “Internal” because contained within the HTML source document itself Styles may be defined using different style sheet languages so … … the language used must be specified

Internal Style Sheets element in section … The style sheet instructions in this element are: Written in plain text format Using the cascading style sheet language

Internal Style Sheets Also specify default style sheet language for entire HTML document: elements go in the section

Internal Style Sheets h2 { color:red } Style definition Name of tag Property Value

Internal Style Sheets h2 { color:#D61130 }

Internal Style Sheets Alignment Options are: left, center, right, justify h2 {color:red; text-align:center}

Uh, oh. I need bigger section headings

Formatting Fonts Using Styles Could find & replace all with Why not? What if some had been used for other things?

Formatting Fonts Using Styles Use font-size property: h2 {color:red; text-align:center; font-size:24pt}

Formatting Fonts Using Styles Other choices for font-size value: 150% smaller small, x-small, xx-small larger large, x-large, xx-large

Formatting Fonts Using Styles Use font-style property: h2 {… font-style:italic …}

Also normal, oblique

Formatting Fonts Using Styles Other properties text-decoration underline, overline, line-through, blink, none text-transform capitalize, uppercase, lowercase, none font-variant small-caps, none background-color transparent, one of the color names or numbers

Formatting Fonts Using Styles Paragraph styles Only works for content enclosed within elements p {font-size:14pt}

Formatting Fonts Using Styles Indent and line spacing: p {text-indent:25pt; line-height:24pt} p {text-indent:12%; line-height:150%}

Formatting Fonts Using Styles Font Families What if not installed on user’s browser? p {font-family:”Lucida”}

Formatting Fonts Using Styles Include more than one font families: p {font-family:”Lucida”,”Arial”}

Formatting Fonts Using Styles Warning: multiple fonts may not have the impact you intend User’s display may not include the fonts you specified Common fonts may be the best choice overall

Formatting Fonts Using Styles Can compress definition p {font-style:italic; font-weight:500; font-variant:small-caps; font-size:14pt; line-height:24pt; font-family:”Lucida”,”Arial”} p {font: italic 500 small-caps 14pt/24pt ”Lucida”,”Arial”}

Do all paragraphs have to be the same?

Tags with Multiple Styles The same type of element can have multiple definitions called “classes” p {text-align:justify; font-weight:bold} p.intro {text-align:center; color:red}

Tags with Multiple Styles The p.intro class includes the styles of the p class but changes those styles How is this class invoked? Explains why “none” is an option text-transform; font-variant …

Local Styles Local styles take precedence over other style definitions The text in this paragraph will The text in this paragraph won’t be red

No existing tag is quite right. Now what?

Custom Tags Can create entirely new elements Generic tags: (block level) (inline)

Custom Tags span {font-size:18pt} Let me make something perfectly clear.

Custom Tags Classes may be defined for custom tags span.red {color:red}

I’m going to get tired of entering style definitions into all my web pages.

External Style Sheets Text-only file Contains style definitions only h2 {color:red} h1 {font-size:24pt p {text-align:center} p.small {font-size:10pt} No tags needed

External Style Sheets Save in a file with a.css extension css = cascading style sheets Local, internal and external may be present in the same document Local overrides internal Internal overrides external

External Style Sheets How to specify external style sheets? Add tag in section

External Style Sheets Problem: older versions of browsers might not recognize style definitions Could use comments: <!-- p {text-indent:25pt; line-height:24pt} -->

External Style Sheets MORE problems: XHTML may not recognize this use of comments Solution: use method If older version of browser does not recognize this tag it will ignore it

Assignment Debugging Exercise, p. 81 Correct errors Post corrected document to your Web space as “Lagerstrom-Ch-3.html” Grade based on: Appearance Technical correctness of code

Chapter 4 Attributes, Lists, and Tables Programming the Web using XHTML and JavaScript

Extensions and Deprecations Extensions – features not found in “standard” HTML Too often, NN’s extensions don’t work in IE and vice versa Therefore, be careful about non-standard features Official features listed at

Extensions and Deprecations Deprecation – feature being phased out May work in older browser versions but eventually will cease to be supported Obsolete – features that are not supported by browsers in strict compliance with W3C standards

Extensions and Deprecations At … Site Index H HTML 4.01 Specification A. Changes 3.1 Deprecated Elements

Extensions and Deprecations Forms of XHTML (see p. 85) Strict Does not recognize deprecated elements Transitional Which should you use? Transitional Otherwise older browsers won’t display your pages well

Extensions and Deprecations vs. is deprecated isn’t Which would be preferable for making changes to an entire document?

Tags and Attributes Styles have properties h2 {text-align:center} Attributes have values … No quotation marks Quotation marks

Tags and Attributes size= “1” to “7” (smallest to largest) color= “red”, “blue”, etc. face= “Arial”, “Courier”, etc.

Tags and Attributes Alignment = “left”, “center”, “right” Using tags: Centering this text is centered

Tags and Attributes Preferred method using styles: h2 {text-align:center} p {text-align:center}

Tags and Attributes Background colors tag bgcolor and text attributes Using tags:

Tags and Attributes Using styles in the body: body {background-color:yellow; color:blue}

Tags and Attributes Horizontal rules Using tags: Using styles: hr {height:7px; width:75%; background-color:red} Ch04-Ex-01

Next Class HW 2 due 2 debugging assignments Complete Chapter 4 PTW Chapter 2 WWG