![Page 1: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/1.jpg)
Cascading Style Sheets 1
Cascading Style SheetsCascading Style Sheets
![Page 2: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/2.jpg)
Cascading Style Sheets 2
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
![Page 3: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/3.jpg)
Cascading Style Sheets 3
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
![Page 4: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/4.jpg)
Cascading Style Sheets 4
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
![Page 5: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/5.jpg)
Cascading Style Sheets 5
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
![Page 6: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/6.jpg)
Cascading Style Sheets 6
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
![Page 7: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/7.jpg)
Cascading Style Sheets 7
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}
![Page 8: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/8.jpg)
Cascading Style Sheets 8
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}
![Page 9: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/9.jpg)
Cascading Style Sheets 9
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
![Page 10: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/10.jpg)
Cascading Style Sheets 10
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
![Page 11: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/11.jpg)
Cascading Style Sheets 11
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
![Page 12: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/12.jpg)
Cascading Style Sheets 12
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}
![Page 13: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/13.jpg)
Cascading Style Sheets 13
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}
![Page 14: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/14.jpg)
Cascading Style Sheets 14
Text-Specific Style Text-Specific Style AttributesAttributes
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
![Page 15: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/15.jpg)
Cascading Style Sheets 15
Text-Specific Style Text-Specific Style AttributesAttributes
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
![Page 16: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/16.jpg)
Cascading Style Sheets 16
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>
![Page 17: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/17.jpg)
Cascading Style Sheets 17
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)
![Page 18: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/18.jpg)
Cascading Style Sheets 18
Document Level Style Document Level Style SheetsSheets
<html><html>
<head><title>Hello There!</title><head><title>Hello There!</title>
<style type=“text/css”><style type=“text/css”>
<!--<!--
/* Make all H1 headers red and /* Make all H1 headers red and italic */italic */
H1: {color: red; font-style: italic}H1: {color: red; font-style: italic}
-->-->
</style></style>
![Page 19: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/19.jpg)
Cascading Style Sheets 19
Document Level Style Document Level Style SheetsSheets
<body><body>
<h1> Hello There!!</h1><h1> Hello There!!</h1>
<h1> What’s new?</h1><h1> What’s new?</h1>
</body></body>
</html></html>
![Page 20: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/20.jpg)
Cascading Style Sheets 20
External Style SheetsExternal Style Sheets
LinkedLinked– Currently, this is only way which worksCurrently, this is only way which works
<html><html>
<head><title>Hello There!</title><head><title>Hello There!</title>
<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>
![Page 21: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/21.jpg)
Cascading Style Sheets 21
External Style SheetsExternal Style Sheets
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>
![Page 22: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/22.jpg)
Cascading Style Sheets 22
External Style SheetsExternal Style Sheets
ImportedImported<html><html>
<head><title>Hello There!</title><head><title>Hello There!</title>
<style><style>
<!--<!--
@import url(http://www.cs.wayne. @import url(http://www.cs.wayne. edu/hello/gen_styles.css);edu/hello/gen_styles.css);
@import url(http://www.cs.wayne. @import url(http://www.cs.wayne. edu/hello/spec_styles.css);edu/hello/spec_styles.css);
![Page 23: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/23.jpg)
Cascading Style Sheets 23
External Style SheetsExternal Style Sheets
ImportedImportedBODY: {background: url(bg/lake.gif)}BODY: {background: url(bg/lake.gif)}-->-->
</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>
![Page 24: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/24.jpg)
Cascading Style Sheets 24
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
![Page 25: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/25.jpg)
Cascading Style Sheets 25
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
![Page 26: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/26.jpg)
Cascading Style Sheets 26
Linked Versus ImportedLinked Versus Imported
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>
![Page 27: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/27.jpg)
Cascading Style Sheets 27
Linked Versus ImportedLinked Versus Imported
Imported styles override linked Imported styles override linked external stylesexternal styles<!--<!--
@import url(sheet3.css)@import url(sheet3.css)
@import url(sheet4.css)@import url(sheet4.css)
-->-->
</style></head></style></head>
![Page 28: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/28.jpg)
Cascading Style Sheets 28
Linked Versus ImportedLinked Versus Imported
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
![Page 29: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/29.jpg)
Cascading Style Sheets 29
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
![Page 30: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/30.jpg)
Cascading Style Sheets 30
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
![Page 31: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/31.jpg)
Cascading Style Sheets 31
SyntaxSyntax
BasicsBasicstag-selector {property1:value1;tag-selector {property1:value1;
property2:value1 value2 value3; property2:value1 value2 value3; …}…}
![Page 32: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/32.jpg)
Cascading Style Sheets 32
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}
![Page 33: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/33.jpg)
Cascading Style Sheets 33
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}
![Page 34: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/34.jpg)
Cascading Style Sheets 34
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}
![Page 35: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/35.jpg)
Cascading Style Sheets 35
ClassesClasses
Regular classesRegular classes– Associated with tagsAssociated with tags
<style type="text/css"><style type="text/css">
<!--<!--
P.abstracts {font-style: italic;P.abstracts {font-style: italic;
left-margin: 0.5cm;left-margin: 0.5cm;
right-margin: 0.5cm}right-margin: 0.5cm}
P.equations {font-family: Symbol;P.equations {font-family: Symbol;
text-align: center}text-align: center}
![Page 36: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/36.jpg)
Cascading Style Sheets 36
ClassesClasses
Regular classesRegular classesH1, P.centered {text-align: center;H1, P.centered {text-align: center;
left-margin: left-margin: 0.5cm;0.5cm;
right-margin: right-margin: 0.5cm}0.5cm}
-->-->
<style><style>
![Page 37: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/37.jpg)
Cascading Style Sheets 37
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>
![Page 38: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/38.jpg)
Cascading Style Sheets 38
ClassesClasses
ExampleExample
![Page 39: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/39.jpg)
Cascading Style Sheets 39
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>
![Page 40: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/40.jpg)
Cascading Style Sheets 40
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}
![Page 41: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/41.jpg)
Cascading Style Sheets 41
Property ValuesProperty Values
KeywordsKeywords– smallsmall– xx-largexx-large– bolderbolder– underlineunderline– line-throughline-through
![Page 42: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/42.jpg)
Cascading Style Sheets 42
Property ValuesProperty Values
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
![Page 43: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/43.jpg)
Cascading Style Sheets 43
Property ValuesProperty Values LengthLength
– AbsoluteAbsolute inchesinches
– inin centimeterscentimeters
– cmcm millimetersmillimeters
– mmmm pointspoints
– 1/72 inch1/72 inch– ptpt
picaspicas– 12 points12 points– pcpc
![Page 44: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/44.jpg)
Cascading Style Sheets 44
Property ValuesProperty Values
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%)
![Page 45: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/45.jpg)
Cascading Style Sheets 45
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}
![Page 46: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/46.jpg)
Cascading Style Sheets 46
Property ValuesProperty Values
Font-propertiesFont-properties– Font-sizeFont-size
smallersmaller xx-smallxx-small x-smallx-small mediummedium largelarge x-largex-large xx-largexx-large
![Page 47: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/47.jpg)
Cascading Style Sheets 47
Property ValuesProperty Values
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
![Page 48: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/48.jpg)
Cascading Style Sheets 48
Property ValuesProperty Values
Font-propertiesFont-properties– Font-weightFont-weight
mediummedium demi-bolddemi-bold boldbold extra-boldextra-bold
![Page 49: 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](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649d6c5503460f94a4bfec/html5/thumbnails/49.jpg)
Cascading Style Sheets 49
Property ValuesProperty Values
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