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”
47
Embed
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.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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”
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.
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:
• Nearby text will wrap• clear property overrides wrapping
• Margin– Defines size of element’s margins
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.10Floating elements, aligning text and setting box dimensions.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 4.10: floating.html -->
6 <!-- Floating elements and element boxes -->
7
8 <head>
9 <title>XML How to Program - Flowing Text Around
10 Floating Elements</title>
11
12 <style type = "text/css">
13
14 div { background-color: #ffccff;
15 margin-bottom: .5em;
16 font-size: 1.5em;
17 width: 50% }
18
19 p { text-align: justify; }
20
21 </style>
22
23 </head>
24
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.10
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.12Applying borders to elements.
Lines 19-27
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 4.12: borders.html -->
6 <!-- Setting borders of an element -->
7
8 <head>
9 <title>XML How to Program - Borders</title>
10
11 <style type = "text/css">
12
13 body { background-color: #ccffcc }
14
15 div { text-align: center;
16 margin-bottom: 1em;
17 padding: .5em }
18
19 .thick { border-width: thick }
20
21 .medium { border-width: medium }
22
23 .thin { border-width: thin }
24
25 .groove { border-style: groove }
26
27 .inset { border-style: inset }
28
Define various borders
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.12
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.13Various border-styles.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"