Cascading Style Sheets1. 2 n Style sheets are a means of controlling the way HTML tags are formatted n IE introduced style sheets in IE 3.0 release n

Cascading Style Sheets 1

Cascading Style SheetsCascading Style Sheets


Style sheets are a means of Style sheets are a means of controlling the way HTML tags are controlling the way HTML tags are formattedformatted

IE introduced style sheets in IE 3.0 IE introduced style sheets in IE 3.0 releaserelease

Netscape introduced it in 4.0 Netscape introduced it in 4.0 releaserelease


Style Sheet EssentialsStyle Sheet Essentials Style sheets can be used in 3 Style sheets can be used in 3

primary ways:primary ways:– Inline style sheetsInline style sheets

Apply a style sheet to an individual Apply a style sheet to an individual element by using the element by using the <style><style>-tag-tag

– Embedded style sheetsEmbedded style sheets Apply a style sheet to the entire Apply a style sheet to the entire

document by using the document by using the <style><style>-tag-tag

– External (linked) style sheetsExternal (linked) style sheets Link an external style sheet to the Link an external style sheet to the

document by using the document by using the <link><link>-tag-tag


Style Sheet EssentialsStyle Sheet Essentials

Example of Using Inline StyleExample of Using Inline Style Example of Embedded Style SheetExample of Embedded Style Sheet Example of Linked Style SheetExample of Linked Style Sheet


Rules and Style SheetsRules and Style Sheets

RuleRule– Statement about one stylistic aspect Statement about one stylistic aspect

of one or more elementsof one or more elements Style sheetStyle sheet

– One or more rules that apply to an One or more rules that apply to an HTML documentHTML document


RuleRule

A rule consists of 2 partsA rule consists of 2 parts– SelectorSelector

Link between HTML document and the Link between HTML document and the stylestyle

– DeclarationDeclaration What the effect isWhat the effect is

H1 {color : red}H1 {color : red}selector declaration


GroupingGrouping

The three rulesThe three rulesH1 {font-weight : bold}H1 {font-weight : bold}

H2 {font-weight : bold}H2 {font-weight : bold}

H3 {font-weight : bold}H3 {font-weight : bold}

can be written ascan be written asH1, H2, H3 {font-weight : bold}H1, H2, H3 {font-weight : bold}


GroupingGrouping

The two rulesThe two rulesH1 {color : red}H1 {color : red}

H1 {text-align : center}H1 {text-align : center}

can be written ascan be written asH1 {color : red; text-align : H1 {color : red; text-align : center}center}


InheritanceInheritance

A tagtag inherits the properties of an enclosing tagtag

<h3>Section Two: <h3>Section Two: <em>Big</em> Nails </h3><em>Big</em> Nails </h3>

– If style sheet specified all If style sheet specified all <h3><h3> tags tags were red and didn’t mention were red and didn’t mention <em><em>, , the the BigBig would also be red would also be red


InheritanceInheritance

One property can have a value One property can have a value that is relative to its parent that is relative to its parent propertyproperty

P {font-size: 14 pt}P {font-size: 14 pt}

P {line-height: 120%}P {line-height: 120%}– Line height is defined as a percentage Line height is defined as a percentage

of font sizeof font size


Contextual SelectorsContextual Selectors

Apply styles contextuallyApply styles contextually– Can set Can set <h3><h3> to green, to green, <em><em> to red, to red,

and all instances of and all instances of <em><em> that occur that occur inside inside <h3><h3> to blue to blue

H3 EM {color: blue}H3 EM {color: blue} This is different fromThis is different from

H3, EM {color: blue}H3, EM {color: blue}

which states that bothwhich states that both h3 h3 and and emem are blue are blue


Contextual SelectorsContextual Selectors

ConsiderConsiderH3 EM, H2 I {color: yellow}H3 EM, H2 I {color: yellow}

– This is the same asThis is the same as

H3 EM {color: yellow}H3 EM {color: yellow}

H2 I {color: yellow}H2 I {color: yellow}


Text-Specific Style Text-Specific Style AttributesAttributes

font-familyfont-family– {font-family:times}{font-family:times}

font-sizefont-size– in pt, in, cm, px, %in pt, in, cm, px, %– {font-size:24px}{font-size:24px}

font-stylefont-style– {font-style:italic}{font-style:italic}



font-weightfont-weight– extra-light, extrabold , medium, light, extra-light, extrabold , medium, light,

demi-light, demi-bold, bolddemi-light, demi-bold, bold text-decorationtext-decoration

– none, underline,italic,line-throughnone, underline,italic,line-through line-heightline-height

– in, cm, px %, ptin, cm, px %, pt



margin-leftmargin-left margin-rightmargin-right margin-topmargin-top margin-indentmargin-indent text-aligntext-align The unit for all of the above attributes The unit for all of the above attributes

can be in inches, pixels, points, or can be in inches, pixels, points, or centimetercentimeter


Inline StylesInline Styles

Adding a style attribute to Adding a style attribute to individual tags in a documentindividual tags in a document

<h1 style=“color: red; font-style: <h1 style=“color: red; font-style: italic”>Hello there!</h1>italic”>Hello there!</h1>


Document Level Style Document Level Style SheetsSheets

Place list of rules within the head of Place list of rules within the head of an HTML documentan HTML document– Rules are enclosed within Rules are enclosed within <style><style> … …

</style></style>-tags-tags <style><style>-tag has type attribute-tag has type attribute

– type=text/csstype=text/css– type=text/javascripttype=text/javascript

JavaScript style sheets (to be discussed JavaScript style sheets (to be discussed later)later)



<html><html>

<head><title>Hello There!</title><head><title>Hello There!</title>

<style type=“text/css”><style type=“text/css”>

-->

</style></style>



<body><body>

<h1> Hello There!!</h1><h1> Hello There!!</h1>

<h1> What’s new?</h1><h1> What’s new?</h1>

</body></body>

</html></html>


External Style SheetsExternal Style Sheets

LinkedLinked– Currently, this is only way which worksCurrently, this is only way which works

<html><html>


<link rel=stylesheet type=“text/css”<link rel=stylesheet type=“text/css”

href=“http://www.cs.wayne. href=“http://www.cs.wayne. edu/hello/gen_styles.css” edu/hello/gen_styles.css” title=“Hello”>title=“Hello”>

</head></head>



LinkedLinked<body><body>

<h1> Hello There!!</h1><h1> Hello There!!</h1>

<h1> What’s new?</h1><h1> What’s new?</h1>

</body></body>

</html></html>



ImportedImported<html><html>


<style><style>

-->

</style></style></head></head><body><body><h1> Hello There!!</h1><h1> Hello There!!</h1><h1> What’s new?</h1><h1> What’s new?</h1></body></body></html></html>


Linked Versus ImportedLinked Versus Imported One One <link><link>-tag-tag

– Loads style and formats appropriatelyLoads style and formats appropriately Document level and inline-styles overrideDocument level and inline-styles override

Two or more Two or more <link>-tags<link>-tags– Standard is that browser presents user Standard is that browser presents user

with choicewith choice Netscape loads all of them, with later rules Netscape loads all of them, with later rules

overriding earlier onesoverriding earlier ones IE loads only first oneIE loads only first one

– User selects oneUser selects one– Browser ignores othersBrowser ignores others


Linked Versus ImportedLinked Versus Imported

More than one More than one @import@import statement statement leads to a merging of stylesleads to a merging of styles– Suppose Suppose gen_styles.cssgen_styles.css says to make says to make

<h1><h1> yellow and bold and yellow and bold and spec_styles.cssspec_styles.css says to make says to make <h1><h1> red red Then Then <h1><h1> is red and bold is red and bold

– If we later define a document-level If we later define a document-level style which makes style which makes <h1><h1> purple, then purple, then <h1><h1> is purple and bold is purple and bold



Imported styles override linked Imported styles override linked external stylesexternal styles<html><head><html><head>

<link rel=stylesheet <link rel=stylesheet href=sheet1.css type= text/css>href=sheet1.css type= text/css>

<link rel=stylesheet <link rel=stylesheet href=sheet2.css type= text/css>href=sheet2.css type= text/css>

<style><style>



Imported styles override linked Imported styles override linked external stylesexternal styles-->

</style></head></style></head>



Imported styles override linked Imported styles override linked external stylesexternal styles– Browser will prompt user to choose Browser will prompt user to choose

between between sheet1.csssheet1.css and and sheet2.csssheet2.css– Will then load selected sheet, followed Will then load selected sheet, followed

by by sheet3.csssheet3.css and and sheet4.csssheet4.css– Duplicate styles defined in Duplicate styles defined in sheet3.csssheet3.css or or

sheet4.csssheet4.css and in any inline styles will and in any inline styles will override styles in user-chosen sheetoverride styles in user-chosen sheet


Style PrecedenceStyle Precedence

Sort by originSort by origin– A 'closer' style takes precedence over a A 'closer' style takes precedence over a

'farther' style'farther' style Inline takes precedence over document-levelInline takes precedence over document-level Document-level takes precedence over Document-level takes precedence over

externalexternal

Sort by classSort by class– Properties defined as class of tag take Properties defined as class of tag take

precedence over properties defined for tag precedence over properties defined for tag in generalin general


Style PrecedenceStyle Precedence

Sort by specificitySort by specificity– Properties defined for a more specific Properties defined for a more specific

contextual style take precedence over contextual style take precedence over properties defined for a less specific properties defined for a less specific contextcontext

Sort by orderSort by order– A later property takes precedence over an A later property takes precedence over an

earlier oneearlier one IE takes only first rule definition and ignores IE takes only first rule definition and ignores

subsequent onessubsequent ones


SyntaxSyntax

BasicsBasicstag-selector {property1:value1;tag-selector {property1:value1;

property2:value1 value2 value3; property2:value1 value2 value3; …}…}


SyntaxSyntax

Multiple selectorsMultiple selectors H1, H2, H3 {text-align: center}H1, H2, H3 {text-align: center}

is same asis same asH1 {text-align: center}H1 {text-align: center}

H2 {text-align: center}H2 {text-align: center}

H3 {text-align: center}H3 {text-align: center}


SyntaxSyntax

Contextual selectorsContextual selectors– ExamplesExamples

OL LI {list-style: upper-alpha}OL LI {list-style: upper-alpha}

OL OL LI {list-style: upper-roman}OL OL LI {list-style: upper-roman}

OL OL OL LI {list-style: lower-OL OL OL LI {list-style: lower-alpha}alpha}

OL OL OL OL LI {list-style: OL OL OL OL LI {list-style: decimal}decimal}


SyntaxSyntax

Contextual selectorsContextual selectors– ExamplesExamplesH1 EM, P STRONG, H2 {color: red}H1 EM, P STRONG, H2 {color: red}– More specific rule is given precedenceMore specific rule is given precedence

P STRONG {color: yellow}P STRONG {color: yellow}

P UL STRONG {color: blue}P UL STRONG {color: blue}


ClassesClasses

Regular classesRegular classes– Associated with tagsAssociated with tags

<style type="text/css"><style type="text/css">

-->

<style><style>


ClassesClasses

Regular classesRegular classes<p class=abstracts><p class=abstracts>

This is an abstract </p>This is an abstract </p>

<h2>An equation:</h2><h2>An equation:</h2>

<p class=equations><p class=equations>

c=y-9</p>c=y-9</p>

<p class=centered><p class=centered>

Hello there!</p>Hello there!</p>


ClassesClasses

ExampleExample


ClassesClasses

Generic classesGeneric classes– Not associated with any tagNot associated with any tag

.italic {font-style: italic}.italic {font-style: italic}

– ExamplesExamples<p class=italic>Hello there</p><p class=italic>Hello there</p>


ClassesClasses

Pseudo-classesPseudo-classes– Three associated with Three associated with <a><a>-tag-tag

A:link {color: red}A:link {color: red} A:active {color: red; font-weight: bold}A:active {color: red; font-weight: bold} A:visited {color: yellow}A:visited {color: yellow}

– Two associated with Two associated with <p><p>-tag-tag P:first-line {font-style: small-caps}P:first-line {font-style: small-caps} P:first-letter {font-size:200%; float: P:first-letter {font-size:200%; float:

left}left}


Property ValuesProperty Values

KeywordsKeywords– smallsmall– xx-largexx-large– bolderbolder– underlineunderline– line-throughline-through



LengthLength– RelativeRelative

emem– Height of current fontHeight of current font

exex– Height of letter 'x' in current fontHeight of letter 'x' in current font

– PixelsPixels pxpx


Property ValuesProperty Values LengthLength

– AbsoluteAbsolute inchesinches

– inin centimeterscentimeters

– cmcm millimetersmillimeters

– mmmm pointspoints

– 1/72 inch1/72 inch– ptpt

picaspicas– 12 points12 points– pcpc



LengthLength– PercentagePercentage

line-height: 120%line-height: 120%

– URLURLurl(service://server.com/pathname)url(service://server.com/pathname) Relative to style sheet's URLRelative to style sheet's URL

– ColorColorrgb(255, 255, 255)rgb(255, 255, 255)

rgb(50%,5 0%, 0%)rgb(50%,5 0%, 0%)


Property Values Property Values

Font propertiesFont properties– Font-familyFont-family

<p style="font-family: Times, 'New <p style="font-family: Times, 'New Century Schoolbook', Palatino, sans-Century Schoolbook', Palatino, sans-serif}serif}

– Font-sizeFont-sizeP {font-size: 12pt}P {font-size: 12pt}

P {font-size: 120%}P {font-size: 120%}

P {font-size: +2pt}P {font-size: +2pt}

P {font-size: larger}P {font-size: larger}



Font-propertiesFont-properties– Font-sizeFont-size

smallersmaller xx-smallxx-small x-smallx-small mediummedium largelarge x-largex-large xx-largexx-large



Font-propertiesFont-properties– Font-styleFont-style

H3 {font-style: italic}H3 {font-style: italic}

– Font-weightFont-weightH3 {font-weight: bolder}H3 {font-weight: bolder} lighterlighter extra-lightextra-light lightlight demi-lightdemi-light



Font-propertiesFont-properties– Font-weightFont-weight

mediummedium demi-bolddemi-bold boldbold extra-boldextra-bold



Color and background propertiesColor and background properties Text propertiesText properties Box propertiesBox properties

– Elements fit within a rectangular boxElements fit within a rectangular box– Can control the size, appearance, and Can control the size, appearance, and

position of these boxesposition of these boxes List propertiesList properties

Documents

Cascading Style Sheets1. 2 n Style sheets are a means of controlling the way HTML tags are formatted n IE introduced style sheets in IE 3.0 release n