2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Objectives –To take control of the appearance of a Web site by creating style sheets –To use a style sheet to give all the pages of a Web site the same look and feel –To use the class attribute to apply styles –To specify the precise font, size, color and other properties of displayed text –To specify element backgrounds and colors –To understand the box and model and be able to control the margins, borders and padding –To use style sheets to separate presentation from content “Fashion fade, style is eternal”
2002 Prentice Hall, Inc. All rights reserved. Outline 4.1Introduction 4.2Inline Styles 4.3Creating Style Sheets with the style Element 4.4Conflicting Styles 4.5Linking External Style Sheets 4.6Positioning Elements 4.7Backgrounds 4.8Element Dimensions 4.9Text Flow and the Box Model 4.10User Style Sheets
2002 Prentice Hall, Inc. All rights reserved. 4.1 Introduction Cascading Style Sheets (CSS) –Define document style –Separate structure from presentation Greater manageability and easier changes There are three levels of style sheets –Inline - specified for a specific occurrence of a tag and apply only to that tag This is fine-grain style, which defeats the purpose of style sheets - uniform style –Document-level style sheets - apply to the whole document in which they appear –External style sheets - can be applied to any number of documents (Can be validated through the following web site:
2002 Prentice Hall, Inc. All rights reserved. Style Specifications Format Inline style style = “attr_1 : value_1; attr_2 : value_2; …….; attr_n : value_n” Document and external style <!-- /*this is for browser only*/ rule list selector { attr_1 : value_1; ….; attr_n : value_n; } --> –“selector”: tag or tags affected by the rule
2002 Prentice Hall, Inc. All rights reserved. 4.2 Inline Styles Attribute Style –Define style in document Each element is followed by colon ( : ) then value Inline styles override all other styles It’s so trivial, not really reflect the principles of unifying document structure.
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.1Inline styles. Lines 18 and 21 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Inline Styles This text does not have any style applied to it This text has the font-size 19 style applied to it, making it 20pt This text has the 22 font-size and color styles applied to it, 23 making it 20pt. and blue Define style for following text
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.1
2002 Prentice Hall, Inc. All rights reserved. 4.3 Creating Styles with the style element (Document Specifications) Styles –Declared in head of document –May be applied to whole document –Begin Define styles attached to tags Property followed by colon ( : ) Multiple properties separated by semi-colon ( ; )
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.2Declaring styles in the head of a document. Line 12 Lines Line 21 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Style Sheets em { background-color: #8000ff; 15 color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt } special { color: blue } Start of style sheetDefine style attributes of em, h1, and p tags Define special case (not attached to any pre-defined tag)
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.2Declaring styles in the head of a document. (Part 2) Line Deitel & Associates, Inc Deitel & Associates, Inc. is an internationally recognized 32 corporate training and publishing organization specializing 33 in programming languages, Internet/World Wide Web technology 34 and object technology education. Deitel & Associates, Inc. is 35 a member of the World Wide Web Consortium. The company 36 provides courses on Java, C++, Visual Basic, C, Internet and 37 World Wide Web programming, and Object Technology Clients 40 The company's clients include many 41 Fortune 1000 companies, government agencies, branches 42 of the military and business organizations. Through its 43 publishing partnership with Prentice Hall, Deitel & Associates, 44 Inc. publishes leading-edge programming textbooks, professional 45 books, interactive CD-ROM-based multimedia Cyber Classrooms, 46 satellite courses and World Wide Web courses Using special style
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.2
2002 Prentice Hall, Inc. All rights reserved. 4.4 Conflicting Styles Style precedence –Author > User > Agent (Web Browser)
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.3Inheritance in style sheets. Line 13 Lines Line 15 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - More Styles a.nodec { text-decoration: none } a:hover { text-decoration: underline; 16 color: red; 17 background-color: #ccffcc } li em { color: red; 20 font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; 25 margin-left: 15px } Assign attribute nodec to all a elements (override default underline attribute of element a ) Define style for any em element contained in li tag A pseudo-class, dynamically activated by users
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.3Inheritance in style sheets. (Part 2) Shopping list for Monday : Milk 36 Bread White bread 39 Rye bread 40 Whole wheat bread Rice 44 Potatoes 45 Pizza with mushrooms Go to the Grocery 49 store
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.3
2002 Prentice Hall, Inc. All rights reserved. 4.5 Linking External Style Sheets External Style Sheets –Contained in a.css file –Single style sheet used easily between multiple pages How to refer to external style specifications? Note: can only be placed in the “head” element
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.4An external style sheet (styles.css). Lines /* Fig. 4.4: styles.css */ 2/* An external stylesheet */ 3 4a { text-decoration: none } 5 6a:hover { text-decoration: underline; 7 color: red; 8 background-color: #ccffcc } 9 10li em { color: red; 11 font-weight: bold} 12 13ul { margin-left: 2cm } 14 15ul ul { text-decoration: underline; 16 margin-left:.5cm } Define attributes used for linking documents
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.5Linking an external style sheet. Line 11 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Importing Style Sheets Link external stylesheet with current document, Only appear in “head”
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.5Linking an external style sheet. (Part 2) Shopping list for Monday : Milk 19 Bread White bread 22 Rye bread 23 Whole wheat bread Rice 27 Potatoes 28 Pizza with mushrooms Go to the Grocery store
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.5
2002 Prentice Hall, Inc. All rights reserved. 4.6 Positioning Elements CSS property position –Controlling the positioning of elements in an HTML document –Capability_1: absolute positioning Define element location in pixels Location is not defined by browser –Capability_2: relative positioning Related to current position
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.6Positioning elements with CSS. Lines <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Absolute Positioning <img src = "i.gif" style = "position: absolute; top: 0px; 15 left: 0px; z-index: 1" alt = "First positioned image"> 16 <p style = "position: absolute; top: 50px; left: 50px; 17 z-index: 3; font-size: 20pt;">Positioned Text 18 <img src = "circle.gif" style = "position: absolute; top: 25px; 19 left: 100px; z-index: 2" alt = "Second positioned image"> Use inline style to position images: place second image over the first (because second image has higher z index)
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.6
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.7Relative positioning of elements. Lines <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Relative Positioning p { font-size: 1.3em; 14 font-family: verdana, arial, sans-serif } span { color: red; 17 font-size:.6em; 18 height: 1em } super { position: relative; 21 top: -1ex } sub { position: relative; 24 bottom: -1ex } 25 Define attributes that position elements relative to browser-defined location
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.7Relative positioning of elements. (Part 2) 26.shiftleft { position: relative; 27 left: -1ex } shiftright { position: relative; 30 right: -1ex } The text at the end of this sentence 38 is in superscript The text at the end of this sentence 41 is in subscript The text at the end of this sentence 44 is shifted left The text at the end of this sentence 47 is shifted right
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.7
2002 Prentice Hall, Inc. All rights reserved. 4.7 Backgrounds CSS gives control over backgrounds –Property background-image Specify image URL –Property background-color Specify background color –Property background-position Specifies background location –Property background-repeat Specifies background tiling –Property background-attachment Set to fixed to apply background-position
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.8Adding a background image with CSS. Line 14 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Background Images body { background-image: url(logo.gif); 14 background-position: bottom right; 15 background-repeat: no-repeat; 16 background-attachment: fixed; } p { font-size: 18pt; 19 color: #aa5588; 20 text-indent: 1em; 21 font-family: arial, sans-serif; } dark { font-weight: bold; } allocate image by using “url”Place image at bottom-right of screen
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.8Adding a background image with CSS. (Part 2) This example uses the background-image, 32 background-position and background-attachment 33 styles to place the Deitel 34 & Associates, Inc. logo in the bottom, 35 right corner of the page. Notice how the logo 36 stays in the proper position when you resize the 37 browser window
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.8
2002 Prentice Hall, Inc. All rights reserved. 4.8 Element Dimensions Specify element dimensions –Set style attribute width to stretch applied elements
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.9Setting box dimensions and aligning text. Line 21 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Box Dimensions div { background-color: #ffccff; 14 margin-bottom:.5em } Here is some 22 text that goes in a box which is 23 set to stretch across twenty precent 24 of the width of the screen. 25 Place contained text in box that occupies 20% of screen
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.9Setting box dimensions and aligning text. (Part 2) Here is some CENTERED text that goes in a box 28 which is set to stretch across eighty precent of 29 the width of the screen This box is only twenty percent of 33 the width and thirty percent of the height. 34 What do we do if it overflows? Set the 35 overflow property to scroll!
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.9
2002 Prentice Hall, Inc. All rights reserved. 4.9 Text Flow and the Box Model Floating –Allows repositioning of elements Nearby text will wrap clear property overrides wrapping Margin –Defines size of element’s margins
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.10Floating elements, aligning text and setting box dimensions. 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Flowing Text Around 10 Floating Elements div { background-color: #ffccff; 15 margin-bottom:.5em; 16 font-size: 1.5em; 17 width: 50% } p { text-align: justify; }
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.10Floating elements, aligning text and setting box dimensions. (Part 2) Line Deitel & Associates, Inc Corporate Training and Publishing Deitel & Associates, Inc. is an internationally recognized 33 corporate training and publishing organization specializing 34 in programming languages, Internet/World Wide Web technology 35 and object technology education. Deitel & Associates, 36 Inc. is a member of the World Wide Web Consortium. The company 37 provides courses on Java, C++, Visual Basic, C, Internet and 38 World Wide Web programming, and Object Technology Leading-edge Programming Textbooks The company's clients include many Fortune 1000 companies, 44 government agencies, branches of the military and business 45 organizations. Through its publishing partnership with Prentice 46 Hall, Deitel & Associates, Inc. publishes leading-edge 47 programming textbooks, professional books, interactive 48 CD-ROM-based multimedia Cyber Classrooms, satellite courses 49 and World Wide Web courses. Here 50 is some unflowing text. Here is some unflowing text Float text in box on right-side with.5 -pixel margin
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.10
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.12Applying borders to elements. Lines <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Borders body { background-color: #ccffcc } div { text-align: center; 16 margin-bottom: 1em; 17 padding:.5em } thick { border-width: thick } medium { border-width: medium } thin { border-width: thin } groove { border-style: groove } inset { border-style: inset } 28 Define various borders
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.12Applying borders to elements. (Part 2) 29.outset { border-style: outset } red { border-color: red } blue { border-color: blue } This text has a border 41 This text has a border 42 This text has a border A thin red line And a thicker blue line Multi-classes applied
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.12
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.13Various border-styles. 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Borders body { background-color: #ccffcc } div { text-align: center; 16 margin-bottom:.3em; 17 width: 50%; 18 position: relative; 19 left: 25%; 20 padding:.3em }
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.13Various border-styles. (Part 2) Lines Solid border 28 Double border 29 Groove border 30 Ridge border 31 Inset border 32 Outset border Define various border styles
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.13
2002 Prentice Hall, Inc. All rights reserved User Style Sheets User-defined styles –Users can customize styles e.g., Web-site designers
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.14Modifying text size with the em measurement. Line 13 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - User Styles note { font-size: 1.5em } Thanks for visiting my Web site. I hope you enjoy it. 21 Please Note: This site will be moving soon. 22 Please check periodically for updates Modify user-defined stylesheet by multiplying em style by 1.5
2002 Prentice Hall, Inc. All rights reserved. Adding your own style sheet in IE Internet options Accessibility User Style Sheet