Download presentation
Presentation is loading. Please wait.
1
2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) 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
2
2002 Prentice Hall, Inc. All rights reserved. 4.1 Introduction Cascading Style Sheets (CSS) –Define document style –Separate structure from presentation
3
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
4
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 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Inline Styles 10 11 12 13 14 This text does not have any style applied to it. 15 16 17 18 This text has the font-size 19 style applied to it, making it 20pt. 20 21 This text has the 22 font-size and color styles applied to it, 23 making it 20pt. and blue. 24 25 26 Define style for following text
5
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.1
6
2002 Prentice Hall, Inc. All rights reserved. 4.3 Creating Styles with the style element 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 ( ; )
7
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.2Declaring styles in the head of a document. Line 12 Lines 14-19 Line 21 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Style Sheets 10 11 12 13 14 em { background-color: #8000ff; 15 color: white } 16 17 h1 { font-family: arial, sans-serif } 18 19 p { font-size: 14pt } 20 21.special { color: blue } 22 23 24 25 Start of style sheetDefine style attributes of em, h1, and p tags Define special case (not attached to any pre-defined tag)
8
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.2Declaring styles in the head of a document. (Part 2) Line 29 26 27 28 29 Deitel & Associates, Inc. 30 31 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. 38 39 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. 47 48 49 Using special style
9
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.2
10
2002 Prentice Hall, Inc. All rights reserved. 4.4 Conflicting Styles Style precedence –Author > User > Agent (Web Browser)
11
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.3Inheritance in style sheets. Line 13 Lines 19-20 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - More Styles 10 11 12 13 a.nodec { text-decoration: none } 14 15 a:hover { text-decoration: underline; 16 color: red; 17 background-color: #ccffcc } 18 19 li em { color: red; 20 font-weight: bold } 21 22 ul { margin-left: 75px } 23 24 ul ul { text-decoration: underline; 25 margin-left: 15px } 26 27 28 29 Assign attribute nodec to all a elements (override default underline attribute of element a ) Define style for any em element contained in li tag
12
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.3Inheritance in style sheets. (Part 2) 30 31 32 Shopping list for Monday : 33 34 35 Milk 36 Bread 37 38 White bread 39 Rye bread 40 Whole wheat bread 41 42 43 Rice 44 Potatoes 45 Pizza with mushrooms 46 47 48 Go to the Grocery 49 store 50 51 52
13
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.3
14
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 –Linked with link element
15
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.4An external style sheet (styles.css). Lines 4-16 1/* 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
16
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 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 10 XML How to Program - Importing Style Sheets 11 12 13 Link external stylesheet with current document
17
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.5Linking an external style sheet. (Part 2) 14 15 16 Shopping list for Monday : 17 18 Milk 19 Bread 20 21 White bread 22 Rye bread 23 Whole wheat bread 24 25 26 Rice 27 Potatoes 28 Pizza with mushrooms 29 30 31 32 Go to the Grocery store 33 34 35 36
18
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.5
19
2002 Prentice Hall, Inc. All rights reserved. 4.6 Positioning Elements CSS property position –Absolute positioning Define element location in pixels Location is not defined by browser
20
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.6Positioning elements with CSS. Lines 14-19 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Absolute Positioning 10 11 12 13 14 <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"> 20 21 22 Use inline style to position images: place second image over the first (because second image has higher z index)
21
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.6
22
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.7Relative positioning of elements. Lines 20-21 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Relative Positioning 10 11 12 13 p { font-size: 1.3em; 14 font-family: verdana, arial, sans-serif } 15 16 span { color: red; 17 font-size:.6em; 18 height: 1em } 19 20.super { position: relative; 21 top: -1ex } 22 23.sub { position: relative; 24 bottom: -1ex } 25 Define attributes that position elements relative to browser-defined location
23
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.7Relative positioning of elements. (Part 2) 26.shiftleft { position: relative; 27 left: -1ex } 28 29.shiftright { position: relative; 30 right: -1ex } 31 32 33 34 35 36 37 The text at the end of this sentence 38 is in superscript. 39 40 The text at the end of this sentence 41 is in subscript. 42 43 The text at the end of this sentence 44 is shifted left. 45 46 The text at the end of this sentence 47 is shifted right. 48 49 50
24
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.7
25
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
26
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 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Background Images 10 11 12 13 body { background-image: url(logo.gif); 14 background-position: bottom right; 15 background-repeat: no-repeat; 16 background-attachment: fixed; } 17 18 p { font-size: 18pt; 19 color: #aa5588; 20 text-indent: 1em; 21 font-family: arial, sans-serif; } 22 23.dark { font-weight: bold; } 24 25 26 27 Place image at bottom-right of screen
27
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.8Adding a background image with CSS. (Part 2) 28 29 30 31 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. 38 39 40 41
28
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.8
29
2002 Prentice Hall, Inc. All rights reserved. 4.8 Element Dimensions Specify element dimensions –Set style attribute width to stretch applied elements
30
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 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Box Dimensions 10 11 12 13 div { background-color: #ffccff; 14 margin-bottom:.5em } 15 16 17 18 19 20 21 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
31
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.9Setting box dimensions and aligning text. (Part 2) 26 27 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. 30 31 32 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! 36 37 38
32
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.9
33
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
34
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 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Flowing Text Around 10 Floating Elements 11 12 13 14 div { background-color: #ffccff; 15 margin-bottom:.5em; 16 font-size: 1.5em; 17 width: 50% } 18 19 p { text-align: justify; } 20 21 22 23 24
35
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.10Floating elements, aligning text and setting box dimensions. (Part 2) Line 29 25 26 27 Deitel & Associates, Inc. 28 29 30 Corporate Training and Publishing 31 32 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. 39 40 41 Leading-edge Programming Textbooks 42 43 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. 51 52 53 Float text in box on right-side with.5 -pixel margin
36
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.10
37
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.12Applying borders to elements. Lines 19-27 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Borders 10 11 12 13 body { background-color: #ccffcc } 14 15 div { text-align: center; 16 margin-bottom: 1em; 17 padding:.5em } 18 19.thick { border-width: thick } 20 21.medium { border-width: medium } 22 23.thin { border-width: thin } 24 25.groove { border-style: groove } 26 27.inset { border-style: inset } 28 Define various borders
38
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.12Applying borders to elements. (Part 2) 29.outset { border-style: outset } 30 31.red { border-color: red } 32 33.blue { border-color: blue } 34 35 36 37 38 39 40 This text has a border 41 This text has a border 42 This text has a border 43 44 A thin red line... 45 And a thicker blue line 46 47 48
39
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.12
40
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.13Various border-styles. 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Borders 10 11 12 13 body { background-color: #ccffcc } 14 15 div { text-align: center; 16 margin-bottom:.3em; 17 width: 50%; 18 position: relative; 19 left: 25%; 20 padding:.3em } 21 22 23 24
41
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 4.13Various border-styles. (Part 2) Lines 27-32 25 26 27 Solid border 28 Double border 29 Groove border 30 Ridge border 31 Inset border 32 Outset border 33 34 35 Define various border styles
42
2002 Prentice Hall, Inc. All rights reserved. Output for Fig. 4.13
43
2002 Prentice Hall, Inc. All rights reserved. 4.10 User Style Sheets User-defined styles –Users can customize styles e.g., Web-site designers
44
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 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - User Styles 10 11 12 13.note { font-size: 1.5em } 14 15 16 17 18 19 20 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. 23 24 25 Modify user-defined stylesheet by multiplying em style by 1.5
Similar presentations
