Download presentation
Presentation is loading. Please wait.
1
Chapter 26 - Bonus: Cascading Style Sheets (CSS)
Outline 26.1 Introduction 26.2 Inline Styles 26.3 Creating Style Sheets with the style Element 26.4 Conflicting Styles 26.5 Linking External Style Sheets 26.6 Positioning Elements 26.7 Backgrounds 26.8 Element Dimensions 26.9 Text Flow and the Box Model User Style Sheets
2
Cascading Style Sheets (CSS)
Introduction Cascading Style Sheets (CSS) Define document style Separate structure from presentation
3
Inline styles override all other styles
Attribute Style Define style in document Each element is followed by colon (:) then value Inline styles override all other styles
4
Fig. 26.1 Inline styles. Lines 18 and 21
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig. 26.1: inline.html --> 6 <!-- Using inline styles --> 7 8 <head> 9 <title>Perl How to Program - Inline Styles</title> 10 </head> 11 12 <body> 13 14 <p>This text does not have any style applied to it.</p> 15 16 <!-- The style attribute allows you to declare inline --> 17 <!-- styles. Separate multiple styles with a semicolon. --> 18 <p style = "font-size: 20pt">This text has the <em>font-size</em> 19 style applied to it, making it 20pt.</p> 20 21 <p style = "font-size: 20pt; color: #0000ff">This text has the 22 <em>font-size</em> and <em>color</em> styles applied to it, 23 making it 20pt. and blue.</p> 24 25 </body> 26 </html> Fig Inline styles. Lines 18 and 21 Define style for following text
5
Output for Fig. 26.1
6
26.3 Creating Styles with the style element
Declared in head of document May be applied to whole document Begin <style type = "text/css"> Define styles attached to tags Property followed by colon (:) Multiple properties separated by semi-colon (;)
7
Define style attributes of em, h1, and p tags
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig. 26.2: declared.html > 6 <!-- Declaring a style sheet in the header section. --> 7 8 <head> 9 <title>Perl How to Program - Style Sheets</title> 10 11 <!-- This begins the style sheet section. --> 12 <style type = "text/css"> 13 em { background-color: #8000ff; color: white } 16 h { font-family: arial, sans-serif } 18 p { font-size: 14pt } 20 special { color: blue } 22 23 </style> 24 </head> 25 Fig Declaring styles in the head of a document. Line 12 Lines Line 21 Start of style sheet Define style attributes of em, h1, and p tags Define special case (not attached to any pre-defined tag)
8
Fig. 26.2 Declaring styles in the head of a document. (Part 2) Line 29
26 <body> 27 28 <!-- This class attribute applies the .blue style --> 29 <h1 class = "special">Deitel & Associates, Inc.</h1> 30 31 <p>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.</p> 38 39 <h1>Clients</h1> 40 <p class = "special"> The company's clients include many 41 <em>Fortune 1000 companies</em>, 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.</p> 47 48 </body> 49 </html> Using special style Fig Declaring styles in the head of a document. (Part 2) Line 29
9
Output for Fig. 26.2
10
26.4 Conflicting Styles Style precedence
Author > User > Agent (Web Browser)
11
Fig. 26.3 Inheritance in style sheets. Line 13 Lines 19-20
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig 26.3: advanced.html > 6 <!-- More advanced style sheets --> 7 8 <head> 9 <title>Perl How to Program - More Styles</title> 10 11 <style type = "text/css"> 12 a.nodec { text-decoration: none } 14 a:hover { text-decoration: underline; color: red; background-color: #ccffcc } 18 li em { color: red; font-weight: bold } 21 ul { margin-left: 75px } 23 ul ul { text-decoration: underline; margin-left: 15px } 26 27 </style> 28 </head> 29 Fig Inheritance in style sheets. Line 13 Lines 19-20 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
Fig. 26.3 Inheritance in style sheets. (Part 2)
30 <body> 31 32 <h1>Shopping list for <em>Monday</em>:</h1> 33 34 <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> 46 </ul> 47 48 <p><a class = "nodec" href = " to the Grocery 49 store</a></p> 50 51 </body> 52 </html> Fig Inheritance in style sheets. (Part 2)
13
Output for Fig. 26.3
14
26.5 Linking External Style Sheets
Contained in a .css file Single style sheet used easily between multiple pages Linked with link element
15
Fig. 26.4 An external style sheet (styles.css). Lines 4-16
1 /* Fig. 26.4: styles.css */ 2 /* An external stylesheet */ 3 4 a { text-decoration: none } 5 6 a:hover { text-decoration: underline; color: red; background-color: #ccffcc } 9 10 li em { color: red; font-weight: bold} 12 13 ul { margin-left: 2cm } 14 15 ul ul { text-decoration: underline; margin-left: .5cm } Fig An external style sheet (styles.css). Lines 4-16 Define attributes used for linking documents
16
Fig. 26.5 Linking an external style sheet. Line 11
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 6 <!-- Fig. 26.5: imported.html > 7 <!-- Linking external style sheets --> 8 9 <head> 10 <title>Perl How to Program - Importing Style Sheets</title> 11 <link rel = "stylesheet" type = "text/css" href = "styles.css"> 12 </head> 13 Fig Linking an external style sheet. Line 11 Link external stylesheet with current document
17
Fig. 26.5 Linking an external style sheet. (Part 2)
14 <body> 15 16 <h1>Shopping list for <em>Monday</em>:</h1> 17 <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> 30 31 <p> 32 <a href = " to the Grocery store</a> 33 </p> 34 35 </body> 36 </html> Fig Linking an external style sheet. (Part 2)
18
Output for Fig. 26.5
19
26.6 Positioning Elements CSS property position Absolute positioning
Define element location in pixels Location is not defined by browser
20
Fig. 26.6 Positioning elements with CSS. Lines 14-19
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig 26.6: positioning.html > 6 <!-- Absolute positioning of elements --> 7 8 <head> 9 <title>Perl How to Program - Absolute Positioning</title> 10 </head> 11 12 <body> 13 14 <p><img src = "i.gif" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First positioned image"></p> 16 <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt;">Positioned Text</p> 18 <p><img src = "circle.gif" style = "position: absolute; top: 25px; left: 100px; z-index: 2" alt = "Second positioned image"></p> 20 21 </body> 22 </html> Fig Positioning elements with CSS. Lines 14-19 Use inline style to position images: place second image over the first (because second image has higher z index)
21
Output for Fig. 26.6
22
Fig. 26.7 Relative positioning of elements. Lines 20-21
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig. 26.7: positioning2.html > 6 <!-- Relative positioning of elements --> 7 8 <head> 9 <title>Perl How to Program - Relative Positioning</title> 10 11 <style type = "text/css"> 12 p { font-size: 1.3em; font-family: verdana, arial, sans-serif } 15 span { color: red; font-size: .6em; height: 1em } 19 super { position: relative; top: -1ex } 22 sub { position: relative; bottom: -1ex } 25 Fig Relative positioning of elements. Lines 20-21 Define attributes that position elements relative to browser-defined location
23
Fig. 26.7 Relative positioning of elements. (Part 2)
shiftleft { position: relative; left: -1ex } 28 shiftright { position: relative; right: -1ex } 31 32 </style> 33 </head> 34 35 <body> 36 37 <p>The text at the end of this sentence 38 <span class = "super">is in superscript</span>.</p> 39 40 <p>The text at the end of this sentence 41 <span class = "sub">is in subscript</span>.</p> 42 43 <p>The text at the end of this sentence 44 <span class = "shiftleft">is shifted left</span>.</p> 45 46 <p>The text at the end of this sentence 47 <span class = "shiftright">is shifted right</span>.</p> 48 49 </body> 50 </html> Fig Relative positioning of elements. (Part 2)
24
Output for Fig. 26.7
25
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
Fig. 26.8 Adding a background image with CSS. Line 14
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig. 26.8: background.html > 6 <!-- Adding background images and indentation --> 7 8 <head> 9 <title>Perl How to Program - Background Images</title> 10 11 <style type = "text/css"> 12 body { background-image: url(logo.gif); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed; } 17 p { font-size: 18pt; color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; } 22 dark { font-weight: bold; } 24 25 </style> 26 </head> 27 Fig Adding a background image with CSS. Line 14 Place image at bottom-right of screen
27
Fig. 26.8 Adding a background image with CSS. (Part 2)
28 <body> 29 30 <p> 31 This example uses the background-image, 32 background-position and background-attachment 33 styles to place the <span class = "dark">Deitel 34 & Associates, Inc.</span> 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 </p> 39 40 </body> 41 </html> Fig Adding a background image with CSS. (Part 2)
28
Output for Fig. 26.8
29
Specify element dimensions
Set style attribute width to stretch applied elements
30
Fig. 26.9 Setting box dimensions and aligning text. Line 21
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig. 26.9: width.html > 6 <!-- Setting box dimensions and aligning text --> 7 8 <head> 9 <title>Perl How to Program - Box Dimensions</title> 10 11 <style type = "text/css"> 12 div { background-color: #ffccff; margin-bottom: .5em } 15 </style> 16 17 </head> 18 19 <body> 20 21 <div style = "width: 20%">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.</div> 25 Fig Setting box dimensions and aligning text. Line 21 Place contained text in box that occupies 20% of screen
31
Fig. 26.9 Setting box dimensions and aligning text. (Part 2)
26 <div style = "width: 80%; text-align: center"> 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.</div> 30 31 <div style = "width: 20%; height: 30%; overflow: scroll"> 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!</div> 36 37 </body> 38 </html> Fig Setting box dimensions and aligning text. (Part 2)
32
Output for Fig. 26.9
33
26.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
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
" 3 <html> 4 5 <!-- Fig : floating.html > 6 <!-- Floating elements and element boxes --> 7 8 <head> 9 <title>Perl How to Program - Flowing Text Around Floating Elements</title> 11 12 <style type = "text/css"> 13 div { background-color: #ffccff; margin-bottom: .5em; font-size: 1.5em; width: 50% } 18 p { text-align: justify; } 20 21 </style> 22 23 </head> 24 Fig Floating elements, aligning text and setting box dimensions.
35
Float text in box on right-side with .5-pixel margin
25 <body> 26 27 <div style = "text-align: center">Deitel & Associates, Inc.</div> 28 29 <div style = "float: right; margin: .5em; text-align: right"> Corporate Training and Publishing</div> 31 32 <p>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.</p> 39 40 <div style = "float: right; padding: .5em; text-align: right"> Leading-edge Programming Textbooks</div> 42 43 <p>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.<span style = "clear: right">Here 50 is some unflowing text. Here is some unflowing text.</span></p> 51 52 </body> 53 </html> Fig Floating elements, aligning text and setting box dimensions. (Part 2) Line 29
36
Output for Fig
37
Fig. 26.11 Box model for block-level elements.
Content Margin Border Padding Fig Box model for block-level elements.
38
Fig. 26.12 Applying borders to elements. Lines 19-27
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig : borders.html > 6 <!-- Setting borders of an element --> 7 8 <head> 9 <title>Perl How to Program - Borders</title> 10 11 <style type = "text/css"> 12 body { background-color: #ccffcc } 14 div { text-align: center; margin-bottom: 1em; padding: .5em } 18 thick { border-width: thick } 20 medium { border-width: medium } 22 thin { border-width: thin } 24 groove { border-style: groove } 26 inset { border-style: inset } 28 Fig Applying borders to elements. Lines 19-27 Define various borders
39
Fig. 26.12 Applying borders to elements. (Part 2)
outset { border-style: outset } 30 red { border-color: red } 32 blue { border-color: blue } 34 35 </style> 36 </head> 37 38 <body> 39 40 <div class = "thick groove">This text has a border</div> 41 <div class = "medium groove">This text has a border</div> 42 <div class = "thin groove">This text has a border</div> 43 44 <p class = "thin red inset">A thin red line...</p> 45 <p class = "medium blue outset">And a thicker blue line</p> 46 47 </body> 48 </html> Fig Applying borders to elements. (Part 2)
40
Output for Fig
41
Fig. 26.13 Various border-styles.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig : borders2.html --> 6 <!-- Various border-styles > 7 8 <head> 9 <title>Perl How to Program - Borders</title> 10 11 <style type = "text/css"> 12 body { background-color: #ccffcc } 14 div { text-align: center; margin-bottom: .3em; width: 50%; position: relative; left: 25%; padding: .3em } 21 </style> 22 23 </head> 24 Fig Various border-styles.
42
Fig. 26.13 Various border-styles. (Part 2) Lines 27-32
25 <body> 26 27 <div style = "border-style: solid">Solid border</div> 28 <div style = "border-style: double">Double border</div> 29 <div style = "border-style: groove">Groove border</div> 30 <div style = "border-style: ridge">Ridge border</div> 31 <div style = "border-style: inset">Inset border</div> 32 <div style = "border-style: outset">Outset border</div> 33 34 </body> 35 </html> Fig Various border-styles. (Part 2) Lines 27-32 Define various border styles
43
Output for Fig
44
26.10 User Style Sheets User-defined styles Users can customize styles
e.g., Web-site designers
45
Fig. 26.14 Modifying text size with the em measurement. Line 13
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 3 <html> 4 5 <!-- Fig : user.html --> 6 <!-- User styles > 7 8 <head> 9 <title>Perl How to Program - User Styles</title> 10 11 <style type = "text/css"> 12 note { font-size: 1.5em } 14 15 </style> 16 </head> 17 18 <body> 19 20 <p>Thanks for visiting my Web site. I hope you enjoy it.</p> 21 <p class = "note">Please Note: This site will be moving soon. 22 Please check periodically for updates.</p> 23 24 </body> 25 </html> Fig Modifying text size with the em measurement. Line 13 Modify user-defined stylesheet by multiplying em style by 1.5
Similar presentations
