COP 3813COP 3813Intro to Internet Intro to Internet

ComputingComputing

Prof. Roy LevowProf. Roy Levow

Lecture 3Lecture 3

Cascading Style SheetsCascading Style Sheets

Allow detailed formatting of web Allow detailed formatting of web pagespages

Provide separation of structure from Provide separation of structure from presentation (format)presentation (format)

Inline StyleInline Style– Included directly in XHTML documentIncluded directly in XHTML document– More limited capabilityMore limited capability

Inline StylesInline Styles

““style” attribute can be added to style” attribute can be added to many tagsmany tags

Can alter characteristics such asCan alter characteristics such as– Font-size, specified in pointsFont-size, specified in points– FontFont– ColorColor

NameNameHexadecmimal number #rrbbggHexadecmimal number #rrbbgg

Style is a quoted string with a series Style is a quoted string with a series of elements of the formof elements of the form– Element_name: value1, value2, …Element_name: value1, value2, …– Separated by ;Separated by ;

Example: Example: Fig. 6.1Fig. 6.1

Embedded Style SheetEmbedded Style Sheet

Include style sheet information in Include style sheet information in same pagesame page

<style type=“text/css”><style type=“text/css”>Style sheet elementsStyle sheet elements

</style></style> Elements define new tags for stylesElements define new tags for styles

– name { def }name { def }– Def has same form as inline styleDef has same form as inline style

Example Embedded Style SheetExample Embedded Style Sheet

Fig. 6.2Fig. 6.2 PropertiesProperties

– font-family: font, modifierfont-family: font, modifierFont = arial, times new roman, …Font = arial, times new roman, …Modifier = sans serifModifier = sans serif

– background colorbackground color– font-sizefont-size

Symbolic or numeric pt sizeSymbolic or numeric pt size Classes specified as .nameClasses specified as .name

Style Classes and ScopeStyle Classes and Scope

Style applies to all nested elementsStyle applies to all nested elements Style is used as new tagStyle is used as new tag Style class us used to modify an Style class us used to modify an

existing tagexisting tag Styles of nested components can Styles of nested components can

override styles from ancestorsoverride styles from ancestors Styles mas specify a series of tags, Styles mas specify a series of tags,

applying only in that contextapplying only in that context““ul ul” applies in a sublistul ul” applies in a sublist

Style InheritanceStyle Inheritance

Example Fig Example Fig 6.36.3– a.nodec applies only to classes that a.nodec applies only to classes that

have defined the attribute nodechave defined the attribute nodec– a:hover defines changed appearance a:hover defines changed appearance

when mouse is over itemwhen mouse is over item

External Style SheetsExternal Style Sheets

File with extension .css contains style File with extension .css contains style definitionsdefinitions– Example Fig Example Fig 6.46.4

Document file link to style sheetDocument file link to style sheet<link rel = “stylesheet” type “text/css”<link rel = “stylesheet” type “text/css”

href = “styles.css” />href = “styles.css” />– Example Example Fig 6.5Fig 6.5

ValidationValidation

CSS validator atCSS validator athttp://jigsaw.w3.ofg/css-validatorhttp://jigsaw.w3.ofg/css-validator

Positioning ElementsPositioning Elements

Property positionProperty position– absolute for position relative to top left absolute for position relative to top left

corner = (0,0)corner = (0,0)– Size is often in px, pixelsSize is often in px, pixels– Relative to top, bottom, left, rightRelative to top, bottom, left, right– z-index specifies overlay order for z-index specifies overlay order for

overlapping itemsoverlapping items1 is lowest1 is lowest

Example Example Fig 6.8Fig 6.8

Relative PositioningRelative Positioning

Shift position withShift position withposition: relativeposition: relative

span tag specifies range of span tag specifies range of application of a styleapplication of a style

Example Example Fig 6.9Fig 6.9

Other FeaturesOther Features

BackgroundsBackgrounds– Fig 6.8Fig 6.8

Element dimensionsElement dimensions– Fig Fig 6.96.9

Floating elements and text flowFloating elements and text flow– Fig 6.10Fig 6.10

BordersBorders– Fig 6.11Fig 6.11, , Fig 6.12Fig 6.12

User Style SheetsUser Style Sheets

Can override defaults and/or author Can override defaults and/or author stylesstyles

In IE set Accessability |In IE set Accessability |Format documents using my style sheetFormat documents using my style sheet

– Example fig Example fig 6.166.16, , 6.176.17, 6.20, 6.20

JavaScriptJavaScript

Scripting languages are interpreted Scripting languages are interpreted from source codefrom source code

Based on JavaBased on Java Object-orientedObject-oriented Can be embedded in web pagesCan be embedded in web pages Examples fig 7.1, 7.2, 7.3Examples fig 7.1, 7.2, 7.3

JavaScript DialogsJavaScript Dialogs

Can open various dialog windowsCan open various dialog windows Use appropriate classUse appropriate class Java strings support usual C-style \ Java strings support usual C-style \

excape sequencesexcape sequences Example 7.4Example 7.4

JavaScript InputJavaScript Input

Can open input window and retrieve Can open input window and retrieve inputinput

Example fig 7.6Example fig 7.6

Programming in JavaScriptProgramming in JavaScript

Has full programming capabilityHas full programming capability– Example fig 7.8Example fig 7.8

ComparisonComparisonExample fig 7.16Example fig 7.16