2002 prentice hall, inc. all rights reserved. chapter 4 – cascading style sheets (css) objectives...

2002 Prentice Hall, Inc. All rights reserved.

Chapter 4 – Cascading Style Sheets (CSS)

• Objectives– To take control of the appearance of a Web site by creating style

sheets

– To use a style sheet to give all the pages of a Web site the same look and feel

– To use the class attribute to apply styles

– To specify the precise font, size, color and other properties of displayed text

– To specify element backgrounds and colors

– To understand the box and model and be able to control the margins, borders and padding

– To use style sheets to separate presentation from content

“Fashion fade, style is eternal”


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


4.1 Introduction• Cascading Style Sheets (CSS)

– Define document style– Separate structure from presentation

• Greater manageability and easier changes

• There are three levels of style sheets– Inline - specified for a specific occurrence of a tag and apply only to that tag

• This is fine-grain style, which defeats the purpose of style sheets - uniform style

– Document-level style sheets - apply to the whole document in which they appear

– External style sheets - can be applied to any number of documents (Can be validated through the following web site:

http://jigsaw.w3.org/css-validator/

Style Specifications Format

• Inline stylestyle = “attr_1 : value_1; attr_2 : value_2; …….;

attr_n : value_n”

• Document and external style<style type = “text/css”>



</style>

– “selector”: tag or tags affected by the rule


4.2 Inline Styles

• Attribute Style– Define style in document

• Each element is followed by colon (:) then value

• Inline styles override all other styles• It’s so trivial, not really reflect the principles of

unifying document structure.

Outline

Fig. 4.1 Inline styles.

Lines 18 and 21

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

2 "http://www.w3.org/TR/html4/strict.dtd">

3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Inline Styles</title>

10 </head>

11

12 <body>

13

14 <p>This text does not have any style applied to it.</p>

15

16 

17 

18 <p style = "font-size: 20pt">This text has the <em>font-size</em>

19 style applied to it, making it 20pt.</p>

20

21 <p style = "font-size: 20pt; color: #0000ff">This text has the

22 <em>font-size</em> and <em>color</em> styles applied to it,

23 making it 20pt. and blue.</p>

24

25 </body>

26 </html>

Define style for following text


Output for Fig. 4.1


4.3 Creating Styles with the style element(Document Specifications)

• Styles– Declared in head of document

– May be applied to whole document

– Begin <style type = "text/css"> • Define styles attached to tags

• Property followed by colon (:)

• Multiple properties separated by semi-colon (;)

Outline

Fig. 4.2 Declaring styles in the head of a document.

Line 12

Lines 14-19

Line 21



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Style Sheets</title>

10

11 

12 <style type = "text/css">

13

14 em { background-color: #8000ff;

15 color: white }

16

17 h1 { font-family: arial, sans-serif }

18

19 p { font-size: 14pt }

20

21 .special { color: blue }

22

23 </style>

24 </head>

25

Start of style sheet

Define style attributes of em, h1, and p tags

Define special case (not attached to any pre-defined tag)

Outline

Fig. 4.2 Declaring styles in the head of a document. (Part 2)

Line 29

26 <body>

27

28 

29 <h1 class = "special">Deitel & Associates, Inc.</h1>

30

31 <p>Deitel & Associates, Inc. is an internationally recognized

32 corporate training and publishing organization specializing

33 in programming languages, Internet/World Wide Web technology

34 and object technology education. Deitel & Associates, Inc. is

35 a member of the World Wide Web Consortium. The company

36 provides courses on Java, C++, Visual Basic, C, Internet and

37 World Wide Web programming, and Object Technology.</p>

38

39 <h1>Clients</h1>

40 <p class = "special"> The company's clients include many

41 <em>Fortune 1000 companies</em>, government agencies, branches

42 of the military and business organizations. Through its

43 publishing partnership with Prentice Hall, Deitel & Associates,

44 Inc. publishes leading-edge programming textbooks, professional

45 books, interactive CD-ROM-based multimedia Cyber Classrooms,

46 satellite courses and World Wide Web courses.</p>

47

48 </body>

49 </html>

Using special style


Output for Fig. 4.2


4.4 Conflicting Styles

• Style precedence– Author > User > Agent (Web Browser)

Outline

Fig. 4.3 Inheritance in style sheets.

Line 13

Lines 19-20

Line 15



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - More Styles</title>

10


12

13 a.nodec { text-decoration: none }

14

15 a:hover { text-decoration: underline;

16 color: red;

17 background-color: #ccffcc }

18

19 li em { color: red;

20 font-weight: bold }

21

22 ul { margin-left: 75px }

23

24 ul ul { text-decoration: underline;

25 margin-left: 15px }

26

27 </style>

28 </head>

29

Assign attribute nodec to all a elements (override default

underline attribute of element a)

Define style for any em element contained in li tag

A pseudo-class, dynamically activated by users


Outline

Fig. 4.3 Inheritance in style sheets. (Part 2)

30 <body>

31

32 <h1>Shopping list for <em>Monday</em>:</h1>

33

34 <ul>

35 <li>Milk</li>

36 <li>Bread

37 <ul>

38 <li>White bread</li>

39 <li>Rye bread</li>

40 <li>Whole wheat bread</li>

41 </ul>

42 </li>

43 <li>Rice</li>

44 <li>Potatoes</li>

45 <li>Pizza <em>with mushrooms</em></li>

46 </ul>

47

48 <p><a class = "nodec" href = "http://food.com">Go to the Grocery

49 store</a></p>

50

51 </body>

52 </html>


Output for Fig. 4.3


4.5 Linking External Style Sheets

• External Style Sheets– Contained in a .css file

– Single style sheet used easily between multiple pages

• How to refer to external style specifications?<link rel = “stylesheet” type = “text/css” href = “URL of the

style sheet document”>

Note: <link> can only be placed in the “head” element


Outline

Fig. 4.4 An external style sheet (styles.css).

Lines 4-16

1 /* Fig. 4.4: styles.css */

2 /* An external stylesheet */

3

4 a { text-decoration: none }

5

6 a:hover { text-decoration: underline;

7 color: red;

8 background-color: #ccffcc }

9

10 li em { color: red;

11 font-weight: bold}

12

13 ul { margin-left: 2cm }

14

15 ul ul { text-decoration: underline;

16 margin-left: .5cm }

Define attributes used for linking documents

Outline

Fig. 4.5 Linking an external style sheet.

Line 11



3 <html>

4

5

6 

7 

8

9 <head>

10 <title>XML How to Program - Importing Style Sheets</title>

11 <link rel = "stylesheet" type = "text/css" href = "styles.css">

12 </head>

13

Link external stylesheet with current document, Only appear in “head”


Outline

Fig. 4.5 Linking an external style sheet. (Part 2)

14 <body>

15

16 <h1>Shopping list for <em>Monday</em>:</h1>

17 <ul>

18 <li>Milk</li>

19 <li>Bread

20 <ul>

21 <li>White bread</li>

22 <li>Rye bread</li>

23 <li>Whole wheat bread</li>

24 </ul>

25 </li>

26 <li>Rice</li>

27 <li>Potatoes</li>

28 <li>Pizza <em>with mushrooms</em></li>

29 </ul>

30

31 <p>

32 <a href = "http://food.com">Go to the Grocery store</a>

33 </p>

34

35 </body>

36 </html>


Output for Fig. 4.5


4.6 Positioning Elements

• CSS property position

– Controlling the positioning of elements in an HTML document

– Capability_1: absolute positioning

• Define element location in pixels

• Location is not defined by browser

– Capability_2: relative positioning

• Related to current position

Outline

Fig. 4.6Positioning elements with CSS.

Lines 14-19



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Absolute Positioning</title>

10 </head>

11

12 <body>

13

14 <p><img src = "i.gif" style = "position: absolute; top: 0px;

15 left: 0px; z-index: 1" alt = "First positioned image"></p>

16 <p style = "position: absolute; top: 50px; left: 50px;

17 z-index: 3; font-size: 20pt;">Positioned Text</p>

18 <p><img src = "circle.gif" style = "position: absolute; top: 25px;

19 left: 100px; z-index: 2" alt = "Second positioned image"></p>

20

21 </body>

22 </html>

Use inline style to position images: place second image

over the first (because second image has higher z index)


Output for Fig. 4.6

Outline

Fig. 4.7 Relative positioning of elements.

Lines 20-21



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Relative Positioning</title>

10


12

13 p { font-size: 1.3em;

14 font-family: verdana, arial, sans-serif }

15

16 span { color: red;

17 font-size: .6em;

18 height: 1em }

19

20 .super { position: relative;

21 top: -1ex }

22

23 .sub { position: relative;

24 bottom: -1ex }

25

Define attributes that position elements relative to browser-defined location


Outline

Fig. 4.7 Relative positioning of elements. (Part 2)

26 .shiftleft { position: relative;

27 left: -1ex }

28

29 .shiftright { position: relative;

30 right: -1ex }

31

32 </style>

33 </head>

34

35 <body>

36

37 <p>The text at the end of this sentence

38 <span class = "super">is in superscript</span>.</p>

39


41 <span class = "sub">is in subscript</span>.</p>

42


44 <span class = "shiftleft">is shifted left</span>.</p>

45


47 <span class = "shiftright">is shifted right</span>.</p>

48

49 </body>

50 </html>


Output for Fig. 4.7


4.7 Backgrounds

• CSS gives control over backgrounds– Property background-image

• Specify image URL

– Property background-color• Specify background color

– Property background-position• Specifies background location

– Property background-repeat• Specifies background tiling

– Property background-attachment• Set to fixed to apply background-position

Outline

Fig. 4.8 Adding a background image with CSS.

Line 14



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Background Images</title>

10


12

13 body { background-image: url(logo.gif);

14 background-position: bottom right;

15 background-repeat: no-repeat;

16 background-attachment: fixed; }

17

18 p { font-size: 18pt;

19 color: #aa5588;

20 text-indent: 1em;

21 font-family: arial, sans-serif; }

22

23 .dark { font-weight: bold; }

24

25 </style>

26 </head>

27

allocate image by using “url”

Place image at bottom-right of screen


Outline

Fig. 4.8 Adding a background image with CSS. (Part 2)

28 <body>

29

30 <p>

31 This example uses the background-image,

32 background-position and background-attachment

33 styles to place the <span class = "dark">Deitel

34 & Associates, Inc.</span> logo in the bottom,

35 right corner of the page. Notice how the logo

36 stays in the proper position when you resize the

37 browser window.

38 </p>

39

40 </body>

41 </html>


Output for Fig. 4.8


4.8 Element Dimensions

• Specify element dimensions– Set style attribute width to stretch applied elements

Outline

Fig. 4.9 Setting box dimensions and aligning text.

Line 21



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Box Dimensions</title>

10


12

13 div { background-color: #ffccff;

14 margin-bottom: .5em }

15 </style>

16

17 </head>

18

19 <body>

20

21 <div style = "width: 20%">Here is some

22 text that goes in a box which is

23 set to stretch across twenty precent

24 of the width of the screen.</div>

25

Place contained text in box that occupies 20% of screen


Outline

Fig. 4.9 Setting box dimensions and aligning text. (Part 2)

26 <div style = "width: 80%; text-align: center">

27 Here is some CENTERED text that goes in a box

28 which is set to stretch across eighty precent of

29 the width of the screen.</div>

30

31 <div style = "width: 20%; height: 30%; overflow: scroll">

32 This box is only twenty percent of

33 the width and thirty percent of the height.

34 What do we do if it overflows? Set the

35 overflow property to scroll!</div>

36

37 </body>

38 </html>


Output for Fig. 4.9


4.9 Text Flow and the Box Model

• Floating– Allows repositioning of elements

• Nearby text will wrap• clear property overrides wrapping

• Margin– Defines size of element’s margins

Outline

Fig. 4.10Floating elements, aligning text and setting box dimensions.



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Flowing Text Around

10 Floating Elements</title>

11


13

14 div { background-color: #ffccff;

15 margin-bottom: .5em;

16 font-size: 1.5em;

17 width: 50% }

18

19 p { text-align: justify; }

20

21 </style>

22

23 </head>

24


Outline

Fig. 4.10Floating elements, aligning text and setting box dimensions. (Part 2)

Line 29

25 <body>2627 <div style = "text-align: center">Deitel & Associates, Inc.</div>2829 <div style = "float: right; margin: .5em; text-align: right">30 Corporate Training and Publishing</div>3132 <p>Deitel & Associates, Inc. is an internationally recognized33 corporate training and publishing organization specializing 34 in programming languages, Internet/World Wide Web technology 35 and object technology education. Deitel & Associates, 36 Inc. is a member of the World Wide Web Consortium. The company

37 provides courses on Java, C++, Visual Basic, C, Internet and 38 World Wide Web programming, and Object Technology.</p>3940 <div style = "float: right; padding: .5em; text-align: right">

41 Leading-edge Programming Textbooks</div>4243 <p>The company's clients include many Fortune 1000 companies, 44 government agencies, branches of the military and business 45 organizations. Through its publishing partnership with Prentice

46 Hall, Deitel & Associates, Inc. publishes leading-edge 47 programming textbooks, professional books, interactive 48 CD-ROM-based multimedia Cyber Classrooms, satellite courses 49 and World Wide Web courses.<span style = "clear: right">Here 50 is some unflowing text. Here is some unflowing text.</span></p>

5152 </body>53 </html>

Float text in box on right-side with .5-pixel margin


Output for Fig. 4.10

Outline

Fig. 4.12Applying borders to elements.

Lines 19-27



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Borders</title>

10


12

13 body { background-color: #ccffcc }

14

15 div { text-align: center;

16 margin-bottom: 1em;

17 padding: .5em }

18

19 .thick { border-width: thick }

20

21 .medium { border-width: medium }

22

23 .thin { border-width: thin }

24

25 .groove { border-style: groove }

26

27 .inset { border-style: inset }

28

Define various borders


Outline

Fig. 4.12Applying borders to elements. (Part 2)

29 .outset { border-style: outset }

30

31 .red { border-color: red }

32

33 .blue { border-color: blue }

34

35 </style>

36 </head>

37

38 <body>

39

40 <div class = "thick groove">This text has a border</div>

41 <div class = "medium groove">This text has a border</div>

42 <div class = "thin groove">This text has a border</div>

43

44 <p class = "thin red inset">A thin red line...</p>

45 <p class = "medium blue outset">And a thicker blue line</p>

46

47 </body>

48 </html>

Multi-classes applied

Outline

Fig. 4.13Various border-styles.



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Borders</title>

10


12

13 body { background-color: #ccffcc }

14

15 div { text-align: center;

16 margin-bottom: .3em;

17 width: 50%;

18 position: relative;

19 left: 25%;

20 padding: .3em }

21 </style>

22

23 </head>

24


Outline

Fig. 4.13Various border-styles. (Part 2)

Lines 27-32

25 <body>

26

27 <div style = "border-style: solid">Solid border</div>

28 <div style = "border-style: double">Double border</div>

29 <div style = "border-style: groove">Groove border</div>

30 <div style = "border-style: ridge">Ridge border</div>

31 <div style = "border-style: inset">Inset border</div>

32 <div style = "border-style: outset">Outset border</div>

33

34 </body>

35 </html>

Define various border styles


4.10 User Style Sheets

• User-defined styles– Users can customize styles

• e.g., Web-site designers

Outline

Fig. 4.14Modifying text size with the em measurement.

Line 13



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - User Styles</title>

10


12

13 .note { font-size: 1.5em }

14

15 </style>

16 </head>

17

18 <body>

19

20 <p>Thanks for visiting my Web site. I hope you enjoy it.</p>

21 <p class = "note">Please Note: This site will be moving soon.

22 Please check periodically for updates.</p>

23

24 </body>

25 </html>

Modify user-defined stylesheet by multiplying em style by 1.5


Adding your own style sheet in IE

• Internet options Accessibility User Style Sheet

2002 prentice hall, inc. all rights reserved. chapter 4 – cascading style sheets (css) objectives...

Documents

style element

external style sheets

user style sheets

levels of style sheets

finegrain style

prentice hall

element backgrounds

inline styles