cascading style sheets™ (css) - ostravská univerzitahunka/vyuka/techinter/ti_3/css_3.pdf ·...

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 <!<!<!>>>

6 <!<!<!>>>

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 <! <! <! >>>

18 <! <! <! >>>

19 <! <! <! >>>

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, …




4

5 <!<!<!>>>

6 <!<!<!>>>

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">>>>


10 <title><title><title><title>Style SheetsStyle SheetsStyle SheetsStyle Sheets</title></title></title></title>

11

12 <!<!<!>>>

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>

Outline

9

Outline


26


28

29 <!<!<!>>>

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




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)




4

5 <!<!<!>>>

6 <!<!<!>>>

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">>>>


10 <title><title><title><title>More StylesMore StylesMore StylesMore Styles</title></title></title></title>

11


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


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>


30


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


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



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)




4

5 <!<!<!>>>

6 <!<!<!>>>

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">>>>


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" /> /> /> />


14


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



19

3.6 W3C CSS Validation Service

• Validates external CSS documents

• Ensures that style sheets are syntactically correct

20


Fig. 3.6 Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)

21


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)




4

5 <!<!<!>>>

6 <!<!<!>>>

7



10 <title><title><title><title>Absolute PositioningAbsolute PositioningAbsolute PositioningAbsolute Positioning</title></title></title></title>


12


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

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




4

5 <!<!<!>>>

6 <!<!<!>>>

7



10 <title> <title> <title> <title>Relative PositioningRelative PositioningRelative PositioningRelative Positioning</title></title></title></title>

11


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



35


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


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


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



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




4

5 <!<!<!>>>

6 <!<!<!>>>

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">>>>


10 <title> <title> <title> <title>Background ImagesBackground ImagesBackground ImagesBackground Images</title></title></title></title>

11


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)



28


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



32

3.9 Element Dimensions

• CSS rules can specify the actual dimensions of each page element

Outline

33

Outline

width.html(1 of 2)




4

5 <!<!<!>>>

6 <!<!<!>>>

7



10 <title><title><title><title>Box DimensionsBox DimensionsBox DimensionsBox Dimensions</title></title></title></title>

11


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 } } } }


17


19


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



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)




4

5 <!<!<!>>>

6 <!<!<!>>>

7



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


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


22


24

Outline

37

Outline



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




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




4

5 <!<!<!>>>

6 <!<!<!>>>

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">>>>


10 <title> <title> <title> <title>BordersBordersBordersBorders</title></title></title></title>

11


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



38


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



Outline

43

Outline

borders2.html(1 of 2)




4

5 <!<!<!>>>

6 <!<!<!>>>

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">>>>


10 <title><title><title><title>BordersBordersBordersBorders</title></title></title></title>

11


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 } } } }



24

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



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)




4

5 <!<!<!>>>

6 <!<!<!>>>

7



10 <title><title><title><title>User StylesUser StylesUser StylesUser Styles</title></title></title></title>

11


13

14 .note.note.note.note { { { { fontfontfontfont----size:size:size:size: 9pt9pt9pt9pt } } } }

15



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



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


Fig. 6.18 User style sheet in Internet Explorer 6.

50


Fig. 6.19 User style sheet applied with pt measurement.

Outline

51

Outline

User_relative.html(1 of 2)




4

5 <!<!<!>>>

6 <!<!<!>>>

7



10 <title><title><title><title>User StylesUser StylesUser StylesUser Styles</title></title></title></title>

11


13

14 .note.note.note.note { { { { fontfontfontfont----size:size:size:size: .75em.75em.75em.75em } } } }

15



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



53


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

cascading style sheets™ (css) - ostravská univerzitahunka/vyuka/techinter/ti_3/css_3.pdf ·...

Documents