Hide Notes 

Slide 1: DHTML and JavaScript Gilorien Cascading Style Sheets, JavaScript Style Sheets, & JavaScripted Layers plus advanced JavaScript 1.2 & 1.3 Prentice Hall PTR Upper Saddle River, NJ 07458 www.phptr.com
Slide 3: Contents Preface Regarding HTML Syntax Regarding JavaScript Syntax Regarding Section Header Capitalization About the CD-ROM xvi xviii xviii xix xx Part I Chapter 1 1.1) 1.2) 1.3) 1.4) 1.5) 1.6) 1.7) 1.8) 1.9) 1.10) 1.11) 1.12) 1.13) 1.14) 1.15) 1.16) 1.17) 1.18) 1.19) 1.20) 1.21) 1.22) 1.23) 1.24) 1.25) 1.26) 1.27) 1.28) Dynamic HTML Style Sheets 1 4 4 6 8 Introduction to Style Sheets Style Sheets Overview The Golden Rules for Styles Cascading Style Sheets & JavaScript Style Sheets CSS Syntax Property Chart CSS & JavaScript Syntax Property Comparison Chart CSS Layer Properties and <LAYER> Attributes Chart JavaScript Layer Object Properties Chart Generic { font-family: } Names Chart Styles Chart for HTML Elements Handling Comments in Styles <STYLE> Element Style The { font-size: } Property The { font-family: } Property The { font-weight: } Property The { font-style: } Property The { line-height: } Property The { text-decoration: } Property The { text-transform: } Property The { text-align: } Property The { text-indent: } Property Margins Overview The { margin: } Property The { margin-top: } Property The { margin-right: } Property The { margin-bottom: } Property The { margin-left: } Property Padding Overview The { padding: } Property Cascading Style Sheets 8 11 12 13 14 14 15 The <STYLE> Element 16 18 20 Cascading Style Sheet Properties 23 23 24 25 25 27 28 28 28 29 30 31 32 32 32 32 34 34 iii
Slide 4: iv 1.29) 1.30) 1.31) 1.32) 1.33) 1.34) 1.35) 1.36) 1.37) 1.38) 1.39) 1.40) 1.41) 1.42) 1.43) 1.44) 1.45) 1.46) 1.47) 1.48) 1.49) 1.50) 1.51) 1.52) 1.53) 1.54) 1.55) 1.56) 1.57) 1.58) 1.59) 1.60) 1.61) 1.62) 1.63) 1.64) 1.65) 1.66) 1.67) 1.68) 1.69) 1.70) 1.71) 1.72) The { padding-top: } Property The { padding-right: } Property The { padding-bottom: } Property The { padding-left: } Property Color Overview The { color: } Property The { background-color: } Property The { background-image: } Property Setting Borders Overview The { border-style: } Property The { border-color: } Property Border Widths The { border-width: } Property The { border-top-width: } Property The { border-right-width: } Property The { border-bottom-width: } Property The { border-left-width: } Property The { width: } Property Horizontal Alignment, Floating, and Clear The { float: } Property The { clear: } Property The { white-space: } Property The { list-style-type: } Property DHTML and JavaScript 35 35 35 35 37 38 40 42 46 46 48 52 52 53 53 53 53 59 62 62 64 66 68 Using Styles in the <STYLE> Element <STYLE> Element with CLASS of STYLE Naming your CLASS of STYLE Defining a CLASS of STYLE without attaching it to an Element The Keyword all Attaching the same CLASS to more than one Element Bordered Link workaround example <STYLE> Element with ID Definition for CLASS Exceptions Styles and Tables <STYLE> Element with CONTEXTUAL SELECTION CRITERIA Inheritance issues for CONTEXTUAL STYLEs CONTEXTUAL SELECTION with CLASSes of STYLE and NAMED INDIVIDUAL STYLEs The STYLE Attribute The <SPAN> Element The <SPAN> Element with STYLE Attribute The <SPAN> Element with CLASS Attribute The <SPAN> Element with ID Attribute for CLASS Exceptions External Style Sheets with the <LINK> Element The <LINK> Element Multiple External Style Sheets in one document External Style Sheet precedence issues Multiple <STYLE> Elements in one document 72 72 74 75 75 78 81 83 85 93 98 99 More Style Uses 104 104 105 106 110 112 114 114 121 121 123
Slide 5: Contents Chapter 2 2.1) 2.2) 2.3) 2.4) 2.5) 2.6) 2.7) 2.8) 2.9) 2.10) 2.11) 2.12) 2.13) 2.14) 2.15) 2.16) 2.17) 2.18) 2.19) 2.20) 2.21) Overview Creating a LAYER with the STYLE Attribute Creating a LAYER with a CLASS of STYLE The { position: } Property The { left: } Property The { top: } Property The NAMED LAYER Style ( Creating a LAYER with the ID Attribute ) The { width: } Property The { height: } Property The { clip: } Property The bugged version of the { clip: } Property The unbugged version of the { clip: } Property The { z-index: } Property The { visibility: } Property The { layer-background-color: } Property The { layer-background-image: } Property The { include-source: } Property CSS Layer Properties and <LAYER> Attributes Chart The <LAYER> Element The <ILAYER> Element The <NOLAYER> Element v Layers & Styles 127 129 129 Creating Layers with Styles Creating Layers with CSS Syntax 130 130 131 132 132 133 135 136 137 139 139 142 146 149 151 152 158 161 162 173 176 Creating Layers with the <LAYER> Element 162 Chapter 3 3.1) 3.2) 3.3) 3.4) 3.5) 3.6) 3.7) 3.8) 3.9) 3.10) 3.11) 3.12) Introducing JavaScript Layers Layers & JavaScript 179 182 182 182 Overview Style Sheet Comments for JavaScript Syntax New document Object Properties The tags Property The classes Property The ids Property JavaScript Style Sheets Using the with() Statement The JavaScript Keyword all The contextual() Method JavaScript Style Sheet Properties & Examples Chart JavaScript Style Sheet Properties & All Values Chart New JavaScript Properties 183 183 183 185 187 JavaScript Style Sheets 189 189 189 190 191 194 195
Slide 6: vi JavaScript and Layers 3.13) 3.14) 3.15) 3.16) 3.17) 3.18) 3.19) 3.20) 3.21) 3.22) 3.23) 3.24) 3.25) 3.26) 3.27) 3.28) 3.29) 3.30) 3.31) 3.32) 3.33) 3.34) 3.35) 3.36) 3.37) 3.38) 3.39) 3.40) 3.41) 3.42) 3.43) 3.44) 3.45) 3.46) 3.47) 3.48) 3.49) 3.50) 3.51) 3.52) 3.53) DHTML and JavaScript 196 196 196 197 198 199 199 200 The JSS position Property The HTML <SCRIPT> Element Comment Tag to hide the contents of the <SCRIPT> Element The JavaScript Keyword var The JavaScript Layer Object The JavaScript layers[i] Array The two types of document Objects Properties of the Layer Object — Chart The document Property of the Layer Object Invoking Methods on a Layer Object The Layer Object name Property The Layer Object left Property The Layer Object top Property The Layer Object pageX Property The Layer Object pageY Property The Layer Object visibility Property The Layer Object zIndex Property The Layer Object siblingAbove Property The Layer Object siblingBelow Property The Layer Object above Property The Layer Object below Property The Layer Object parentLayer Property The Layer Object and Clipping Rectangles Default Values for the Clipping Properties The Layer Object clip.top Property The Layer Object clip.left Property The Layer Object clip.bottom Property The Layer Object clip.right Property The Layer Object clip.width Property The Layer Object clip.height Property The Layer Object bgColor Property The Layer Object background Property The Layer Object src Property The moveBy(dx, dy) Method The moveTo(x, y) Method The moveToAbsolute(x, y) Method The resizeBy(dwidth, dheight) Method The resizeTo(width, height) Method The moveAbove(layerName) Method The moveBelow(layerName) Method The load("sourceURL", newPixelWidth) Method Properties of the Layer Object 203 203 204 204 205 205 206 207 207 208 209 209 210 210 210 211 211 212 212 212 213 213 213 214 214 215 215 Methods of the Layer Object 216 217 217 218 218 219 220 221 221
Slide 7: Contents Using JavaScript with Layers 3.54) 3.55) 3.56) 3.57) 3.58) 3.59) 3.60) 3.61) 3.62) 3.63) 3.64) 3.65) 3.66) 3.67) 3.68) 3.69) 3.70) 3.71) 3.72) 3.73) 3.74) 3.75) 3.76) 3.77) 3.78) 3.79) 3.80) 3.81) 3.82) 3.83) 3.84) 3.85) 3.86) 3.87) 3.88) 3.89) 3.90) 3.91) The JavaScript write() Method Using the write() & close() Methods Using the moveAbove() Method Show & Hide Layers & writing Layer content The new Operator for creating new Layers in real-time Dynamically create new Layers with tags Property Style Localized JavaScript <SCRIPT>s within a Layer Animating a Clipping Rectangle to reveal an Image The JavaScript setTimeout() Method The JavaScript clearTimeout() Method Animating Clipping Rectangles and popping Images Some JavaScript Tips Animating control Layers and Images offscreen and onscreen The JavaScript setInterval() Method The JavaScript clearInterval() Method Three examples to cycle through Background Colors repeatedly A Tic Tac Toe game example The JavaScript Date Object Creating Date Objects with the four Date Constructors Creating a Time Counter and Displaying the Current Time Creating a Time Counter and Displaying the Current Time in a Frameset The JavaScript Conditional Operator ? : The JavaScript Math Object Math Object Property Summaries Math Object Method Summaries Randomly load different Background Images into a Layer Using Math Methods in a quasi-calculator Math Methods of Math.max(x,y), Math.min(x,y) and Math.pow(x,y) The JavaScript toString() Method The JavaScript parseFloat() Function The JavaScript parseInt() Function The JavaScript isNaN() Function The JavaScript charAt() Method The JavaScript split() Method The JavaScript slice() Method The length Property of String Object A really cool color conversion calculator A compilation example with border animation and music vii 230 230 230 232 236 240 241 246 250 250 250 251 264 264 284 284 285 296 307 308 308 310 316 321 322 322 323 325 334 336 337 337 338 338 338 339 339 340 351
Slide 8: viii Part II Chapter 4 4.1) 4.2) 4.3) 4.4) 4.5) 4.6) 4.7) 4.8) 4.9) 4.10) 4.11) 4.12) 4.13) 4.14) 4.15) 4.16) 4.17) 4.18) 4.19) 4.20) 4.21) 4.22) 4.23) 4.24) 4.25) 4.26) 4.27) 4.28) 4.29) 4.30) 4.31) 4.32) 4.33) 4.34) 4.35) 4.36) DHTML and JavaScript JavaScript 1.2 Objects & Functions 363 366 366 367 367 JavaScript Objects The JavaScript Object Hierarchy Using JavaScript Objects Object Properties and Methods Defining a Function with the Function Statement Calling a Function by Attribute Assignment Calling a Function by Name Calling a Function from within a Function Calling a Function by Property Assignment The JavaScript Core Function Object The arguments[i] Array Property of a Function Nesting a Function within a Function Predefined JavaScript Objects Predefined JavaScript Arrays as Object Properties Predefined JavaScript Core Objects Predefined JavaScript Core Functions The JavaScript Core Object Overview Creating Objects with its Constructor Function Creating Methods for an Object An Object as a Property in an Object Definition The prototype Property to add a Method to an Object Type Add a Property to an Object Instance after it is defined The prototype Property to add a Property to an Object Type Indexing Properties of an Object Creating Objects with Literal Notation Deleting an Object The watch() Method of the Core Object The unwatch() Method of the Core Object The JavaScript window Object The open() Method of the window Object The close() Method of the window Object The scrollBy() Method of the window Object The JavaScript document Object The cookie Property of the document Object The JavaScript screen Object The JavaScript Location Object The JavaScript History Object JavaScript Functions 371 371 372 373 375 376 378 380 384 Summaries Charts 386 386 387 388 388 The JavaScript Core Object 389 389 390 392 396 399 402 402 404 407 411 411 415 Predefined JavaScript Objects 416 416 422 427 430 432 436 445 447 452
Slide 9: Contents 4.37) 4.38) 4.39) 4.40) 4.41) 4.42) 4.43) 4.44) The JavaScript navigator Object Creating Frames on the fly The JavaScript Number Core Object The JavaScript select Object The JavaScript options[i] Array The JavaScript option Object The JavaScript Number Core Function The JavaScript String Core Function ix 456 457 460 462 464 465 New JavaScript Core Functions 467 467 468 Chapter 5 5.1) 5.2) 5.3) 5.4) 5.5) 5.6) 5.7) 5.8) 5.9) 5.10) 5.11) 5.12) 5.13) 5.14) 5.15) 5.16) 5.17) 5.18) 5.19) 5.20) 5.21) 5.22) 5.23) 5.24) 5.25) 5.26) 5.27) JavaScript Statements Statements & Operators 471 473 473 473 474 What are JavaScript Statements Categories of Statements Chart of all JavaScript Statements The JavaScript if () Statement The JavaScript if ()...else Statement Nested if () Statement Nested if ()...else Statement The ( ) ? : Conditional Operator Statement The switch( ) Statement The for( ) Statement The while( ) Statement The do while( ) Statement The labeled : Statement The break Statement The continue Statement The for...in Statement The with( ) Statement The with( ) Statement in a <STYLE> Element The var Statement The function Statement The return Statement The export Statement The import Statement The delete Statement Single & multiple-line Comment Statements What are JavaScript Operators? Categories of Operators Conditional Statements 475 475 477 478 479 480 481 Loop Statements 484 484 486 488 490 491 494 Object Manipulation Statements 498 498 500 502 503 505 506 506 507 508 Comment Statements JavaScript Operators 508 508 509 509 510
Slide 10: x 5.28) 5.29) 5.30) 5.31) 5.32) 5.33) 5.34) 5.35) 5.36) 5.37) 5.38) 5.39) Special Operators The Keyword new Operator The Keyword this Operator The Keyword typeof Operator The Keyword void Operator The ( , ) comma Operator Comparison Operators Arithmetic Operators String Operators Logical Operators Assignment Operators Bitwise Operators DHTML and JavaScript 510 510 510 512 514 514 515 515 516 516 517 517 JavaScript Expressions 518 Chapter 6 6.1) 6.2) 6.3) 6.4) 6.5) 6.6) 6.7) 6.8) 6.9) 6.10) 6.11) 6.12) 6.13) 6.14) 6.15) 6.16) 6.17) 6.18) 6.19) 6.20) 6.21) 6.22) 6.23) 6.24) 6.25) 6.26) 6.26.1) JavaScript Events 521 524 524 525 526 527 527 528 529 530 530 530 532 532 534 535 536 538 540 541 Event Objects & Handlers The JavaScript Event Model JavaScript Event Objects and Event Handlers Event Properties Summaries Chart Modifiers Keys and ASCII Values Chart The Structure of an Event Object Specifying an Event by name with dot notation Available Event Properties for each Event Object Defining Event Handlers Defining Event Handlers by Property Assignment Testing for Modifiers Keys in Conditionals Defining Event Handlers by Attribute Assignment The JavaScript event Keyword Testing for Multiple Modifiers Keys in Conditionals Testing for Modifiers Keys pressed during Mouse Events The load() Method of the Layer Object with Key Events The fromCharCode() Method of the String Object with Key Events Using Modifiers Keys with Regular Keys to Trigger Events Determining the ASCII Value of a Pressed Key The JavaScript captureEvents() Method Capturing Events in Nested Layers The JavaScript releaseEvents() Method Using the type Property and captureEvents() Method on a Layer Dragging an Image with the Mouse The name Property of the target Property of the Event Object Capturing Events for the window Object to Drag an Image Using Localized Scripts to Drag an Image The Chess Game Example Capturing & Releasing Events 543 543 543 544 544 547 549 553 556 556
Slide 11: Contents 6.27) 6.27.1) 6.28) 6.29) 6.30) 6.31) 6.32) 6.33) 6.34) 6.35) 6.36) 6.37) 6.38) 6.39) 6.40) 6.41) 6.42) 6.43) 6.44) 6.45) 6.46) 6.47) 6.48) Capturing and using KEYPRESS and KEYUP Events Tic Tac Toe played from the Keyboard Using the JavaScript switch() Statement & KEYDOWN, KEYPRESS, and KEYUP Events Moving Layers with the switch() Statement Animating Layers and Images Animating Layers automatically and by clicking on an Image Animating Layers with the e.target.name Property Animating Layers in a Frameset environment Controlling an External Frame document with JavaScript The JavaScript linkColor, alinkColor and vlinkColor Properties Using Key Events to hide and show Layers The JavaScript scrollBy() Method The JavaScript scrollTo() Method Controlling your Window with a variety of Methods ASCII Values for the which Property of the Event Object Using Key Events to open a new Window Creating user-customizable Documents Drag on a Layer to Resize it The JavaScript routeEvent(e) Function Using the JavaScript routeEvent(e) Function The JavaScript handleEvent(e) Method Using the JavaScript handleEvent(e) Method Handling and Routing Events in Nested and Unnested Layers xi 580 580 586 588 590 591 595 604 609 610 610 Scrolling, Resizing, & Moving Windows with Key Events 622 622 622 623 628 648 650 661 Routing & Handling Events 663 663 663 668 669 673 Chapter 7 7.1) 7.2) 7.3) 7.4) 7.5) 7.6) 7.7) 7.8) 7.9) 7.10) 7.11) 7.12) 7.13) 7.14) 7.15) JavaScript Arrays 679 681 681 681 683 685 687 690 693 693 694 JavaScript Array Objects The JavaScript Array Object Create an Array with the Array Object Constructor Create a dense Array Create an Array with Literal notation Creating Two-Dimensional Arrays Creating Three-Dimensional Arrays Array Property Summaries Array Method Summaries An Overview Example that uses all of the Array Methods The concat() Method of the Array Object The join() Method of the Array Object The pop() Method of the Array Object The push() Method of the Array Object The shift() Method of the Array Object The unshift() Method of the Array Object Array Object Methods 696 696 703 705 707 709 711
Slide 12: xii 7.16) 7.17) 7.18) 7.19) 7.20) 7.21) 7.22) 7.23) 7.24) 7.25) 7.26) 7.27) 7.28) 7.29) 7.30) 7.31) The slice() Method of the Array Object The splice() Method of the Array Object The toString() Method of the Array Object The toString() Method of the Array Element The reverse() Method The sort() Method The compareFunction Function DHTML and JavaScript 713 716 719 719 722 722 723 Working with returned Arrays Working with returned Arrays and Regular Expressions The returned Array from the match() Method of String Objects The returned Array from the match() Method with the "g" Flag The returned Array from the exec() Method of RegExp Objects The index Property of the Array Object The returned Array from the split() Method of String Objects The input Property of the Array Object Using Arrays to fill <TABLE> Element Data Dynamically Chart of Sample Files that use Arrays 729 729 729 731 733 735 736 739 740 745 Chapter 8 8.1) 8.2) 8.3) 8.4) 8.5) 8.6) 8.7) 8.8) 8.9) 8.10) 8.11) 8.12) 8.13) 8.14) 8.15) 8.16) 8.17) 8.18) 8.19) 8.20) JavaScript Strings 747 749 749 750 750 752 752 753 754 JavaScript String Objects The JavaScript String Object String Object Property Summaries String Object Method Summaries Using the String Object Constructor Function Create a String Object with Literal notation JavaScript Special Characters in Strings String Object Character Array The concat() Method of String Object The charAt() Method of String Object The charCodeAt() Method of String Object The fromCharCode() Static Method of String Object The indexOf() Method of String Object The lastIndexOf() Method of String Object The search() Method of String Object The match() Method of String Object The replace() Method of String Object The split() Method of String Object The slice() Method of String Object The substring() Method of String Object The substr() Method of String Object Manipulative String Object Methods 755 755 759 761 763 766 769 String Object Methods used with Regular Expressions 770 771 774 778 782 More String Object Methods 788 788 790 792
Slide 13: Contents Creating Anchors & Links 8.21) 8.22) 8.23) 8.24) 8.25) 8.26) 8.27) The anchor() Method of String Object The link() Method of String Object Overview The toLowerCase() Method of String Object The toUpperCase() Method of String Object The fontcolor() Method of String Object The fontsize() Method of String Object xiii 794 794 795 Decorative Methods of String Object 797 797 797 798 798 798 Chapter 9 9.1) 9.2) 9.3) 9.4) 9.5) 9.6) 9.7) 9.8) 9.9) 9.10) 9.11) 9.11.1) 9.12) 9.13) 9.14) 9.15) 9.16) 9.17) 9.17.1) 9.18) 9.19) 9.20) 9.21) 9.22) 9.23) 9.24) 9.25) JavaScript RegExps 801 803 803 JavaScript RegExp Objects Regular Expression Objects Overview The Predefined RegExp Core Object The input Property of the Predefined RegExp Core Object The multiline Property of the Predefined RegExp Core Object Property Summaries of the Predefined RegExp Core Object RegExp Objects created with Literal notation RegExp Objects created with its Constructor Function Patterns in Regular Expressions Literal Characters in Patterns in Regular Expressions Special Characters in Patterns in Regular Expressions Parentheses in Patterns in Regular Expressions Parenthesized SubStrings Exploring Regular Expressions Chart of all Special Characters for Regular Expressions Method Summary of Individual RegExp Objects Summary of String Methods used with Individual RegExp Objects Property Summary of Individual RegExp Objects The test() Method of Individual RegExp Objects When to test() or exec() The exec() Method of Individual RegExp Objects The compile() Method of Individual RegExp Objects The lastIndex Property of Individual RegExp Objects Example to verify phone number using Regular Expressions exec() & match() Method differences Example to verify name & address using Regular Expressions A full Regular Expression example Creating a Search Engine example Predefined RegExp Object 804 804 805 806 807 Individual RegExp Objects 808 808 809 810 810 811 812 812 813 814 819 819 820 821 821 825 830 832 838 840 843 845 847
Slide 14: xiv Part III Chapter 10 10.1) 10.2) 10.3) 10.3.1) 10.4) 10.5) 10.6) 10.7) 10.8) 10.9) 10.10) 10.11) 10.12) 10.13) 10.14) 10.15) 10.16) 10.17) 10.18) 10.19) 10.20) 10.21) 10.22) 10.23) 10.24) 10.25) 10.26) 10.27) 10.28) 10.29) 10.30) DHTML and JavaScript JavaScript 1.3 What's New & Changed 853 855 855 855 856 857 What's New in JavaScript 1.3 & Changed in JavaScript 1.2 Overview of Features JavaScript 1.3 and ECMA-262 Compliance JavaScript 1.3 and Unicode Unicode Character Escape Sequences Changes to the Array Object Changes to the Array Constructor Change to the length Property of Array Object New toSource() Method of Array Object Change to the toString() Method of Array Object Change to the push() Method of Array Object Change to the splice() Method of Array Object Changes to the Date Object Changes to the Date Constructor New Methods for the Date Object Changes to preexisting Methods of the Date Object Changes to the Function Object The apply() Method of the Function Object The call() Method of the Function Object Changes to the String Object The toSource() Method for several Objects Infinity Property NaN Property undefined Property isFinite() Function eval() Function The === Operator The !== Operator The == Operator The != Operator Assignment Behaviors null and undefined Values for Objects Changes to Objects 858 858 858 859 859 860 861 861 862 862 863 875 880 880 886 888 New Method New Top-Level Properties 892 892 894 894 894 895 New Top-Level Function Changes to Top-Level Functions New Operators Changes to Operators Changes to Conditional Test Behaviors Using the JavaScript Console to debug your code 895 895 896 896 896 896 897 897 897 897 898 898 898 898
Slide 15: Contents xv Resources HTML Primer Color Names and Values Sample Files Referenced Language Abbreviations Charts Index 901 1029 1039 1049 1053 1099 Part IV Appendix A Appendix B Appendix C Appendix D Appendix E Appendix F
Slide 16: Preface This book is designed to guide the reader in developing web sites that can use the new features and capabilities for using Style Sheets and Layers in both Cascading Style Sheet Syntax and JavaScript Syntax that are reflected in Netscape's Navigator 4.0+ browser. Additionally, it covers all of the new abilities of JavaScript 1.2 and including the Layer Object and advanced Event Handling for capturing Events and using them to dynamically alter the appearance and content of documents. There is also a chapter devoted to the new functionality of JavaScript 1.3 and changes from version 1.2. If you are a complete beginner, then check out Appendix A in Part IV which will introduce you to all of the basics for using HTML Elements to design your web pages including Images, Area Maps, Tables, Frames, Forms, and Embedded Objects for advanced content like VRML, QTVR, QD3D, and Audio files. Appendix A contains a truncated version of the HTML Elements Primer but there is a much more complete version on the CD-ROM, in both HTML and PDF formats. Both of these online versions have about 100 additional examples that are linked to the documentation from separate files. If you are already deep into web site design, then Appendix A can serve as a reference when you need a quick memory fix. Part I covers Styles and Layers. It starts with an introduction to using Cascading Style Sheet (CSS) Syntax and the Properties that are used to define Styles for your Elements. Chapter 2 demonstrates how to position Layers, which are Blocks of Content and introduces additional Properties associated with Layers. Chapter 3 moves on to Style Sheets created with JavaScript Syntax, focusing on using JavaScript to manipulate Layers in real-world examples. The Layer Object in JavaScript is new and has many Properties and Methods that facilitate the manipulation of Layers both programmatically and dynamically from user input. Many of the Methods and Properties of other JavaScript Objects which can enhance this process are covered in both theory and in Sample Listings which are both in the book and in separate files on the CD-ROM for you to run. Generally speaking, you can digest a concept faster if you run the examples in a browser. Part II covers all the vast array of new features of JavaScript 1.2 and changes to previous Object functionality. There are new Statements to consider and many Objects that required Constructor Functions can now be created with Literal Notation. String Objects, Array Objects and Event Objects have been massively enhanced with a plethora of new Properties and Methods. There is a new RegExp Object which uses Regular Expressions to perform pattern matches in text searches that opens up a whole new range of possibilities. xvi
Slide 17: Preface xvii Additionally, Part II covers many of the essential tools for using JavaScript such as basic and advanced Object Theory, Statements and Operators, Functions, Methods, Expressions, Variables and Properties. Part III covers the new features and minor changes to JavaScript 1.3. Version 1.2 is a major upgrade but version 1.3 is not. However, one really useful feature of 1.3 is the JavaScript Console that you can use to debug your code from Navigator/Communicator. Most of the examples in this book will require that you use the Navigator 4.0 version of the browser and make sure that you have JavaScript enabled in the Preferences dialogue box. This book follows the standard conventions of using a fixed-width font (Courier or Geneva) for displaying HTML and JavaScript code except when it occurs in the context of a normal paragraph. In that circumstance, the code is displayed with a bold font. Usually HTML code is displayed in allcaps and JavaScript is either all lowercase or interCap. Appendix E in Part IV consists of a group of charts that contain a lot of condensed information that can serve as Syntax references. These charts are all in a file named: Charts.pdf on the CD-ROM. It is suggested that you print out the whole file for use while you are learning the book and even more importantly for when you are writing your own code. In summary, this book thoroughly covers CSS Style Sheets and JavaScript Style Sheets in theory and by example, along with all of the new features of JavaScript versions 1.2 and 1.3. It also serves as a Syntax Reference for these topics. Most importantly, after learning the theory, this book demonstrates how to effectively integrate JavaScript with DHTML to create innovative and advanced web sites. Finally, this book is heavily focused on examples as a learning mechanism; there are over 400 working examples in the book and even more on the CD-ROM. Have FUN!! Gilorien About the Author Gilorien is a freelance artist in both the 2D and 3D realms, a 3D animator, musician and advanced website designer and consultant. His company, DreamPlay Studios, provides content and consulting for a variety of projects and is currently working on a full-length animation film that is being created exclusively in the 3D digital realm. Still images of his art, along with excerpts of music from his 2 CDs, can be seen/heard and purchased at: http://www.erols.com/gilorien Contact him at: gilorien@erols.com
Slide 18: xviii DHTML and JavaScript Regarding HTML Syntax The way that Syntax (your HTML code) is laid out in this book is with the Element Name first which in this case would be BODY. Then there is a list of the Attribute Names with their respective Value possibilities which compose the NAME="value" pair as mentioned previously. When you see a vertical bar (|) between the values that means that you have a choice of value Types to choose from. The Character (|) just means (or). For the first Attribute Name of TEXT you can choose to use either a HEXADECIMAL Color or a Color Name. The value placeholder names between the quote marks (like colorName) are descriptive only and are just an attempt to try to explain what kind of value you should replace it with except when it is allcaps, which signifies that it is a Keyword that can be used as is. One exception to this is "URL" (or "URI" if you want to be cutting edge). Most Attributes are optional and are used to modify the Element to your own tastes. When an Attribute is required for the Element to work I will let you know. Regarding JavaScript Syntax The way that Syntax for JavaScript code is displayed in this book is similar to what was just mentioned for HTML Syntax with the following additions. When Brackets [] are used they signify, in most circumstances, that what they surround is/are optional Parameter(s). The one exception to this is when they are used to create an Array with Literal notation. Curly Braces are used to enclose Statement Blocks in Functions and other types of special Statements like if(). They are also used to create an Object with Literal notation. InterCap words, such as statementsIfTrue, usually signify that this is a Parameter that you should replace with your own specification. However, don’t confuse that with Keywords, Properties, Methods or Function Names, etc., that use interCap spelling. For more information on characters and symbols, see Chapter 9 and Chapter 10 on Special Characters in JavaScript.
Slide 19: Preface Regarding Section Header Capitalization xix The capitalization scheme for the Section Header Names in this book is somewhat unorthodox. To make it as easy as possible for the reader to identify the topic or whatever s/he is looking for, I have implemented the following general rules: 1. The first word of each section header is capitalized in all circumstances. 2. All other normal words are in lowercase letters, which is the most atypical aspect of this scheme. The reason for this is to quickly identify code words. 3. All CSS, JSS, HTML, and JavaScript Keywords, Properties, Attributes, and Objects, etc., have the capitalization that is appropriate for that particular word when it is used as actual code. If a JavaScript Object such as the layers[i] Array is used in a title, then the word layers is usually followed by the [i] which immediately shows that it is an Array. Similarly, CSS Properties are usually identified like this: { font-size: } 4. Ordinarily, underlined words, if any, signify that they are the primary focus of the topic to be discussed. Underlining a word also signals that this is definitely a code word, which is especially useful for lowercase code words like the Keyword all. Just in case you are wondering why I don't just make them bold like in regular paragraphs, the answer is simple: The whole header is already bold. 5. Certain words like Element, while technically aren't code words themselves, are important enough to warrant capitalizing the first letter all the time. Actual HTML Elements are always written in all uppercase letters and are usually surrounded by angle brackets (< >) like this: <SCRIPT>. 6. Finally, there are some words which are capitalized according to the conventions that seem to have been adopted or initiated. For instance, Netscape started using allcaps for CONTEXTUAL SELECTION CRITERIA and I've continued the tradition. 7. Regarding the capitalization of the word Layer: Layer and LAYER are only used for emphasis and should be considered interchangeable in most cases; although I do use LAYER for usages of the <LAYER> Element, this is still a conventional choice because HTML is case-insensitive. When LAYER is used in a topic concerning CSS Syntax, it more than likely refers to a NAMED LAYER, but not always. Sometimes it is used that way just to draw attention to it within the surrounding text. When Layer is used, it usually refers to a generic usage. There are two instances when the spelling of the word "Layer" is case-sensitive. The first is when you access the layers[i] Array, and the second is when you create a new Layer with the Layer() Constructor Function and the Keyword new, like this: myContainer = new Layer(500); See page 199 for layers[i] Array and pages 240-241 for new Layer().
Slide 20: xx DHTML and JavaScript About the CD-ROM All of the more than 400 examples in the book have an associated BBEdit HTML Sample file on the CD-ROM in the folder named DHTML-JS_BOOK-Main_Files. Each of these files starts with the word "Sample" and are intended to be run on the Netscape Navigator/Communicator browser. You can also check out the source code for copying/pasting or alteration in any text editor. If you work on a Macintosh, you might want to get the BBEdit text editor from Bare Bones Software, which is specifically designed to work with HTML and other types of coding. Netscape's homepage on the web is: http://home.netscape.com/ Netscape's "DevEdge" (Developer Edge) on the web is: http://developer.netscape.com/index_home.html?cp=hom07cnde Netscape's "DevEdge - Library" on the web is: http://developer.netscape.com/docs/manuals/index.html Bare Bones Software's homepage on the web is: http://www.bbedit.com/ The CD-ROM also contains a wealth of additional information of a technical nature on a variety of subjects including HTML 4.0 white papers, Netscape's final HTML 4.0 Guide, JavaScript 1.2 and 1.3 References and Guides. See the last two pages of the book, after the Index, for more information about the contents of the CD-ROM. Acknowledgments Thanks to the many persons at Prentice Hall's PTR Division for their suggestions and contributions in making this the best book it could be. Of special note at PTR are: Greg Doench, Nicholas Radhuber, Mary Traecy, and Kathy Finch. Special thanks go to my parental units, for their support and patience. This book is dedicated to all practitioners of creativity and exploration everywhere.
Slide 21: Part I Dynamic HTML Chapter 1 Style Sheets
Slide 22: 2 Part I — D y n a m i c H T M L Chapter 1 Style Sheets Contents Introduction to Style Sheets 1.1) 1.2) 1.3) 1.4) 1.5) 1.6) 1.7) 1.8) 1.9) 1.10) 1.11) 1.12) 1.13) 1.14) 1.15) 1.16) 1.17) 1.18) 1.19) 1.20) 1.21) 1.22) 1.23) 1.24) 1.25) 1.26) 1.27) 1.28) 1.29) 1.30) 1.31) Style Sheets Overview The Golden Rules for Styles Cascading Style Sheets & JavaScript Style Sheets CSS Syntax Property Chart CSS & JavaScript Syntax Property Comparison Chart CSS Layer Properties and <LAYER> Attributes Chart JavaScript Layer Object Properties Chart Generic { font-family: } Names Chart Styles Chart for HTML Elements Handling Comments in Styles <STYLE> Element Style The { font-size: } Property The { font-family: } Property The { font-weight: } Property The { font-style: } Property The { line-height: } Property The { text-decoration: } Property The { text-transform: } Property The { text-align: } Property The { text-indent: } Property Margins Overview The { margin: } Property The { margin-top: } Property The { margin-right: } Property The { margin-bottom: } Property The { margin-left: } Property Padding Overview The { padding: } Property The { padding-top: } Property The { padding-right: } Property The { padding-bottom: } Property 4 4 6 8 Cascading Style Sheets 8 11 12 13 14 14 15 The <STYLE> Element 16 18 20 Cascading Style Sheet Properties 23 23 24 25 25 27 28 28 28 29 30 31 32 32 32 32 34 34 35 35 35
Slide 23: CHAPTER 1 — Style Sheets 1.32) 1.33) 1.34) 1.35) 1.36) 1.37) 1.38) 1.39) 1.40) 1.41) 1.42) 1.43) 1.44) 1.45) 1.46) 1.47) 1.48) 1.49) 1.50) 1.51) 1.52) 1.53) 1.54) 1.55) 1.56) 1.57) 1.58) 1.59) 1.60) 1.61) 1.62) 1.63) 1.64) 1.65) 1.66) 1.67) 1.68) 1.69) 1.70) 1.71) 1.72) The { padding-left: } Property Color Overview The { color: } Property The { background-color: } Property The { background-image: } Property Setting Borders Overview The { border-style: } Property The { border-color: } Property Border Widths The { border-width: } Property The { border-top-width: } Property The { border-right-width: } Property The { border-bottom-width: } Property The { border-left-width: } Property The { width: } Property Horizontal Alignment, Floating, and Clear The { float: } Property The { clear: } Property The { white-space: } Property The { list-style-type: } Property <STYLE> Element with CLASS of STYLE Naming your CLASS of STYLE Defining a CLASS of STYLE without attaching it to an Element The Keyword all Attaching the same CLASS to more than one Element Bordered Link workaround example <STYLE> Element with ID Definition for CLASS Exceptions Styles and Tables <STYLE> Element with CONTEXTUAL SELECTION CRITERIA Inheritance issues for CONTEXTUAL STYLEs CONTEXTUAL SELECTION with CLASSes of STYLE and NAMED INDIVIDUAL STYLEs The STYLE Attribute The <SPAN> Element The <SPAN> Element with STYLE Attribute The <SPAN> Element with CLASS Attribute The <SPAN> Element with ID Attribute for CLASS Exceptions External Style Sheets with the <LINK> Element The <LINK> Element Multiple External Style Sheets in one document External Style Sheet precedence issues Multiple <STYLE> Elements in one document 3 35 37 38 40 42 46 46 48 52 52 53 53 53 53 59 62 62 64 66 68 Using Styles in the <STYLE> Element 72 72 74 75 75 78 81 83 85 93 98 99 More Style Uses 104 104 105 106 110 112 114 114 121 121 123
Slide 24: 4 Part I — D y n a m i c H T M L ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ Introduction to Style Sheets Style Sheets Overview Cascading Style Sheets (CSS) and JavaScript Style Sheets used in concert with Scripting is what puts the dynamism in Dynamic HTML. It allows you to precisely format, embellish, and position the content in your documents instead of acquiescing to the whims of each browser's rendering choices. You can also create documents that change by themselves, or in response to user interaction, and have inline animations contained within them. Inline is the key word here because that means faster downloading and no plug-ins to load or have compatibility issues with or annoy the user because, if after downloading seventy-five plug-ins, the one for your content isn't on his/her system. It also means that you can have an image that not only animates but can move around the page instead of being confined to a stationary rectangular space. You embellish your content by making stylistic choices that affect the color, size, font face, boldness, and other aspects of text markup, and you can create margins and borders for your text. Then you can position your content exactly where you want it to appear in the page instead of the old inline flow method. Transparent and opaque blocks of content are now possible which you can change, move, resize, make appear or disappear on-the-fly, or respond to user input. If so inclined, you could let each user custom design how the website will appear for them. Time will definitely be saved if you have a particular style that you want to use for your whole site or section of it by creating the Style Sheet just once and saving it in its own file and then accessing it multiple times with one line of code. You just LINK to the Style Sheet when you want it to apply to that specific page. The text layout paradigm of Style Sheets has been directly ported from the desktop publishing world where programs like QuarkXpress have had Style Sheets for years. If you are familiar with that then you're already halfway home to understanding Cascading Style Sheets in HTML. There are two main differences between Style Sheets as used in Quark and those used in Navigator. The first is that in Quark you are working in a WYSIWYG environment so you just make your choices from radio buttons, text-boxes, and pop-up menus in a dialog window and then Quark does all the post-script coding for you. In HTML with Cascading Style Sheets you have to do the coding yourself but you're doing the same thing to your content and you get very similar results. In fact, getting HTML pages to behave more like documents in the publishing world is half the point. The other difference, and this one goes way beyond desktop publishing, is the dynamic and interactive aspects of Cascading Style Sheets.
Slide 25: CHAPTER 1 — Style Sheets Using the TYPE Attribute of <STYLE> Element 5 When you use the <STYLE> Element, you have to declare with the TYPE Attribute which type of Style Sheet it is, either TYPE="text/CSS" or TYPE="text/JavaScript". For the purposes of clarity and brevity CSS syntax (Cascading Style Sheet syntax) refers to syntax declared as: TYPE="text/CSS" When the term JavaScript syntax is used it refers to syntax declared as: TYPE="text/JavaScript" Creating a Style You can create Styles for your content in several ways. By using the <STYLE> Element, the STYLE Attribute, the CLASS Attribute, the ID Attribute with the CLASS Attribute, or the <SPAN> Element. Once you get familiar with the new terms and how they are used together, and especially the fact that there is a STYLE Element and a STYLE Attribute, it's easy. Here's the new Elements (Tags) associated with using Styles: • • • • • <STYLE> <SPAN> <LINK> <LAYER> <ILAYER> specifies a Style or Layer or inflow Layer on-the-fly Style for one section of content in the BODY Element loads a Style Sheet from another Document specifies a Layer specifies an inflow Layer or Offset inflow Layer Here's the new Attributes that you use with all the old Elements that you're familiar with that are associated with creating Styles: • • STYLE CLASS on-the-fly Style for one Element only at a time in the BODY Element on-the-fly Style for one Element only at a time in the BODY Element that addresses a NAMED CLASS of Style that was created in the HEAD Element on-the-fly NAMED INDIVIDUAL Style EXCEPTION to a CLASS of STYLE addressed by the CLASS Attribute for one Element only at a time in the BODY Element • ID
Slide 26: 6 Part I — D y n a m i c H T M L The Golden Rules for Styles This is a reference list of the idiosyncrasies and general parameters you will need at your fingertips until you've synaptically burned them in. Element Names are always case-insensitive. Attribute Names are always case-insensitive. Attribute Values are generally case-insensitive. CLASS Names are case-sensitive. ID Names are case-sensitive. Style Property Names are always case-sensitive. Style Property Values are generally case-sensitive. JavaScript classes Names are always case-sensitive. JavaScript ids Names are always case-sensitive. Layer Object Properties are always case-sensitive. Layer Object Method Names are always case-sensitive. HTML HTML HTML HTML / CSS Style HTML / CSS Style CSS / JavaScript Style CSS / JavaScript Style JavaScript Style JavaScript Style JavaScript JavaScript STYLE is used as both an Element and as an Attribute of other Elements. Only one CLASS of STYLE can be applied to each HTML Element. There are several ways to apply a STYLE to your document content. They are: STYLE as Element STYLE as Attribute of most Elements CLASS as Attribute of most Elements ID as Exception Attribute for the CLASS Attribute STYLE with CONTEXTUAL SELECTION CRITERIA SPAN Element with STYLE Attribute SPAN Element with CLASS Attribute SPAN Element with CLASS Attribute and ID Exception Attribute for CLASS It can be useful to think of: STYLE as Element as the Cascading Style Sheet or JavaScript Style Sheet where you set all of your global stylistic Attributes for the entire document and which always goes in the HEAD Element. STYLE as Attribute as a way to add a Style on-the-fly with specific Properties to a single Element that is contained between the BODY start and end Tags.
Slide 27: CHAPTER 1 — Style Sheets 7 CLASS as Attribute as a way to add a Style on-the-fly by referencing the NAME of the CLASS of STYLE to a single Element that is contained between the BODY Start and End Tags. ID as Attribute as a way to add a Style on-the-fly by addressing a reference to a NAMED INDIVIDUAL STYLE which is used to create an EXCEPTION to a CLASS of STYLE. STYLE with CONTEXTUAL SELECTION CRITERIA creates a Style that is only applicable when a specified Element is nested within other Elements in a prescribed way by the STYLE definition. These different possibilities vary in their range of applicability or, put another way, in how global they are. Never put double quotes around the Values in Cascading Style Sheet Attributes. This is the correct way to do it: H2 { color: red; } The one exception to the double quotes rule is when you specify a font-family Value Name that is composed of more than one word and separated by a space like this: H2 { font-family:"Brush Script"; } HTML documents usually load faster if you use lowercase letters for Element and Attribute names because the compression algorithms used by the browser software are more efficient at storing data patterns that occur more often than those that are infrequent. In general circumstances lowercase letters occur more frequently than uppercase ones. Remember that Cascading Style Sheet Syntax is a scripting language that has rules of its own that are distinct from HTML and JavaScript but is designed to interact with HTML and JavaScript. Expect subtle differences in syntax and new capabilities and terms. The same is true for Style Sheets that use JavaScript Syntax. In an effort to establish distinctions between HTML Syntax and Style Sheet Syntax and in keeping with tradition: When the term Attribute is used, it refers to an Attribute of an HTML Element, and when the term Property is used, it refers to a Style Sheet Syntax Property. Just remember that in a generic sense they accomplish the same thing but point to different types of code. Property also refers to a JavaScript Property of Objects. All of the Examples have a corresponding Sample HTML file on the CD-ROM so you can see the results in a browser. They are located in the folder named: DHTML-JS_BOOK-Main_Files The name of the Sample File is always listed to the right of the Example Number and above the source code. These Sample files have been tested in version 4.0 of Navigator, but are not guaranteed to work in other browsers.
Slide 28: 8 Part I — D y n a m i c H T M L Cascading Style Sheets & JavaScript Style Sheets Chapter 1 deals with laying the foundation for creating Style Sheets using Cascading Style Sheet (CSS) Syntax. Then in Chapter 2 we explain how the Layers that are created with Style Sheets or the LAYER Elements are positioned in a browser window. Chapter 3 covers JavaScript Style Sheets and using JavaScript to dynamically manipulate Layers. When you use the <STYLE> Element, you have to declare with the TYPE Attribute which type of Style Sheet it is, either: TYPE="text/CSS" or TYPE="text/JavaScript". In this book, the term: CSS syntax (Cascading Style Sheet syntax) refers to syntax declared as: TYPE="text/CSS" and when the term JavaScript syntax is used it refers to syntax declared as: TYPE="text/JavaScript" Cascading Style Sheets To create a Cascading Style Sheet, you use CSS syntax to define the parameters of a Style by first specifying the HTML Element that you want to assign a Style to and then, inside of curly braces{}, you list the ATTRIBUTE NAME and VALUE pair or pairs. You separate each NAME and VALUE with a colon like this: NAME:VALUE. Then you separate each NAME:VALUE; pair with a semicolon, even if there is only one pair, like this: { NAME:VALUE; } { NAME:VALUE; NAME:VALUE; NAME:VALUE; } Here are three different examples of real NAME:VALUE; pairs: { color:red; } { text-align:left; float:right; } { background-color:purple; margin:10pt; border-style:ridge; } Putting that all together, here's a simple Style that causes all H2 Element headings to be displayed with a font that is sized at 14 point and colored aqua: H2 { font-size:14pt; color:aqua; }
Slide 29: CHAPTER 1 — Style Sheets 9 and here is the complete syntax using the STYLE Tags, which are always located in the HEAD Element: <HEAD> <STYLE TYPE="text/CSS"> H2 { font-size: 14pt; color: aqua; } </STYLE> </HEAD> Just one more thing: While it isn't required, most people put the CSS Style Definition parameters inside of a Comment Tag (<!-- ... -->) so that they will be hidden from browsers that don't recognize Style Sheets or the STYLE Tags. However, be careful that you don't put the STYLE Tags themselves inside the Comment Tag or they will be ignored even by Style-Savvy browsers like Navigator. Here's how the last example would look when properly placed within a Comment Tag: <HEAD> <STYLE TYPE="text/CSS"> <!-H2 { font-size: 14pt; color: aqua; } --> </STYLE> </HEAD> Special Notice: It is absolutely critical that you code your syntax correctly. Pay special attention to your colons and semicolons so that they are in the correct place. This is how the browser knows how to distinguish between just an ordinary piece of text and CSS NAME: VALUE; syntax. Do NOT put the VALUE choice inside of double quote marks like you do for regular HTML Attributes. The Style Sheet Property Names are case-sensitive.
Slide 30: 10 Part I — D y n a m i c H T M L So far we have created a Style Sheet, but we haven't actually applied it to any Elements in the BODY of the document yet. This is the easy part because it works just like normal HTML that you're used to. Expanding on the above example one last time, here is what it looks like when you apply the Style defined for the H2 in the Style Sheet to an actual H2 heading in the BODY section of the document. Example 1-1: Sample201.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 201 - CSS Example 1-1 <STYLE TYPE="text/CSS"> <!-H2 { font-size: 14pt; color: aqua; } --> </STYLE> </HEAD> <BODY> <P> Style Sheet Use: </TITLE> <H2>This is a level-two heading that is aqua and sized at 14 points.</H2> Notice that this text which is not inside the H2 tags is rendered with the default colors of the BODY Tag. </BODY> </HTML> I've included the following charts because when you're trying to organize all this theory inside your head, it's very useful to have the options that you use in the real world at your fingertips to improve how you remember how it all fits together. Just look it over to get a feel for what the possibilities are and then use it for reference when you need a quick memory jog. If you want a printout of all these charts, then print Charts.pdf, in the PDF-Files folder on the CD-ROM. Other charts are in the Charts folder in HTML format. CSS Syntax Property Chart Here's a list of all the Property Names and Values that are used to format the content in your Style Sheets using Cascading Style Sheet Syntax. Check the explanatory notes at the top of page 13 if deciphering the chart is initially unwieldy.
Slide 31: CHAPTER 1 — Style Sheets Property Name CSS Syntax font-size All Possible Categories absolute-size relative-size length | percentage any system font keyword |number keyword number length | percentage keyword keyword keyword keyword length | percentage length | percentage keyword (example) All Possible Values 11 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ font-family font-weight font-style line-height text-decoration text-transform text-align text-indent margin margin xx-small, x-small, small, medium, large, x-large, xx-large larger, smaller 10pt, 12pt, 14pt, 20pt, 24pt,... 20%, 25%, 50%, 80%, 120%,150%, 200%,... Helvetica, Times, Geneva, Courier,... normal, bold, bolder, lighter | 100-900 normal, italic multiplied by a number or decimal em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% normal none, underline, line-through, blink capitalize, uppercase, lowercase, none left, right, center, justify em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% auto (is available for all 5 margin Properties) { margin: 24pt 30pt 30pt 17pt; } sets each margin to diff. value The order is: top right bottom left em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% { padding: 25px 20px 45px 35px; } sets each padding to diff. value em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% none, name, #$$$$$$, rgb(0-255,0-255,0-255), rgb(?%,?%,?%) none, name, #$$$$$$, rgb(0-255,0-255,0-255), rgb(?%,?%,?%) aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow url( ) { background-image: url(JPEG-Images/ExampleImage.jpeg); } none, solid, double, inset, outset, groove, ridge none, name, #$$$$$$, rgb(0-255,0-255,0-255), rgb(?%,?%,?%) em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% { border-width: 20px 30px 40px 50px; } sets each width to diff. value em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% auto left, right, center, none none, left, right, both block, inline, list-item disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none normal, pre { white-space: pre; } { white-space: normal; } margin-top length | percentage margin-right length | percentage margin-bottom length | percentage margin-left length | percentage padding length | percentage padding (example) padding-top length | percentage padding-right length | percentage padding-bottom length | percentage padding-left length | percentage color colorvalue background-color colorvalue the 16 color names are background-image border-style border-color border-width border-width border-top-width border-right-width border-bottom-width border-left-width width float clear display list-style-type white-space imageurl keyword colorvalue length |percentage same length |percentage length |percentage length |percentage length |percentage length |percentage keyword keyword keyword keyword keyword keyword keyword ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞
Slide 32: 12 Property Name CSS Syntax font-size font-family font-weight font-style line-height text-decoration text-transform text-align text-indent margin margin Property Name JavaScript Syntax fontSize fontFamily fontWeight fontStyle lineHeight textDecoration textTransform textAlign textIndent margins( ) margins( ) Part I — D y n a m i c H T M L CSS & JavaScript Syntax Property Comparison Chart ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ Simple CSS Syntax Examples { font-size: 14pt; } { font-family: Helvetica, Times, Geneva, Courier; } { font-weight: bold; } { font-style: italic; } { line-height: 22pt; } { text-decoration: underline; } { text-transform: uppercase; } { text-align: right; } { text-indent: 40px; } { margin: 75px; } sets all 4 margins to same value { margin: 24pt 30pt 30pt 17pt; } sets each margin to diff. value The order is: top right bottom left margin-top marginTop { margin-top: 40mm; } margin-right marginRight { margin-right: 4cm; } margin-bottom marginBottom { margin-bottom: 12pc; } margin-left marginLeft { margin-left: 1in; } padding paddings( ) { padding: 25px; } padding paddings( ) { padding: 25pt 20px 45pt 35px; } padding-top paddingTop { padding-top:.5in; } padding-right paddingRight { padding-right: 25pt; } padding-bottom paddingBottom { padding-bottom: 15pt; } padding-left paddingLeft { padding-left: 5pt; } color color { color: blue; } { color:#0000ff; } color color { color: rgb(0%, 0%, 100%); } { color: rgb(0,20, 255); } background-color backgroundColor { background-color: maroon; } same options as color background-image backgroundImage { background-image: url(JPEG-Images/ExampleImage.jpeg); } border-style borderStyle { border-style: groove; } border-color borderColor { border-color:#335a77; } border-color borderColor { border-color: rgb(20%, 50%, 70%); } border-color borderColor { border-color: rgb(255, 20, 150); } border-width borderWidths( ) { border-width: 20px; } border-width borderWidths( ) { border-width: 20px 30px 40px 50px; } border-top-width borderTopWidth { border-top-width: 20px; } border-right-width borderRightWidth { border-right-width: 30px; } border-bottom-width borderBottomWidth{ border-bottom-width: 40px; } border-left-width borderLeftWidth { border-left-width: 50px; } width width { width: 50%; } { width: 500px; } { width: 7in; } float align { float: left; } { float: right; } { float: center; } clear clear { clear: left; } { clear: right; } { clear: both; } display display { display: block; } { display: list-item; } list-style-type listStyleType { list-style-type: square; } { list-style-type: upper-roman; } white-space whiteSpace { white-space: pre; } { white-space: normal; } ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ absolute units pt -- points px -- pixels mm -- millimeters pc -- picas in -- inches cm -- centimeters relative units em -- the height of the element's font ex -- half the height of the element's font px -- pixels, relative to rendering surface
Slide 33: CHAPTER 1 — Style Sheets 13 Note that in the chart on pages 11 and 195, for any of the Properties that have the scenario: Possible Categories length | percentage Possible Values em, ex, px, pt, pc, in, mm, cm | 1%-1000%, ...n% It means that if you use a length type Value, then it should be a number suffixed by one of these units of measurement: em, ex, px, pt, pc, in, mm, cm, like this: "200px". If you use a percentage type Value then it should be a number that is followed by a percent (%) sign, like this: "75%". CSS Layer Properties and <LAYER> Attributes Chart Notice that the preceding two charts do not include the Properties that are used to POSITION your content. Those are listed in the chart below within the Layers model. Also note that there are no corresponding Properties in CSS Syntax for the LAYER Attributes of PAGEX, PAGEY, ABOVE and BELOW or the five Event Handlers. ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ Property Name CSS Syntax position position #myLayerName left top Attribute Name <LAYER> Syntax Simple CSS Syntax Examples { position: absolute; } { position: relative; } { position: absolute; } { left: 40px; } { top: 20px; } Simple <LAYER> Syntax Examples <LAYER></LAYER> <ILAYER></ILAYER> ID="myLayerName" LEFT=40 TOP=20 PAGEX=72 PAGEY=144 WIDTH=550 HEIGHT=400 CLIP="10, 20, 30, 40" Z-INDEX=3 ABOVE="myLayerName5" BELOW="myLayerName7" VISIBILITY="SHOW" BGCOLOR="#0000ff" ID LEFT TOP PAGEX PAGEY width WIDTH height HEIGHT clip CLIP z-index Z-INDEX ABOVE BELOW visibility VISIBILITY background-color BGCOLOR layer-background-color background-image BACKGROUND layer-background-image include-source SRC onMouseOver onMouseOut onFocus onBlur onLoad { width: 550px; } { height: 400px; } { clip: rect('10, 20, 30, 40'); } { z-index: 3; } ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ { visibility: show; } { background-color: purple; } { layer-background-color: blue; } { background-image:url('image1.jpg'); } BACKGROUND="image3.jpg" { layer-background-image:url('image2.jpg'); } { include-source: url('myPage.html'); } SRC="myPage.html" onMouseOver="JSCode" onMouseOut="JSCode" onFocus="JSCode" onBlur="JSCode" onLoad="JSCode"
Slide 34: 14 Part I — D y n a m i c H T M L JavaScript Layer Object Properties Chart ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ Layer Object Property Name JavaScript Syntax document name left top pageX pageY zIndex visibility clip.top clip.left clip.right clip.bottom clip.width clip.height background.src bgColor Simple JavaScript Syntax Examples (assume there is a Layer named myLayer1) document.write(document.myLayer1.document); myVar=document.name; document.myLayer1.left=20; document.myLayer1.top=30; document.myLayer1.pageX=10; document.myLayer1.pageY=15; document.myLayer1.zIndex=7; document.myLayer1.visibility="hide"; document.myLayer1.clip.top=50; document.myLayer1.clip.left=-200; document.myLayer1.clip.right=700; document.myLayer1.clip.bottom=500; document.myLayer1.clip.width=640; document.myLayer1.clip.height=480; document.myLayer1.background.src="myImage.jpeg"; document.myLayer1.bgColor = "#ff0000"; document.myLayer1.bgColor = "green"; document.myLayer1.bgColor = null; document.myLayer1.siblingAbove; document.myLayer1.siblingBelow; document.myLayer1.above; document.myLayer1.below; document.myLayer1.parentLayer; document.myLayer1.src="myFile.html"; Read-Only or Read/Write siblingAbove siblingBelow above below parentLayer src Read-Only Read-Only Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Write Read-Only Read-Only Read-Only Read-Only Read-Only Read-Write ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ Generic { font-family: } Names Chart These are the generic Name Values for the font-family Property, followed by an example of each that the browser might select from the user's System Fonts: Generic font-family Names serif sans-serif cursive fantasy monospace Example Times Helvetica Zapf-Chancery Western Courier
Slide 35: CHAPTER 1 — Style Sheets Styles Chart for HTML Elements 15 This is a list of all the Elements, including those in HTML 4.0, that you can use the STYLE Attribute or the CLASS Attribute or the ID Attribute with: ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ A BIG BUTTON CODE DEL DL FORM H4 I ISINDEX LI OBJECT PRE SELECT STRONG TBODY TH U ACRONYM BLOCKQUOTE CAPTION COL DFN DT H1 H5 IMG KBD LINK OL Q SMALL SUB TD THEAD UL ADDRESS BODY CENTER COLGROUP DIR EM H2 H6 INPUT LABEL MAP OPTION S SPAN SUP TEXTAREA TR VAR B BR CITE DD DIV FIELDSET H3 HR INS LEGEND MENU P SAMP STRIKE TABLE TFOOT TT XMP ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ You can also use them with the following Elements, but at the time of this writing, they will only work in Navigator 4.0+, but more than likely by the time you read this all the other major browsers will recognize them also. If you use cutting-edge code then you should create parallel code to include in Elements like <NOLAYER> and <NOSCRIPT> and additional pages with alternative content to cover all the cross-browser compatability issues. Note that Internet Explorer does not support Style Sheets with JavaScript Syntax. ILAYER LAYER ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ Special Notice: By default, a LAYER is transparent in the sense that other LAYERs that are beneath it will show through except in the places where the actual content, such as text or images, reside.
Slide 36: 16 Part I — D y n a m i c H T M L The <STYLE> Element The <STYLE> Element is what you use to declare and define a Style Sheet. It always goes in the header of your document between the <HEAD> Element Start and End Tags. There is only one required Attribute called TYPE and its default Value is "text/CSS", which specifies a Style Sheet in Cascading Style Sheet Syntax. You may also declare it as TYPE="text/JavaScript" to create a Style Sheet using JavaScript Syntax. There are certain Keywords that make life much easier. The Keyword all is used when you want to define the same Style for all possible HTML Elements all at once. You can define a Style for as many Elements as you want within the STYLE Element, hence the term "Style Sheet." Each Attribute is covered individually in Chapters 1 and 2. Syntax: <STYLE TYPE="text/CSS"|"text/JavaScript" SRC="URL"> [ [ [ [ ... </STYLE> Element { PropertyName: Value; } ] Element.className { PropertyName: Value;} ] #IDname { PropertyName: Value; } ] Element Element ... { PropertyName: Value; } ] Attributes Defined: TYPE="text/CSS" specifies a Style Sheet in the Cascading Style Sheet Syntax. TYPE="text/JavaScript" specifies a Style Sheet in the JavaScript Syntax. SRC="URL" specifies the URL of an external Style Sheet to load. See pages 116-123. Parameters Defined: Element specifies an HTML Element to apply a Style to. PropertyName specifies a CSS Property Name followed by a colon and then a Value, which is the specific value parameter for that Property and is followed by a semicolon, and together they form a Name:Value; pair that is enclosed within curly braces that defines a Style. If you use multiple Name:Value; pairs to define a Style they would all be enclosed within the curly braces as a complete Style Definition for that Element. className specifies a CLASS of STYLE that can be accessed with the CLASS Attribute of most HTML Elements.
Slide 37: CHAPTER 1 — Style Sheets 17 IDname specifies a named Style Exception which is identified as such by the preceding hashmark(#) and which can be called to apply to an Element by the ID Attribute. Element Element ... this is a special way to apply Styles that is called CONTEXTUAL APPLICATION or you could say that it's implemented by specifying CONTEXTUAL SELECTION CRITERIA. When you have sequential Elements in your definition, or put another way, one Element followed by another Element, like this: DIV BLOCKQUOTE then the Style that you define will only apply to BLOCKQUOTE Elements that are also contained within DIV Elements. The following mini-example demonstrates this by defining a Style that creates a border that is 20 pixels thick and makes the text blue for only BLOCKQUOTE Elements inside DIV Elements. (See Sample202.html on CD-ROM.) DIV BLOCKQUOTE { color: blue; border-width: 20px; } The next example defines three Styles. It first creates a Style for all PARAGRAPH Elements, which will have green text at a point size of 20. Next, a Style creates bold red text for all BLOCKQUOTE Elements and another Style creates a purple border that is 10 pixels thick and makes the text blue for all BLOCKQUOTE Elements, which are also inside DIV Elements. P { color: green; font-size: 20pt; } BLOCKQUOTE { color: red; font-weight: bold; } DIV BLOCKQUOTE { color: blue; border-width: 10px; border-color: purple; } Here's the complete code: Example 1-3: Sample203.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD><TITLE> Sample 203 - CSS Example 1-3</TITLE> <STYLE TYPE="text/CSS"> <!-P { color: green; font-size: 20pt; } BLOCKQUOTE { color: red; font-weight: bold; } DIV BLOCKQUOTE { color: blue; border-width: 10px; border-color: purple; --> </STYLE> }
Slide 38: 18 </HEAD> Part I — D y n a m i c H T M L <BODY> <P> Style Sheet Use for Contextual Selection Criteria: Notice how the P Element has green text sized at 20 point. </P> <BR><BR> <BLOCKQUOTE> There are two Blockquotes in this example. This is the first one and as this Style demonstrates, it has bold and red text for all BLOCKQUOTE Elements. </BLOCKQUOTE> <DIV><BLOCKQUOTE> This Style creates a purple border that is text setting above but does not change the BLOCKQUOTE Elements, even CONTEXTUAL ones. Blue for all BLOCKQUOTE Elements inside of </BLOCKQUOTE> </DIV> </BODY> </HTML> 10 pixels thick and overrides the red Bold parameter which applies to all The result is that the text is Bold and DIV Elements like this one. The concept of CONTEXTUAL SELECTION CRITERIA is covered in much more detail later in this chapter starting at page 93. Special Notice: Putting Comments inside Style Sheets is different from putting them inside HTML code. First, they are not Elements and cannot go inside their own Tag. The syntax is also different: For CSS Syntax you include Comments like this: /* This is a comment. It can be on as many lines as you need. */ For JavaScript Syntax you have two options and can include Comments like this: /* // This is a comment. It can be on as many lines as you need. */ This is a comment that can only be on one line Just in case you forgot, here is an HTML Comment Element: <!-This is a comment. -->
Slide 39: CHAPTER 1 — Style Sheets Example 1-3 Sample203.html 19
Slide 40: 20 • • • • • • • • • • Part I — D y n a m i c H T M L ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ There are multiple ways to apply CSS Styles to your documents: <STYLE> Element Style <STYLE> Element with CLASS of STYLE <STYLE> Element with ID Definition for CLASS Exceptions <STYLE> Element with CONTEXTUAL SELECTION CRITERIA STYLE Attribute <SPAN> Element with CLASS Attribute <SPAN> Element with ID Attribute for CLASS Exceptions <LINK> Element to load another document containing an External Style Sheet <LINK> Elements to load multiple External Style Sheets Multiple <STYLE> Elements in one document Now we'll explore each of these possibilities in detail with lots of examples. It may be helpful to refer to the Properties Chart on pages 11-15 for quick reference and to the more in-depth Property explanations later in this chapter. The Property capabilities are where the real creative possibilities reside. To start all this we'll look at the formatting Properties and then proceed on to the positioning Properties in Chapter 2. <STYLE> Element Style The first basic example of this has already been demonstrated in Example 1-1, just to let you know that this isn't a completely new topic. In fact, it's just expanding on the basic syntax contained in the previous section "The <STYLE> Element." In the following example, we are creating individual Styles for three different Elements: BODY, H2 and DIV. This is the Style for the BODY Element: BODY { margin: 50px 20px 25px 72px; font-family: Helvetica, Times, Geneva; font-size: 12pt; font-style: plain; background-color: yellow; } You should immediately notice that you can declare all four margins with a single Property and that they are not separated by commas. The margin order is: top-right-bottom-left, so that: • • • • the the the the top margin right margin bottom margin left margin is 50 pixels thick, is 20 pixels thick, is 25 pixels thick, and is 72 pixels thick.
Slide 41: CHAPTER 1 — Style Sheets 21 Next, the font is declared by just including the name of the font that you want to use. The reason that more than one font name is supplied is in case the first font isn't in the user's System, Navigator will check and see if the second font listed is available and so on. Listing several fonts that are very similar in look to your first choice will increase your chances of a visual match. If no listed fonts are available, then Navigator will use the default font specified in the user's Preferences. There is only one way to make sure that the font that you specify is the one that's really used: Use DOWNLOADABLE Fonts. Some fairly safe bets are Helvetica, Courier, and Times. There are five generic font-family Property Value Names that will choose something close from the user's System Fonts and they are the serif, sans-serif, cursive, fantasy, and monospace Families. See the chart at the bottom of page 13 for examples of individual fonts from each category. Next, the size of the font is specified as 12 point with the font-size Property, and then the font-style Property specifies that it will be plain. Finally, the background color for the whole document is set to yellow with the background-color Property. Next, the Style for the H1 Element is specified with a Moonlight font that is bold, purple, and sized at 24 point, and the text will be center aligned. The DIV Element is in 14 point Clarendon font (if available) and it will be bold, green, and indented in the first line only by 72 pixels, which is like having a tab coded in. Example 1-4: Sample204.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE> Sample 204 - CSS Example 1-4 <STYLE TYPE="text/CSS"> <!-/* The margin order is: BODY </TITLE> top right bottom left */ { margin: 50px 20px 25px 72px; font-family: Helvetica, Times, Geneva; font-size: 12pt; font-style: plain; background-color: yellow; } { font-family: Moonlight, Clarendon, Palatino, Helvetica; font-size: 24pt; text-align: center; font-style: bold; color:#8800cc; /* real purple */ } { font-family: Clarendon, Palatino, Helvetica; font-size: 14pt; font-style: bold; color: green; text-indent: 72px; } H1 DIV -->
Slide 42: 22 Example 1-4 Part I — D y n a m i c H T M L Sample204.html
Slide 43: CHAPTER 1 — Style Sheets </STYLE> </HEAD> <BODY> <H1>This is Sample 204</H1> 23 <DIV> The Style for the Division Element is Clarendon Font that is bold, green and sized at 14 pt. As you can see above the center aligned H1 Element is in Moonlight Font with Clarendon, Palatino and Helvetica as the backup fonts. The size is 24 pt in bold purple. The BODY Element has Helvetica as the first font choice and is in 12 pt plain with a yellow background color. </DIV><BR><BR><HR> <DIV>Also notice the text-indent Property in the Style for the DIV Element is set to 72 pixels which makes the first line of text be indented by 1 inch each time a DIV Element occurs. We finally have easy Tabs. </DIV><BR><BR><HR> This last paragraph is outside of both the H1 and DIV Elements so it is covered by the BODY Element. Notice the margins set in the BODY Element. If you resize the window you can see the bottom margin. </BODY> </HTML> Cascading Style Sheet Properties The { font-size: } Property The font-size Property is used to specify the size of your text in one of four ways: absolute, relative, length, or percentage. Each of these four categories has its own characteristic strengths of application and is detailed in the syntax below. Personally I find that using the length point size is the easiest. The default size is the absolute Value of medium. If you use standard font sizes like 12, 14, 18 or 24 or if you use relative or percentage Values you will get more consistent output, especially when printing. CSS Syntax: { font-size: absolute|relative|length|percentage; }
Slide 44: 24 • absolute • relative Part I — D y n a m i c H T M L uses one of the following seven Keyword options as a fixed size: xx-small, x-small, small, medium, large, x-large, xx-large uses one of the following two Keywords to create a size that is relatively larger or smaller than the parent Element's font. larger, smaller • length a number followed by a unit of measurement abbreviation. The units of measurement that are recognized by CSS syntax are: • • • • • • • • px in cm mm pt pc em en pixels inches centimeters millimeters points picas height of the font half the height of the font • percentage a number followed by a percent sign that creates a size that is a relative percentage of the parent Element's font size. Here is a usage of each of the four categories: • • • • absolute relative length percentage { { { { font-size: font-size: font-size: font-size: xx-large; } smaller; } 24pt; } 150%; } The { font-family: } Property The font-family Property is used to specify any font by name just like the name of font that is contained in your normal System Folder/Font Folder. You are only required to specify one font name, but it's always good practice to list several similar possibilities since the fonts must be contained in the user's System in order for Navigator to use it unless you use Downloadable Fonts. See the Dynamic HTML Guide on the CD-ROM for more info. There are also five generic safe font-family names which aren't specific and are system dependent but offer more variety in terms of appearance. They are: sans-serif, serif, cursive, fantasy and monospace. Use them as the last font in your list as a fail-safe font if you don't want to rely on the user's Preferences choice which is the default. When you list more than one font, separate each one with a comma and a blank space like so: { font-family: Helvetica, Times, TimesRoman, serif; }
Slide 45: CHAPTER 1 — Style Sheets 25 If the font name that you want to list is composed of two or more words that have a space between them, then you need to enclose the entire font name within either quotes or double quotes like this: { font-family: "Brush Script"; } CSS Syntax: { font-family: fontName; } { font-family: fontName1, fontName2, fontNameN; } The { font-weight: } Property The font-weight Property is used to specify how bold or thick your text will be. You can use a Keyword Name like bold or lighter, or a whole number from 100 to 900 (in increments of 100) where the larger the number, the bolder the text. { font-weight:bolder; } { font-weight:lighter; } { font-weight:500; } CSS Syntax: { font-weight: normal|bold|bolder|lighter| 100|200|300|400|500|600|700|800|900; } The { font-style: } Property The font-style Property is used to embellish your text with italics or return it to normal like this: { font-style:italic; } { font-style:normal; } CSS Syntax: { font-style: normal|italic; } Example 1-5 focuses on the four font Properties that were just explained.
Slide 46: 26 Example 1-5: Part I — D y n a m i c H T M L Sample205.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 205 - CSS Example 1-5 <STYLE TYPE="text/CSS"> <!-H1 </TITLE> DIV { color: olive; font-family: Palatino, Moonlight, Clarendon, Helvetica; font-size: 30pt; font-style: italic; font-weight: lighter; } { color: silver; background-color: black; font-family: Clarendon, Helvetica; font-size: 24pt; font-weight: bolder; } --> </STYLE> </HEAD> <BODY> <H1>This is Sample 205</H1> <DIV> </DIV> This example focuses on demonstrating font Property characteristics. <BR><HR> <DIV> <IMG SRC="JPEG-FILES/J5-SKY_SPHERE_1.jpg" ALIGN="ABSMIDDLE" WIDTH=360 HEIGHT=245 BORDER=20 HSPACE=10 VSPACE=10 ALT="Sky Sphere"> <H1> </DIV> Sky Sphere </H1> Check out the Image in the Division. <BR><HR> <BR><HR> <H1> Do you see the inheritance of the black background color from the DIV Style to the H1 Element that's inside the DIV Tags which is not applied to this H1. </H1> </BODY> </HTML>
Slide 47: CHAPTER 1 — Style Sheets 27 The { line-height: } Property The line-height Property is used the same way that leading is used in page layout programs: to set the vertical distance between the baselines of adjacent lines of text. You can only use this Property with block-level Elements. It is specified with a Value that is either the Keyword normal, a number, length, or a percentage. The default Value is the Keyword normal, which is the normal Value for the current Font that is being used. You can't use negative numbers with any of the following Value types for this Property. number When you specify a number Value without a unit of measurement, it is the same as multiplying the current Font Size by that number and returning that product as the Value of the line-height Property. This number Value can be a floating point decimal number and it can be less than one but it can't be a negative number. The only real difference between this type of Value and a percentage Value is in the way that child Elements will inherit the Value. When using a number Value without units attached, the child Element will inherit the actual number Value, not the computed Value that is multiplied. When using a percentage Value, the child Element will inherit the multiplied Value. Using a length type Value means that it is a measurement. This means that it is a number followed by a unit of measurement like pt for points or px for pixels. See the charts on pages 11, 12, and 14 on units of measurement for more information on all the possible types of units that are available. Using a percentage type Value means that the Value that you supply is multiplied by the font size of the current font and that Value is returned as the line-height Value. The percentage Value is always followed by a percent (%) sign. length percentage Mini-Examples: Here are a few mini-examples of using the line-height Property: { { { { { line-height: line-height: line-height: line-height: line-height: normal; } 1.5; } 24pt; } .25in; } 150%; } CSS Syntax: { line-height: normal|number|length|percentage; }
Slide 48: 28 Part I — D y n a m i c H T M L The { text-decoration: } Property The text-decoration Property is used to embellish your text with one of the following Values: underline, line-through, blink, or with the default Value of none like this: Mini-Example: { text-decoration: underline; } CSS Syntax: { text-decoration: none|underline|line-through|blink; } The { text-transform: } Property The text-transform Property is used to change your text in one of the following four ways and followed by an example. The default Value is none. • • • • capitalize uppercase lowercase none causes the first letter in each word to be in uppercase letters causes all the text to be in uppercase letters causes all the text to be in lowercase letters causes the text to revert to normal, meaning that the inherited Value, if any, is thwarted. { text-transform: uppercase; } Mini-Example: CSS Syntax: { text-transform: capitalize|uppercase|lowercase|none; } The { text-align: } Property The text-align Property is used to horizontally align your text with the Keywords of left, right or it can make the text be centered with center or justified with justify. The default Value is left. Here's a mini-example: Mini-Example: { text-align: right; } CSS Syntax: { text-align: left|right|center|justify; }
Slide 49: CHAPTER 1 — Style Sheets 29 The { text-indent: } Property The text-indent Property is used to indent only the first line of text within an Element. It is specified with either a length type Value that is a number followed by a unit of measurement or a percentage type Value that is a number followed by a percent (%) sign. When the Value is specifed as a percentage, it is a percentage of the width of the parent Element. The default Value is 0. It only applies to block-level Elements and the Value is inherited. See the charts on pages 11, 12, and 14 on units of measurement for more information on all the possible types of units that are available. { text-indent: 40px; } { text-indent: 200%; } CSS Syntax: { text-indent: length|percentage; } This example focuses on demonstrating the text-decoration, text-transform, text-align, text-indent, and line-height Properties. Example 1-6: Sample206.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 206 - CSS Example 1-6 <STYLE TYPE="text/CSS"> <!-H1 { text-align: center; line-height: 50pt; text-decoration: line-through; text-transform: uppercase; text-indent: 40px; color: red; font-family: Clarendon, Palatino, Helvetica; font-size: 24pt; } DIV { text-align: right; line-height: 32pt; text-decoration: underline; text-transform: capitalize; text-indent: 100px; color: blue; font-family: Palatino, Clarendon, Helvetica; font-size: 14pt; } --> </STYLE> </HEAD> </TITLE>
Slide 50: 30 <BODY> <H1>this is sample 206</H1> Part I — D y n a m i c H T M L <DIV> This example focuses on demonstrating text-decoration, text-transform, text-align, text-indent and line-height. </DIV> <BR><HR> <DIV> Notice that the line-height parameter causes the space between the lines to be greater than normal leading in the DIV tags. The DIV Elements are text-aligned to the right, blue, underlined and the first letter of each word is capitalized. </DIV> <BR><HR> <DIV> Also Notice that the text in the H1 Element is all in uppercase letters even though when it was typed in they were all in lowercase letters. </DIV> </BODY> </HTML> Margins Margins Overview This is an overview for the five Properties that deal with setting Margins for your Styles. Each of the individual Margin-type Properties is covered separately after the overview. The group of Margin-type Properties behave differently than you might expect at first glance. They add invisible space around the outside of the Element so that it creates distance between adjacent Elements. When using the margin Property you can set all four Margins to have the same Value or they can each have different Values. Don't use negative Margins or else you may get erratic results. You can also set each one of the Margins individually by using the margin-top, margin-right, margin-bottom and margin-left Properties. These Properties are usually used if you don't need a margin around one or more of the sides because you don't have to set all of them; you can just pick and choose the ones you need. There are six different ways to set the thickness of your Margins for a particular Style by using the following five Properties: • • • • • margin margin-top margin-right margin-bottom margin-left sets all the Margins at once sets the top Margin sets the right Margin sets the bottom Margin sets the left Margin
Slide 51: CHAPTER 1 — Style Sheets 31 The { margin: } Property The margin Property is used to globally set the thickness of your Margins. You can set them all at once to the same value by just specifying one Value like this: { margin: 20px; } or when you want Margins of different sizes you can set each one all at once by declaring four different Values with a space between each one like this: { margin: 72px 35px 20px 50px; } so that the: top margin right margin bottom margin left margin is is is is 72 pixels thick 35 pixels thick 20 pixels thick 50 pixels thick. The order of the Margins is always the same and, as shown in the previous code snippet, is: top-right-bottom-left; Just think of the order as being clockwise and starting from the top. Note that there are no commas in the Margins list. The possible Value types are length, percentage and the Keyword auto. Note that if you assign a margin Property to an Element that has no content in it, then the Margin for that Element is ignored, unless it subsequently is dynamically altered to contain content, then the Margin is implemented. CSS Syntax: { margin: length|percentage|auto; } Parameters Defined: percentage is any positive number suffixed by a percent sign like: 1%-1000%, ...n% length is a number suffixed by one of the following units of measurement: em, ex, px, pt, pc, in, mm, cm See the charts on page 11, 12, and 14 for more information.
Slide 52: 32 Part I — D y n a m i c H T M L The { margin-top: } Property The margin-top Property is used to set the thickness of the top margin like this: { margin-top: 50px; } { margin-top: 20%; } CSS Syntax: { margin-top: length|percentage; } The { margin-right: } Property The margin-right Property is used to set the thickness of the right margin like this: { margin-right: 20px; } { margin-right: 25%; } CSS Syntax: { margin-right: length|percentage; } The { margin-bottom: } Property The margin-bottom Property is used to set the thickness of the bottom margin. { margin-bottom: .5in; } { margin-bottom: 50%; } CSS Syntax: { margin-bottom: length|percentage; } The { margin-left: } Property The margin-left Property is used to set the thickness of the left margin like this: { margin-left: 24pt; } { margin-left: 40%; } CSS Syntax: { margin-left: length|percentage; } The following example demonstrates the ability to have individual Margins be of different sizes or omitted altogether. This is accomplished by setting unique length Values for the margin-top, margin-right, margin-bottom or margin-left Properties or by omitting one or more of these properties when any of the four are used in a STYLE.
Slide 53: CHAPTER 1 — Style Sheets Example 1-7: Sample207.html 33 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD><TITLE> Sample 207 - CSS Example 1-7 <STYLE TYPE="text/CSS"> <!-H1 Margins </TITLE> { margin: 10px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: purple; } { margin: 10px 30px 50px 70px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: blue; } { margin-top: 35px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: aqua; } { margin-right: 177px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: green; } { margin-bottom: 2in; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: yellow; } { margin-left: 100px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: fuchsia; } { margin-left: 55px; margin-top: 1in; font-size: 17pt; border-style: ridge; border-width: 20px; border-color: red; } H2 H3 H4 H5 H6 P --> </STYLE> </HEAD> <BODY> <H1> This is Sample 207 </H1> <P>Notice that the P Element is set to a left margin of 55 pixels and a top margin of 1 inch.</P> <H1> <H2> <H3> <H4> <H5> <H6> H1H2H3H4H5H6This This This This This This is is is is is is a a a a a a margin at 10 pixels on all four sides </H1> margin at 10 30 50 70 pixels for top right bottom left </H2> top margin of 35 pixels </H3> right margin of 177 pixels </H4> bottom margin of 2 inches </H5> left margin of 100 pixels </H6> </BODY> </HTML>
Slide 54: 34 Part I — D y n a m i c H T M L Padding When you want to create space between the edge or perimeter of an Element and the content inside the Element, you use one of the five Padding Properties. This has the same effect as the CELLPADDING Attribute in a TABLE Element. Think of any Element as consisting of a rectangular block that has an outside, an edge, and an inside. To get your text or image or other content to start and stop at an interior distance from the edge you add Padding space, like an inside margin that applies just to that particular Element. Remember from the last section that the Margin Properties add space to the outside of the Element so that it creates distance between different Elements. The Padding Properties add space to the inside of the Element so that it creates space between the Element edge and the Element content. When using the padding Property you can set all four Paddings to have the same Value or they can each have different Values. You can also set each one of the Paddings individually by using the padding-top, padding-right, padding-bottom and padding-left Properties. There are six different ways to set the thickness of your Padding for a particular style by using the following five Properties, which are covered individually afterward: • • • • • padding padding-top padding-right padding-bottom padding-left sets all the Paddings at once sets the top Padding sets the right Padding sets the bottom Padding sets the left Padding The { padding: } Property The padding Property is used to globally set the thickness of your Paddings. You can set them all at once with the same value by just specifying one Value like this: { padding: 20px; } When you want Paddings of different sizes you can set each one all at once by declaring four different Values with a space between each one, noting there are no commas and the order is top-right-bottom-left: { padding: 72px 80px 22px 50px; } so that the: top padding right padding bottom padding left padding is is is is 72 pixels thick 80 pixels thick 22 pixels thick 50 pixels thick.
Slide 55: CHAPTER 1 — Style Sheets CSS Syntax: { padding: length|percentage; } 35 length is a number suffixed one of these units: em, ex, px, pt, pc, in, mm, cm percentage is any positive number suffixed by a percent sign like: 1%-1000%, ...n% The { padding-top: } Property The padding-top Property is used to set the thickness of the top Padding like this: { padding-top: 50px; } { padding-top: 20%; } CSS Syntax: { padding-top: length|percentage; } The { padding-right: } Property The padding-right Property is used to set the thickness of the right Padding. { padding-right: 20px; } { padding-right: 25%; } CSS Syntax: { padding-right: length|percentage; } The { padding-bottom: } Property The padding-bottom Property is used to set the thickness of the bottom Padding. { padding-bottom: .5in; } { padding-bottom: 50%; } CSS Syntax: { padding-bottom: length|percentage; } The { padding-left: } Property The padding-left Property is used to set the thickness of the left Padding. { padding-left: 24pt; } { padding-left: 40%; } CSS Syntax: { padding-left: length|percentage; }
Slide 56: 36 Part I — D y n a m i c H T M L This is an example demonstrating the ability to have individual Paddings be of different sizes or omitted altogether. This is accomplished by setting unique length Values for the padding-top, padding-right, padding-bottom, or padding-left Properties or by the omission of one or more of these properties when any of the four are used in a STYLE. Example 1-8: Sample208.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD><TITLE> Sample 208 - CSS Example 1-8 Paddings </TITLE> <STYLE TYPE="text/CSS"> <!-H1 { padding: 10px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: purple; } H2 { padding: 10px 30px 50px 70px; text-transform: capitalize; color: border-style: ridge; border-width: { padding-top: 35px; text-transform: capitalize; color: border-style: ridge; border-width: red; 20px; border-color: blue; } red; 20px; border-color: aqua; } H3 H4 { padding-right: 177px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: green; } { padding-bottom: 2in; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: yellow; } { padding-left: 100px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: fuchsia; } { padding-left: 55px; padding-top: 1in; font-size: 17pt; border-style: ridge; border-width: 20px; border-color: red; } H5 H6 P --> </STYLE> </HEAD> <BODY> <H1> This is Sample 208 </H1> <P>Notice that the P Element is set to a left padding of 55 pixels and a top padding of 1 inch.</P> <H1>H1<H2>H2<H3>H3<H4>H4<H5>H5<H6>H6</BODY> </HTML> This This This This This This is is is is is is a a a a a a padding at 10 pixels on all four sides padding at 10 30 50 70 pixels for top right bottom left top padding of 35 pixels right padding of 177 pixels bottom padding of 2 inches left padding of 100 pixels </H1> </H2> </H3> </H4> </H5> </H6>
Slide 57: CHAPTER 1 — Style Sheets 37 Color In CSS Syntax, there are three Properties that allow you to manipulate the color in your styles directly. They all work exactly the same way but operate on different aspects of your document. The color Property controls the foreground color, which is the color of the text in the Element that it is applied to. The background-color Property controls the background color of the Element it is applied to, and finally there is the border-color, Property which changes the color of your border from the default color that it inherits from the foreground color of the BODY Element. In CSS Syntax, you have more ways to specify the color than in HTML. You can use a recognized color Name, including all the JavaScript color Names (see Appendix B), a Hexadecimal triplet and you can also express it by using the rgb( ) Function. The rgb( ) Function takes the three Arguments of redArg, greenArg, and blueArg which represent the Red, Green, and Blue Values of a total color. They are separated by commas and can be either numbers from 0 to 255 or a percentage from 0 to 100%. If a percentage is used, the percent (%) sign must follow the number for each Argument. CSS Syntax: rgb(redArg, greenArg, blueArg) rgb(redArg%, greenArg%, blueArg%) The numbers used in the 0-255 measurement scheme go from the lowest, which represents no color, to 255, which represents full color, so that: rgb ( 255, 0, 0 ) rgb ( 255, 0, 255 ) rgb ( 0, 0, 255 ) rgb ( 0, 255, 255 ) rgb ( 0, 255, 0 ) rgb ( 255, 255, 0 ) rgb ( 255, 255, 255 ) rgb ( 0, 0, 0 ) rgb ( 100%, 0%, 0% ) rgb ( 100%, 0%, 100% ) rgb ( 0%, 0%, 100% ) rgb ( 0%, 100%, 100% ) rgb ( 0%, 100%, 0% ) rgb ( 100%, 100%, 0% ) rgb ( 100%, 100%, 100%) rgb ( 0%, 0%, 0% ) means: means: means: means: means: means: means: means: means: means: means: means: means: means: means: means: full red, no green, no blue full red, no green, full blue no red, no green, full blue no red, full green, full blue no red, full green, no blue full red, full green, no blue full red, full green, full blue no red, no green, no blue full red, no green, no blue full red, no green, full blue no red, no green, full blue no red, full green, full blue no red, full green, no blue full red, full green, no blue full red, full green, full blue no red, no green, no blue = = = = = = = = = = = = = = = = red plum blue aqua lime yellow white black red plum blue aqua lime yellow white black
Slide 58: 38 Part I — D y n a m i c H T M L The { color: } Property The color Property is quite straightforward; it lets you choose the foreground color of your Element, which changes the color of your text. Here are the four ways to express foreground color: { color: silver; } { color: rgb(5, 220, 250); } { color:#e35a77; } { color: rgb(38%, 43%, 69%); } CSS Syntax: { color: colorname|#$$$$$$|rgb(0-255,0-255,0-255)| rgb(0-100%,0-100%,0-100%); } This example focuses on specifying foreground color using the color Property. Example 1-9: Sample209.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 209 - CSS Example 1-9 The color Property <STYLE TYPE="text/CSS"> <!-H1 </TITLE> { color: blue; border-style: ridge; border-width: 20px; border-color: purple; } { color: rgb(155,0,255); border-style: ridge; border-width: 20px; border-color: blue; } { color: rgb(0,57,155); border-style: ridge; border-width: 20px; border-color: aqua; } { color: rgb(0%,50%,0%); border-style: ridge; border-width: 20px; border-color: green; } { color: rgb(90%,0%,5%); border-style: ridge; border-width: 20px; border-color: yellow; } { color:#7705dd; border-style: ridge; border-width: 20px; border-color: fuchsia; } { color:#ef4499; font-size: 17pt; border-style: ridge; border-width: 20px; border-color: red; } H2 H3 H4 H5 H6 P --> </STYLE>
Slide 59: CHAPTER 1 — Style Sheets </HEAD> <BODY> <H1>This is Sample 209</H1> 39 <P>Notice that the all the different heading types have unique foreground colors which controls the text color.</P> <H1> <H2> <H3> <H4> <H5> <H6> </BODY> </HTML> This This This This This This is is is is is is a a a a a a H1 H2 H3 H4 H5 H6 Heading Heading Heading Heading Heading Heading </H1> </H2> </H3> </H4> </H5> </H6> Example 1-9 Sample209.html
Slide 60: 40 Part I — D y n a m i c H T M L The { background-color: } Property The background-color Property lets you choose the color of the background of each Element. You can use a recognized color Name, Hexadecimal triplet, or you can use the rgb( ) Function, which allows you to specify an rgb triplet using regular numbers or as a percentage, which may be more familiar to artists, graphic designers, Photoshop users, and other image-editing afficionados. Here are four examples of ways to specify the background color of a Style for an Element with the background-color Property: { { { { background-color: olive; } background-color:#aaca77; } background-color: rgb(155, 120, 50); } background-color: rgb(50%, 0%, 90%); } CSS Syntax: { background-color: colorname|#$$$$$$|rgb(0-255,0-255,0-255)| rgb(0-100%,0-100%,0-100%); } Example 1-10 focuses on the background-color Property. Example 1-10: Sample210.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 210 - CSS Example 1-10 The background-color Property </TITLE> <STYLE TYPE="text/CSS"> <!-H1 { background-color: blue; border-style: ridge; border-width: 20px; border-color: purple; } { background-color: rgb(155,0,255); border-style: ridge; border-width: 20px; border-color: blue; } H2
Slide 61: CHAPTER 1 — Style Sheets H3 { background-color: rgb(0,57,155); border-style: ridge; border-width: 20px; border-color: aqua; } { background-color: rgb(0%,50%,0%); border-style: ridge; border-width: 20px; border-color: green; } { background-color: rgb(90%,0%,5%); border-style: ridge; border-width: 20px; border-color: yellow; } { background-color:#7705dd; border-style: ridge; border-width: 20px; border-color: fuchsia; } { background-color:#ef4499; font-size: 17pt; border-style: ridge; border-width: 20px; border-color: red; } 41 H4 H5 H6 P --> </STYLE> </HEAD> <BODY TEXT="#eeeeee" BGCOLOR="#000000"> <H1>This is Sample 210</H1> <P>This example is exactly the same as Sample 208 except that the colors used are for the background instead of the foreground. Because no foreground color is specified, all of the Heading Elements inherit it from the BODY Element since they are contained within it.</P> <H1> <H2> <H3> <H4> <H5> <H6> </BODY> </HTML> This This This This This This is is is is is is a a a a a a H1 H2 H3 H4 H5 H6 Heading Heading Heading Heading Heading Heading </H1> </H2> </H3> </H4> </H5> </H6> Check out the color chart in Appendix B on pages 1033-1037 for a huge list of all the JavaScript color Names and their Hexadecimal, and rgb number and percentage Value equivalents. This information is also contained in a file on the CD-ROM named AppendixB-ChartOnly.html, that's in the HTML_BOOK-Online Folder, that's in the DHTML-JS_BOOK-Main_Files Folder. It uses Arrays, a for() Loop, and document.write() in a JavaScript Script to output the data, and it renders the actual color behind the text. In Appendix B there is also a treatise on additive color theory if you're interested in how color works in the visible light spectrum. There is a color conversion calculator that uses JavaScript to convert colors to and from a variety of formats on pages 340-350.
Slide 62: 42 Part I — D y n a m i c H T M L The { background-image: } Property The background-image Property lets you choose an image to display behind the content of your Element. You can have a different image for each Element that you create a Style for. This background image will be tiled as many times as is necessary to fill the space that is assigned to that Element. Here's an example of how to code a background image into your Style, noting that (JPEG-FILES) is the folder that contains the actual image and the image file has a relative urlName of (ExampleImage.jpeg) : { background-image: url(JPEG-FILES/ExampleImage.jpeg); } In the syntax note that the "l" in url and the left parentheses "(" in (urlName) must not be separated by any blank spaces and the urlName is not enclosed in quotes. CSS Syntax: { background-image: url(urlName); } This example focuses on the background-image Property. Example 1-11: Sample211.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 211 - CSS Example 1-11 Background Images <STYLE TYPE="text/CSS"> <!-BODY H1 </TITLE> { font-size: 36pt; } { background-image: url(./JPEG-FILES/icon-BG-asteroids.jpg); border-style: ridge; border-width: 20px; border-color: purple; padding: 30px; background-color: white;} { background-image: url(./JPEG-FILES/Icon-Clouds.jpg); border-style: ridge; border-width: 20px; border-color: blue; padding: 72px; } { background-image: url(./JPEG-FILES/icon-BG-stars.jpg); border-style: ridge; border-width: 20px; border-color: aqua; padding: 144px; } H2 H3
Slide 63: CHAPTER 1 — Style Sheets H4 43 { background-image: url(./JPEG-FILES/icon-FieldStone-Purple.jpeg); border-style: ridge; border-width: 20px; border-color: green; padding: 100px; } { background-image: url(./JPEG-FILES/icon-Paint-Palette.jpg); border-style: ridge; border-width: 20px; border-color: yellow; padding: 144px; } { background-image: url(./dreamplay-website/JPEG-FILES/J2-JERRY_GARCIA-2-RS.jpg); border-style: ridge; border-width: 20px; border-color: fuchsia; padding: 50px; color: white;} { background-color:#ccccff; font-size: 17pt; border-style: ridge; border-width: 20px; border-color: red; } H5 H6 P --> </STYLE> </HEAD> <BODY TEXT="#0000ff" BGCOLOR="#000000"> <H1> This is Sample 211 </H1> <P> Make sure that there are no blank spaces between the last letter of (url) and the first parentheses containing the urlName. This is correct: url(urlName) and this is wrong: url (urlName). <BR><BR> Also notice that the image tiles or repeats to fill up the available or assigned space.</P> <H1> <H2> <H3> <H4> <H5> <H6> </BODY> </HTML> This This This This This This is is is is is is a a a a a a H1 H2 H3 H4 H5 H6 Heading Heading Heading Heading Heading Heading </H1> </H2> </H3> </H4> </H5> </H6> Example 1-12 uses a lot of the Properties that have been discussed so far. Check it out and make sure everything in it is familiar. Some details to be aware of are: The BODY Element has a margin Property assigned, which causes each of the Elements contained in the BODY to have a 20 pixel Margin around it also. Since the CITE Element also has a margin Property assigned to it, the effect is cumulative; that is, all CITE Elements will have 20 pixels of Margin from the BODY Element added to its own 10 pixels of Margin. If you look at the example in a browser you will see that there is more distance between Elements that are adjacent to a CITE Element than the others which don't have explicit margin Properties within their Style Definition. Also remember that H1 and PRE Elements are BLOCK LEVEL Elements and have a built-in line-break while the CITE and XMP Elements do not.
Slide 64: 44 Example 1-12: Part I — D y n a m i c H T M L Sample212.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 212 - CSS Example 1-12 Compilation <STYLE TYPE="text/CSS"> <!-BODY H3 { margin: 20px; background-color:#7777cc;} </TITLE> PRE CITE XMP { font-family: Clarendon, Moonlight, Palatino, Helvetica; font-size: 30pt; text-align: center; font-style: bold; color: blue; border-width:.25in; border-style: groove; border-color:#335a77; margin: 20px; background-color:#755f11; /* metallic gold } { font-family: Brush Script,Geneva, Palatino, Helvetica; font-size: 19pt; font-style: plain; color: black; text-indent: 45px; line-height: 30pt; border-width:.25in; border-style: inset; border-color: blue; background-color: aqua; margin: 15px; } { font-family: Bellevue, New York, Geneva, Times; font-size: 25pt; font-style: italic; text-align: center; color: red; line-height: 45pt; border-width: 10mm; border-style: outset; border-color: lime; background-color: yellow; margin: 10px; margin: 20px; } { font-family: Helvetica, Times, New York, Geneva; font-size: 18pt; font-style: bold; text-align: center; color: maroon; border-width: 10mm; */
Slide 65: CHAPTER 1 — Style Sheets border-style: ridge; border-color: purple; background-color: gray; margin: 40px; white-space: pre; } --> </STYLE> </HEAD> <BODY> <H3> This is Sample 212 </H3> 45 <CITE> There are a lot of Properties in this example. </CITE> <PRE> The Site still has their website. You should email them to let the powers that be know that they should reinstate the show. Bring back Dev. </PRE> <XMP> This example has a lot of borders in it but the next example is the one with all border style possibilities. If you don't explicitly code in the white-space Property to "pre" then even with an XMP Tag or a PRE Tag the white-space will collapse because in Style Sheet syntax white-space is collapsed by default. Below are all the Properties used in the Style for the XMP Element. { font-family: Helvetica, Times, New York, Geneva; font-size: 18pt; font-style: bold; text-align: center; color: maroon; border-width: 10mm; border-style: ridge; border-color: purple; background-color: gray; margin: 40px; white-space: pre; } </XMP> </BODY> </HTML>
Slide 66: 46 Part I — D y n a m i c H T M L Setting Borders The { border-style: } Property By using the border-style Property you can highlight your content by choosing to surround it with either 2D or 3D raised borders. The solid and double styles are 2D, and the inset, outset, groove, and ridge styles are all 3D shaded. You also have the option of creating borders that have less than four sides if you want to experiment with graphical innovation. Try nesting your content within Elements that all have borders for some very interesting effects. The default value is none, which may also be chosen using JavaScript if you are creating Styles that change. Remember to include a border-width Property Value as part of your Style Definition or else it will be invisible because by default it has a Value of zero. For more info on setting Border Widths, see pages 52-58. This is an example of a 3D border-style: { border-style: groove } CSS Syntax: { border-style: none|solid|double|inset|outset|groove|ridge; } This example covers all the Values of the border-style Property except for none. Example 1-13: Sample213.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE> Sample 213 - CSS Example 1-13 Border Styles <STYLE TYPE="text/CSS"> <!-BODY </TITLE> H1 { margin: 10px; font-size: 30pt; border-style: ridge; border-width: 10px; font-family: Clarendon, Moonlight, Palatino, Helvetica; } { border-style: solid; border-width: 20px; border-color:#ff0000; margin: 10px; background-color:#755f11; /* metallic gold } */
Slide 67: CHAPTER 1 — Style Sheets H2 { border-style: double; border-width: 20px; border-color: blue; margin: 10px; background-color:#755f11; } { border-style: inset; border-width: 20px; border-color: green; margin: 10px; background-color:#755f11; } { border-style: outset; border-width: 20px; border-color: aqua; margin: 10px; background-color:#755f11; } { border-style: groove; border-width: 20px; border-color: purple; margin: 10px; background-color:#755f11; } { border-style: ridge; border-width: 20px; border-color: maroon; margin: 10px; background-color:#755f11; } { font-size: 14pt; border-style: none; border-width: 20px; border-color: maroon; margin: 10px; background-color:#755f11; } 47 metallic gold */ /* H3 /* metallic gold */ H4 /* metallic gold */ H5 /* metallic gold */ H6 /* metallic gold */ P /* metallic gold */ --> </STYLE> </HEAD> <BODY> <P> Notice that the P Element is set to a border-style of NONE which contains this paragraph. Also notice that the font size is globally set in the BODY Style so it applies to all of the Elements contained within the BODY Tags, even to the following HEADING Elements which would normally be of different sizes. The BODY Element even has a border and it's inside of the margins. </P> <H1> <H2> <H3> <H4> <H5> <H6> </BODY> </HTML> This This This This This This is is is is is is a solid border a double border an inset border an outset border a groove border a ridge border </H1> </H2> </H3> </H4> </H5> </H6>
Slide 68: 48 Part I — D y n a m i c H T M L The { border-color: } Property The border-color Property is quite straightforward; it lets you choose the color of the border surrounding your Element. In CSS Syntax you have more ways to specify the color than in straight HTML. Using a recognized color Name and the old standby Hexadecimal triplet are both still available but now you can also express it as an rgb( ) Function triplet using regular numbers or as a percentage. See page 37 or Appendix B for more information on Color. Here are the four ways to express border-color: { { { { border-color: purple; } border-color:#335a77; } border-color: rgb(255, 20, 150); } border-color: rgb(20%, 50%, 70%); } CSS Syntax: { border-color: colorname|#$$$$$$|rgb(0-255,0-255,0-255)| rgb(0-100%,0-100%,0-100%); } This example focuses on border-color examples. At the end of this example there are nested Elements that each have a border-style so that it looks like you have nested borders, which is not normally possible using standard Property code. Example 1-14: Sample214.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 214 - CSS Example 1-14 border-color Properties</TITLE> <STYLE TYPE="text/CSS"> <!-H1 /* Remember these are CSS comments */ { border-style: solid; border-width: 20px; border-color: blue; padding: 10px; background-color: rgb(255, 100, 0); /* orange */ } { border-style: double; border-width: 20px; border-color: rgb(55, 200, 50); /* medium green */ padding: 10px; background-color:#755f11; /* metallic gold */ } H2
Slide 69: CHAPTER 1 — Style Sheets H3 { border-style: inset; border-width: 20px; border-color: rgb(50%, 0%, 98%); padding: 10px; background-color: rgb(15%, 0%, 98%); } { border-style: outset; border-width: 20px; border-color: rgb(15, 200, 150); padding: 10px; background-color: rgb(100%, 0%, 0%); } { border-style: groove; border-width: 20px; border-color: rgb(50%, 100%, 20%); padding: 10px; background-color:#955f31; } { border-style: ridge; border-width: 20px; border-color: rgb(155, 0, 250); padding: 10px; background-color:#457e71; } { font-size: 14pt; border-style: groove; border-width: 20px; border-color:#255fa1; padding: 10px; background-color:#959f51; } 49 /* /* purple dark blue */ */ H4 /* /* water green red */ */ H5 /* /* lime green */ */ red metallic gold H6 /* /* plum metallic aqua */ */ P /* /* steel blue */ metallic green */ --> </STYLE></HEAD> <BODY> <P> Most of the settings in this example are the same as in the last example to let you focus on the border-colors. Notice that the following HEADING Elements are rendered in their normal sizes this time because there are no overriding Properties to inherit.</P> <H1><H2><H3> border H1 <H5><H4> <H4><H5><H6> border H4 This is an inset border H3 inside a double border H2 inside a solid </H3></H2></H1> This is an outset border inside a groove border </H4></H5> This is a ridge border H6 inside a groove border H5 inside an outset </H6></H5></H4> Just below is an empty H6 heading. Very interesting. Spark any graphical insights? <H6></H6> </BODY></HTML> Example 1-15 shows nested Elements that each have a border-style so that it creates a nested rainbow multiborder.
Slide 70: 50 Example 1-15: Part I — D y n a m i c H T M L Sample215.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD><TITLE> Sample 215 - CSS Example 1-15 <STYLE TYPE="text/CSS"> <!-H1 Nested Borders </TITLE> H2 H3 H4 H5 H6 /* Remember these are CSS comments */ { border-style: solid; border-width: 20px; border-color: rgb(155, 0, 255); background-color: blue; /* orange */ } { border-style: double; border-width: 20px; border-color: blue; /* medium green */ background-color: rgb(0%, 100%, 100%); /* metallic gold */ } { border-style: inset; border-width: 20px; border-color: rgb(0%, 100%, 100%); /* purple */ background-color: rgb(0, 255, 0) ; /* dark blue */ } { border-style: outset; border-width: 20px; border-color: rgb(0, 255, 0); /* water green */ background-color: rgb(100%, 100%, 0%); /* red */ } { border-style: groove; border-width: 20px; border-color: rgb(100%, 100%, 0%); /* lime green */ background-color: rgb(255, 0, 0); /* red metallic gold } { border-style: ridge; border-width: 20px; border-color: rgb(255, 0, 0); /* plum */ background-color: red; /* metallic aqua */ font-size: 24pt; } */ --> </STYLE> </HEAD> <BODY> <H1><H2><H3><H4><H5><H6>Rainbow Land</H6></H5></H4></H3></H2></H1> </BODY> </HTML> Example 1-16 shows two instances of nested Elements that each have a Property of border-style so that it creates a nested rainbow multiple border that has inherited white backgrounds from the BODY Element instead of explicitly specifying them.
Slide 71: CHAPTER 1 — Style Sheets Example 1-16: Sample216.html 51 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 216 - CSS Example 1-16 Nested Rainbow Borders</TITLE> <STYLE TYPE="text/CSS"> <!-/* H1 Remember these are CSS comments */ H2 H3 H4 H5 H6 { border-style: solid; border-width: 20px; border-color: rgb(255, 0, 255); } { border-style: double; border-width: 20px; border-color: blue; } { border-style: inset; border-width: 20px; border-color: rgb(0%, 100%, 100%); } { border-style: outset; border-width: 20px; border-color: rgb(0, 255, 0); } { border-style: groove; border-width: 20px; border-color: rgb(100%, 100%, 0%); } { border-style: ridge; border-width: 20px; border-color: rgb(255, 0, 0); font-size: 24pt; } /* plum */ /* medium green */ /* purple */ /* water green */ /* lime green */ /* red */ --> </STYLE> </HEAD> <BODY> <H1><H2><H3><H4><H5><H6>Rainbow Land</H6></H5></H4></H3></H2></H1> <H6><H5><H4><H3><H2><H1>Rainbow Land</H1></H2></H3></H4></H5></H6> </BODY> </HTML>
Slide 72: 52 Part I — D y n a m i c H T M L Border Widths When you use the border-style Property to augment your content with a graphical Border of either solid, double, inset, outset, groove, or ridge style, you also must specify one of the five Border Width Properties listed below. The reason for this is that a Border has zero thickness by default, until you specify a width for it. You can set your Borders to all have the same thickness, or each side of the Border can have a unique width. You can even have a three-sided Border where each side has a different width. There are six different ways to set the thickness, that is, the width of your Borders, by using any of the following five Properties: • • • • • border-width border-top-width border-right-width border-bottom-width border-left-width The { border-width: } Property The border-width Property is used to set the thickness of your borders globally. You can set them all at once with the same value by just specifying one Value like this: { border-width: 20px; } or you can set them all at once by declaring four different Values with a space between each one like this: { border-width: 10px 20px 30px 40px; } The order of the borders in this case would be top-right-bottom-left; just think of the order as being clockwise from the top. CSS Syntax: { border-width: length|percentage; } length is a number suffixed by one of the following units of measurement: em, ex, px, pt, pc, in, mm, cm See the charts on page 11-12, 14 for more information on units of measurement. percentage is any positive number suffixed by a percent sign like: 1%-1000%, ...n%
Slide 73: CHAPTER 1 — Style Sheets 53 The { border-top-width: } Property The border-top-width Property is used to set the thickness of the top side of your border like this: { border-top-width: 20px; } CSS Syntax: { border-top-width: length|percentage; } The { border-right-width: } Property The border-right-width Property is used to set the thickness of the right side of your border like this: { border-right-width: 20px; } CSS Syntax: { border-right-width: length|percentage; } The { border-bottom-width: } Property The border-bottom-width Property is used to set the thickness of the bottom side of your border like this: { border-bottom-width: 20px; } CSS Syntax: { border-bottom-width: length|percentage; } The { border-left-width: } Property The border-left-width Property is used to set the thickness of the left side of your border like this: { border-left-width: 20px; } CSS Syntax: { border-left-width: length|percentage; }
Slide 74: 54 Part I — D y n a m i c H T M L This is an example demonstrating the ability to have individual sides of one total border be of different sizes or omitted altogether. This is accomplished by setting unique length values for the following Properties or by the omission of one or more of these Properties when any of the four are used in a STYLE: border-top-width: length; border-right-width: length; border-bottom-width: length; border-left-width: length; It also demonstrate the border-width Property. Example 1-17: Sample217.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD><TITLE> Sample 217 - CSS Example 1-17</TITLE> <STYLE TYPE="text/CSS"> <!-BODY { margin: 10px; font-size: 30pt; background-color:#aaccbb; border-style: ridge; border-width: 10px; font-family: Bellevue, Clarendon, Moonlight, Helvetica; } { border-style: solid; border-top-width: 5px; border-right-width: 10px; border-bottom-width: 20px; border-left-width: 25px; border-color:#ff0000; margin: 10px; background-color:#665599; } { border-style: double; border-top-width: 20px; border-right-width: 20px; border-bottom-width: 20px; border-color: blue; margin: 10px; background-color:#665599; } { border-style: inset; border-top-width: 20px; border-right-width: 20px; border-color: green; margin: 10px; background-color:#665599; } H1 /* metallic purple */ H2 /* metallic purple */ H3 /* metallic purple */
Slide 75: CHAPTER 1 — Style Sheets H4 { border-style: outset; border-right-width: 20px; border-left-width: 25px; border-color: aqua; margin: 10px; background-color:#665599; } { border-style: groove; border-top-width: 20px; border-bottom-width: 20px; border-color: purple; margin: 10px; background-color:#665599; } { border-style: ridge; border-left-width: 20px; border-right-width: 20px; border-bottom-width: 20px; border-color: maroon; margin: 10px; background-color:#665599; } { font-size: 18pt; border-style: none; border-width: 20px; border-color: maroon; margin: 10px; background-color:#665599; } 55 /* metallic purple */ H5 /* metallic purple */ H6 /* metallic purple */ P /* metallic purple */ --> </STYLE> </HEAD> <BODY> <P> This example demonstrates the ability to have the sides of your borders be of different sizes or omitted. Netscape doesn't seem to have nailed the math down on getting the borders to match up precisely when certain sides of certain styles are used, at least on the Mac Platform. If the size of your text in the headings is not all 30pt, try holding the Shift Key down and hitting the reload button in your browser. </P> <H1> <H2> <H3> <H4> <H5> <H6> </BODY> </HTML> This This This This This This is is is is is is a solid border a double border an inset border an outset border a groove border a ridge border </H1> </H2> </H3> </H4> </H5> </H6>
Slide 76: 56 Part I — D y n a m i c H T M L This example shows a chart of the 16 universally recognized color names. On the CD-ROM, there is a color chart in Sample43.html showing those colors. This is a variation of that example which has Border Styles applied to HEADING Elements inside of a TABLE Element and it includes the rgb() Function Values for each color. When looking at the code, recognize that each TABLE ROW has 8 CELLS but each CELL has its code on its own line in the text editor. Where the individual instances of the FONT Element are inserted, they provide contrast between the background color of the CELL and the text color. Example 1-18: Sample218.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 218 - Example 1-18 <STYLE TYPE="text/CSS"> <!-H1 { border-style: ridge; border-width: 10px; font-size: 24pt; border-color: rgb(255, 0, 0); float: center; } { border-style: groove; border-width: 15px; border-color: rgb(55, 0, 255); color: rgb(255, 255, 255); background-color: rgb(175, 175, 25); padding: 15px; font-size: 30pt; float: center; font-family: Brush Script, Moonlight, Clarendon; } - Color Chart 2 </TITLE> H2 --> </STYLE> </HEAD> <BODY BGCOLOR="#ffffff" TEXT="#000000"> <H2>CSS COLOR CHART</H2> <TABLE BORDER="15" CELLSPACING="4" CELLPADDING="10" BGCOLOR="#00ffff" BORDERCOLOR="#7700ff" ALIGN="CENTER">
Slide 77: CHAPTER 1 — Style Sheets <TR> <TH COLSPAN="8"> <FONT SIZE="6"> </TR> 57 </FONT></TH> <H1>THE 16 COLORS RECOGNIZED BY NAME</H1> <TR WIDTH="140" BGCOLOR="#755f11"> <TH> COLOR </TH> <TH> HEX<BR>rrggbb </TH> <TH> rgb(r#,g#,b#)<BR>Function </TH> <TH> rgb(r%,g%,b%)<BR>Function </TH> <TH> COLOR </TH> <TH> HEX<BR>rrggbb </TH> <TH> rgb(r#,g#,b#)<BR>Function </TH> <TH> rgb(r%,g%,b%)<BR>Function </TH> </TR> <TR> <TH></TH> </TR> <!-- This creates the White Bar under the Table Headings --> <TR WIDTH="140"> <TD BGCOLOR="#000000"><FONT COLOR="#ffffff">Black</FONT></TD> <TD BGCOLOR="#000000"><FONT COLOR="#ffffff">000000</FONT></TD> <TD BGCOLOR="#000000"><FONT COLOR="#ffffff">(0,0,0)</FONT></TD> <TD BGCOLOR="#000000"><FONT COLOR="#ffffff">(0%,0%,0%)</FONT></TD> <TD BGCOLOR="#008000">Green</TD> <TD BGCOLOR="#008000">008000</TD> <TD BGCOLOR="#008000">(0,127,0)</TD> <TD BGCOLOR="#008000">(0%,50%,0%)</TD> </TR> <TR WIDTH="140"> <TD BGCOLOR="#c0c0c0">Silver</TD> <TD BGCOLOR="#c0c0c0">c0c0c0</TD> <TD BGCOLOR="#c0c0c0">(207,207,207)</TD> <TD BGCOLOR="#c0c0c0">(80%,80%,80%)</TD> <TD BGCOLOR="#00ff00">Lime</TD> <TD BGCOLOR="#00ff00">00ff00</TD> <TD BGCOLOR="#00ff00">(0,255,0)</TD> <TD BGCOLOR="#00ff00">(0%,100%,0%)</TD> </TR> <TR WIDTH="140"> <TD BGCOLOR="#808080">Gray</TD> <TD BGCOLOR="#808080">808080</TD> <TD BGCOLOR="#808080">(127,127,127)</TD> <TD BGCOLOR="#808080">(50%,50%,50%)</TD> <TD BGCOLOR="#808000">Olive</TD> <TD BGCOLOR="#808000">808000</TD> <TD BGCOLOR="#808000">(127,127,0)</TD> <TD BGCOLOR="#808000">(50%,50%,0%)</TD> </TR> <TR <TD <TD <TD WIDTH="140"> BGCOLOR="#ffffff">White</TD> BGCOLOR="#ffffff">ffffff</TD> BGCOLOR="#ffffff">(255,255,255)</TD>
Slide 78: 58 Part I — D y n a m i c H T M L <TD BGCOLOR="#ffffff">(100%,100%,100%)</TD> <TD BGCOLOR="#ffff00">Yellow</TD> <TD BGCOLOR="#ffff00">ffff00</TD> <TD BGCOLOR="#ffff00">(255,255,0)</TD> <TD BGCOLOR="#ffff00">(100%,100%,0%)</TD> </TR> <TR WIDTH="140"> <TD BGCOLOR="#800000">Maroon</TD> <TD BGCOLOR="#800000">800000</TD> <TD BGCOLOR="#800000">(127,0,0)</TD> <TD BGCOLOR="#800000">(50%,0%,0%)</TD> <TD BGCOLOR="#000080"><FONT COLOR="#ffffff">Navy</FONT></TD> <TD BGCOLOR="#000080"><FONT COLOR="#ffffff">000080</FONT></TD> <TD BGCOLOR="#000080"><FONT COLOR="#ffffff">(0,0,127)</FONT></TD> <TD BGCOLOR="#000080"><FONT COLOR="#ffffff">(0%,0%,50%)</FONT></TD> </TR> <TR WIDTH="140"> <TD BGCOLOR="#ff0000">Red</TD> <TD BGCOLOR="#ff0000">ff0000</TD> <TD BGCOLOR="#ff0000">(255,0,0)</TD> <TD BGCOLOR="#ff0000">(100%,0%,0%)</TD> <TD BGCOLOR="#0000ff"><FONT COLOR="#ffffff">Blue</FONT></TD> <TD BGCOLOR="#0000ff"><FONT COLOR="#ffffff">0000ff</FONT></TD> <TD BGCOLOR="#0000ff"><FONT COLOR="#ffffff">(0,0,255)</FONT></TD> <TD BGCOLOR="#0000ff"><FONT COLOR="#ffffff">(0%,0%,100%)</FONT></TD> </TR> <TR WIDTH="140"> <TD BGCOLOR="#800080">Purple</TD> <TD BGCOLOR="#800080">800080</TD> <TD BGCOLOR="#800080">(127,0,127)</TD> <TD BGCOLOR="#800080">(50%,0%,50%)</TD> <TD BGCOLOR="#008080">Teal</TD> <TD BGCOLOR="#008080">008080</TD> <TD BGCOLOR="#008080">(0,127,127)</TD> <TD BGCOLOR="#008080">(0%,50%,50%)</TD> </TR> <TR WIDTH="140"> <TD BGCOLOR="#ff00ff">Fuchsia</TD> <TD BGCOLOR="#ff00ff">ff00ff</TD> <TD BGCOLOR="#ff00ff">(255,0,255)</TD> <TD BGCOLOR="#ff00ff">(100%,0%,100%)</TD> <TD BGCOLOR="#00ffff">Aqua</TD> <TD BGCOLOR="#00ffff">00ffff</TD> <TD BGCOLOR="#00ffff">(0,255,255)</TD> <TD BGCOLOR="#00ffff">(0%,100%,100%)</TD> </TR> </TABLE> </BODY> </HTML>
Slide 79: CHAPTER 1 — Style Sheets 59 The { width: } Property The width Property is used specify the horizontal size of an Element. It can be expressed as a length, as a percentage of the available window space or by the Keyword auto which is the default value. If you set up absolute values like pixels and there is a conflict with values set in the margin Property, the Margins will have their values assigned first and the leftovers go to the width Property. Here are some instant width examples: { { { { width: width: width: width: 500px; } 7in; } 100%; } auto; } CSS Syntax: { width: length|percentage|auto; } Example 1-19 focuses on rudimentary width Property parameters for several Elements. The next example will focus on conflicts and precedence issues pertaining to width and margin Properties. Example 1-19: Sample219.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 219 - CSS Example 1-19 Widths</TITLE> <STYLE TYPE="text/CSS"> <!-H1 { width: 300px; text-transform: capitalize; color: border-style: ridge; border-width: { width: 5in; margin: 10px 30px 50px text-transform: capitalize; color: border-style: ridge; border-width: H2 red; 20px; border-color: purple; } 70px; red; 20px; border-color: blue; } H3 { width: 100%; margin-top: 35px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: aqua; } { width: 50mm; margin-right: 177px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: green; } H4
Slide 80: 60 H5 H6 Part I — D y n a m i c H T M L { width: 10cm; margin-bottom: 2in; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: yellow; } { width: 50%; margin-left: 100px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: fuchsia; } { width: auto; margin-left: 55px; margin-top: 1in; font-size: 17pt; border-style: ridge; border-width: 20px; border-color: red; } P --> </STYLE> </HEAD> <BODY> <H1>this is sample 219</H1> <P> This Example is similar to Example 207. It adds different WIDTH sizes to the various Heading Elements. Notice that the P Element is set to a left margin of 55 pixels and a top margin of 1 inch. It has its WIDTH set to AUTO. </P> <H1> This is a H1 Heading with margins at 10 pixels on all four sides with a WIDTH set to 300 pixels. </H1> <H2> This is a margin at (10 30 50 70) pixels for (top right bottom left) and a WIDTH set to 5 inches. </H2> <H3> This is a top margin of 35 pixels with a WIDTH set to 100 percent of the window. If you resize the window the border will change width. </H3> <H4> </H4> <H5> </H5> This is a right margin of 177 pixels with a WIDTH set to 50 millimeters. This is a bottom margin of 2 inches with a WIDTH set to 10 centimeters. <H6> This is a left margin of 100 pixels with a WIDTH set to 50 percent of the window. </H6> </BODY> </HTML> Example 1-20 examines some of the conflicts that can arise when settings for the width Property interact with the margin Property, which can vary in relation to how the user has the window sized. When you run the example, resize the window and see how that affects the display.
Slide 81: CHAPTER 1 — Style Sheets Example 1-20: Sample220.html 61 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD><TITLE> Sample 220 - CSS Example 1-20 Widths and Margins</TITLE> <STYLE TYPE="text/CSS"> <!-H1 { width: 300px; margin-left: 250px; margin-right: 250px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: purple; } H2 { width: 5in; margin: 10px 200px 50px 200px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: blue; } { width: 100%; margin-right: 435px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: aqua; } { width: 400mm; margin-right: 177px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: green; } { width: 100cm; margin-left: 4in; margin-right: 144px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: yellow; } { width: 50%; margin-left: 400px; text-transform: capitalize; color: red; border-style: ridge; border-width: 20px; border-color: fuchsia; } { width: auto; margin-left: 355px; margin-top: 1in; font-size: 17pt; border-style: ridge; border-width: 20px; border-color: red; } H3 H4 H5 H6 P --> </STYLE> </HEAD> <BODY> <H1> this is sample 220 </H1> <P> This Example is similar to Example 219. It shows some of the creative uses and undesirable consequences of conflicts between WIDTH sizes and MARGINS when applied to the various Heading Elements. Notice that the P Element is set to a left margin of 355 pixels and a top margin of 1 inch. It has its WIDTH set to AUTO which can avoid conflict difficulties. </P> <H1> This is a H1 Heading with margins set at 250 pixels for the left and right sides with a WIDTH set to 300 pixels. </H1> <H2> This is a margin Property set at (10 200 50 200) pixels for (top right bottom left) margins and a WIDTH set to 5 inches. </H2> <H3> This is a top margin of 435 pixels with a WIDTH set to 100 percent of the window. If you resize the window the border will change width. </H3> <H4>This is a right margin of 177 pixels with a WIDTH set to 400 millimeters.</H4> <H5> This is a left margin of 4 inches and a right margin of 144 pixels with a WIDTH set to 100 centimeters. </H5> <H6> This is a left margin of 400 pixels with a WIDTH set to 50 percent of the window. </H6> </BODY> </HTML>
Slide 82: 62 Part I — D y n a m i c H T M L Horizontal Alignment, Floating, and Clear Horizontal Alignment of an Element, Floating an Element, and Clearing a Floating Element are all interrelated. The current syntactical rules are not too confusing but it's less intuitive than it could have been. Here is an overview of the rules; each of these Properties is then covered in subsequent sections. You use the float Property to align your Element. If you align it left or right then it also floats. If you align it center or none then it doesn't float, it repels other Elements. If you assign a clear Property to an Element that is adjacent to a float Element, then the clear Element will repel the float Element, which is like saying clear has precedence over float. There is a chart on page 64 that makes it easier to understand the ramifications of this. If you specify a clear Element adjacent to a nonfloating aligned Property of none or center, the clear Element will repel the other Element also. The { float: } Property The float Property is used specify the horizontal alignment of an Element. It can be expressed by the any of the four Keywords: left, right, center, or none. The default Value is none. If you specify it with the Value of left or right then the Element floats, which means that text will flow around that Element instead of immediately starting below it. An Element that is floated left will be flush with the left edge of the page or left page-margin, if there is one, and have text flowing around its right side. If an Element is floated right then it will be flush with the right edge of the page or right page-margin, if there is one, and will have text flowing around its left side. Never assign a floated Element a Margin because the text-wrapping effect will be disabled or give you bizarre results. The workaround for this is when you want a floated Element to have a Margin just put it inside of another Element like <P> or <DIV> and assign a Style with a Margin to that parent Element. When you specify a float Property to have a Value of center or none then it will only apply alignment to the Element and is said to be defloated; that is, there will be no text flow around the sides and the text will always begin below that Element. Here are examples of all the float possibilities: { float: left; } { float: center; } { float: right; } { float: none; } CSS Syntax: { float: left|right|center|none; }
Slide 83: CHAPTER 1 — Style Sheets 63 It should be noted here that for future reference, when we discuss JavaScript Syntax, the CSS Syntax Property of float is the same as the JavaScript Syntax Property of align. The reason that different words are used for the same Property is that in JavaScript the term float was already a Keyword with a different function. This example shows several ways of using the float Property to align and/or float an Element. Example 1-21: Sample221.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE> Sample 221 - CSS Example 1-21 Float & Align <STYLE TYPE="text/CSS"> <!-H1 </TITLE> { float: right; color: red; border-style: ridge; border-width: 20px; border-color: purple; } { float: left; color: black; border-style: ridge; border-width: 20px; border-color: blue; } { float: none; color: blue; border-style: ridge; border-width: 20px; border-color: aqua; } { float: center; color: lime; border-style: ridge; border-width: 20px; border-color: green; } H2 H3 H4 P { font-size: 17pt; } --> </STYLE> </HEAD> <BODY> <P> This Example demonstrates alignment with the float property. <H1> <P> <H2> <P> <H3> <P> This is a H1 Heading floated right. This Example demonstrates alignment with the float property. This is a H2 Heading floated left. This Example demonstrates alignment with the float property. This is a H3 Heading with no alignment set. This Example demonstrates alignment with the float property. </P> </H1> </P> </H2> </P> </H3> </P> </H4> <H4> This is a H4 Heading aligned center. </BODY> </HTML>
Slide 84: 64 Part I — D y n a m i c H T M L The { clear: } Property The clear Property is used to force an Element that is adjacent to a floated Element to start on the next line below the floated Element. How it works depends on two things: the Value of the clear Property in one Element and the Value of the float Property in another Element that it is adjacent to. In the following chart, assume that you have two Elements that are next to each other in the document, and one of them has specified a clear Property and the other has specified a float Property. Then their interaction behaviors are listed in the right column. When a cleared Element accepts a floated Element, it means that it is allowed to flow or wrap its text around that floated Element. If a cleared Element rejects a floated Element, then it causes the Element with the clear Property to start on the next line below the floated Element. Element 1 If: If: If: If: If: If: If: If: clear=none clear=none clear=left clear=left clear=right clear=right clear=both clear=both and and and and and and and and Element 2 float=left float=right float=left float=right float=left float=right float=left float=right Then: Then: Then: Then: Then: Then: Then: Then: How they interact: clear Element accepts both floats clear Element accepts both floats clear Element accepts right floats and rejects left floats clear Element accepts left floats and rejects right floats clear Element accepts left floats and rejects right floats clear Element accepts right floats and rejects left floats clear Element rejects both floats clear Element rejects both floats These are the four clear Property Value possibilities: { clear: none; } { clear: left; } { clear: both; } { clear: right; } CSS Syntax: { clear: none|left|right|both; } Example 1-22 focuses on how the clear Property interacts with the float Property.
Slide 85: CHAPTER 1 — Style Sheets Example 1-22: Sample222.html 65 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD><TITLE> Sample 222 - CSS Example 1-22 Clear, Float & Align</TITLE> <STYLE TYPE="text/CSS"> <!-H1 { float: right; color: red; border-style: ridge; border-width: 20px; border-color: purple; } { float: left; color: aqua; border-style: ridge; border-width: 20px; border-color: blue; } { float: right; color: blue; border-style: ridge; border-width: 20px; border-color: aqua; } { float: left; color: lime; border-style: ridge; border-width: 20px; border-color: green; } { font-size: 17pt; clear: left; color: red; } { font-size: 22pt; clear: right; color: blue; } H2 H3 H4 P DIV --> </STYLE> </HEAD> <BODY> <P> <H1> <DIV> <H2> <P> <H3> <DIV> <H4> <P> </BODY> </HTML> This Example demonstrates how to Clear a floated Element. This is a H1 Heading floated right. This Example demonstrates how to Clear a floated Element. This is a H2 Heading floated left. This Example demonstrates how to Clear a floated Element. This is a H3 Heading floated right. This Example demonstrates how to Clear a floated Element. This is a H4 Heading floated left. This Example demonstrates how to Clear a floated Element. </P> </H1> </DIV> </H2> </P> </H3> </DIV> </H4> </P>
Slide 86: 66 Part I — D y n a m i c H T M L The { white-space: } Property The white-space Property is used to specify whether the blank space between words both horizontally and vertically is collapsed to a single character space or is retained and preserved as is. The Value of pre preserves white space and the Value of normal will collapse white space, which is the default. Since 99% of all Elements have a default value of normal, the only time you use this Property is when you want to preserve white space. It should be noted that using the pre Value is a very imprecise and unreliable way to format your tabular content although it is quick. If appearance is more important than time, then use a TABLE for tabular-oriented data like charts. The white-space Property is used with BLOCK LEVEL Elements. It can be very useful for quickly making a paragraph render just the way you originally type it, with indentations and carriage returns intact. Here are two mini-examples of using the white-space Property: { white-space : normal; } { white-space : pre; } CSS Syntax: { white-space: normal|pre; } This example focuses on how white space is handled in Styles. Of significance are some of the possible caveats and results of less-obvious interaction possibilities. Run the Sample223.html file to see the results and check out the notes in the example for more information. Example 1-23: Sample223.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 223 - CSS Example 1-23 White Space <STYLE TYPE="text/CSS"> <!-- </TITLE>
Slide 87: CHAPTER 1 — Style Sheets BLOCKQUOTE P DIV PRE --> </STYLE> </HEAD> <BODY> <BLOCKQUOTE> This is a blockquote with white space set to normal which is the default. { white-space: normal; font-size: 14pt; color: purple; } 67 { white-space: pre; font-size: 10pt; color: red; font-family: Courier; } { white-space: pre; font-size: 20pt; color: blue; } { white-space: pre; font-size: 22pt; color: green; } </BLOCKQUOTE> <P> This is a Paragraph with white space set to pre. It is boring with a small chart of Property Values. margin-top margin-right margin-bottom margin-left </P> length length length length | | | | percentage percentage percentage percentage em, em, em, em, ex, ex, ex, ex, px, px, px, px, pt, pt, pt, pt, pc, pc, pc, pc, in, in, in, in, mm, mm, mm, mm, cm cm cm cm | | | | % % % % <DIV> If you set the white-space Property to <B>pre</B> for the <B>Paragraph</B> Element it will automatically render the text in a <B>variable-width</B> font. If you want it to be in a <B>fixed-width</B> font like <B>Courier</B> you have to specify that with the font-family Property. The same thing is true for the Division Element. If you specify the <B>pre</B> Property for the <B>PRE</B> Element the opposite is true. It's a good idea to write and test the pre text with the same font family and size that it will be rendered at so you will know that the tabs will match up. <I><B>Tables are an infinitely more reliable way to display tabular data.</B></I> </DIV> <PRE> 1 6 11 16 </PRE> 2 7 12 17 3 8 13 18 4 9 14 19 5 10 15 20 </BODY> </HTML>
Slide 88: 68 Part I — D y n a m i c H T M L The { list-style-type: } Property The list-style-type Property is used to set the type of bullet or enumeration sequence that will be used for your <LI> LIST ITEM Elements. You might remember from prior HTML knowlege, or if you checked out Appendix A, that LISTS can contain a variety of data types from text and paragraphs to images and even other nested lists. They are used to enumerate and indent the LIST contents or embellish them with graphical bullets. If you want to get fancy, try a symbolic or dingbat font and see what turns up. With Styles you can change the markup or visual characteristics, such as the font colors or font names, for the items in your list if you want to really make them stand out. These are the nine possibilities for choosing a bullet or enumeration sequence for your Lists: disc square circle decimal upper-alpha lower-alpha upper-roman lower-roman none solid round bullet. Navigator's default value hollow square bullet with edge color hollow round bullet with edge color arabic numerals will vertically enumerate like this: uppercase letters will vertically enumerate like this: lowercase letters will vertically enumerate like this: uppercase roman numerals vertically enumerate: lowercase roman numerals vertically enumerate: no preceding bullet or enumeration sequence 1, 2, 3, 4, 5... A, B, C, D, E... a, b, c, d, e... I, II, III, IV, V... i, ii, iii, iv, v... CSS Syntax: { list-style-type: disc|square|circle|decimal|upper-roman| lower-roman|upper-alpha|lower-alpha|none; } In the following three Examples of 1-24, 1-24B, and 1-24C, there are a variety of implementations of the list-style-type Property. Example 1-24 focuses on using the disc bullet within an Unordered List. Example 1-24B focuses on the upper-roman numbering sequence in an Ordered List. Example 1-24C demonstrates a square bullet Style inside an Unordered List that is nested in the first List Item of an Ordered List which has a Value of a lower-alpha sequence in its list-style-type Property. You can also check out Example 1-41 for an advanced demonstration of using the list-style-type Property within Styles that use CONTEXTUAL SELECTION CRITERIA.
Slide 89: CHAPTER 1 — Style Sheets Example 1-24: Sample224.html 69 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 224 - CSS Example 1-24 <STYLE TYPE="text/CSS"> <!-LI H1 UL P --> </STYLE> </HEAD> <BODY> <H1>This is Sample 224</H1> { list-style-type: disc; color: red; } { float: center; } Lists </TITLE> { float: center; font-size: 24pt; color: green; text-transform: capitalize;} { color: purple; float: center; font-size: 14pt; } <P>The following Unordered list is floated Center.</P> <UL> <LI> <LI> <LI> <LI> <LI> </UL> </BODY> </HTML> item item item item item 1 2 3 4 5 Example 1-24B demonstrates two Ordered Lists containing the <LI> Element with a list-style-type Property specified in its Style.
Slide 90: 70 Example 1-24B: Part I — D y n a m i c H T M L Sample224B.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD><TITLE> Sample 224B - CSS Example 1-24B Lists</TITLE> <STYLE TYPE="text/CSS"> <!-H1 OL H2 --> </STYLE> </HEAD> <BODY> <H1>This is Sample 224B</H1> <OL> <LI> <LI> <LI> <LI> <LI> </OL> <H2> Gads, is this <OL> <LI> item 1 <LI> item 2 <LI> item 3 <LI> item 4 <LI> item 5 </OL> possible? nested nested nested nested nested in in in in in H2 H2 H2 H2 H2 item item item item item 1 2 3 4 5 { float: center; color: red; } { list-style-type: upper-roman; color: purple; font-size: 14pt; } { color: olive; font-size: 24pt; background-color: aqua;} </H2> </BODY> </HTML> Example 1-24C demonstrates nested <LI> Elements with a list-style-type Property specified in its Style.
Slide 91: CHAPTER 1 — Style Sheets Example 1-24C: Sample224C.html 71 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 224C - CSS Example 1-24C <STYLE TYPE="text/CSS"> <!-H1 OL UL --> </STYLE> </HEAD> <BODY> <H1>This is Sample 224C</H1> <OL> <LI>item 1 has <UL> <LI> <LI> <LI> <LI> <LI> </UL> <LI> item 2 <LI> item 3 <LI> item 4 <LI> item 5 <LI> item 6 <LI> item 7 </OL> </BODY> </HTML> a nested list item item item item item Alpha nested in LI Beta nested in LI Gamma nested in LI Delta nested in LI Epsilon nested in LI { float:center; color:red; } Nested Lists </TITLE> { list-style-type:lower-alpha; color:green; font-size:24pt; } { list-style-type:square; color:blue; font-size:17pt; }
Slide 92: 72 Part I — D y n a m i c H T M L Using Styles in the <STYLE> Element <STYLE> Element with CLASS of STYLE Up to this point, all of the theory and examples have applied a STYLE to an Element that would apply to all instances of that Element within a document; that is, every time that Element was used it would have that STYLE attached to it. By defining a STYLE in the Header STYLE SHEET definition that is named you create a CLASS of STYLE that can be used to apply a different Style to the same Element type each time that you use that particular Element type. Here's how it works: First, Define a named CLASS of STYLE and name it bigRed and attach it to the H3 Element with dot notation, like this: H3.bigRed { font-size: 30pt; color: red; } The order from left to right is: (Element) (.) (CLASS NAME) ({definition}). Next, in order to show that you can apply a different named CLASS of STYLE to the same Element type which in this case is H3, we define another named CLASS of STYLE and name it bigBlue and attach it to the H3 Element, like this: H3.bigBlue { font-size: 48pt; color: blue; } So now you have two different named CLASSes of STYLE that can all be applied to the H3 Element but not at the same time. Remember, you can apply only one Style per Element usage. Then go into the BODY section of the document and create two H3 heading Elements. <H3 CLASS="bigRed">This is Heading H3 with CLASS bigRed. <H3 CLASS="bigBlue">This is Heading H3 with CLASS bigBlue. </H3> </H3> That's all you have to do. The first H3 Heading, which has the bigRed CLASS applied to it, will have red text and a font size of 30 points. The second H3 Heading, which has the bigBlue CLASS applied to it, will have a font size of 48 points and will have blue text.
Slide 93: CHAPTER 1 — Style Sheets 73 With CLASS Styles, you define the Style just like any other STYLE, but you name it so you can reference it with an Element Attribute for inline usage. It's important to remember that in this example you are also attaching it to the H3 Element by using the dot notation so only that Element can use that CLASS; but this isn't required (see Sample 227). Be aware that when coding STYLEs like in the first H3 Style that has yellow text in the following example, that this regular Style will automatically apply to all H3 Elements in the document by default unless a CLASS of STYLE or another type of Style is explicitly called to override it from within the Body section or from fancy JavaScript. Now let's put all that theory, along with a third Style that applies to all H3 Elements in an example that has three different Styles applied to three different usages of the H3 Element: Example 1-25: Sample225.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 225 - Example 1-25 CLASS of STYLE</TITLE> <STYLE TYPE="text/CSS"> <!-H3 H3.bigRed H3.bigBlue --> </STYLE> </HEAD> <BODY BGCOLOR="black"> <H3>This is a regular H3 Heading with STYLE. <H3 CLASS="bigRed">This is Heading H3 with CLASS bigRed. <H3 CLASS="bigBlue">This is Heading H3 with CLASS bigBlue. </BODY> </HTML> </H3><HR> </H3><HR> </H3> { font-size: 14pt; color: yellow; } { font-size: 30pt; color: red; } { font-size: 48pt; color: blue; }
Slide 94: 74 Part I — D y n a m i c H T M L Naming your CLASS of STYLE Here's a similar example that uses named CLASS STYLES. You can name your CLASSes anything with alphanumeric characters but be aware that the names are always case-sensitive and the first Character in the name must be a letter or the underscore (_) Character, but not a number. After the first Character you can use numbers in the name. You can use uppercase or you can use lowercase letters names or a combination of the two. Just make sure that when you use the name that you type it in exactly the same way when you address it in the BODY section as when you declared it in the HEAD section. Example 1-26: Sample226.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 226 - Example 1-26 CLASS of STYLE</TITLE> <STYLE TYPE="text/CSS"> <!-H1.redHeading H1.blueHeading DIV { font-size: 40pt; color: red; } { font-size: 30pt; color: blue; } { font-size: 14pt; color: red; } DIV.purpleBorder { font-size: 19pt; width: 300px; color: purple; border-style: ridge; border-width: 20px; border-color: purple; } DIV.blueBorder --> </STYLE> </HEAD> <BODY> <H1 CLASS="redHeading">This is Sample 226</H1> <H1 CLASS="blueHeading">This has CLASS="blueHeading".</H1> <DIV>This Example is similar to Example 225.</DIV><BR><BR> <DIV CLASS="purpleBorder">This is a Division with CLASS="purpleBorder".</DIV> <DIV CLASS="blueBorder">This is a Division with CLASS="blueBorder".</DIV> </BODY> </HTML> { font-size: 24pt; width: 7in; color: blue; border-style: ridge; border-width: 20px; border-color: blue; }
Slide 95: CHAPTER 1 — Style Sheets 75 Defining a CLASS of STYLE without attaching it to an Element You can attach the same CLASS to more than one Element in either one of two ways. The first way is to define a named CLASS of STYLE without attaching it to an Element so that it has broader useability; then just put the NAME of the CLASS to the right of the dot(.) and omit the Element to the left like this: .unAttached1 { color: blue; font-size: 22pt; } Then you can assign the Style by name to the CLASS Attribute for any Element like this: <H1 CLASS="unAttached1"> The text to render </H1> See Example 1-29 on page 78. The Keyword all Now we introduce the Keyword all which is used to define a Style for all Elements at once. Here's an example: all.myCoolStyle { color: purple; background-color: black; } This defines a CLASS of STYLE that is then addressable, that is, assignable by all of your Elements in the whole document by using the CLASS Attribute. Typically you would use the all Keyword to define certain Properties that you want to use frequently for many Elements in your document and then fine tune your document with individual, named CLASSes of Styles for specific Elements like this: all.GLOBAL { color:black; font-size:14pt; margin:2em; } This is important: Just because you use the Keyword all does not mean that you don't have to still apply the Style with the CLASS Attribute to the Elements contained in the BODY section of the document. Remember that named CLASS Styles inherit Style Properties from their parent Elements just like regular STYLEs. Just to make sure there is no confusion, I'll hammer this home; the CLASS of STYLE is the Named Style in your Style Sheet Definition which is declared in the Header section of the document, and the is the way to assign that CLASS of STYLE, by Name, to an Element from within the Body section of the document. CLASS Attribute
Slide 96: 76 Example 1-27: Part I — D y n a m i c H T M L Sample227.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 227 - Example 1-27 CLASS of STYLE</TITLE> <STYLE TYPE="text/CSS"> <!-all.GLOBAL { color: black; background-color: white; margin: 2em; font-size: 14pt; font-family: Palatino, Clarendon, serif; text-indent: 40px; line-height: 200%; } { color: green; background-color: lime; padding: 15px; font-size: 24pt; font-family: Clarendon, serif; } { color: aqua; background-color: blue; padding: 20px; font-size: 24pt; font-family: Blackoak, serif; } { color: red; background-color: yellow; padding: 40px; font-size: 28pt; font-family: Moonlight, Clarendon, serif; line-height: 125%; } H1.greenSpeak H1.aquaSpeak A.fancyLink --> </STYLE> </HEAD> <BODY> <H1 CLASS="greenSpeak">This is Sample 227<BR> and has CLASS greenSpeak</H1> <H1 CLASS="aquaSpeak">This has CLASS aquaSpeak.</H1> <A CLASS="fancyLink" HREF="Sample226.html">This takes you to the last Sample 226</A> <P CLASS="GLOBAL">CHECK the Link and GLOBAL settings.</P> </BODY> </HTML> If you want to set default Properties for your entire document, then define a STYLE for the BODY Element because all of the Elements contained within the BODY Element will inherit those STYLE Properties. This is demonstrated in the following Example 1-28.
Slide 97: CHAPTER 1 — Style Sheets Example 1-28: Sample228.html 77 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 228 - Example 1-28 CLASS of STYLE</TITLE> <STYLE TYPE="text/CSS"> <!-BODY { color: aqua; background-color: gray; margin: 2em; font-size: 14pt; font-family: Palatino, Clarendon, serif; text-indent: 40px; line-height: 125%; } { color: green; background-color: lime; font-size: 24pt; font-family: Clarendon, serif; line-height: 125%; } { color: aqua; background-color: blue; font-size: 24pt; font-family: Blackoak, serif; line-height: 150%; } H1.greenSpeak H1.aquaSpeak --> </STYLE> </HEAD> <BODY> <P> This example shows STYLE inheritance from the parent BODY Element to the child Elements it contains. Notice that only the first two H1 Headings have a CLASS Style applied to them and all the other Elements inherit the STYLE from the BODY Element. Also notice the amount of space between the lines of text in this paragraph and that it's 125% bigger than the size of the font. Regarding the text-indent Property, you should remember that by definition only the first line of the first Element will be indented which in this case is this paragraph because it's the first item to occur in the BODY Element. </P> <H1 CLASS="greenSpeak"> This is Sample 228<BR> and has CLASS greenSpeak </H1> <H1 CLASS="aquaSpeak"> This has CLASS aquaSpeak. </H1> <H1> This Heading has STYLE inherited from the BODY Element. </H1> <A HREF="Sample227.html">This takes you to the last Sample 227 and also has STYLE inherited from the BODY Element.</A> </BODY> </HTML>
Slide 98: 78 Part I — D y n a m i c H T M L Attaching the same CLASS to more than one Element You can attach the same CLASS to more than one Element. When you want to do that you define a named CLASS of STYLE without attaching it to an Element so that it has broader useability; then just put the NAME of the CLASS to the right of the dot(.) and omit the Element to the left like this: .unAttached1 or like this: .meUnAttached2 { color: purple; font-size: 44pt; } { color: blue; font-size: 22pt; } This has exactly the same effect as in the previous example when the Keyword all was used to precede the dot(.) so take your choice. This example demonstrates how to create CLASSes of STYLE that can be applied to any Element by preceding the CLASS name with a dot(.) in the CLASS Definition but not preceding it with an Element name that would assign it to just that Element. Check out the text inside the <P> </P> Tags inside the example for more hints. Example 1-29: Sample229.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 229 - Example 1-29 CLASS of STYLE <STYLE TYPE="text/CSS"> <!-.navySpeak </TITLE> { color: navy; background-color: aqua; font-size: 15pt; font-family: Blackoak, serif; line-height: 150%; } { color: teal; background-color: blue; font-size: 22pt; font-family: Clarendon, serif; line-height: 125%; } { color: gray; background-color: yellow; font-size: 17pt; font-family: Helvetica, serif; line-height: 125%; } { color: red; background-color: silver; font-size: 30pt; font-family:"Brush Script", serif; line-height: 125%; } .tealSpeak .graySpeak .redSpeak --> </STYLE>
Slide 99: CHAPTER 1 — Style Sheets </HEAD> <BODY> <H1 CLASS="redSpeak">This is Sample 229 with CLASS redSpeak</H1> 79 <P CLASS="graySpeak">This example shows how to define CLASSES of STYLE that can be used by any Element simply by not assigning them to a specific Element. Notice that in the code the four CLASSES are each preceded by a dot(.) which is what makes them applicable to any Element. Remember that in previous examples the same thing was accomplished by preceding the dot with the keyword (all). They are functionally equivalent.</P> <P>Notice in the CLASS redSpeak that the font-family name of Brush Script is enclosed in quote marks because this is a special case where the font name is composed of two words instead of one.</P> <P>It is also reccomended that you use one of the generic font-family <B>families</B> like (<B>serif</B>) as the last resort font choice to enhance accurate display of your document.</P> <H1 CLASS="tealSpeak">This has CLASS tealSpeak.</H1> <H1 CLASS="navySpeak">This has CLASS navySpeak.</H1> <A CLASS="redSpeak" HREF="Sample228.html"> This takes you to the last Sample 228 and also has CLASS redSpeak.</A> </BODY> </HTML> Revisiting the Keyword all Let's revisit the Keyword all for a moment and look at another useful way to practically employ it. As was previously mentioned, it is used to make a CLASS of STYLE available for all Elements. You can use the Keyword all more than once in a Style Definition to define multiple CLASSes of Style that will be assignable to all Elements in your document. To do that just define a CLASS with dot notation and precede it by all and then repeat that for as many CLASSes as you want like this: all.firstClass { border-width-left: 10px; border-style: double; } all.deuxClass { border-width-right: 30px; border-style: groove; } all.thirdClass { border-width-bottom: 40px; border-style: ridge; } Example 1-30 demonstrates multiple usages of the Keyword all.
Slide 100: 80 Example 1-30: Part I — D y n a m i c H T M L Sample230.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD><TITLE> Sample 230 - Example 1-30 CLASS of STYLE</TITLE> <STYLE TYPE="text/CSS"> <!-all.classOne { border-bottom-width: 30px; border-left-width: 40px; border-style: groove; color: teal; background-color: blue; font-size: 15pt; font-family: Clarendon, serif; line-height: 125%; } { border-width: 20px; border-style: double; border-color: rgb(50%, 10%, 100%); background-color: rgb(100%, 90%, 15%); } { border-width: 25px; border-style: ridge; border-color: rgb(250, 120, 100); background-color: rgb(100, 90, 15); } { color: rgb(20, 10, 250); font-size: 32pt; margin: 20px; background-color: rgb(200, 0, 15); } { color: gray; background-color: yellow; font-size: 17pt; font-family: Times, serif; line-height: 125%; } all.classDeux all.class3 all.class4 .graySpeak --> </STYLE> </HEAD> <BODY> <H1 CLASS="classOne">This is Sample 230 with CLASS classOne</H1> <DIV CLASS="graySpeak">This example shows how to define CLASSes of STYLE that can be used by any Element simply by using the keyword <B>(all)</B> or by not assigning them to a specific Element like with CLASS graySpeak. It also demonstrates that you can repeat the use of the keyword <B>(all)</B> to define more than one CLASS of STYLE that will be available for <B>(all)</B> Elements.</DIV> <P CLASS="classDeux">This is a Paragraph Element with CLASS classDeux.</P> <BLOCKQUOTE CLASS="class3">This BLOCKQUOTE has CLASS class3 assigned to it. It is still reccomended that you use one of the generic font-family <B>families</B> like (<B>serif</B>) as the last resort font choice to enhance accurate display of your document.</BLOCKQUOTE> <H2 CLASS="graySpeak">This has CLASS graySpeak in a H2 Heading.</H2> <CENTER CLASS="classDeux">This has CLASS classDeux assigned to the CENTER Element. </CENTER>
Slide 101: CHAPTER 1 — Style Sheets 81 <A CLASS="class4" HREF="Sample229.html"> This Link does work and takes you to the last Sample 229 and also has CLASS class4.</A> <A CLASS="classOne" HREF="Sample229.html"> This Link <BLINK>doesn't</BLINK> work because there is a bug with Navigator so if you want your fancy links to work don't put them inside of a CLASS that has a border as part of the Style if you use the keyword <B>all</B> .</A> <BR><BR><BR> <TABLE BORDER="5" CELLPADDING="5" CELLSPACING="5" WIDTH="200"> <TR> <TH CLASS="graySpeak">WOW</TH> </TR> <TR> <TH CLASS="graySpeak">You can even assign a CLASS to a TH Element.</TH> </TR> </TABLE> </BODY> </HTML> Bordered Link workaround example It should be noted that officially CSS Syntax will not let you directly create fancy Links by any type of STYLE or CLASS of STYLE that has a border as part of the definition for the <A> Element. If you do so, the text will be rendered with the border and other Properties, but the LINK will be unfunctional. However, there is a workaround. Define a STYLE or CLASS of STYLE that has a border as part of its definition, then use that STYLE on an Element like the H1 Element but nest the Link (the <A> Element) inside that parent H1 Element with the border, and you will then have a Bordered Link. Example 1-31 demonstrates this workaround. It also demonstrates a nonworking Link when you try to attach a Style to the <A> Element directly. There is more information about the example in its source code. Notice that one Border only has two sides, which is done on purpose.
Slide 102: 82 Example 1-31: Part I — D y n a m i c H T M L Sample231.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE> Sample 231 - Example 1-31 Bordered Links <STYLE TYPE="text/CSS"> <!-H1.CLASSONE </TITLE> { border-bottom-width: 30px; border-left-width: 40px; border-style: groove; border-color: rgb(100%, 0%, 50%); color: teal; background-color: blue; font-size: 15pt; font-family: Clarendon, serif; line-height: 125%; } { border-width: 20px; border-style: double; border-color: rgb(50%, 10%, 100%); background-color: rgb(100%, 90%, 15%); } { color: aqua; background-color: gray; font-size: 17pt; font-family: Times, serif; line-height: 125%; text-indent: 40px; } .CLASSDEUX .GRAYTALK A.LINK2 { color: yellow; } --> </STYLE> </HEAD> <BODY> <H1 CLASS="CLASSONE"> <A HREF="Sample229.html"> This Link does work. Notice it's nested inside of a H1 Element. </H1> <H1 CLASS="CLASSONE"> <A CLASS="LINK2" HREF="Sample230.html"> This Link does work. Notice it's nested inside of a H1 Element. </H1> </A> <BR><BR><BR> </A> <BR><BR><BR> <A CLASS="CLASSDEUX" HREF="Sample230.html"> This Link <BLINK>doesn't</BLINK> work because there is a bug with Navigator so if you want your fancy links to work don't put them inside of a CLASS that has a border. Instead NEST it inside another Element with a border. </A> <P CLASS="GRAYTALK"> Notice that the first link has the regular link color from the preferences. If you want to change that then you have to change the foreground color with a style and apply it directly to the A Element like in the second link. The third link is to show you the pitfall to avoid. </P> <P CLASS="GRAYTALK"> Just a reminder if you think that the borders in around the top two H1 Headings aren't working properly, look at the code and you will notice that only the left and bottom border widths have been specified on purpose for a change of pace.</P> </BODY> </HTML>
Slide 103: CHAPTER 1 — Style Sheets 83 <STYLE> Element with ID Definition for CLASS Exceptions This is really cool and has a lot of practical use. Let's say you define a CLASS of STYLE that you want to use for a lot of Elements, but there are a few times when you want to change just one or a few things about that CLASS for certain situations. To do that you create a NAMED INDIVIDUAL STYLE, which can be referenced by the ID Attribute of most Elements. You create a NAMED INDIVIDUAL STYLE just like a CLASS of STYLE with the only difference being that you prefix it with a hashmark (#) like this: #REDEXCEPTION { color: red; } Now, in order for it to be an exception there has to be a CLASS of STYLE with the general parameters that it will follow. So you create a CLASS of STYLE and then a NAMED INDIVIDUAL STYLE like this: all.GREENTEXT { color: green; background-color: black; font-size: 20pt; } { color: red; } #REDEXCEPTION and then you might call these STYLEs like in the following example. In this example you should notice that first the Keyword all is used to specify that all of the Elements can use the CLASS GREENTEXT. Then if you look down at the H1 and DIV Elements, you see that the CLASS GREENTEXT is called for both of them, but the DIV Element also has its ID Attribute set to specify that the REDEXCEPTION Style is invoked to modify the GREENTEXT CLASS, causing the text to be red instead of green. Example 1-32: Sample232.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE> Sample 232 - Example 1-32 Named Individual Style </TITLE> <STYLE TYPE="text/CSS"> <!-all.GREENTEXT { color: green; background-color: black; font-size: 20pt; } #REDEXCEPTION --> </STYLE> </HEAD> { color: red; }
Slide 104: 84 Part I — D y n a m i c H T M L <BODY> <H1 CLASS="GREENTEXT"> This is Sample 232 with CLASS GREENTEXT</H1> <DIV CLASS="GREENTEXT" ID="REDEXCEPTION"> This DIVISION has a CLASS GREENTEXT Style and a Named Individual Style of REDEXCEPTION. You should notice that the background color stays black and the font size is still 20 points just like in the GREENTEXT CLASS and the only difference is the red text color which is specified in the REDEXCEPTION Style. </DIV> </BODY> </HTML> This example expands on the NAMED INDIVIDUAL STYLE Exceptions with some options on background images and text contrast caveats. Check out the effect where a P Element has been nested inside of a DIV Element when they both have background images in their Styles. Example 1-33: Sample233.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE> Sample 233 - Example 1-33 Named Individual Style <STYLE TYPE="text/CSS"> <!-all.RAINBOW </TITLE> { color: black; font-size: 15pt; text-indent: 45px; padding: 30px; float: center; text-align: center; background-image: url(./JPEG-FILES/ICON-HorizontalRainbow1.jpg); } { color: white; } { color: white; background-image: url(./JPEG-FILES/ICON-HorizontalRainbow4.jpg); } { color: lime; background-color: white; font-size: 14pt; margin-right: 2px; padding: 20px; float: center; text-align: center; background-image: url(./JPEG-FILES/icon-BG-stars.jpg); } #WHITETEXT #RAINBOW2 P.GENERAL --> </STYLE> </HEAD> <BODY> <H1 CLASS="RAINBOW">This is Sample 233 with CLASS RAINBOW</H1> <DIV CLASS="RAINBOW" ID="WHITETEXT"> This DIVISION has a CLASS RAINBOW Style and a Named Individual Style of WHITETEXT. You should notice that the only difference is the text color which is specified in the WHITETEXT Style.</DIV>
Slide 105: CHAPTER 1 — Style Sheets 85 <DIV CLASS="RAINBOW" ID="RAINBOW2"> <P CLASS="GENERAL"> This example shows some of the ways to use NAMED INDIVIDUAL STYLES. You should notice that the text is difficult to read in some of the examples and you might want to avoid this effect. </P></DIV> <BLOCKQUOTE CLASS="RAINBOW" ID="RAINBOW2"> This BLOCKQUOTE has a CLASS RAINBOW Style and a Named Individual Style of RAINBOW2. You should notice that the only differences are the text color and the background image which is specified in the RAINBOW2 Style.</BLOCKQUOTE> </BODY> </HTML> Styles and Tables Here's a TABLE example that uses regular Styles that are attached to the TH and TD Elements, a CLASS of STYLE named GENERAL that is available to all Elements, and two NAMED INDIVIDUAL STYLEs called LARGERTEXT and RAINBOW2. They are primarily intended to show how you can use multiple images for your backgrounds within a Table Cell for interesting effects and to demonstrate the ID Exceptions. Example 1-34: Sample234.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE> Sample 234 - Example 1-34 Named Individual Style</TITLE> <STYLE TYPE="text/CSS"> <!-TH TD { color: yellow; font-size: 44pt; background-color: blue; } { color: white; font-size: 34pt; background-image: url(./JPEG-FILES/ICON-HorizontalRainbow4.jpg); } { font-size: 40pt; } { color: white; background-image: url(./JPEG-FILES/ICON-HorizontalRainbow2.jpg); } { color: lime; font-size: 34pt; padding: 5px; float: center; text-align: center; background-image: url(./JPEG-FILES/icon-BG-stars.jpg); } #LARGERTEXT #RAINBOW2 .GENERAL --> </STYLE> </HEAD>
Slide 106: 86 <BODY BGCOLOR="GRAY"> Part I — D y n a m i c H T M L <H1 CLASS="GENERAL">This is Sample 234</H1> <TABLE BORDER="15" CELLPADDING="5" CELLSPACING="5" WIDTH="500"> <TR> <TH> 1 </TH> <TH> 2 </TH> <TH> 3 </TH> <TH> 4 </TH> <TH> 5 </TH> </TR> <TR> <TD> 6 </TD> <TD> 7 </TD> <TD> 8 </TD> <TD> 9 </TD> <TD> 10 </TD> </TR> </TABLE> <TABLE BORDER="15" CELLPADDING="5" CELLSPACING="5" WIDTH="500" BORDERCOLOR="RED"> <TR> <TH> <BLOCKQUOTE CLASS="GENERAL" ID="RAINBOW2"> Sing me. </BLOCKQUOTE> </TH> <TH> 2 </TH> </TR> <TR> <TD> <DIV CLASS="GENERAL" ID="LARGERTEXT"> Sing Me Again </DIV> </TD> <TD> 4 </TD> </TR> </TABLE> </BODY> </HTML> As you experiment on your own with TABLEs, be aware that there are definitely limitations with what Style Properties Navigator will let you apply to them. For instance, you cannot directly apply a STYLE or CLASS with a background-image Property to a TR or TH Element, but you can to a TD. If you're sneaky like in the last example and put a CLASS with a background-image Propery inside of a BLOCKQUOTE and then put the BLOCKQUOTE inside the TH Element, you can work around the limitation. If you go back and look at the last example in a browser, it's the CELL that says "Sing Me.".
Slide 107: CHAPTER 1 — Style Sheets 87 Here are some other limitations and situations to avoid when using STYLEs with TABLEs: • TH Elements can have their own STYLE or CLASS or ID as long as there is no background-image Property in the STYLE definition. See Example 1-35. TD Elements can have their own STYLE or CLASS or ID which can include a background-image Property in the STYLE definition. See Example 1-35 and 1-36. TR Elements cannot have their own STYLE or CLASS or ID. See Example 1-37. If you assign a STYLE to all TD Elements in the Style Sheet Definition and then apply a CLASS to an individual TD, the TD will inherit the original STYLE plus any changes that occur from the CLASS. See Example 1-38. • • • This example demonstrates how TH Elements can have their own STYLE or CLASS or ID as long as there is no background-image Property in the STYLE definition. It shows that you get blank cells when you do try to put a background-image Property into a TH, and it shows successful implementation into TD cells. The TABLE has 3 rows where the first two rows have TH cells and the last row is all TD cells. These next three examples are all very similar so you can focus on the subtleties of inheritance and caveats to avoid. Example 1-35: Sample235.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD><TITLE> Sample 235 - Example 1-35 Table Style Caveats 1 <STYLE TYPE="text/CSS"> <!-TH all.BLUETEXT all.GENERAL </TITLE> { color: red; font-size: 44pt; background-color: black; } { color: blue; font-size: 34pt; background-color: aqua; } { color: lime; font-size: 34pt; padding: 5px; float: center; text-align: center; background-image: url(./JPEG-FILES/icon-BG-stars.jpg); } { color: white; font-size: 74pt; background-image: url(./JPEG-FILES/ICON-HorizontalRainbow1.jpg); } { color: yellow; font-size: 64pt; background-color: blue; } { color: black; font-size: 44pt; background-image: url(./JPEG-FILES/ICON-HorizontalRainbow4.jpg); } { color: white; font-size: 14pt; text-indent: 45px;} all.RAINBOW1 #YELLOWTEXT #RAINBOW4 P
Slide 108: 88 --> </STYLE> </HEAD> <BODY BGCOLOR="GRAY"> Part I — D y n a m i c H T M L <H1 CLASS="GENERAL">This is Sample 235</H1> <TABLE BORDER="15" CELLPADDING="5" CELLSPACING="5" WIDTH="500"> <TR> <TH> <TH> <TH CLASS="BLUETEXT"> <TH> <TH CLASS="BLUETEXT" ID="YELLOWTEXT"> </TR> <TR> <TH CLASS="GENERAL"> <TH CLASS="RAINBOW1"> <TH CLASS="RAINBOW1" ID="YELLOWTEXT"> <TH CLASS="RAINBOW1" ID="RAINBOW4"> <TH CLASS="GENERAL" ID="YELLOWTEXT"> </TR> <TR> <TD CLASS="GENERAL"> <TD CLASS="RAINBOW1"> <TD CLASS="RAINBOW1" ID="YELLOWTEXT"> <TD CLASS="RAINBOW1" ID="RAINBOW4"> <TD CLASS="GENERAL" ID="YELLOWTEXT"> </TR> </TABLE> <P> The first row shows that TH cells correctly implement the STYLE assigned to the TH Element for cells 1,2 and 4. The CLASS BLUETEXT in cell 3 and ID YELLOWTEXT in cell 5 all work correctly also. </P> <P> The second row shows that TH cells DON'T correctly implement the CLASS or ID Attributes because there are background images contained in their Style Definitions. </P> <P> The third row has exactly the same CLASSes and IDs as row two but the cells are TD cells which can handle background images effectively. If you study the code you can see the inheritence and exceptions. </P> </BODY> </HTML> 1 2 3 4 5 </TH> </TH> </TH> </TH> </TH> 6 7 8 9 10 </TH> </TH> </TH> </TH> </TH> 11 12 13 14 15 </TD> </TD> </TD> </TD> </TD>
Slide 109: CHAPTER 1 — Style Sheets 89 This example focuses mainly on the TD Elements, which can have their own STYLE or CLASS or ID, which can include a background-image Property in the STYLE definition. It also demonstrates how the Exceptions of ID Styles operate in relation to inheriting Properties from a CLASS. Hopefully you are viewing the SAMPLE HTML files in Navigator that go along with the example code in the book. A visual really is worth that thousand words. There are a lot of details about the example within the <P> Elements in the code of the example. In case you jumped in at the middle of the book and don't know: All of the book examples have a corresponding sample HTML file on the CD-ROM so you can see the results in a browser. They are located in the folder named DHTML-JS_BOOK-Main_Files. The name of the sample file is always listed to the right of the example number like Sample236.html below. Example 1-36: Sample236.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD><TITLE> Sample 236 - Example 1-36 Table Style Caveats 2</TITLE> <STYLE TYPE="text/CSS"> <!-TD all.BLUETEXT all.GENERAL { color: red; font-size: 44pt; background-color: black; } { color: blue; font-size: 34pt; background-color: aqua; } { color: lime; font-size: 34pt; padding: 5px; float: center; text-align: center; background-image: url(./JPEG-FILES/icon-BG-stars.jpg); } { color: white; font-size: 74pt; background-image: url(./JPEG-FILES/ICON-HorizontalRainbow1.jpg); } { color: yellow; font-size: 64pt; background-color: blue; } { color: black; font-size: 44pt; background-image: url(./JPEG-FILES/ICON-HorizontalRainbow4.jpg); } { color: black; font-size: 14pt; text-indent: 45px;} { color: green; } { color: fuchsia; } all.RAINBOW1 #YELLOWTEXT #RAINBOW4 P #GREENTEXT #FUCHSIATEXT --> </STYLE></HEAD> <BODY BGCOLOR="GRAY"> <H1 CLASS="GENERAL">This is Sample 236</H1>
Slide 110: 90 Part I — D y n a m i c H T M L <TABLE BORDER="15" CELLPADDING="5" CELLSPACING="5" WIDTH="500"> <TR> <TD> <TD CLASS="BLUETEXT"> <TD CLASS="BLUETEXT" ID="YELLOWTEXT"> <TD CLASS="BLUETEXT" ID="GREENTEXT"> <TD CLASS="BLUETEXT" ID="RAINBOW4"> </TR> <TR> <TD CLASS="GENERAL"> <TD CLASS="GENERAL" ID="YELLOWTEXT"> <TD CLASS="RAINBOW1" ID="GREENTEXT"> <TD CLASS="RAINBOW1" ID="RAINBOW4"> <TD CLASS="RAINBOW1" ID="FUCHSIATEXT"> </TR> </TABLE> <P> The first cell gets the STYLE that's attached to all TD cells which is the first Style in the code. All of the other 9 cells have overriding CLASSes and IDs attached to them. Cells 2 through 5 have CLASS BLUETEXT which makes them have 34 point blue text on an aqua background but Cell 3 overrides the CLASS BLUETEXT because it has ID YELLOWTEXT which changes the text to 64 point yellow on a blue background. Cell 4 has ID GREENTEXT which changes only the color of the text to green and the rest of the CLASS BLUETEXT is intact. Cell 5 has ID RAINBOW4 which changes the text to 44 point black and adds a background image. </P> <P> In the second row Cell 6 has CLASS GENERAL. Cell 7 overrides some of the CLASS GENERAL with ID YELLOWTEXT which causes the text to be 64 point yellow. Notice that the background color of blue does not show because the background image of CLASS GENERAL has precedence. In Cell 8 the ID GREENTEXT only changes the color of the text to green and keeps all of CLASS RAINBOW1's other Properites intact. In Cell 9 the background image of ID RAINBOW4 overrides the background image of CLASS RAINBOW1 and the text is changed to black 44 point. In Cell 10 ID FUCHSIATEXT only overrides the text color from white to fuchsia so the rest of the CLASS RAINBOW1 is implemented. </P> </BODY> </HTML> 1 2 3 4 5 </TD> </TD> </TD> </TD> </TD> 6 7 8 9 10 </TD> </TD> </TD> </TD> </TD> Example 1-37 focuses on the fact that, practically speaking, you cannot assign a CLASS of STYLE to a TABLE ROW (TR) Element. It shows what happens when you do, that the background color of the CLASS does get implemented but nothing else. If you have a situation where background color is all you need, then go ahead, but the TH or TD Elements would be more useful.
Slide 111: CHAPTER 1 — Style Sheets Example 1-37: Sample237.html 91 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 237 - Example 1-37 Table Style Caveats 3</TITLE> <STYLE TYPE="text/CSS"> <!-all.OLIVETEXT all.REDTEXT all.BLUETEXT P --> </STYLE> </HEAD> <BODY BGCOLOR="GRAY"> <H1 CLASS="REDTEXT">This is Sample 237</H1> <TABLE BORDER="15" CELLPADDING="5" CELLSPACING="5" WIDTH="500"> <TR CLASS="OLIVETEXT"> <TH> <TH> <TH CLASS="REDTEXT"> <TH> <TH CLASS="BLUETEXT"> </TR> </TABLE> <P> Notice that TH Cells with 1,2 and 4 inherit the background color of white from the OLIVETEXT CLASS but not the text color or font size. Realistically this severely limits the usefulness of a CLASS for a TR. </P> <P> However the CLASSes in the TH Cells of 3 and 5 work just fine. Remember that if you want to use a background image in a TH you have to nest it inside another Element like a BLOCKQUOTE or CITE Element. Use an Element that you won't need for anything else. The TD Element does not have this limitation so you can include a background image Property directly in its CLASS. </P> </BODY> </HTML> { color: olive; font-size: 24pt; background-color: white; } { color: red; font-size: 54pt; background-color: black; } { color: blue; font-size: 74pt; background-color: aqua; } { color: black; font-size: 14pt; text-indent: 45px;} 1 2 3 4 5 </TH> </TH> </TH> </TH> </TH>
Slide 112: 92 Part I — D y n a m i c H T M L This example assigns one Style to all TH Elements and another Style to all TD Elements in the STYLE Sheet definition and then applies a CLASS to individual TH and TD cells, causing the TH and TD cells to inherit the original Style plus any changes that occur from the CLASS. This is similar to the way that IDs work, but instead it uses the inheritance of child TH and TD cells from a parent TABLE Element to accomplish the task. Example 1-38: Sample238.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 238 - Example 1-38 Tricksie Table Style Inheritance</TITLE> <STYLE TYPE="text/CSS"> <!-TH TD { color: red; } { color: blue; font-size: 20pt; text-decoration: line-through; font-style: italic; font-family: Helvetica; background-color: lime; } { font-size: 54pt; } { background-color: aqua; } { text-indent: 45px; } { text-transform: uppercase; } { color: black; font-size: 14pt; text-indent: 45px;} all.FONT54 all.AQUABACK all.TEXTINDENT45 all.TTRANSUP P --> </STYLE> </HEAD> <BODY BGCOLOR="SILVER"> <H1 CLASS="FONT54">This is Sample 238</H1> <TABLE BORDER="15" CELLPADDING="5" CELLSPACING="5" WIDTH="600"> <TR> <TH> <TH CLASS="FONT54"> <TH CLASS="AQUABACK"> <TH CLASS="TEXTINDENT45"> <TH CLASS="TTRANSUP"> </TR> 1 2 3 indented 4 uppercase 5 </TH> </TH> </TH> </TH> </TH>
Slide 113: CHAPTER 1 — Style Sheets <TR> <TD> <TD CLASS="FONT54"> <TD CLASS="AQUABACK"> <TD CLASS="TEXTINDENT45"> <TD CLASS="TTRANSUP"> </TR> </TABLE> 6 7 8 indented 9 uppercase 10 </TD> </TD> </TD> </TD> </TD> 93 <P> In the first row you have TH cells that have a STYLE applied directly to all of them in the Style Definition which is demonstrated in cell 1. Then each of the remaining cells in the first row have a different CLASS of STYLE addressed to it which makes a minor change to it but the original text color of red is still applied to all TH cells. </P> <P> In the second row there are TD cells that have a STYLE applied to all of them that has a lot of Properties in it which are only changed if a CLASS of STYLE has a Property that explicitly overrides the global settings. For instance the font size in cell 7 is changed to 54 point but the rest of the Properties from the TD STYLE remain intact. </P> </BODY> </HTML> <STYLE> Element with CONTEXTUAL SELECTION CRITERIA OK, so it looks ominous and it's just slightly tricky to explain, but it's really easy once you see it demonstrated, and it's a really powerful technique that you will use a lot for precise creative control. Way back in the beginning of this section of the book, this concept was defined, and I'll repeat it here as a refresher: This is a special way to apply Styles that is called CONTEXTUAL APPLICATION, or you could say it's implemented by specifying CONTEXTUAL SELECTION CRITERIA. When you have sequential Elements in your Style definition or, put another way, one Element followed by another Element, then that Style will only be applied when the Element appears in that order in the BODY of the document; that is, the Element must be precisely nested. When you want to apply a Style to a particular Element when that Element is only inside of another Element or Elements, this is called a STYLE with CONTEXTUAL SELECTION CRITERIA because the Style gets applied only when the Element is nested in the context of another Element. The criteria aspect is the actual order of the nested Elements, which you specify in the STYLE definition. Let's say that you want to create a STRONG Element that has purple text, but only when it's inside a CENTER Element, and when it's not inside a CENTER Element it will be red. First you define a Style for the STRONG Element that applies to it each time it occurs like this: STRONG { color: red; }
Slide 114: 94 CENTER STRONG Part I — D y n a m i c H T M L Then you define a Style that is applied to a STRONG Element only when it occurs inside a CENTER Element like this: { color: purple; } The reason this works is because a CONTEXTUAL Style always has precedence over a regular Style, so the color purple overrides the color red. Remember to separate the Elements with a space or a tab but not a comma. Let's put that together in an example like so: Example 1-39: Sample239.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 239 - CSS Example 1-39 Contextual Selection Criteria</TITLE> <STYLE TYPE="text/CSS"> <!-STRONG CENTER STRONG --> </STYLE> </HEAD> <BODY> <H1>This is Sample 239</H1> <STRONG> This is an Element with Strong Emphasis. It's red and bold. </STRONG><BR><BR> <CENTER> <STRONG> This is an Element with Strong Emphasis that's contained within a Center Element therefore it's purple and centered and bold. </STRONG> </CENTER> </BODY> </HTML> { color: red; } { color: purple; }
Slide 115: CHAPTER 1 — Style Sheets 95 Example 1-40 focuses on Elements that are nested inside one or more other Elements. Example 1-41 demonstrates nested List Elements with CONTEXTUAL Styles and has an indepth explanation on page 97 after the example code. Example 1-40: Sample240.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 240 - CSS Example 1-40 Contextual Selection Criteria <STYLE TYPE="text/CSS"> <!-H4 DIV H4 CITE DIV H4 { color: green; font-size: 40pt; } { color: navy; font-size: 30pt; } { color: fuchsia; font-size: 24pt; font-family:"Brush Script", cursive; } </TITLE> --> </STYLE> </HEAD> <BODY> <H4> This is Sample 240. It's green and has 40 point text. </H4> <BR><BR> <DIV><H4> This is an H4 Element nested inside a Division Element that is 30 point navy. </H4></DIV> <BR><BR> <CITE><DIV><H4> This is an H4 Element nested inside a Division Element which is then inside of a Citation Element therefore it is fuchsia, sized at 24 point and is in the Brush Script font-family. </H4></DIV></CITE> </BODY> </HTML>
Slide 116: 96 Example 1-41: Part I — D y n a m i c H T M L Sample241.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE>Sample 241 - CSS Example 1-41 Advanced Lists & Contextual Selection</TITLE> <STYLE TYPE="text/CSS"> <!-H1 { float: center; color: red; } B DIV PRE B UL LI DIV UL LI PRE UL LI --> </STYLE> </HEAD> { color: blue; font-size: 17pt; } { color: purple; font-size: 17pt; } { color: green; font-size: 17pt; } { list-style-type: disc; color: red; } { list-style-type: circle; color: blue; } { list-style-type: square; color: navy; } <BODY> <H1>This is Sample 241</H1> <B> <UL> <LI> item 1 <LI> item 2 <LI> item 3 <LI> item 4 <LI> item 5 </UL> </B> <DIV> <UL> <LI> item A <LI> item B <LI> item C <LI> item D <LI> item E </UL> </DIV> <PRE> <UL> <LI> item i <LI> item ii <LI> item iii <LI> item iv <LI> item v </UL> </PRE> </BODY> </HTML>
Slide 117: CHAPTER 1 — Style Sheets 97 The previous Example 1-41 focuses on creating several LISTS that each have their own bullet type and have bullet colors that are different from the text within the list. First you assign STYLES to the three Elements that will each contain a LIST. Then you use CONTEXTUAL SELECTION CRITERIA to assign a STYLE to a LI Element that is contained within both a UL Element and a parent Element like DIV in this example. The list-style-type Property is set to a Value of circle for the LI Elements that are contained inside the DIV Element and so that the UL Element and the LI Elements will have a different Value when they are inside of the other parent Elements of B and PRE. The explanation for Example 1-42 follows the code below. Example 1-42: Sample242.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 242 - CSS Example 1-42 Contextual Selection Criteria</TITLE> <STYLE TYPE="text/CSS"> <!-CITE DIV { color: red; font-size: 20pt; background-color: yellow; } { color: navy; font-size: 30pt; background-color: aqua; text-decoration: line-through; font-family: Helvetica; } { color: green; font-size: 40pt; } { color: fuchsia; font-size: 24pt; font-family: cursive; text-decoration: none; } H4 CITE DIV H4 --> </STYLE> </HEAD> <BODY> <H4> This is Sample 242. </H4> <CITE> This is the CITE part. <DIV> This is the DIVISION part. <H4> This is an H4 Element nested inside a Division Element which is then inside of a Citation Element therefore it is fuchsia, sized at 24 point and is in a generic cursive font-family. Notice how it inherits the aqua background-color from the DIV Element but the text-decoration Property of line-through has been overridden and set to none. </H4> </DIV> </CITE> </BODY> </HTML>
Slide 118: 98 Part I — D y n a m i c H T M L Inheritance issues for CONTEXTUAL STYLEs Example 1-42 demonstrates what happens if you create nested Elements with CONTEXTUAL APPLICATION of a Style where the nested Elements are not terminated by an End Tag before another Element is begun. If you look at the Elements in the BODY of the document, you will see that the sentence, "This is the CITE part." is not followed immediately by a CITE End Tag; therefore, the Properties of the Style that are assigned to the CITE Element will continue to be applied to the DIV and H4 Elements, except where they are explicitly overridden with Properties assigned to the DIV and H4 Elements, respectively. This demonstrates Inheritance of Properties from one Element nested inside of another. Siblings, Ancestors and other relations Here are some terms you need to know before we go on. Ancestor Parent Descendant Child Sibling is an Element that contains one or more Elements. is an Element that contains one or more Elements (same as Ancestor). is an Element contained by another Element. is an Element contained by another Element (same as Descendant). is another Child Element contained in the same Parent Element. Nesting and Inheritance Child, Sibling and Descendant Elements can be deeply nested and inheritance of Property Values will still carry through. Contextual Selectors When you refer to a Style that has a CONTEXTUAL SELECTOR, it's the same as saying that it has CONTEXTUAL SELECTION CRITERIA. This is not a new concept, just a different term to use to make it easier to discuss in the following examples. Just like before in the most recent mini-example that demonstrated a Style with CONTEXTUAL SELECTION CRITERIA, this is an example of a Style that contains a CONTEXTUAL SELECTOR that applies only to CITE Elements that are nested inside H4 Elements: H4 CITE { color: green; font-size: 40pt; }
Slide 119: CHAPTER 1 — Style Sheets 99 CONTEXTUAL SELECTION with CLASSes of STYLE and NAMED INDIVIDUAL STYLEs Now, CONTEXTUAL SELECTORS can be assigned so that they also include CLASSes of STYLE and NAMED INDIVIDUAL STYLEs in addition to the regular assigned STYLEs that have been demonstrated so far. Mini-Examples: Here are four quick mini-examples, followed by explanations: all.BLUETEXT .redText DIV.greenText #PurpleBack CITE PRE H2 H5 { { { { color:blue; text-transform:capitalize; } color:red; font-weight:bold; font-size:20pt; } font-size:14pt;} color:aqua; } Mini-Examples Explained: In the first of those mini-examples the text would be blue and capitalized for all of the CITE Elements that also had a CLASS of BLUETEXT addressed to it. See Example 1-43. In the second, all PRE Elements would have bold 20 point red text that also had a CLASS of redText addressed to it. See Example 1-44. In the third, all H2 Elements would have 14 point text that are contained within an ancestor that is a DIV Element that has a greenText CLASS addressed to it. If the CLASS greenText actually specifies the text to be green like in Example 1-45, then the H2 Element would indeed have green text but not green eggs and ham even though Smeagol smells it. In the fourth, all H5 Elements would have aqua text that are a descendant of any Element that has an ID of PurpleBack addressed to it. See Example 1-46. The next four examples will take one of each of these four mini-examples and demonstrate it fully. The examples will procede in the same order as the mini-examples. Example 1-43 focuses on the CONTEXTUAL SELECTOR of all.BLUETEXT CITE, and it uses several instances of Styles created for the CITE Element when it is used in the context of various Elements.
Slide 120: 100 Example 1-43: Part I — D y n a m i c H T M L Sample243.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE>Sample 243 - CSS Example 1-43 Contextual Selection Criteria</TITLE> <STYLE TYPE="text/CSS"> <!-CITE .BLUETEXT all.BLUETEXT H4 H5 --> </STYLE> </HEAD> <BODY> <H4> This is Sample 243. </H4> CITE { color: red; font-size: 20pt; background-color: yellow; } { color: blue; } { color: blue; text-transform: capitalize; } { color: green; font-size: 40pt; } { font-family: Moonlight, Helvetica; } <CITE> This is a regular CITE. </CITE> <BR><BR> <DIV CLASS="BLUETEXT"> This is the DIVISION part with blue text. <CITE> This is a CITE Element nested inside a Division Element which has captialized blue text because it overrides the color red, but retains the rest of the 20 point text and yellow background Properties of the simple Selector CITE Style. </CITE> </DIV> <BR><BR> <H5><CITE> This is a CITE inside of a H5 Heading. Notice that the font is either Moonlight if it was available or Helvetica because it was inherited and not overriden by the CITE Element. </CITE></H5> </BODY> </HTML> Example 1-44 expands on the second mini-example from page 99 in the section on CONTEXTUAL SELECTORs. See the notes in the example code for more information.
Slide 121: CHAPTER 1 — Style Sheets Example 1-44: Sample244.html 101 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 244 - CSS Example 1-44 Contextual Selection Criteria</TITLE> <STYLE TYPE="text/CSS"> <!-PRE .redText .redText .BLUECAPS .BLUECAPS H4 --> </STYLE> </HEAD> <BODY> <H4> <PRE> This is Sample 244. This is a regular PRE. </H4> </PRE> <BR><BR> <HR> <HR> PRE PRE { font-family: Courier, monospace; white-space: normal; } { color: red; } { color: red; font-weight: bold; font-size: 20pt; } { color: blue; text-transform: capitalize; } { color: blue; font-size: 24pt; } { color: green; font-size: 30pt; } <DIV CLASS="redText"> This is the DIVISION part with red text. <PRE> This is a PRE Element nested inside a Division Element with a CLASS of 'redText' so the CONTEXTUAL STYLE gives it a bold size of 20 point red text. It also is specified to have white-space set to normal, that is collapsed. </PRE> </DIV> <BR><BR> <HR> <H4 CLASS="BLUECAPS">This is the H4 part with 30 point blue capitalization. <PRE> This is a PRE inside of a H5 Heading. notice that the text is not capitalized because capitalization was not inherited by the PRE Element but the text is sized at 24 points. Also notice that the text color is not green or 40 points because the H4 simple Selector is not used because the CLASS BLUECAPS is addressed. </PRE> </H4> <HR> </BODY> </HTML>
Slide 122: 102 Part I — D y n a m i c H T M L Example 1-45 focuses on mini-example 3 from page 99. The font size of 14 is only applied to H2 Headings that are nested inside of DIV Elements that also have the greenText CLASS of STYLE applied to it. Example 1-45: Sample245.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 245 - CSS Example 1-45 Contextual Selection Criteria</TITLE> <STYLE TYPE="text/CSS"> <!-.greenText DIV.greenText H4 --> </STYLE> </HEAD> <BODY> <H4> <H2> This is Sample 245. This is a regular H2. </H2> </H4> <BR><BR> <HR> <HR> H2 { color: green; } { font-size: 20pt; } { color: blue; font-size: 30pt; } <DIV CLASS="greenText"> This is the DIVISION part with green text from CLASS 'greenText'. <H2> This is a H2 Element nested inside a Division Element with a CLASS of 'greenText' so the CONTEXTUAL STYLE gives it a size of 20 point with inherited green text. </H2> </DIV> </BODY> </HTML> Example 1-46 focuses on mini-example 4 of page 99 and points out a deficiency in the ability of Elements to inherit certain Properties in Navigator. It shows two ways of using CONTEXTUAL SELECTION, including the long-hand referencing of CLASSes of STYLE and NAMED INDIVIDUAL STYLEs. See the comments and notes in the example and notice that you can use both short-hand and long-hand referencing.
Slide 123: CHAPTER 1 — Style Sheets Example 1-46: Sample246.html 103 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 246 - CSS Example 1-46 Contextual Selection Criteria</TITLE> <STYLE TYPE="text/CSS"> <!-DIV.indent100 #PurpleBack #PurpleBack /* H5 { text-indent: 100px; font-size: 20pt; font-style: italic; } { background-color: purple; } { color: aqua; } Technically you would only have to write the following Style: DIV.indent100.#PurpleBack H2 like this: #PurpleBack H2 but the long hand version shows the actual sequence better. */ DIV.indent100.#PurpleBack H4 --> </STYLE> </HEAD> <BODY> <H4> <H5> This is Sample 246. This is a regular H5. </H5> </H4> <HR> H2 { color: yellow; } { color: blue; font-size: 30pt; } <BR><BR><HR> <DIV CLASS="indent100" ID="PurpleBack"> This is the DIVISION part with 20 point indented text of 100 pixels from CLASS 'indent100' and a purple background color from ID 'PurpleBack'. <H5> This is a H5 Element nested inside a Division Element with a CLASS of 'indent100' and an ID of 'PurpleBack' so the CONTEXTUAL STYLE gives it aqua text on a purple background and it inherits text that has a size of 20 points. <BR> The reason that the text-indent Property and font-style Properties are not inherited is because Navigator is not sophisticated enough yet. </H5> <H2> This is a H2 Test Heading that has this "DIV.indent100.#PurpleBack H2 { color: yellow; }" CONTEXTUAL STYLE applied. <BR> <BR> </H2> </DIV> </BODY> </HTML>
Slide 124: 104 Part I — D y n a m i c H T M L More Style Uses The STYLE Attribute The STYLE Attribute is used to apply a Style directly to an Element in the BODY of the document in an on-the-fly fashion. It's mainly used when you have a Style that you need to use only once or twice. Just so there isn't any confusion, the STYLE Attribute works just like other Attributes of an Element, except that instead of specifying a VALUE within the quote marks, you specify one or more Property NAME: VALUE; Pairs between the double quotes. There is a complete list of all the Elements that the Style Attribute can be used with on page 15. Here are a few mini-examples: <FORM <CITE <H1 <TD <DIV <BODY <A STYLE="float:center; font-size:14pt;"> STYLE="color:olive; font-size:12pt;"> STYLE="border-style:ridge; color:yellow; border-width:25px;"> STYLE="background-color:blue; color:white; font-size:15pt;"> STYLE="text-indent:50px; font-size:13pt;"> STYLE="margin:20px; font-size:14pt;"> STYLE="color:red; font-weight:bold;"> Syntax: <ELEMENT *** </ELEMENT> STYLE="PropertyNAME: VALUE; PropertyNAME: VALUE; ..."> Several usages of the STYLE Attribute within different Elements are demonstrated in this example. Note that the STYLE Element is not used at all in the HEAD of the page. The STYLE Attribute implements the Style on a local Element-by-Element basis. Example 1-47: Sample247.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML><HEAD> <TITLE>Sample 247 - CSS Example 1-47 Style as Attribute</TITLE> </HEAD> <BODY STYLE="margin: 20px; font-size: 19pt; border-style: ridge; border-width: 25px; border-color: aqua; color: purple;">
Slide 125: CHAPTER 1 — Style Sheets 105 <P> Just a regular paragraph. Notice that there is no STYLE Element Style Sheet in the Header. Also notice that this paragraph did not inherit the font-size of 19 pt or the text color of purple from the BODY Element. </P> <CITE STYLE="color: olive; font-size: 22pt;"> The Citation </CITE> <H1 STYLE="border-style: ridge; color: blue; border-width: 25px;"> <BR> The H1. <BR><BR> </H1> <DIV STYLE="text-indent: 50px; font-size: 29pt;"> The Division. </DIV> <A STYLE="color: red; font-weight: bold;" HREF="Sample248.html"> The Link to the next Sample 248. </A> </BODY> </HTML> <BR><BR> The <SPAN> Element The <SPAN> Element has a different methodology of applying Style than any of the techniques we've used so far and the purpose differs in that it is used to create a Style for a chunk of content itself, instead of for an Element that controls a chunk of content. When you use the SPAN Element, the Style will only be applied to the content between its Start and End Tags. The SPAN Element requires both Start and End Tags. You use the SPAN Element with only the STYLE Attribute or it can include CLASSes of STYLE that may or may not have ID Exceptions. Using the STYLE Attribute within the SPAN Element is a very quick way of applying Style, but only in the short run if a Style won't be needed very often. One of the frequently implemented techniques for using the SPAN Element is to highlight a particular word or phrase by changing its color, size, or font or to create an Initial DropCap to start a paragraph, which is demonstrated in Example 1-51. Obviously you have to use one of the three Attributes listed in the following Syntax in order for the SPAN Element to do anything.
Slide 126: 106 Syntax: <SPAN Part I — D y n a m i c H T M L STYLE="PropertyName: Value; PropertyName: Value;..." CLASS="className" CLASS="className" ID="idName" > *** </SPAN> | | | The <SPAN> Element with STYLE Attribute Now we'll explore some techniques for the SPAN Element by using its Attributes of STYLE, CLASS and ID. As previously indicated in the Syntax, when you use the STYLE Attribute with the SPAN Element, you specify the particular CSS Syntax Properties in NAME: VALUE pairs that are separated by a semicolon, which you want to comprise your Style and place them between double quote marks just like any other Attribute Value. Both Start and End Tags are required. Here is a quick mini-example of the <SPAN> Element used in concert with the STYLE Attribute. <SPAN STYLE="color:blue;"> This text will be blue. </SPAN> And here's another: <SPAN STYLE="background-color: red; font-size: 24pt;"> This text will be on a red background and sized at 24 point. </SPAN> You should notice that the entire group of Properties listed are contained within only one set of double quotes instead of the possible error of putting each Property in its own set of double quotes. It's also a good idea to check and make sure that you have included the measurement units for Property Values like: font-size:24pt; It's very easy to forget to include them because they aren't required in regular HTML Attribute Syntax. If you're racking your synapses because something's missing when you test your code in a browser, check that first and next check to see if the colons and semicolons are all there and in the right places. Sometimes it's the little gremlins that sabotage the operation.
Slide 127: CHAPTER 1 — Style Sheets 107 This example demonstrates the SPAN Element with the STYLE Attribute to change the color and size of text along with background color changes and the creation of a border around a heading. Example 1-48: Sample248.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 248 - CSS Example 1-48 SPAN Element with STYLE</TITLE> </HEAD> <BODY STYLE="margin: 10px; border-color: lime; border-style: groove; border-width: 20px;"> <P> Just a regular paragraph. Notice that there is no STYLE Element Style Sheet in the Header. Also notice that <SPAN STYLE="color:red; background-color:yellow; font-size:24pt;"> this part of the paragraph has the SPAN Element with the STYLE Attribute applied to it but </SPAN> this part does not. </P> <BR> <H1> The H1 without SPAN. <BR> <SPAN STYLE="border-style: ridge; color: blue; border-width: 25px;"> The H1 with SPAN. </SPAN> </H1> <BR> <A HREF="Sample249.html"> <SPAN STYLE="color: purple; font-weight: bold; font-size:28pt; background-color:aqua;"> The Link to the next Sample 249 and it is SPAN enhanced. </SPAN> </A> </BODY> </HTML> This example shows you how to create Initial DropCaps and WordCaps by using the SPAN Element with the STYLE Attribute.
Slide 128: 108 Example 1-49: Part I — D y n a m i c H T M L Sample249.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 249 - CSS Example 1-49 SPAN Element with STYLE</TITLE> </HEAD> <BODY STYLE="border-color: red; margin:0px; border-style: double; border-width: 20px;"> <P STYLE="font-size: 20pt; color: blue;"> <SPAN STYLE="color: red; background-color: yellow; font-size: 70pt;"> T </SPAN> he first letter has the SPAN Element specified to create an initial-drop-cap that is often used in the publishing world to start an article but has been a pain to create up till now. </P> <BR> <H1> <SPAN STYLE="border-style: double; color: blue; border-width: 10px; font-size: 150pt; background-color: red; float: left;"> W </SPAN> <SPAN STYLE="font-size: 24pt; background-color: red; color: white;"> oah maaaan, that's a big double-u. </SPAN> </H1> <BR> <SPAN STYLE="color: yellow; font-size: 88pt; background-color: lime; float: left;"> W </SPAN> <SPAN STYLE="font-size: 24pt; background-color: blue; color: white;"> ow another big double-u man. </SPAN> <BR CLEAR="ALL"><BR> <A HREF="Sample250.html"> <SPAN STYLE="color: navy; font-size: 22pt; background-color: silver;"> The Link to the next Sample 250 and it is SPAN enhanced. </SPAN> </A> </BODY> </HTML>
Slide 129: CHAPTER 1 — Style Sheets 109 This example shows you how to change the color and size of text for the titles of artwork using the SPAN Element with the STYLE Attribute. It also sets a default Style for the BODY of the document by using the STYLE Attribute with the BODY Element, which puts a Border around the entire viewing area. Example 1-50: Sample250.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 250 - CSS Example 1-50 SPAN Element with STYLE</TITLE> </HEAD> <BODY STYLE="border-color: rgb(55%,10%,100%); background-color:#bbbbee; border-style: outset; border-width: 15px;"> <P STYLE="font-size: 20pt; color: blue;"> <SPAN STYLE="color: rgb(50%,0%,100%); font-size: 30pt;"> <IMG SRC="JPEG-FILES/J5-SpaceDome_27P.jpg" ALT="SpaceDome" ALIGN="ABSMIDDLE"> SpaceDome </SPAN> <BR> This is a Sci-Fi painting by Gilorien set on a far distant world of the imagination. <HR> <!-************************************************** --> <SPAN STYLE="color: rgb(50%,0%,100%); font-size: 30pt;"> <IMG SRC="JPEG-FILES/J5-Sedona_Winter_Sphere13.jpg" ALT="Sedona Winter Sphere" ALIGN="RIGHT"> <SPACER TYPE="VERTICAL" SIZE="100"> Sedona Winter Sphere<BR><BR> </SPAN> This is a Surreal painting by Gilorien inspired by Sedona Arizona. </P> <BR> <!-************************************************** --> <A HREF="Sample251.html"> <SPAN STYLE="text-transform: uppercase; color: rgb(255,0,0)"> go to the next sample. </SPAN> </A> </BODY> </HTML>
Slide 130: 110 Part I — D y n a m i c H T M L The <SPAN> Element with CLASS Attribute The <SPAN> Element which uses a CLASS Attribute to address a CLASS of STYLE differs from the previous examples only in that you obviously have to create a Style Sheet with the STYLE Element in order to have a CLASS of STYLE. You start by creating and naming a CLASS of STYLE in the STYLE Element in the Header and then addressing it with the CLASS Attribute of an Element to create an on-the-fly Style for a section of content in the Body of the document. Remember that the SPAN Element requires both the Start and End Tags. Here are a few mini-examples of using the SPAN Element with a CLASS of STYLE: <SPAN <SPAN <SPAN CLASS="NameMe42"> CLASS="blueText"> CLASS="DropCap88"> 42 Blues M </SPAN> </SPAN> </SPAN> which assume you have created the following CLASSes of STYLE: .NameMe42 .blueText .DropCap88 { font-size: 42pt; background-color: yellow; color: navy; } { color: rgb(0, 0, 255); } { font-size: 88pt; line-height: 50%; color: rgb(255, 0, 0); } This example focuses on a variation of the earlier DropCap example, but this time it addresses a CLASS of STYLE within the SPAN Element instead of the STYLE Attribute to accomplish the same thing. It also uses the rgb( ) Function to set some colors, and there are several other uses of CLASSes of STYLE used within the SPAN Element. Example 1-51: Sample251.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 251 - CSS Example 1-51 SPAN Element with CLASS of STYLE</TITLE> <STYLE TYPE="text/CSS"> <!-BODY { border-color: rgb(15%,0%,80%); background-color:#eeaadd; border-style: outset; border-width: 15px; margin: 0px; padding: 0px; width: 555px; }
Slide 131: CHAPTER 1 — Style Sheets H1 { float:center; color:red; background-color: black; font-size: 42pt; } { color:purple; font-size:17pt; margin: 0px; padding: 0px; font-family: Clarendon, sans-serif; } { font-size: 42pt; background-color: yellow; float: center; color: navy; } { color: rgb(0, 0, 255); font-size: 44pt; } { font-size: 88pt; float: left; color: rgb(255, 0, 0); } padding: 0px; 111 P all.NameMe42 all.blueText all.DropCap88 --> </STYLE> </HEAD> <BODY> <H1>Sample 251</H1> <!-<SPAN ******** The bold text is what is rendered W</SPAN> <BR><BR><HR> ******** --> CLASS="DropCap88"> <BR><BR><BR><BR> <P>hat is the secret of life, the universe and everything according to <SPAN CLASS="blueText"> Deep Thought </SPAN> in the hitch-hiker's guide to the galaxy?</P> <SPAN <!-CLASS="NameMe42"> 42 </SPAN> <BR><HR> --> ************************************************** <P>Play me some</P> <SPAN CLASS="blueText"> <!-- Blues. </SPAN> <BR><BR> --> ************************************************** <A HREF="Sample252.html"> <SPAN STYLE="font-style: italic; font-size: 24pt; color: rgb(255,0,250)"> go to the next sample. </SPAN> </A> </BODY> </HTML>
Slide 132: 112 Part I — D y n a m i c H T M L The <SPAN> Element with ID Attribute for CLASS Exceptions This works exactly the same way as the last section except that you add the ID Attribute to create exceptions to the inherited Properties of the CLASS of STYLE that are applied to the content. One thing you will find is that you'll always have more predictably consistent results if you enclose your SPAN Elements inside other Elements like the Division, Paragraph, Preformatted or Heading Elements. It seems to be the nature of the way that Navigator is coded, although the inconsistencies may have been eliminated by the time you read this. Experiment on your own and see what happens. If you find anything bizarre that you can get repeatable results of then email me the parameters that caused it and I'll include it in the episodic updates in the online followup which comes out about once every few months. Here's a mini-example: <SPAN CLASS="redText" ID="Larger"> Bigger Red </SPAN> based on this CLASS of STYLE: all.redText { color: red; font-size: 12pt; } based on this ID Exception STYLE: #Larger { font-size: 39pt; } The above SPAN usage would create 'Bigger Red' in red text that is 39pt using the ID Exception to override the 12pt text that is set in the CLASS of STYLE. This example focuses on a simple implementation of the above mini-example. Example 1-52: Sample252.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE> Sample 252 - CSS Example 1-52 SPAN with ID Exception to CLASS of STYLE </TITLE>
Slide 133: CHAPTER 1 — Style Sheets <STYLE TYPE="text/CSS"> <!-BODY { border-color: rgb(75%,0%,40%); background-color:#cceeff; border-style: inset; border-width: 10px; margin: 0px; padding: 0px; width: 555px; } { float:center; color:lime; background-color: gray; font-size: 42pt; } { color:purple; font-size:17pt; margin: 0px; padding: 0px; font-family: Clarendon, sans-serif; } { color: rgb(0, 0, 255); font-size: 20pt; } { color: red; font-size: 12pt; } {font-size: 39pt; } 113 H1 P all.blueText all.redText #Larger --> </STYLE> </HEAD> <BODY> <H1>Sample 252</H1> <!-- <BR><BR> <HR> --> ************************************************** <P><SPAN CLASS="blueText"> **Hint** You will always have more consistent results if you enclose your SPAN Elements inside of other Elements like the Division, Paragraph, Preformatted or Heading Elements. </SPAN> </P><HR> <P><SPAN CLASS="redText"> This is CLASS redText. </SPAN> </P> </SPAN> </P> <P><SPAN CLASS="redText" ID="Larger"> Big Red <P><SPAN CLASS="redText"> <!-- had the larger size. </SPAN> </P> --> ************************************************** <A HREF="Sample253.html"> <SPAN STYLE="font-style: italic; font-size: 24pt; color: rgb(255,0,250)"> go to the next sample. </SPAN> </A> </BODY> </HTML>
Slide 134: 114 Part I — D y n a m i c H T M L External Style Sheets with the <LINK> Element There are some major advantages to using External Style Sheets because you can use the same Style Sheet over and over again on multiple documents without having to recode everything. If you have a very large site with lots of pages that use the exact same Style Sheet, even if you need to make minor inline changes, this can save you huge amounts of time. If you plan ahead, you can create a master External Style Sheet or Sheets that have all of your defaults globally set that will work for every page or every page in a section of the site and then just make minor Additions or Exceptions for certain pages that require them. A typical way to manage a large site effectively is to set global defaults in an External Style Sheet and then use inline SPAN and ID Exceptions to those defaults. The one minor annoyance to this scenario is that the Styles are not at your fingertips if you do need to make changes to the External Style Sheet; but then again, how far away can they be? The seconds you lose will be more than compensated by the hours you save. Another excellent advantage to this operational paradigm is that you can just make changes to the External Style Sheet without having to alter the documents containing the content. Note the plural form of the word document. If your site has 1000 pages, which isn't really that large, imagine the difference in time it would take to make even three modifications to one External Style Sheet as opposed to 1000 content documents. For a 5-minute correction of 1000 pages, that would translate into 83 hours and 20 minutes. Obviously the flip side is if you have a lot of different Style Sheets that are only applicable to a few pages, then it's not worth the effort to keep track of External Style Sheets. Just evaluate your needs and be aware of your options and choose wisely. The <LINK> Element The <LINK> Element is used to access an External Style Sheet that is contained in another document. The Attributes REL and TYPE are required. The TITLE Attribute (of the LINK Element, not the TITLE Element) is optional and is only used when you want to declare a default Style Sheet, which can then be optionally activated or deactivated by the user. You use the LINK Element in the HEAD Section of your document but not inside the STYLE Element, and you don't even need to declare a STYLE Element, but it is allowed if you want to create additional Style Sheets. Multiple Style Sheets are allowed within a single document, and we'll get to that in the next section. You only use the Start Tag, and the End Tag is forbidden. This is the typical way that you would specify the <LINK> Element: <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="globalStyles1.html">
Slide 135: CHAPTER 1 — Style Sheets This is the typical way that you would implement the <LINK> Element: <HEAD> <TITLE> My Home Page 2 </TITLE> 115 <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="globalStyles1.html"> </HEAD> Notice that there is no <STYLE> Element present within the HEAD Element. The reason that the <STYLE> Element is unnecessary is because the information normally conveyed by it to the browser, such as the TYPE="text/CSS" and the fact that it is a Style Sheet, is all contained in the Attributes of the LINK Element. Syntax: <LINK REL="STYLESHEET" TYPE="text/CSS" TITLE="name" HREF="URL"> | "ALTERNATE STYLESHEET" | "text/javaScript" Attributes Defined: REL="STYLESHEET" | "ALTERNATE STYLESHEET" Persistent, Default or Alternate This Attribute is used to declare the Relationship of the Style Sheet, whether it is Persistent, a Default, Style Sheet, or an Alternate Style Sheet. If you specify REL as: STYLESHEET, then it is said to be: Persistent and will be applied to the document no matter what Style Sheet the user chooses for display (assuming you are offering options). status is the other possibility but only occurs if you also include the TITLE Attribute. If the TITLE Attribute is present then this External Style Sheet becomes the Initial Style Sheet used when the document is loaded but can be changed to an ALTERNATE STYLESHEET by the user. Default ALTERNATE STYLESHEET specifies that this Style Sheet be available as a choice for the user to implement as an alternative to the Default Style Sheet. For this Attribute to work there must also be a TITLE Attribute present.
Slide 136: 116 Part I — D y n a m i c H T M L TYPE="text/CSS" | "text/JavaScript" works just like in a STYLE Element. If you are creating a Cascading Style Sheet, then specify "text/CSS". If you are creating a Style Sheet using JavaScript Syntax, then specify "text/JavaScript". TITLE="name" specifies a name for your External Style Sheet that causes it to be the Default Style Sheet when the REL Attribute is set to STYLESHEET. When the REL Attribute is set to ALTERNATE STYLESHEET, it becomes one of the optional alternatives to the Default Style Sheet, which you can dynamically manipulate with JavaScript code or that the user is allowed to choose from. HREF="URL" specifies the URL of the External Style Sheet to be loaded. This example is going to demonstrate how to create a Persistent External Style Sheet by using the LINK Element. It consists of two parts: The document that contains the LINK to load and apply the External Style Sheet (Sample253.html) and the External Style Sheet itself (Sample253-External-CSS-1.html). Using a regular type of HTML structure for the External Style Sheet, where the Style Sheet definition is enclosed inside Comment Tags and inside a STYLE Element is not recommended, but it is possible if you want to create some extra work for yourself. All of the External Style Sheet examples in this book will only have the Style Sheet Definition without the extraneous HTML. Part 1 of Example 1-53 contains the LINK to the External Style Sheet. Example 1-53 Part 1: Sample253.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 253 - CSS Example 1-53 LINK STYLE SHEET <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample253-External-CSS-1.html"> </HEAD> <BODY> </TITLE> <P>This is a Test of the External Style Sheet Implementation System.</P> <P>If this is blue 24 point text inside of a magenta border and on a very pale blue background then it was successful.</P> </BODY> </HTML>
Slide 137: CHAPTER 1 — Style Sheets 117 This file contains the External Style Sheet that is applied to the previous file. Example 1-53 Part 2: BODY Sample253-External-CSS-1.html { border-color: rgb(75%,0%,40%); background-color:#cceeff; border-style: inset; border-width: 10px; margin: 0px; padding: 0px; width: 555px; } { font-size: 24pt; color: blue; } P This example focuses on a simple demonstration of a LINK to an External Style Sheet that is written in CSS Syntax, which is then loaded and applied to this document called Sample254.html in a Persistent Relationship to the document; that is, it will always be applied. Example 1-54 Part 1: Sample254.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 254 - CSS Example 1-54 LINK STYLE SHEET <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample254-External-CSS-2.html"> </HEAD> <BODY> </TITLE> <P>This is the second Test of the External Style Sheet Implementation System.</P> <P>If this paragraph is 24 point red text inside of a blue border and on a very pale green background then it was successful. The following division should be in 14 point black text.</P> <DIV ALIGN=JUSTIFY> Nothing fancy here but the alignment is set to Justify. </DIV> </BODY> </HTML>
Slide 138: 118 Part I — D y n a m i c H T M L This is the External Style Sheet for Example 1-54 and it demonstrates simple Styles for the BODY, P, and DIV Elements by regular Element assignment. Example 1-54 Part 2: BODY Sample254-External-CSS-2.html { border-color: rgb(0%,0%,100%); background-color:#ccffcc; border-style: inset; border-width: 10px; margin: 0px; padding: 0px; width: 555px; } { font-size: 24pt; color: red; } { font-size: 14pt; color: black; } P DIV This example shows you a typical use of assigned Styles that can be used as a set of global default Properties for your Elements, which can be kept in an External Style Sheet and then loaded for multiple documents. Example 1-55 Part 1: Sample255.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 255 - CSS Example 1-55 LINK STYLE SHEET </TITLE> <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample255-External-CSS-3.html"> </HEAD> <BODY> Here I am just hovering in the Body without another Element. <P>Hey I got a paragraph to hang out with.</P> <DIV> That's cool but I'm in a division. Holy mergatroids Batman, this sounds positively mathematically compartmentalized.</DIV> <H1>No Prob, I got the major domo Heading 1.</H1> <H2>Yeah, well I'd rather be blue than big.</H2> <H3>I may be smaller but my ego isn't in need of surgery.</H3> </BODY> </HTML>
Slide 139: CHAPTER 1 — Style Sheets 119 This is the External Style Sheet part of the example, and it shows a hypothetical set of global Properties that one could use to define most essential Elements, which can then be augmented to your specific requirements. You might find this useful as a template for your documents after you spice it up a bit. Most of these global parameters are set to render what a normal HTML 2.0 document would look like. Obviously the last five assigned Element Styles are atypical. (Yes, it is possible to assign more than one Style to the same Element within a Style Definition.) Example 1-55 Part 2: BODY { margin: 5px; font-family: serif; line-height: 1.1; background: white; color: black; font-size: 14pt; } Sample255-External-CSS-3.html H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, IMG, SPAN LI H5, H6 H1 H1, H2, H4, H6 H3, H5 H1 H2 H3 B, STRONG I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE PRE, TT, CODE, KBD, SAMP PRE ADDRESS BLOCKQUOTE UL, DIR OL { { { { { display: block } { display: inline } { display: list-item } { { { { { { { margin-top: 1em } text-align: center } font-weight: bold } font-style: italic } font-size: xx-large } font-size: x-large } font-size: large } font-weight: bolder } font-style: italic } font-family: monospace } white-space: pre } { margin-left: 3em } { margin-left: 3em; margin-right:3em } { list-style: disc } { list-style: decimal }
Slide 140: 120 MENU LI DT DD P { margin: 0 } { margin-left: 3em } Part I — D y n a m i c H T M L { margin-bottom: 0 } { margin-top: 0; margin-left: 3em } { text-indent: 40px; color: purple; font-size: 14pt; line-height: 1.2em; font-family: Palatino, "New York", Times, serif; } { text-indent: 40px; color: navy; font-size: 14pt; line-height: 1.2em; font-family: Helvetica, Times, "New York", Palatino, serif; } { color: red; font-size: 30pt; background-color: black; border-style: ridge; border-color: #ff5555; border-width: 20px; font-family: BlackOak, Moonlight, Clarendon, Cloister, fantasy; } { color: blue; font-size: 35pt; border-style: groove; border-color: aqua; border-width: 20px; font-family: Moonlight, BlackOak, Clarendon, Cloister, fantasy; } { color: green; font-size: 25pt; border-style: double; border-color: lime; border-width: 20px; font-family: Clarendon, Moonlight, BlackOak, Cloister, fantasy; } DIV H1 H2 H3
Slide 141: CHAPTER 1 — Style Sheets 121 Multiple External Style Sheets in one document You can load multiple External Style Sheets into one document by using a LINK Element for each one. One reason why you might want to do this is if you have a site that has several different External Style Sheets that are each used for a specific type of formatting purpose (created in the past for other individual documents) that you now want to incorporate into a new document at various places. Here's the mini-example: <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample256-External-CSS-4.html"> <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample256-External-CSS-5.html"> <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample256-External-CSS-6.html"> External Style Sheet precedence issues The later an External Style Sheet is loaded, the more precedence it will have in terms of overriding the Style Properties for the various Elements it is assigned to. In other words, the last External Style Sheet in the code sequence will override all previous ones. Styles that are defined locally, that is, in the document in question, will have complete precedence over any conflicting Styles from all External Style Sheets. Be very aware that this can be tricky to keep track of in your head and when trying to debug your code for large and complex sites. This example uses three different LINK Elements to load in three different External Style Sheets, which are then all applied to the document Sample256.html, which is a very rudimentary example just to get you into the concept. Typically they are much more involved. Just a reminder to notice that the LINK Elements are in the HEAD Element but not within the STYLE Element. Example 1-56 Part 1: Sample256.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 256 - CSS Example 1-56 LINK Multiple STYLE SHEETs </TITLE> <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample256-External-CSS-4.html"> <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample256-External-CSS-5.html"> <LINK REL="STYLESHEET" TYPE="text/CSS" HREF="Sample256-External-CSS-6.html">
Slide 142: 122 <STYLE TYPE="text/CSS"> <!-H4 Part I — D y n a m i c H T M L { color: silver; font-size: 50pt; border-style: solid; border-color: navy; border-width: 20px; font-family: Clarendon, Moonlight, BlackOak, Cloister, fantasy; } --> </STYLE> </HEAD> <BODY> <P>Hey can somebody get me out of this paragraph?</P> <DIV> I thought you liked being in that paragraph.</DIV> <H1>So passion didn't compensate your intellectual predilections.</H1> <H2>Grass always greener eh?</H2> <H3>Wait, that's my line.</H3> <H4>THE H4 TEST.</H4> If the preceding bordered H4 Heading is Navy with 50 point silver text then you know that the Properties in the local document have overridden the Properties from the External-CSS-6 Style Sheet. </BODY> </HTML> This is the first External Style Sheet used in Example 1-56 Part 1. Part 2 gets loaded into Part 1 by the first LINK Element contained in Part 1. Example 1-56 Part 2: P Sample256-External-CSS-4.html { text-indent: 40px; color: purple; font-size: 14pt; line-height: 1.2em; font-family: Palatino, "New York", Times, serif; } { text-indent: 40px; color: navy; font-size: 17pt; line-height: 1.2em; font-family: Helvetica, Times, "New York", Palatino, serif; } DIV
Slide 143: CHAPTER 1 — Style Sheets 123 This is the second External Style Sheet used in Example 1-56 Part 1. Part 3 gets loaded into Part 1 by the second LINK Element contained in Part 1. Example 1-56 Part 3: H1 Sample256-External-CSS-5.html { color: red; font-size: 25pt; background-color: black; border-style: ridge; border-color: #ff5555; border-width: 20px; font-family: BlackOak, Moonlight, Clarendon, Cloister, fantasy; } { color: blue; font-size: 35pt; border-style: groove; border-color: aqua; border-width: 20px; font-family: Moonlight, BlackOak, Clarendon, Cloister, fantasy; } H2 This is the third External Style Sheet used in Example 1-56 Part 1. Part 4 gets loaded into Part 1 by the first LINK Element contained in Part 1. Example 1-56 Part 4: H3 Sample256-External-CSS-6.html { color: green; font-size: 25pt; border-style: double; border-color: lime; border-width: 20px; font-family: Clarendon, Moonlight, BlackOak, Cloister, fantasy; } { color: purple; font-size: 20pt; border-style: inset; border-color: olive; border-width: 20px; font-family: Clarendon, Moonlight, BlackOak, Cloister, fantasy; } H4 Multiple <STYLE> Elements in one document You can have more than one STYLE Element in the HEAD of your document. Its intended purpose is to use the SRC Attribute to load in an External Style Sheet so that with multiple STYLE Elements you can have multiple Style Sheets in one document. However, at the time of this writing, it doesn't work for External CSS Style Sheets, but it does work for External JavaScript Style Sheets. You can also have multiple STYLE Elements in one document without using the SRC Attribute, which can be either CSS Syntax or JavaScript Syntax. This has a limited use if you want to quickly copy a group of Styles from one document to another.
Slide 144: 124 Part I — D y n a m i c H T M L This is just a very simple example to show you that multiple STYLE Elements are possible in one document. It also demonstrates that the SRC Attribute works for loading External JavaScript Style Sheets but does not work for External CSS Style Sheets. If it worked for CSS Style Sheets, then the H2 Heading would be blue. Example 1-57: Sample257.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Sample 257 - CSS Example 1-57 Multiple STYLE Elements </TITLE> <STYLE TYPE="text/JavaScript" SRC="Sample257-External-JSSS.html"></STYLE> <STYLE TYPE="text/CSS" SRC="Sample256-External-CSS-5.html"></STYLE> <STYLE TYPE="text/CSS"> <!-H3 --> </STYLE> <STYLE TYPE="text/CSS"> <!-H4 --> </STYLE> </HEAD> <BODY> <H5>THE H5 TEST.</H5> <H2>THE H2 TEST.</H2> <H3>THE H3 TEST.</H3> <H4>THE H4 TEST.</H4> </BODY> </HTML> { color: purple; font-size: 25pt; } { color: red; font-size: 55pt; }
Slide 145: CHAPTER 1 — Style Sheets Wrapping Up and Looking Ahead 125 This ends the discussion on Style Sheets created with CSS Syntax. You now have all the information you need to create your own Style Sheets for your documents and a wealth of examples that you can extract code from on the CD-ROM. Feel free to reuse any segments of code from any of the examples. One final note concerning browsers and Style Sheets: Navigator and Internet Explorer render Style Sheets with varying responses to the official Style Sheet specification. Unfortunately for coders, they are both right in their interpretations, so at least for now, if you want to include Style Sheets in your documents and achieve cross-platform fluidity, you are going to have to research the differences inherent in Explorer and create parallel code to accommodate them. Chapter 2 deals with positioning blocks of content, which are called Layers and are created by assigning a new Property within the Style Definition called the position Property with a Value of either absolute or relative. There are lots of other new Properties to learn about and use with Layers so let's get on with it.
Slide 147: Part I Dynamic HTML Chapter 2 Layers and Styles
Slide 148: 128 Part I — D y n a m i c H T M L Chapter 2 Layers and Styles Contents Creating Layers with Styles 2.1) Overview 129 129 Creating Layers with CSS Syntax 2.2) 2.3) 2.4) 2.5) 2.6) 2.7) 2.8) 2.9) 2.10) 2.11) 2.12) 2.13) 2.14) 2.15) 2.16) 2.17) 2.18) Creating a LAYER with the STYLE Attribute Creating a LAYER with a CLASS of STYLE The { position: } Property The { left: } Property The { top: } Property The NAMED LAYER Style ( Creating a LAYER with the ID Attribute ) The { width: } Property The { height: } Property The { clip: } Property The bugged version of the { clip: } Property The unbugged version of the { clip: } Property The { z-index: } Property The { visibility: } Property The { layer-background-color: } Property The { layer-background-image: } Property The { include-source: } Property CSS Layer Properties and <LAYER> Attributes Chart 130 130 131 132 132 133 135 136 137 139 139 142 146 149 151 152 158 161 Creating Layers with the <LAYER> Element 2.19) 2.20) 2.21) The <LAYER> Element The <ILAYER> Element The <NOLAYER> Element 162 162 173 176
Slide 149: CHAPTER 2 — Layers and Styles 129 Creating Layers with Styles Overview Creating Layers There are lots of ways to create a LAYER. They are: • • • • • • • • • The <STYLE> Element with position Property via STYLE Attribute The <STYLE> Element with position Property via CLASS Attribute The <STYLE> Element with position Property via ID Attribute The <LAYER> Element The <ILAYER> Element The <SPAN> Element The JavaScript tags Property of the document Object The JavaScript classes Property of the document Object The JavaScript ids Property of the document Object Essential Requirements The only thing that is required to turn a Style into a Layer is the inclusion of the position Property in the Style Definition and then assigning it a Value of either absolute or relative. This can be done for a CLASS of STYLE or a Named Exception to a CLASS of STYLE. Additionally the position Property can be used in the STYLE Attribute or in the SPAN Element. You do not use the position Property in the LAYER or ILAYER Elements because they are inherently Layers by definition, as a result of the position Property being set in the internal code by the browser. This chapter covers the creation of positioned content, that is, creating Layers by the above methods. Chapter 3 covers the JavaScript aspects of Layers.
Slide 150: 130 Part I — D y n a m i c H T M L Creating Layers with CSS Syntax Creating a LAYER with the STYLE Attribute The STYLE Attribute can be used to create a LAYER in most HTML Elements. All you have to do is use the position Property to specify whether the Element will be positioned absolute or relative in the document layout. A relatively positioned LAYER will follow the natural flow of the Elements in the document. An absolutely positioned LAYER will be placed exactly according to the integer coordinates that you specify with the left and top Properties. The left Property specifies the x-coordinate where the LAYER will start and is measured from the upper-left corner of the Window, or containing LAYER if it's nested, in a rightward direction. The top Property specifies the y-coordinate where the LAYER will start and is measured from the upper-left corner of the Window, or containing LAYER if it is nested, in a downward direction. Just remember that you are using CSS Syntax within an Element Attribute so you don't use the curly braces but you do place the entire group of the Property NAME:VALUE; pairs within one set of double quotes (" ") to the right of the equals (=) sign, which is to the right of the Attribute Name of STYLE, which is to the right of the Element Name, like this: <DIV STYLE="position:absolute; left:50; top:100; color:red;"> All of the Properties that were delineated in Chapter 1 can also be used with the STYLE Attribute when it is specified to create a LAYER. These are the additional Properties that can be used with the STYLE Attribute when you also use the position Property to create a LAYER from within an Element when you are using CSS Syntax: Property Name position left top width height clip z-index visibility layer-background-color layer-background-image include-source { Property Name with:Possible Values; } { { { { { { { { { { { position:absolute | relative; } left:integerLength | integer1%-100%; } top:integerLength | integer1%-100%; } width:integerLength | integer1%-100% } height:integerLength | integer1%-100%; } clip:rect('Y1,X2,Y2,X1'); } z-index:integer; } visibility:show | hide | inherit; } layer-background-color:colorValue; } layer-background-image:url('imageURL'); } include-source:url('documentURL'); }