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 Netscape introduced it in 4.0 release
Cascading Style Sheets3 Style Sheet Essentials n Style sheets can be used in 3 primary ways: –Inline style sheets n Apply a style sheet to an individual element by using the -tag –Embedded style sheets n Apply a style sheet to the entire document by using the -tag –External (linked) style sheets n Link an external style sheet to the document by using the -tag
Cascading Style Sheets4 Style Sheet Essentials n Example of Using Inline Style n Example of Embedded Style Sheet n Example of Linked Style Sheet
Cascading Style Sheets5 Rules and Style Sheets n Rule –Statement about one stylistic aspect of one or more elements n Style sheet –One or more rules that apply to an HTML document
Cascading Style Sheets6 Rule n A rule consists of 2 parts –Selector n Link between HTML document and the style –Declaration n What the effect is H1 {color : red} selectordeclaration
Cascading Style Sheets7 Grouping n The three rules H1 {font-weight : bold} H2 {font-weight : bold} H3 {font-weight : bold} can be written as H1, H2, H3 {font-weight : bold}
Cascading Style Sheets8 Grouping n The two rules H1 {color : red} H1 {text-align : center} can be written as H1 {color : red; text-align : center}
Cascading Style Sheets9 Inheritance n tag tag n A tag inherits the properties of an enclosing tag Section Two: Big Nails Section Two: Big Nails –If style sheet specified all tags were red and didn’t mention, the Big would also be red
Cascading Style Sheets10 Inheritance n One property can have a value that is relative to its parent property P {font-size: 14 pt} P {line-height: 120%} –Line height is defined as a percentage of font size
Cascading Style Sheets11 Contextual Selectors n Apply styles contextually –Can set to green, to red, and all instances of that occur inside to blue H3 EM {color: blue} n This is different from H3, EM {color: blue} which states that both h3 and em are blue
Cascading Style Sheets12 Contextual Selectors n Consider H3 EM, H2 I {color: yellow} –This is the same as H3 EM {color: yellow} H2 I {color: yellow}
Cascading Style Sheets13 Text-Specific Style Attributes n font-family –{font-family:times} n font-size –in pt, in, cm, px, % –{font-size:24px} n font-style –{font-style:italic}
Cascading Style Sheets14 Text-Specific Style Attributes n font-weight –extra-light, extrabold, medium, light, demi-light, demi-bold, bold n text-decoration –none, underline,italic,line-through n line-height –in, cm, px %, pt
Cascading Style Sheets15 Text-Specific Style Attributes n margin-left n margin-right n margin-top n margin-indent n text-align n The unit for all of the above attributes can be in inches, pixels, points, or centimeter
Cascading Style Sheets16 Inline Styles n Adding a style attribute to individual tags in a document Hello there! Hello there!
Cascading Style Sheets17 Document Level Style Sheets n Place list of rules within the head of an HTML document –Rules are enclosed within … -tags n -tag has type attribute –type=text/css –type=text/javascript n JavaScript style sheets (to be discussed later)
Cascading Style Sheets18 Document Level Style Sheets <html> Hello There! Hello There! <!-- /* Make all H1 headers red and italic */ H1: {color: red; font-style: italic} --></style>
Cascading Style Sheets19 Document Level Style Sheets <body> Hello There!! Hello There!! What’s new? What’s new? </body></html>
Cascading Style Sheets20 External Style Sheets n Linked –Currently, this is only way which works <html> Hello There! Hello There! <link rel=stylesheet type=“text/css” href=“ edu/hello/gen_styles.css” title=“Hello”> </head>
Cascading Style Sheets21 External Style Sheets n Linked <body> Hello There!! Hello There!! What’s new? What’s new? </body></html>
Cascading Style Sheets22 External Style Sheets n Imported <html> Hello There! Hello There! url( url( edu/hello/spec_styles.css);
Cascading Style Sheets23 External Style Sheets n Imported BODY: {background: url(bg/lake.gif)} --></style></head><body> Hello There!! Hello There!! What’s new? What’s new? </body></html>
Cascading Style Sheets24 Linked Versus Imported n One -tag –Loads style and formats appropriately n Document level and inline-styles override n Two or more -tags –Standard is that browser presents user with choice n Netscape loads all of them, with later rules overriding earlier ones n IE loads only first one –User selects one –Browser ignores others
Cascading Style Sheets25 Linked Versus Imported n More than statement leads to a merging of styles –Suppose gen_styles.css says to make yellow and bold and spec_styles.css says to make red n Then is red and bold –If we later define a document-level style which makes purple, then is purple and bold
Cascading Style Sheets26 Linked Versus Imported n Imported styles override linked external styles <html><head> <style>
Cascading Style Sheets27 Linked Versus Imported n Imported styles override linked external styles url(sheet4.css) --></style></head>
Cascading Style Sheets28 Linked Versus Imported n Imported styles override linked external styles –Browser will prompt user to choose between sheet1.css and sheet2.css –Will then load selected sheet, followed by sheet3.css and sheet4.css –Duplicate styles defined in sheet3.css or sheet4.css and in any inline styles will override styles in user-chosen sheet
Cascading Style Sheets29 Style Precedence n Sort by origin –A 'closer' style takes precedence over a 'farther' style n Inline takes precedence over document-level n Document-level takes precedence over external n Sort by class –Properties defined as class of tag take precedence over properties defined for tag in general
Cascading Style Sheets30 Style Precedence n Sort by specificity –Properties defined for a more specific contextual style take precedence over properties defined for a less specific context n Sort by order –A later property takes precedence over an earlier one n IE takes only first rule definition and ignores subsequent ones
Cascading Style Sheets31 Syntax n Basics tag-selector {property1:value1; property2:value1 value2 value3; …}
Cascading Style Sheets32 Syntax n Multiple selectors H1, H2, H3 {text-align: center} H1, H2, H3 {text-align: center} is same as H1 {text-align: center} H2 {text-align: center} H3 {text-align: center}
Cascading Style Sheets33 Syntax n Contextual selectors –Examples OL LI {list-style: upper-alpha} OL OL LI {list-style: upper-roman} OL OL OL LI {list-style: lower-alpha} OL OL OL OL LI {list-style: decimal}
Cascading Style Sheets34 Syntax n Contextual selectors –Examples H1 EM, P STRONG, H2 {color: red} –More specific rule is given precedence P STRONG {color: yellow} P UL STRONG {color: blue}
Cascading Style Sheets35 Classes n Regular classes –Associated with tags <!-- P.abstracts {font-style: italic; left-margin: 0.5cm; right-margin: 0.5cm} P.equations {font-family: Symbol; text-align: center}
Cascading Style Sheets36 Classes n Regular classes H1, P.centered {text-align: center; left-margin: 0.5cm; right-margin: 0.5cm} --><style>
Cascading Style Sheets37 Classes n Regular classes This is an abstract This is an abstract An equation: An equation: c=y-9</p> Hello there! Hello there!
Cascading Style Sheets38 Classes n Example
Cascading Style Sheets39 Classes n Generic classes –Not associated with any tag.italic {font-style: italic} –Examples Hello there Hello there
Cascading Style Sheets40 Classes n Pseudo-classes –Three associated with -tag n A:link {color: red} n A:active {color: red; font-weight: bold} n A:visited {color: yellow} –Two associated with -tag n P:first-line {font-style: small-caps} n P:first-letter {font-size:200%; float: left}
Cascading Style Sheets41 Property Values n Keywords –small –xx-large –bolder –underline –line-through
Cascading Style Sheets42 Property Values n Length –Relative n em –Height of current font n ex –Height of letter 'x' in current font –Pixels n px
Cascading Style Sheets43 Property Values n Length –Absolute n inches –in n centimeters –cm n millimeters –mm n points –1/72 inch –pt n picas –12 points –pc
Cascading Style Sheets44 Property Values n Length –Percentage line-height: 120% –URL url(service://server.com/pathname) n Relative to style sheet's URL –Color rgb(255, 255, 255) rgb(50%,5 0%, 0%)
Cascading Style Sheets45 Property Values n Font properties –Font-family <p style="font-family: Times, 'New Century Schoolbook', Palatino, sans- serif} –Font-size P {font-size: 12pt} P {font-size: 120%} P {font-size: +2pt} P {font-size: larger}
Cascading Style Sheets46 Property Values n Font-properties –Font-size n smaller n xx-small n x-small n medium n large n x-large n xx-large
Cascading Style Sheets47 Property Values n Font-properties –Font-style H3 {font-style: italic} –Font-weight H3 {font-weight: bolder} n lighter n extra-light n light n demi-light
Cascading Style Sheets48 Property Values n Font-properties –Font-weight n medium n demi-bold n bold n extra-bold
Cascading Style Sheets49 Property Values n Color and background properties n Text properties n Box properties –Elements fit within a rectangular box –Can control the size, appearance, and position of these boxes n List properties