1 / 47

CSS: Taking Control of Web Design

Learn how to create style sheets, apply styles to web pages, control fonts, backgrounds, and dimensions, and separate presentation from content.

matthewi
Download Presentation

CSS: Taking Control of Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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”

  2. Outline4.1 Introduction4.2 Inline Styles4.3 Creating Style Sheets with the style Element4.4 Conflicting Styles4.5 Linking External Style Sheets4.6 Positioning Elements4.7 Backgrounds4.8 Element Dimensions4.9 Text Flow and the Box Model4.10 User Style Sheets

  3. 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: http://jigsaw.w3.org/css-validator/

  4. Style Specifications Format • Inline style style = “attr_1 : value_1; attr_2 : value_2; …….; attr_n : value_n” • Document and external style <style type = “text/css”> <!-- /*this is for browser only*/ rule list selector {attr_1 : value_1; ….; attr_n : value_n; } --> </style> • “selector”: tag or tags affected by the rule

  5. 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.

  6. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 <!-- Fig. 4.1: inline.html --> Define style for following text 6 <!-- Using inline styles --> 7 8 <head> 9 <title>XML 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. 4.1 Inline styles.Lines 18 and 21

  7. Output for Fig. 4.1

  8. 4.3 Creating Styles with the style element(Document Specifications) • Styles • Declared in head of document • May be applied to whole document • Begin <styletype="text/css"> • Define styles attached to tags • Property followed by colon (:) • Multiple properties separated by semi-colon (;)

  9. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 Start of style sheet 5 <!-- Fig. 4.2: declared.html --> Define style attributes of em, h1, and p tags 6 <!-- Declaring a style sheet in the header section. --> 7 8 <head> 9 <title>XML How to Program - Style Sheets</title> Define special case (not attached to any pre-defined tag) 10 11 <!-- This begins the style sheet section. --> 12 <style type = "text/css"> 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 </style> 24 </head> 25 Fig. 4.2 Declaring styles in the head of a document.Line 12Lines 14-19Line 21

  10. 26 <body> Using special style 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> Fig. 4.2 Declaring styles in the head of a document. (Part 2)Line 29

  11. Output for Fig. 4.2

  12. 4.4 Conflicting Styles • Style precedence • Author > User > Agent (Web Browser)

  13. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 Assign attribute nodec to all a elements (override default underline attribute of element a) 5 <!-- Fig 4.3: advanced.html --> 6 <!-- More advanced style sheets --> Define style for any em element contained in li tag A pseudo-class, dynamically activated by users 7 8 <head> 9 <title>XML How to Program - More Styles</title> 10 11 <style type = "text/css"> 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 </style> 28 </head> 29 Fig. 4.3 Inheritance in style sheets.Line 13Lines 19-20 Line 15

  14. 30 <body> 31 32 <h1>Shopping list for <em>Monday</em>:</h1> 33 34 <ul> 35 <li>Milk</li> 36 <li>Bread 37 <ul> 38 <li>White bread</li> 39 <li>Rye bread</li> 40 <li>Whole wheat bread</li> 41 </ul> 42 </li> 43 <li>Rice</li> 44 <li>Potatoes</li> 45 <li>Pizza <em>with mushrooms</em></li> 46 </ul> 47 48 <p><a class = "nodec"href = "http://food.com">Go to the Grocery 49 store</a></p> 50 51 </body> 52 </html> Fig. 4.3 Inheritance in style sheets. (Part 2)

  15. Output for Fig. 4.3

  16. 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? <link rel = “stylesheet” type = “text/css” href = “URL of the style sheet document”> Note: <link> can only be placed in the “head” element

  17. 1 /* Fig. 4.4: styles.css */ 2 /* An external stylesheet */ 3 4 a { text-decoration: none } 5 Define attributes used for linking documents 6 a:hover { text-decoration:underline; 7 color: red; 8 background-color:#ccffcc } 9 10 li em { color: red; 11 font-weight: bold} 12 13 ul { margin-left:2cm } 14 15 ul ul { text-decoration: underline; 16 margin-left:.5cm } Fig. 4.4 An external style sheet (styles.css).Lines 4-16

  18. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 Link external stylesheet with current document, Only appear in “head” 6 <!-- Fig. 4.5: imported.html --> 7 <!-- Linking external style sheets --> 8 9 <head> 10 <title>XML How to Program - Importing Style Sheets</title> 11 <link rel = "stylesheet"type = "text/css" href = "styles.css"> 12 </head> 13 Fig. 4.5 Linking an external style sheet.Line 11

  19. 14 <body> 15 16 <h1>Shopping list for <em>Monday</em>:</h1> 17 <ul> 18 <li>Milk</li> 19 <li>Bread 20 <ul> 21 <li>White bread</li> 22 <li>Rye bread</li> 23 <li>Whole wheat bread</li> 24 </ul> 25 </li> 26 <li>Rice</li> 27 <li>Potatoes</li> 28 <li>Pizza <em>with mushrooms</em></li> 29 </ul> 30 31 <p> 32 <a href = "http://food.com">Go to the Grocery store</a> 33 </p> 34 35 </body> 36 </html> Fig. 4.5 Linking an external style sheet. (Part 2)

  20. Output for Fig. 4.5

  21. 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

  22. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 Use inline style to position images: place second image over the first (because second image has higher z index) 5 <!-- Fig 4.6: positioning.html --> 6 <!-- Absolute positioning of elements --> 7 8 <head> 9 <title>XML How to Program - Absolute Positioning</title> 10 </head> 11 12 <body> 13 14 <p><img src = "i.gif"style = "position: absolute; top: 0px; 15 left: 0px; z-index: 1"alt = "First positioned image"></p> 16 <p style = "position: absolute; top: 50px; left: 50px; 17 z-index: 3; font-size: 20pt;">Positioned Text</p> 18 <p><img src = "circle.gif"style = "position: absolute; top: 25px; 19 left: 100px; z-index: 2"alt = "Second positioned image"></p> 20 21 </body> 22 </html> Fig. 4.6 Positioning elements with CSS.Lines 14-19

  23. Output for Fig. 4.6

  24. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 <!-- Fig. 4.7: positioning2.html --> 6 <!-- Relative positioning of elements --> 7 8 <head> 9 <title>XML How to Program - Relative Positioning</title> Define attributes that position elements relative to browser-defined location 10 11 <style type = "text/css"> 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 Fig. 4.7 Relative positioning of elements.Lines 20-21

  25. 26 .shiftleft { position:relative; 27 left:-1ex } 28 29 .shiftright { position: relative; 30 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. 4.7 Relative positioning of elements. (Part 2)

  26. Output for Fig. 4.7

  27. 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

  28. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 <!-- Fig. 4.8: background.html --> 6 <!-- Adding background images and indentation --> Place image at bottom-right of screen allocate image by using “url” 7 8 <head> 9 <title>XML How to Program - Background Images</title> 10 11 <style type = "text/css"> 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 </style> 26 </head> 27 Fig. 4.8 Adding a background image with CSS.Line 14

  29. 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. 4.8 Adding a background image with CSS. (Part 2)

  30. Output for Fig. 4.8

  31. 4.8 Element Dimensions • Specify element dimensions • Set style attribute width to stretch applied elements

  32. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 <!-- Fig. 4.9: width.html --> 6 <!-- Setting box dimensions and aligning text --> 7 Place contained text in box that occupies 20% of screen 8 <head> 9 <title>XML How to Program - Box Dimensions</title> 10 11 <style type = "text/css"> 12 13 div { background-color:#ffccff; 14 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. 4.9 Setting box dimensions and aligning text.Line 21

  33. 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. 4.9 Setting box dimensions and aligning text. (Part 2)

  34. Output for Fig. 4.9

  35. 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

  36. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 <!-- Fig. 4.10: floating.html --> 6 <!-- Floating elements and element boxes --> 7 8 <head> 9 <title>XML How to Program - Flowing Text Around 10 Floating Elements</title> 11 12 <style type = "text/css"> 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 </style> 22 23 </head> 24 Fig. 4.10 Floating elements, aligning text and setting box dimensions.

  37. 25 <body> Float text in box on right-side with .5-pixel margin 26 27 <div style = "text-align: center">Deitel & Associates, Inc.</div> 28 29 <div style = "float: right; margin: .5em; text-align: right"> 30 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"> 41 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. 4.10 Floating elements, aligning text and setting box dimensions. (Part 2)Line 29

  38. Output for Fig. 4.10

  39. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 <!-- Fig. 4.12: borders.html --> 6 <!-- Setting borders of an element --> 7 8 <head> 9 <title>XML How to Program - Borders</title> Define various borders 10 11 <style type = "text/css"> 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 Fig. 4.12 Applying borders to elements.Lines 19-27

  40. 29 .outset { border-style:outset } 30 31 .red { border-color:red } 32 33 .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. 4.12 Applying borders to elements. (Part 2) Multi-classes applied

  41. Output for Fig. 4.12

  42. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 <!-- Fig. 4.13: borders2.html --> 6 <!-- Various border-styles --> 7 8 <head> 9 <title>XML How to Program - Borders</title> 10 11 <style type = "text/css"> 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 </style> 22 23 </head> 24 Fig. 4.13 Various border-styles.

  43. 25 <body> 26 27 <div style ="border-style: solid">Solid border</div> Define various border styles 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. 4.13 Various border-styles. (Part 2)Lines 27-32

  44. Output for Fig. 4.13

  45. 4.10 User Style Sheets • User-defined styles • Users can customize styles • e.g., Web-site designers

  46. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html> 4 5 <!-- Fig. 4.14: user.html --> 6 <!-- User styles --> Modify user-defined stylesheet by multiplying em style by 1.5 7 8 <head> 9 <title>XML How to Program - User Styles</title> 10 11 <style type = "text/css"> 12 13 .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. 4.14 Modifying text size with the em measurement.Line 13

  47. Adding your own style sheet in IE • Internet options  Accessibility  User Style Sheet

More Related