Upload
others
View
13
Download
0
Embed Size (px)
Citation preview
1
Cascading Style Sheets™ (CSS)
Outline3.1 Introduction3.2 Inline Styles3.3 Embedded Style Sheets3.4 Conflicting Styles3.5 Linking External Style Sheets3.6 W3C CSS Validation Service3.7 Positioning Elements3.8 Backgrounds3.9 Element Dimensions3.10 Text Flow and the Box Model3.11 User Style Sheets3.12 Web Resources
2
Objectives
• In this lesson, you will learn:– To control 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 model and how to control the margins, borders and padding.
– To use style sheets to separate presentation from content.
3
3.1 Introduction
• Cascading Style Sheets (CSS)– Separation of structure from presentation
4
3.2 Inline Styles
• Declare an individual element’s format– Attribute style
– CSS property• Followed by a colon and a value (font-size; color)
– Inline styles override any other styles applied in Embedded Style Sheets
Outline
5
Outline
inline.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.1: inline.html Fig. 6.1: inline.html Fig. 6.1: inline.html Fig. 6.1: inline.html -------->>>>
6 <!<!<!<!-------- Using inline styles Using inline styles Using inline styles Using inline styles -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http:"http:"http:"http://www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Inline StylesInline StylesInline StylesInline Styles</title></title></title></title>
11 </head> </head> </head> </head>
12
13 <body> <body> <body> <body>
14
15 <p><p><p><p>This text does not have any style applied to it.This text does not have any style applied to it.This text does not have any style applied to it.This text does not have any style applied to it.</p></p></p></p>
16
17 <! <! <! <!-------- The style attribute allows you to The style attribute allows you to The style attribute allows you to The style attribute allows you to declare declare declare declare -------->>>>
18 <! <! <! <!-------- inline styles. Separate multiple styles inline styles. Separate multiple styles inline styles. Separate multiple styles inline styles. Separate multiple styles -------->>>>
19 <! <! <! <!-------- with a semicolon. with a semicolon. with a semicolon. with a semicolon. -------->>>>
20 <p style = <p style = <p style = <p style = "font"font"font"font----size: 20pt"size: 20pt"size: 20pt"size: 20pt">>>>This text has theThis text has theThis text has theThis text has the
21 <em> <em> <em> <em>fontfontfontfont----sizesizesizesize</em> </em> </em> </em> style applied to it, making style applied to it, making style applied to it, making style applied to it, making it 20pt.it 20pt.it 20pt.it 20pt.
22 </p></p></p></p>
23
Outline
6
Outline
inline.html(2 of 2)
24 <p style = <p style = <p style = <p style = "font"font"font"font----size: 20pt; color: #0000ff"size: 20pt; color: #0000ff"size: 20pt; color: #0000ff"size: 20pt; color: #0000ff">>>>
25 This text has the This text has the This text has the This text has the <em><em><em><em>fontfontfontfont----sizesizesizesize</em></em></em></em> and and and and
26 <em> <em> <em> <em>colorcolorcolorcolor</em></em></em></em> styles applied to it, making it styles applied to it, making it styles applied to it, making it styles applied to it, making it
27 20pt. and blue. 20pt. and blue. 20pt. and blue. 20pt. and blue.</p></p></p></p>
28
29 </body> </body> </body> </body>
30 </html></html></html></html>
7
3.3 Embedded Style Sheets
• Embed an entire CSS document in an XHTML document’s head section– Multipurpose Internet Mail Extensions (MIME) type
• Describes a file’s content
– Property background-color• Specifies the background color
– Property font-family• Specifies the name of the font to use (different browser have a
different implicit font)
– Property font-size• Specifies a 14-point font
Outline
8
Outline
declared.html(1 of 3)
four styles rules
style – attributeem – element (font italic)color – property
special style class –can be applied to any type of element
14pt (point)relative values:xx-small, x-small, smaller, medium, large, …
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.2: declared.html Fig. 6.2: declared.html Fig. 6.2: declared.html Fig. 6.2: declared.html -------->>>>
6 <!<!<!<!-------- Declaring a style sheet in the hea Declaring a style sheet in the hea Declaring a style sheet in the hea Declaring a style sheet in the header section. der section. der section. der section. -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Style SheetsStyle SheetsStyle SheetsStyle Sheets</title></title></title></title>
11
12 <!<!<!<!-------- this begins the style sheet section this begins the style sheet section this begins the style sheet section this begins the style sheet section -------->>>>
13 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
14
15 emememem { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #8000ff#8000ff#8000ff#8000ff;;;;
16 color:color:color:color: whitewhitewhitewhite } } } }
17
18 h1h1h1h1 { { { { fontfontfontfont----family:family:family:family: arial, sansarial, sansarial, sansarial, sans----serifserifserifserif } } } }
19
20 pppp { { { { fontfontfontfont----size:size:size:size: 14pt14pt14pt14pt } } } }
21
22 .special.special.special.special { { { { color:color:color:color: blueblueblueblue } } } }
23
24 </style></style></style></style>
25 </head> </head> </head> </head>
Outline
9
Outline
declared.html(2 of 3)
26
27 <body> <body> <body> <body>
28
29 <!<!<!<!-------- this class attribute applies the .special style this class attribute applies the .special style this class attribute applies the .special style this class attribute applies the .special style -------->>>>
30 <h1 class = <h1 class = <h1 class = <h1 class = "special""special""special""special">>>>Deitel & Associates, Inc.Deitel & Associates, Inc.Deitel & Associates, Inc.Deitel & Associates, Inc.</h1></h1></h1></h1>
31
32 <p> <p> <p> <p>Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally
33 recognrecognrecognrecognized corporate training and publishing organization ized corporate training and publishing organization ized corporate training and publishing organization ized corporate training and publishing organization
34 specializing in programming languages, Internet/World specializing in programming languages, Internet/World specializing in programming languages, Internet/World specializing in programming languages, Internet/World
35 Wide Web technologyWide Web technologyWide Web technologyWide Web technology and object technology education. and object technology education. and object technology education. and object technology education.
36 Deitel & Associates, Inc. isDeitel & Associates, Inc. isDeitel & Associates, Inc. isDeitel & Associates, Inc. is a member of the World Wida member of the World Wida member of the World Wida member of the World Wide e e e
37 Web Consortium. The company provides courses on Java, Web Consortium. The company provides courses on Java, Web Consortium. The company provides courses on Java, Web Consortium. The company provides courses on Java,
38 C++, Visual Basic, C, Internet and World Wide Web C++, Visual Basic, C, Internet and World Wide Web C++, Visual Basic, C, Internet and World Wide Web C++, Visual Basic, C, Internet and World Wide Web
39 programming, and Object Technology. programming, and Object Technology. programming, and Object Technology. programming, and Object Technology.</p></p></p></p>
40
41 <h1> <h1> <h1> <h1>ClientsClientsClientsClients</h1></h1></h1></h1>
42 <p class = <p class = <p class = <p class = "special""special""special""special">>>> T T T The company's clients include many he company's clients include many he company's clients include many he company's clients include many
43 <em><em><em><em>Fortune 1000 companiesFortune 1000 companiesFortune 1000 companiesFortune 1000 companies</em></em></em></em>, government agencies, , government agencies, , government agencies, , government agencies,
44 branches of the military and business organizations. branches of the military and business organizations. branches of the military and business organizations. branches of the military and business organizations.
45 Through its publishing partnership with Prentice Hall, Through its publishing partnership with Prentice Hall, Through its publishing partnership with Prentice Hall, Through its publishing partnership with Prentice Hall,
46 Deitel & Deitel & Deitel & Deitel & Associates, Inc. publishes leadingamp; Associates, Inc. publishes leadingamp; Associates, Inc. publishes leadingamp; Associates, Inc. publishes leading----edge edge edge edge
47 programming textbooks, professional books, interactive programming textbooks, professional books, interactive programming textbooks, professional books, interactive programming textbooks, professional books, interactive
48 CD CD CD CD----ROMROMROMROM----based multimedia Cyber Classrooms, satellite based multimedia Cyber Classrooms, satellite based multimedia Cyber Classrooms, satellite based multimedia Cyber Classrooms, satellite
49 courses and World Wide Web courses. courses and World Wide Web courses. courses and World Wide Web courses. courses and World Wide Web courses.</p></p></p></p>
50
Outline
10
Outline
declared.html(3 of 3)
51 </body> </body> </body> </body>
52 </html></html></html></html>
11
3.4 Conflicting Styles
• Inheritance– Descendant’s properties have greater specificity than
ancestor’s properties
– styles may be defined by an author, a user, or user agent (Web browser)
Outline
12
Outline
advance.html(1 of 3)
hover pseudoclassactivated dynamically when cursor mouse placed at the text (place)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig 6.3: advanced.html Fig 6.3: advanced.html Fig 6.3: advanced.html Fig 6.3: advanced.html -------->>>>
6 <!<!<!<!-------- More advanced style sheets More advanced style sheets More advanced style sheets More advanced style sheets -------->>>>
7
8 <html xmln<html xmln<html xmln<html xmlns = s = s = s = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>More StylesMore StylesMore StylesMore Styles</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 a.nodec a.nodec a.nodec a.nodec { { { { texttexttexttext----decoration:decoration:decoration:decoration: nonenonenonenone } } } }
15
16 a:hovera:hovera:hovera:hover { { { { texttexttexttext----decoration:decoration:decoration:decoration: underlineunderlineunderlineunderline;;;;
17 color:color:color:color: redredredred;;;;
18 backgroundbackgroundbackgroundbackground----color:color:color:color: #ccffcc#ccffcc#ccffcc#ccffcc } } } }
19
20 li em li em li em li em { { { { color:color:color:color: redredredred;;;;
21 fontfontfontfont----weight:weight:weight:weight: boldboldboldbold } } } }
22
23 ul ul ul ul { { { { marginmarginmarginmargin----left:left:left:left: 75757575px px px px }}}}
24
Outline
13
Outline
advance.html(2 of 3)
25 ul ul ul ul ul ul ul ul { { { { texttexttexttext----decoration:decoration:decoration:decoration: underlineunderlineunderlineunderline;;;;
26 marginmarginmarginmargin----left:left:left:left: 15px15px15px15px } } } }
27
28 </style> </style> </style> </style>
29 </head> </head> </head> </head>
30
31 <body> <body> <body> <body>
32
33 <h1> <h1> <h1> <h1>Shopping list for Shopping list for Shopping list for Shopping list for <em><em><em><em>MondayMondayMondayMonday</em></em></em></em>::::</h1></h1></h1></h1>
34
35 <ul> <ul> <ul> <ul>
36 <li><li><li><li>MilkMilkMilkMilk</li></li></li></li>
37 <li><li><li><li>BreadBreadBreadBread
38 <ul><ul><ul><ul>
39 <li><li><li><li>White breadWhite breadWhite breadWhite bread</li></li></li></li>
40 <li><li><li><li>Rye breadRye breadRye breadRye bread</li></li></li></li>
41 <li><li><li><li>Whole wheat breadWhole wheat breadWhole wheat breadWhole wheat bread</li></li></li></li>
42 </ul></ul></ul></ul>
43 </li></li></li></li>
44 <li> <li> <li> <li>RiceRiceRiceRice</li></li></li></li>
45 <li> <li> <li> <li>PotatoesPotatoesPotatoesPotatoes</li></li></li></li>
46 <li> <li> <li> <li>Pizza Pizza Pizza Pizza <em><em><em><em>with mushroomswith mushroomswith mushroomswith mushrooms</em></li></em></li></em></li></em></li>
47 </ul></ul></ul></ul>
48
Outline
14
Outline
advance.html(3 of 3)
49 <p><a class = <p><a class = <p><a class = <p><a class = "nodec""nodec""nodec""nodec" href = href = href = href = "http://www.food.com""http://www.food.com""http://www.food.com""http://www.food.com">>>>
50 Go to the Grocery storeGo to the Grocery storeGo to the Grocery storeGo to the Grocery store</a></p></a></p></a></p></a></p>
51
52 </body> </body> </body> </body>
53 </html></html></html></html>
15
3.5 Linking External Style Sheets
• External style sheets– Can provide uniform look and feel to entire site
Outline
16
Outline
styles.css(1 of 1)
1 /* Fig. 6.4: styles.css *//* Fig. 6.4: styles.css *//* Fig. 6.4: styles.css *//* Fig. 6.4: styles.css */
2 /* An external stylesheet *//* An external stylesheet *//* An external stylesheet *//* An external stylesheet */
3
4 aaaa { { { { texttexttexttext----decoration:decoration:decoration:decoration: nonenonenonenone } } } }
5
6 a:hovera:hovera:hovera:hover { { { { texttexttexttext----decoration:decoration:decoration:decoration: underlineunderlineunderlineunderline;;;;
7 color: color: color: color: redredredred;;;;
8 backgroundbackgroundbackgroundbackground----color:color:color:color: #ccffcc#ccffcc#ccffcc#ccffcc } } } }
9
10 li eli eli eli emmmm { { { { color: color: color: color: redredredred;;;;
11 fontfontfontfont----weight:weight:weight:weight: boldboldboldbold;;;;
12 backgroundbackgroundbackgroundbackground----color:color:color:color: #ffffff #ffffff #ffffff #ffffff }}}}
13
14 ulululul { { { { marginmarginmarginmargin----left:left:left:left: 2cm2cm2cm2cm } } } }
15
16 ul ul ul ul ul ul ul ul { { { { texttexttexttext----decoration:decoration:decoration:decoration: underlineunderlineunderlineunderline;;;;
17 marginmarginmarginmargin----left:left:left:left: .5cm.5cm.5cm.5cm } } } }
Outline
17
Outline
external.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.5: external.html Fig. 6.5: external.html Fig. 6.5: external.html Fig. 6.5: external.html -------->>>>
6 <!<!<!<!-------- Linking external style sheets Linking external style sheets Linking external style sheets Linking external style sheets -------->>>>
7
8 <h<h<h<html xmlns = tml xmlns = tml xmlns = tml xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title> <title> <title> <title>Linking External Style SheetsLinking External Style SheetsLinking External Style SheetsLinking External Style Sheets</title></title></title></title>
11 <link rel = <link rel = <link rel = <link rel = "stylesheet""stylesheet""stylesheet""stylesheet" type = type = type = type = "text/css""text/css""text/css""text/css"
12 href = href = href = href = "styles.css""styles.css""styles.css""styles.css" /> /> /> />
13 </head> </head> </head> </head>
14
15 <body> <body> <body> <body>
16
17 <h1> <h1> <h1> <h1>Shopping list for Shopping list for Shopping list for Shopping list for <em><em><em><em>MondayMondayMondayMonday</em></em></em></em>::::</h1></h1></h1></h1>
18 <ul> <ul> <ul> <ul>
19 <li><li><li><li>MilkMilkMilkMilk</li></li></li></li>
20 <li><li><li><li>BreadBreadBreadBread
21 <ul><ul><ul><ul>
22 <li><li><li><li>White breadWhite breadWhite breadWhite bread</li></li></li></li>
23 <li><li><li><li>Rye breadRye breadRye breadRye bread</li></li></li></li>
24 <li><li><li><li>Whole wheat breadWhole wheat breadWhole wheat breadWhole wheat bread</li></li></li></li>
25 </ul></ul></ul></ul>
Outline
18
Outline
external.html(2 of 2)
26 </li> </li> </li> </li>
27 <li><li><li><li>RiceRiceRiceRice</li></li></li></li>
28 <li> <li> <li> <li>PotatoesPotatoesPotatoesPotatoes</li></li></li></li>
29 <li><li><li><li>Pizza Pizza Pizza Pizza <em><em><em><em>with mushroomswith mushroomswith mushroomswith mushrooms</em></li></em></li></em></li></em></li>
30 </ul> </ul> </ul> </ul>
31
32 <p> <p> <p> <p>
33 <a href = <a href = <a href = <a href = "http://www.food.com""http://www.food.com""http://www.food.com""http://www.food.com">>>>Go to the Grocery storeGo to the Grocery storeGo to the Grocery storeGo to the Grocery store</a></a></a></a>
34 </p></p></p></p>
35
36 </body> </body> </body> </body>
37 </html></html></html></html>
19
3.6 W3C CSS Validation Service
• Validates external CSS documents
• Ensures that style sheets are syntactically correct
20
3.6 W3C CSS Validation Service
Fig. 3.6 Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)
21
3.6 W3C CSS Validation Service
Fig. 3.7 CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)
22
3.7 Positioning Elements
• Absolute positioning– z-index attribute
• Layer overlapping elements properly
• Relative positioning– Elements are positioned relative to other elements
Outline
23
Outline
positioning.html(1 of 1)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig 6.8: positioning.html Fig 6.8: positioning.html Fig 6.8: positioning.html Fig 6.8: positioning.html -------->>>>
6 <!<!<!<!-------- Absolute positioning of elements Absolute positioning of elements Absolute positioning of elements Absolute positioning of elements -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Absolute PositioningAbsolute PositioningAbsolute PositioningAbsolute Positioning</title></title></title></title>
11 </head> </head> </head> </head>
12
13 <body> <body> <body> <body>
14
15 <p><img src = <p><img src = <p><img src = <p><img src = "i.gif""i.gif""i.gif""i.gif" style = style = style = style = "position: absolute;"position: absolute;"position: absolute;"position: absolute;
16 top: 0px; left: 0ptop: 0px; left: 0ptop: 0px; left: 0ptop: 0px; left: 0px; zx; zx; zx; z----index: 1"index: 1"index: 1"index: 1"
17 alt = alt = alt = alt = "First positioned image""First positioned image""First positioned image""First positioned image" /></p> /></p> /></p> /></p>
18 <p style = <p style = <p style = <p style = "position: absolute; top: 50px; left: 50px;"position: absolute; top: 50px; left: 50px;"position: absolute; top: 50px; left: 50px;"position: absolute; top: 50px; left: 50px;
19 zzzz----index: 3; fontindex: 3; fontindex: 3; fontindex: 3; font----size: 20pt"size: 20pt"size: 20pt"size: 20pt">>>>Positioned TextPositioned TextPositioned TextPositioned Text</p></p></p></p>
20 <p><img src = <p><img src = <p><img src = <p><img src = "ci"ci"ci"circle.gif"rcle.gif"rcle.gif"rcle.gif" style = style = style = style = "position: absolute; "position: absolute; "position: absolute; "position: absolute;
21 top: 25px; left: 100px; z top: 25px; left: 100px; z top: 25px; left: 100px; z top: 25px; left: 100px; z----index: 2index: 2index: 2index: 2" " " " alt = alt = alt = alt =
22 "Second positioned image""Second positioned image""Second positioned image""Second positioned image" /></p> /></p> /></p> /></p>
23
24 </body> </body> </body> </body>
25 </html></html></html></html>
24
Outline
25
Outline
positioning2.html(1 of 2)
ema pixel is relative length measurement, varies based on screen resolution, M height of the font(upper case)
ex x-height of the font(lower case)
span element –grouping element apply css rules or id attributes to a block of textinline level element
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.9: positioning2.html Fig. 6.9: positioning2.html Fig. 6.9: positioning2.html Fig. 6.9: positioning2.html -------->>>>
6 <!<!<!<!-------- Relative positioning of elements Relative positioning of elements Relative positioning of elements Relative positioning of elements -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title> <title> <title> <title>Relative PositioningRelative PositioningRelative PositioningRelative Positioning</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 p p p p { { { { fontfontfontfont----size:size:size:size: 1.3em1.3em1.3em1.3em;;;;
15 fontfontfontfont----family:family:family:family: vvvverdana, arial, sanserdana, arial, sanserdana, arial, sanserdana, arial, sans----serifserifserifserif } } } }
16
17 spanspanspanspan { { { { color: color: color: color: redredredred;;;;
18 fontfontfontfont----size:size:size:size: .6em.6em.6em.6em; ; ; ;
19 height: height: height: height: 1em1em1em1em } } } }
20
21 .super.super.super.super { { { { position:position:position:position: relativerelativerelativerelative;;;;
22 top:top:top:top: ----1ex1ex1ex1ex } } } }
23
24 .sub .sub .sub .sub { { { { position: position: position: position: relativerelativerelativerelative;;;;
25 bottom:bottom:bottom:bottom: ----1ex1ex1ex1ex } } } }
26
Outline
26
Outline
positioning2.html2 of 2
27 .shiftleft .shiftleft .shiftleft .shiftleft { { { { position:position:position:position: relativerelativerelativerelative;;;;
28 left:left:left:left: ----1ex1ex1ex1ex } } } }
29
30 .shiftright .shiftright .shiftright .shiftright { { { { position:position:position:position: relativerelativerelativerelative;;;;
31 right: right: right: right: ----1ex1ex1ex1ex } } } }
32
33 </style></style></style></style>
34 </head> </head> </head> </head>
35
36 <body> <body> <body> <body>
37
38 <p><p><p><p>The text at the end of this sentence The text at the end of this sentence The text at the end of this sentence The text at the end of this sentence
39 <span class = <span class = <span class = <span class = "super""super""super""super">>>>is in superscriptis in superscriptis in superscriptis in superscript</span></span></span></span>....</p></p></p></p>
40
41 <p> <p> <p> <p>The text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentence
42 <span class = <span class = <span class = <span class = "sub""sub""sub""sub">>>>is in subscriptis in subscriptis in subscriptis in subscript</span></span></span></span>....</p></p></p></p>
43
44 <p> <p> <p> <p>The text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentence
45 <span class = <span class = <span class = <span class = "shiftleft""shiftleft""shiftleft""shiftleft">>>>is shifted leftis shifted leftis shifted leftis shifted left</span></span></span></span>....</p></p></p></p>
46
47 <p> <p> <p> <p>The text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentenceThe text at the end of this sentence
48 <span class = <span class = <span class = <span class = "shiftright""shiftright""shiftright""shiftright">>>>is shifted rightis shifted rightis shifted rightis shifted right</span></span></span></span>....</p></p></p></p>
49
50 </body> </body> </body> </body>
51 </html></html></html></html>
27
28
3.8 Backgrounds
• background-image
– Specifies the image URL
• background-position
– Places the image on the page
• background-repeat
– Controls the tiling of the background image
• background-attachment
– fixed
– scroll
• font-weight
– Specify the “boldness” of text
Outline
29
Outline
background.html(1 of 2)
bcg-position:top, bottom, center, left, right
no-repeat, repeat, x-repeat,y-repeat
attachment – scroll
font weight:bold, normal, bolder, lighter
font-style none, italic, oblique
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.10: background.html Fig. 6.10: background.html Fig. 6.10: background.html Fig. 6.10: background.html -------->>>>
6 <!<!<!<!-------- Adding background images and indentation Adding background images and indentation Adding background images and indentation Adding background images and indentation -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3 .org/1999/xhtml""http://www.w3 .org/1999/xhtml""http://www.w3 .org/1999/xhtml""http://www.w3 .org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title> <title> <title> <title>Background ImagesBackground ImagesBackground ImagesBackground Images</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 body body body body {{{{ background background background background----image:image:image:image: url(logo.gif)url(logo.gif)url(logo.gif)url(logo.gif);;;;
15 backgroundbackgroundbackgroundbackground----position:position:position:position: bottom rightbottom rightbottom rightbottom right;;;;
16 backgroundbackgroundbackgroundbackground----repeat:repeat:repeat:repeat: nononono----repeatrepeatrepeatrepeat;;;;
17 backgroundbackgroundbackgroundbackground----attachment:attachment:attachment:attachment: fixedfixedfixedfixed; }; }; }; }
18
19 p p p p {{{{ font font font font----size:size:size:size: 18pt18pt18pt18pt;;;;
20 color:color:color:color: #aa5588#aa5588#aa5588#aa5588; ; ; ;
21 texttexttexttext----indent:indent:indent:indent: 1em1em1em1em;;;;
22 fontfontfontfont----family:family:family:family: arial, sansarial, sansarial, sansarial, sans----serifserifserifserif; }; }; }; }
23
24 .dark .dark .dark .dark { { { { fontfontfontfont----weight:weight:weight:weight: boldboldboldbold;;;; } } } }
25
Outline
30
Outline
background.html(2 of 2)
26 </style> </style> </style> </style>
27 </head> </head> </head> </head>
28
29 <body> <body> <body> <body>
30
31 <p> <p> <p> <p>
32 This example uses the backgroundThis example uses the backgroundThis example uses the backgroundThis example uses the background----image, image, image, image,
33 backgroundbackgroundbackgroundbackground----position and backgroundposition and backgroundposition and backgroundposition and background----attachmentattachmentattachmentattachment
34 styles to place the styles to place the styles to place the styles to place the <span class = <span class = <span class = <span class = "dark""dark""dark""dark">>>>Deitel Deitel Deitel Deitel
35 & Associates, Inc.& Associates, Inc.& Associates, Inc.& Associates, Inc.</span></span></span></span> logo in the bottom, logo in the bottom, logo in the bottom, logo in the bottom,
36 right corner of the page. Notice how the logo right corner of the page. Notice how the logo right corner of the page. Notice how the logo right corner of the page. Notice how the logo
37 stays in the proper position when you resize the stays in the proper position when you resize the stays in the proper position when you resize the stays in the proper position when you resize the
38 browser window.browser window.browser window.browser window.
39 </p> </p> </p> </p>
40
41 </body> </body> </body> </body>
42 </html></html></html></html>
31
32
3.9 Element Dimensions
• CSS rules can specify the actual dimensions of each page element
Outline
33
Outline
width.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.11: width.html Fig. 6.11: width.html Fig. 6.11: width.html Fig. 6.11: width.html -------->>>>
6 <!<!<!<!-------- Setting box dimensions and aligning tex Setting box dimensions and aligning tex Setting box dimensions and aligning tex Setting box dimensions and aligning text t t t -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Box DimensionsBox DimensionsBox DimensionsBox Dimensions</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 div div div div { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #ffccff#ffccff#ffccff#ffccff;;;;
15 margin margin margin margin----botbotbotbottom:tom:tom:tom: .5em.5em.5em.5em } } } }
16 </style> </style> </style> </style>
17
18 </head> </head> </head> </head>
19
20 <body> <body> <body> <body>
21
22 <div style = <div style = <div style = <div style = "width: 20%""width: 20%""width: 20%""width: 20%">>>>Here is someHere is someHere is someHere is some
23 text that goes in a box which is text that goes in a box which is text that goes in a box which is text that goes in a box which is
24 set to stretch across twenty percent set to stretch across twenty percent set to stretch across twenty percent set to stretch across twenty percent
25 of the widtof the widtof the widtof the width of the screen.h of the screen.h of the screen.h of the screen.</div></div></div></div>
Outline
34
Outline
width.html(2 of 2)
26
27 <div style = <div style = <div style = <div style = "width: 80%; text"width: 80%; text"width: 80%; text"width: 80%; text----align: center"align: center"align: center"align: center">>>>
28 Here is some CENTERED text that goes in a box Here is some CENTERED text that goes in a box Here is some CENTERED text that goes in a box Here is some CENTERED text that goes in a box
29 which is set to stretch across eighty percent of which is set to stretch across eighty percent of which is set to stretch across eighty percent of which is set to stretch across eighty percent of
30 the width of the screen.the width of the screen.the width of the screen.the width of the screen.</div></div></div></div>
31
32 <div sty<div sty<div sty<div style = le = le = le = "width: 20%; height: 30%; overflow: scroll""width: 20%; height: 30%; overflow: scroll""width: 20%; height: 30%; overflow: scroll""width: 20%; height: 30%; overflow: scroll">>>>
33 This box is only twenty percent ofThis box is only twenty percent ofThis box is only twenty percent ofThis box is only twenty percent of
34 the width and thirty percent of the height. the width and thirty percent of the height. the width and thirty percent of the height. the width and thirty percent of the height.
35 What do we do if it overflows? Set the What do we do if it overflows? Set the What do we do if it overflows? Set the What do we do if it overflows? Set the
36 overflow property to scroll! overflow property to scroll! overflow property to scroll! overflow property to scroll!</div></div></div></div>
37
38 </body> </body> </body> </body>
39 </html></html></html></html>
35
3.10 Text Flow and the Box Model
• Floating– Move an element to one side of the screen; other content in the
document then flows around the floated element
• Box model– Margins
• margin-top, margin-right, margin-left, margin-bottom
– Padding• padding-top, padding-right, padding-left, and padding-bottom
– Border• border-width
– thin, medium, thick• border-color
– Sets the color• border-style
– none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset
Outline
36
Outline
floating.html(1 of 3)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.12: floating.html Fig. 6.12: floating.html Fig. 6.12: floating.html Fig. 6.12: floating.html -------->>>>
6 <!<!<!<!-------- Floating elements and element boxes Floating elements and element boxes Floating elements and element boxes Floating elements and element boxes -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Flowing Text Around Floating ElementsFlowing Text Around Floating ElementsFlowing Text Around Floating ElementsFlowing Text Around Floating Elements</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 divdivdivdiv { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #ffccff#ffccff#ffccff#ffccff;;;;
15 marginmarginmarginmargin----bottom:bottom:bottom:bottom: .5em.5em.5em.5em;;;;
16 font font font font----size:size:size:size: 1.5em1.5em1.5em1.5em;;;;
17 width: width: width: width: 50%50%50%50% } } } }
18
19 pppp { { { { texttexttexttext----align:align:align:align: justifyjustifyjustifyjustify } } } }
20
21 </style> </style> </style> </style>
22
23 </head> </head> </head> </head>
24
Outline
37
Outline
floating.html(2 of 3)
25 <body> <body> <body> <body>
26
27 <div style = <div style = <div style = <div style = "text"text"text"text----align: center"align: center"align: center"align: center">>>>
28 Deitel & Associates, Inc. Deitel & Associates, Inc. Deitel & Associates, Inc. Deitel & Associates, Inc.</div></div></div></div>
29
30 <div style = <div style = <div style = <div style = "float: right; margin: .5em;"float: right; margin: .5em;"float: right; margin: .5em;"float: right; margin: .5em;
31 texttexttexttext----align: right"align: right"align: right"align: right">>>>
32 Corp Corp Corp Corporate Training and Publishingorate Training and Publishingorate Training and Publishingorate Training and Publishing</div></div></div></div>
33
34 <p> <p> <p> <p>Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally Deitel & Associates, Inc. is an internationally
35 recognized corporate training and publishing organization recognized corporate training and publishing organization recognized corporate training and publishing organization recognized corporate training and publishing organization
36 specializing in programming languages, Internet/World specializing in programming languages, Internet/World specializing in programming languages, Internet/World specializing in programming languages, Internet/World
37 Wide Web technology and object technology education. Wide Web technology and object technology education. Wide Web technology and object technology education. Wide Web technology and object technology education.
38 The company provides courses on Java, C++, Visual Basic, C, The company provides courses on Java, C++, Visual Basic, C, The company provides courses on Java, C++, Visual Basic, C, The company provides courses on Java, C++, Visual Basic, C,
39 Internet and World Wide Web programming, and Object Technology. Internet and World Wide Web programming, and Object Technology. Internet and World Wide Web programming, and Object Technology. Internet and World Wide Web programming, and Object Technology.</p></p></p></p>
40
41 <div style = <div style = <div style = <div style = "float: righ"float: righ"float: righ"float: right; padding: .5em;t; padding: .5em;t; padding: .5em;t; padding: .5em;
42 texttexttexttext----align: right"align: right"align: right"align: right">>>>
43 LeadingLeadingLeadingLeading----Edge Programming TextbooksEdge Programming TextbooksEdge Programming TextbooksEdge Programming Textbooks</div></div></div></div>
44
45 <p><p><p><p>The company's clients include many Fortune 1000 The company's clients include many Fortune 1000 The company's clients include many Fortune 1000 The company's clients include many Fortune 1000
46 companies, government agencies, branches o companies, government agencies, branches o companies, government agencies, branches o companies, government agencies, branches of the military f the military f the military f the military
47 and business organizations. and business organizations. and business organizations. and business organizations.</p></p></p></p>
48
Outline
38
Outline49 <p <p <p <p style = style = style = style = "clear: right""clear: right""clear: right""clear: right">>>>Through its publishingThrough its publishingThrough its publishingThrough its publishing
50 partnership with Prentice Hall, Deitel & Associates, partnership with Prentice Hall, Deitel & Associates, partnership with Prentice Hall, Deitel & Associates, partnership with Prentice Hall, Deitel & Associates,
51 Inc. publishes leading Inc. publishes leading Inc. publishes leading Inc. publishes leading----edge programming textbooks, edge programming textbooks, edge programming textbooks, edge programming textbooks,
52 professional books, interactive CD professional books, interactive CD professional books, interactive CD professional books, interactive CD----ROMROMROMROM----based multibased multibased multibased multimedia media media media
53 Cyber Classrooms, satellite courses and World Wide Web Cyber Classrooms, satellite courses and World Wide Web Cyber Classrooms, satellite courses and World Wide Web Cyber Classrooms, satellite courses and World Wide Web
54 courses.courses.courses.courses.</p></p></p></p>
55
56 </body> </body> </body> </body>
57 </html></html></html></html>
floating.html(3 of 3)
clear – interrupts the flow on both sides of the document
39
3.10 Text Flow and the Box Model
Content
Ma rgin
Bo rd er
Pa dd ing
Fig. 3.10 Box model for block-level elements.
Outline
40
Outline
borders.html(1 of 2)Three properties are set:border-with,border-color, border-style
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.14: borders.html Fig. 6.14: borders.html Fig. 6.14: borders.html Fig. 6.14: borders.html -------->>>>
6 <!<!<!<!-------- Setting borders of an element Setting borders of an element Setting borders of an element Setting borders of an element -------->>>>
7
8 <htm<htm<htm<html xmlns = l xmlns = l xmlns = l xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title> <title> <title> <title>BordersBordersBordersBorders</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 body body body body { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #ccffcc #ccffcc #ccffcc #ccffcc }}}}
15
16 div div div div { { { { text text text text----align:align:align:align: centercentercentercenter;;;;
17 margin margin margin margin----bottom:bottom:bottom:bottom: 1em1em1em1em;;;;
18 padding:padding:padding:padding: .5em.5em.5em.5em } } } }
19
20 .thick .thick .thick .thick { { { { borderborderborderborder----width:width:width:width: thickthickthickthick } } } }
21
22 .medium .medium .medium .medium { { { { borderborderborderborder----width:width:width:width: mediummediummediummedium } } } }
23
24 .thin.thin.thin.thin { { { { border border border border----width: width: width: width: thinthinthinthin } } } }
25
Outline
41
Outline
borders.html(2 of 2)
border styles:none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
26 .groove.groove.groove.groove { { { { border border border border----style:style:style:style: groovegroovegroovegroove } } } }
27
28 .inset.inset.inset.inset { { { { border border border border----style: style: style: style: insetinsetinsetinset } } } }
29
30 .outset.outset.outset.outset { { { { border border border border----style:style:style:style: outsetoutsetoutsetoutset } } } }
31
32 .red.red.red.red { { { { borderborderborderborder----color:color:color:color: redredredred } } } }
33
34 .blue .blue .blue .blue { { { { borderborderborderborder----colorcolorcolorcolor:::: blueblueblueblue } } } }
35
36 </style> </style> </style> </style>
37 </head> </head> </head> </head>
38
39 <body> <body> <body> <body>
40
41 <div class = <div class = <div class = <div class = "thick groove""thick groove""thick groove""thick groove">>>>This text has a borderThis text has a borderThis text has a borderThis text has a border</div></div></div></div>
42 <div class =<div class =<div class =<div class = "medium groove""medium groove""medium groove""medium groove">>>>This text has a borderThis text has a borderThis text has a borderThis text has a border</div></div></div></div>
43 <div class = <div class = <div class = <div class = "thin "thin "thin "thin groove"groove"groove"groove">>>>This text has a borderThis text has a borderThis text has a borderThis text has a border</div></div></div></div>
44
45 <p class = <p class = <p class = <p class = "thin red inset""thin red inset""thin red inset""thin red inset">>>>A thin red line...A thin red line...A thin red line...A thin red line...</p></p></p></p>
46 <p class = <p class = <p class = <p class = "medium blue outset""medium blue outset""medium blue outset""medium blue outset">>>>
47 And a thicker blue lineAnd a thicker blue lineAnd a thicker blue lineAnd a thicker blue line</p></p></p></p>
48
49 </body> </body> </body> </body>
50 </html></html></html></html>
42
Outline
43
Outline
borders2.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.15: borders2.html Fig. 6.15: borders2.html Fig. 6.15: borders2.html Fig. 6.15: borders2.html -------->>>>
6 <!<!<!<!-------- Various border Various border Various border Various border----styles styles styles styles -------->>>>
7
8 <html xmln<html xmln<html xmln<html xmlns = s = s = s = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>BordersBordersBordersBorders</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 bodybodybodybody { { { { backgroundbackgroundbackgroundbackground----color:color:color:color: #ccffcc #ccffcc #ccffcc #ccffcc }}}}
15
16 divdivdivdiv { { { { texttexttexttext----align:align:align:align: centercentercentercenter;;;;
17 marginmarginmarginmargin----bottom:bottom:bottom:bottom: .3em.3em.3em.3em;;;;
18 width: width: width: width: 50%50%50%50%;;;;
19 position: position: position: position: relativerelativerelativerelative; ; ; ;
20 left:left:left:left: 25%25%25%25%;;;;
21 padding:padding:padding:padding: .3em.3em.3em.3em } } } }
22 </style></style></style></style>
23 </head> </head> </head> </head>
24
25 <body> <body> <body> <body>
Outline
44
Outline
borders2.html(2 of 2)
26
27 <div style =<div style =<div style =<div style = "border "border "border "border----style: solid"style: solid"style: solid"style: solid">>>>Solid borderSolid borderSolid borderSolid border</div></div></div></div>
28 <div style =<div style =<div style =<div style = "border"border"border"border----style: double"style: double"style: double"style: double">>>>Double borderDouble borderDouble borderDouble border</div></div></div></div>
29 <div style =<div style =<div style =<div style = "border"border"border"border----style: groove"style: groove"style: groove"style: groove">>>>Groove borderGroove borderGroove borderGroove border</div></div></div></div>
30 <div style =<div style =<div style =<div style = "border"border"border"border----style: ridge"style: ridge"style: ridge"style: ridge">>>>RRRRidge borderidge borderidge borderidge border</div></div></div></div>
31 <div style = <div style = <div style = <div style = "border"border"border"border----style: inset"style: inset"style: inset"style: inset">>>>Inset borderInset borderInset borderInset border</div></div></div></div>
32 <div style =<div style =<div style =<div style = "border"border"border"border----style: outset"style: outset"style: outset"style: outset">>>>Outset borderOutset borderOutset borderOutset border</div></div></div></div>
33
34 </body> </body> </body> </body>
35 </html></html></html></html>
45
3.11 User Style Sheets
• Format pages based on preferences
• user can define his/her own style sheets
Outline
46
Outline
User_absolute.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.16: user_absolute.html Fig. 6.16: user_absolute.html Fig. 6.16: user_absolute.html Fig. 6.16: user_absolute.html -------->>>>
6 <!<!<!<!-------- User styles User styles User styles User styles -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>User StylesUser StylesUser StylesUser Styles</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 .note.note.note.note { { { { fontfontfontfont----size:size:size:size: 9pt9pt9pt9pt } } } }
15
16 </style></style></style></style>
17 </head> </head> </head> </head>
18
19 <b <b <b <body>ody>ody>ody>
20
21 <p> <p> <p> <p>Thanks for visiting my Web site. I hope you enjoy it.Thanks for visiting my Web site. I hope you enjoy it.Thanks for visiting my Web site. I hope you enjoy it.Thanks for visiting my Web site. I hope you enjoy it.
22 </p><p class = </p><p class = </p><p class = </p><p class = "note""note""note""note">>>>Please Note: This site will bePlease Note: This site will bePlease Note: This site will bePlease Note: This site will be
23 moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.moving soon. Please check periodically for updates.</p></p></p></p>
Outline
47
Outline
User_absolute.html(2 of 2)
24
25 </body> </body> </body> </body>
26 </html></html></html></html>
Outline
48
Outline
userstyles.css1 of 1
1 /* Fig. 6.17: userstyles.css *//* Fig. 6.17: userstyles.css *//* Fig. 6.17: userstyles.css *//* Fig. 6.17: userstyles.css */
2 /* A user stylesheet *//* A user stylesheet *//* A user stylesheet *//* A user stylesheet */
3
4 body body body body { { { { fontfontfontfont----size: size: size: size: 20pt20pt20pt20pt;;;;
5 color:color:color:color: yellowyellowyellowyellow;;;;
6 backgroundbackgroundbackgroundbackground----color:color:color:color: #000080#000080#000080#000080 } } } }
49
6.11 User Style Sheets
Fig. 6.18 User style sheet in Internet Explorer 6.
50
6.11 User Style Sheets
Fig. 6.19 User style sheet applied with pt measurement.
Outline
51
Outline
User_relative.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 6.20: user_relative.html Fig. 6.20: user_relative.html Fig. 6.20: user_relative.html Fig. 6.20: user_relative.html -------->>>>
6 <!<!<!<!-------- User styles User styles User styles User styles -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>User StylesUser StylesUser StylesUser Styles</title></title></title></title>
11
12 <style type = <style type = <style type = <style type = "text/css""text/css""text/css""text/css">>>>
13
14 .note.note.note.note { { { { fontfontfontfont----size:size:size:size: .75em.75em.75em.75em } } } }
15
16 </style></style></style></style>
17 </head> </head> </head> </head>
18
19 <body><body><body><body>
20
21 <p> <p> <p> <p>Thanks for visiting my Web site. I hope you enjoy it.Thanks for visiting my Web site. I hope you enjoy it.Thanks for visiting my Web site. I hope you enjoy it.Thanks for visiting my Web site. I hope you enjoy it.
22 </p><p class = </p><p class = </p><p class = </p><p class = "note""note""note""note">>>>Please Note: This site will be Please Note: This site will be Please Note: This site will be Please Note: This site will be
23 moving soon. Please check periodically for updates. moving soon. Please check periodically for updates. moving soon. Please check periodically for updates. moving soon. Please check periodically for updates.</p></p></p></p>
Outline
52
Outline
User_relative.html(2 of 2)
24
25 </body> </body> </body> </body>
26 </html></html></html></html>
53
3.11 User Style Sheets
Fig. 6.21 User style sheet applied with em measurement.
54
3.12 Web Resources
• www.w3.org/TR/css3-roadmap
• www.ddj.com/webreview/style
• tech.irt.org/articles/css.htm