Post on 20-Dec-2015
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 <style> element in <head> section
<style type=“text/css”>
…
</style>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:<meta http-equiv=“Content-Style-Type” content=“text/css” />
<meta> elements go in the <head> 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
<style type=“text/css”>
</style>
h2 {color:red; text-align:center}
Uh, oh. I need bigger
section headings
Formatting Fonts Using Styles Could find & replace all <h2> with <h1> Why not?
What if some <h2> had been used for other things?
Formatting Fonts Using Styles Use font-size property:
<style type=“text/css”>
</style>
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:
<style type=“text/css”>
</style>
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 <p> elements
<style type=“text/css”> p {font-size:14pt}
</style>
Formatting Fonts Using Styles Indent and line spacing:
<style type=“text/css”> p {text-indent:25pt; line-height:24pt}
</style>
<style type=“text/css”> p {text-indent:12%; line-height:150%}
</style>
Formatting Fonts Using Styles Font Families
What if not installed on user’s browser?
<style type=“text/css”> p {font-family:”Lucida”}
</style>
Formatting Fonts Using Styles Include more than one font families:
<style type=“text/css”> p {font-family:”Lucida”,”Arial”}
</style>
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
<style type=“text/css”>p {font-style:italic; font-weight:500;font-variant:small-caps; font-size:14pt;line-height:24pt; font-family:”Lucida”,”Arial”}
</style>
<style type=“text/css”>p {font: italic 500 small-caps 14pt/24pt
”Lucida”,”Arial”}</style>
Do all paragraphs have to be the same?
Tags with Multiple Styles The same type of element can have
multiple definitions called “classes”
<style type=“text/css”>p {text-align:justify; font-weight:bold}
</style>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
<p class=“intro”> … </p>
Local Styles
Local styles take precedence over other style definitions
<p style=“color:red”>The text in this paragraph will</p>
<p>The text in this paragraph won’t be red</p>
No existing tag is quite right. Now
what?
Custom Tags Can create entirely new elements Generic tags:
<div> (block level) <span> (inline)
Custom Tags
<style type=“text/css”>span {font-size:18pt}
</style>
Let me make something <span>perfectly</span> clear.
Custom Tags Classes may be defined for custom tags
<style type=“text/css”>span.red {color:red}
</style>
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 <style> 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 <link> tag in <head> section
<link rel=“stylesheet” type=“text/css” href=“my_styles.css”>
External Style Sheets Problem: older versions of browsers might not
recognize style definitions Could use comments:
<style type=“text/css”><!-- p {text-indent:25pt; line-height:24pt}-->
</style>
External Style Sheets MORE problems: XHTML may not recognize
this use of comments Solution: use <link> 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 www.w3c.org
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 www.w3c.org …
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 <font> vs. <style> <font> is deprecated <style> isn’t Which would be preferable for making
changes to an entire document?
Tags and Attributes Styles have properties
<style type=“text/css”>
h2 {text-align:center}
</style> Attributes have values
<font align=“center”> … </font>
No quotation marks
Quotation marks
Tags and Attributes <font>
size= “1” to “7” (smallest to largest) color= “red”, “blue”, etc. face= “Arial”, “Courier”, etc.
<font size=“5” color=“red” face=“Arial”>
Tags and Attributes Alignment = “left”, “center”, “right” Using tags:
<h2 align=“center”>
<p align=“right”> Centering
<center>this text is centered</center>
Tags and Attributes Preferred method using styles:
<style type=“text/css”>
h2 {text-align:center}
p {text-align:center}
</style>
Tags and Attributes Background colors
<body> tag bgcolor and text attributes
Using tags:
<body bgcolor=“yellow” text=“blue”>
Tags and Attributes Using styles in the body:
<style type=“text/css”>
body {background-color:yellow; color:blue}
</style>
Tags and Attributes Horizontal rules Using tags:
<hr size=“7” width=“75%” /> Using styles:
<style type=“text/css”>hr {height:7px; width:75%; background-
color:red}</style>
Ch04-Ex-01
Next Class HW 2 due
2 debugging assignments Complete Chapter 4 PTW Chapter 2 WWG