Date post: | 16-Dec-2015 |
Category: |
Documents |
Upload: | julie-adams |
View: | 214 times |
Download: | 2 times |
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:
http://jigsaw.w3.org/css-validator/
2002 Prentice Hall, Inc. All rights reserved.
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”>
<!-- /*this is for browser only*/
rule list
selector {attr_1 : value_1; ….; attr_n : value_n; }
-->
</style>
– “selector”: tag or tags affected by the rule
2002 Prentice Hall, Inc. All rights reserved.
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.
2002 Prentice Hall, Inc. All rights reserved.
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 <!-- Fig. 4.1: inline.html -->
6 <!-- Using inline styles -->
7
8 <head>
9 <title>XML How to Program - Inline Styles</title>
10 </head>
11
12 <body>
13
14 <p>This text does not have any style applied to it.</p>
15
16 <!-- The style attribute allows you to declare inline -->
17 <!-- styles. Separate multiple styles with a semicolon. -->
18 <p style = "font-size: 20pt">This text has the <em>font-size</em>
19 style applied to it, making it 20pt.</p>
20
21 <p style = "font-size: 20pt; color: #0000ff">This text has the
22 <em>font-size</em> and <em>color</em> styles applied to it,
23 making it 20pt. and blue.</p>
24
25 </body>
26 </html>
Define style for following text
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.1
2002 Prentice Hall, Inc. All rights reserved.
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 (;)
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.2 Declaring styles in the head of a document.
Line 12
Lines 14-19
Line 21
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.2: declared.html -->
6 <!-- Declaring a style sheet in the header section. -->
7
8 <head>
9 <title>XML How to Program - Style Sheets</title>
10
11 <!-- This begins the style sheet section. -->
12 <style type = "text/css">
13
14 em { background-color: #8000ff;
15 color: white }
16
17 h1 { font-family: arial, sans-serif }
18
19 p { font-size: 14pt }
20
21 .special { color: blue }
22
23 </style>
24 </head>
25
Start of style sheet
Define style attributes of em, h1, and p tags
Define special case (not attached to any pre-defined tag)
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.2 Declaring styles in the head of a document. (Part 2)
Line 29
26 <body>
27
28 <!-- This class attribute applies the .blue style -->
29 <h1 class = "special">Deitel & Associates, Inc.</h1>
30
31 <p>Deitel & Associates, Inc. is an internationally recognized
32 corporate training and publishing organization specializing
33 in programming languages, Internet/World Wide Web technology
34 and object technology education. Deitel & Associates, Inc. is
35 a member of the World Wide Web Consortium. The company
36 provides courses on Java, C++, Visual Basic, C, Internet and
37 World Wide Web programming, and Object Technology.</p>
38
39 <h1>Clients</h1>
40 <p class = "special"> The company's clients include many
41 <em>Fortune 1000 companies</em>, government agencies, branches
42 of the military and business organizations. Through its
43 publishing partnership with Prentice Hall, Deitel & Associates,
44 Inc. publishes leading-edge programming textbooks, professional
45 books, interactive CD-ROM-based multimedia Cyber Classrooms,
46 satellite courses and World Wide Web courses.</p>
47
48 </body>
49 </html>
Using special style
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.2
2002 Prentice Hall, Inc. All rights reserved.
4.4 Conflicting Styles
• Style precedence– Author > User > Agent (Web Browser)
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.3 Inheritance in style sheets.
Line 13
Lines 19-20
Line 15
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.3: advanced.html -->
6 <!-- More advanced style sheets -->
7
8 <head>
9 <title>XML How to Program - More Styles</title>
10
11 <style type = "text/css">
12
13 a.nodec { text-decoration: none }
14
15 a:hover { text-decoration: underline;
16 color: red;
17 background-color: #ccffcc }
18
19 li em { color: red;
20 font-weight: bold }
21
22 ul { margin-left: 75px }
23
24 ul ul { text-decoration: underline;
25 margin-left: 15px }
26
27 </style>
28 </head>
29
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
2002 Prentice Hall, Inc. All rights reserved.
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>
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.3
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.5 Linking an external style sheet.
Line 11
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5
6 <!-- Fig. 4.5: imported.html -->
7 <!-- Linking external style sheets -->
8
9 <head>
10 <title>XML How to Program - Importing Style Sheets</title>
11 <link rel = "stylesheet" type = "text/css" href = "styles.css">
12 </head>
13
Link external stylesheet with current document, Only appear in “head”
2002 Prentice Hall, Inc. All rights reserved.
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>
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.5
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.6Positioning elements with CSS.
Lines 14-19
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.6: positioning.html -->
6 <!-- Absolute positioning of elements -->
7
8 <head>
9 <title>XML How to Program - Absolute Positioning</title>
10 </head>
11
12 <body>
13
14 <p><img src = "i.gif" style = "position: absolute; top: 0px;
15 left: 0px; z-index: 1" alt = "First positioned image"></p>
16 <p style = "position: absolute; top: 50px; left: 50px;
17 z-index: 3; font-size: 20pt;">Positioned Text</p>
18 <p><img src = "circle.gif" style = "position: absolute; top: 25px;
19 left: 100px; z-index: 2" alt = "Second positioned image"></p>
20
21 </body>
22 </html>
Use inline style to position images: place second image
over the first (because second image has higher z index)
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.6
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.7 Relative positioning of elements.
Lines 20-21
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 4.7: positioning2.html -->
6 <!-- Relative positioning of elements -->
7
8 <head>
9 <title>XML How to Program - Relative Positioning</title>
10
11 <style type = "text/css">
12
13 p { font-size: 1.3em;
14 font-family: verdana, arial, sans-serif }
15
16 span { color: red;
17 font-size: .6em;
18 height: 1em }
19
20 .super { position: relative;
21 top: -1ex }
22
23 .sub { position: relative;
24 bottom: -1ex }
25
Define attributes that position elements relative to browser-defined location
2002 Prentice Hall, Inc. All rights reserved.
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
40 <p>The text at the end of this sentence
41 <span class = "sub">is in subscript</span>.</p>
42
43 <p>The text at the end of this sentence
44 <span class = "shiftleft">is shifted left</span>.</p>
45
46 <p>The text at the end of this sentence
47 <span class = "shiftright">is shifted right</span>.</p>
48
49 </body>
50 </html>
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.7
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.8 Adding a background image with CSS.
Line 14
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 4.8: background.html -->
6 <!-- Adding background images and indentation -->
7
8 <head>
9 <title>XML How to Program - Background Images</title>
10
11 <style type = "text/css">
12
13 body { background-image: url(logo.gif);
14 background-position: bottom right;
15 background-repeat: no-repeat;
16 background-attachment: fixed; }
17
18 p { font-size: 18pt;
19 color: #aa5588;
20 text-indent: 1em;
21 font-family: arial, sans-serif; }
22
23 .dark { font-weight: bold; }
24
25 </style>
26 </head>
27
allocate image by using “url”
Place image at bottom-right of screen
2002 Prentice Hall, Inc. All rights reserved.
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>
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.8
2002 Prentice Hall, Inc. All rights reserved.
4.8 Element Dimensions
• Specify element dimensions– Set style attribute width to stretch applied elements
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.9 Setting box dimensions and aligning text.
Line 21
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 4.9: width.html -->
6 <!-- Setting box dimensions and aligning text -->
7
8 <head>
9 <title>XML How to Program - Box Dimensions</title>
10
11 <style type = "text/css">
12
13 div { background-color: #ffccff;
14 margin-bottom: .5em }
15 </style>
16
17 </head>
18
19 <body>
20
21 <div style = "width: 20%">Here is some
22 text that goes in a box which is
23 set to stretch across twenty precent
24 of the width of the screen.</div>
25
Place contained text in box that occupies 20% of screen
2002 Prentice Hall, Inc. All rights reserved.
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>
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.9
2002 Prentice Hall, Inc. All rights reserved.
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
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"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 4.13: borders2.html -->
6 <!-- Various border-styles -->
7
8 <head>
9 <title>XML How to Program - Borders</title>
10
11 <style type = "text/css">
12
13 body { background-color: #ccffcc }
14
15 div { text-align: center;
16 margin-bottom: .3em;
17 width: 50%;
18 position: relative;
19 left: 25%;
20 padding: .3em }
21 </style>
22
23 </head>
24
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.
Output for Fig. 4.13
2002 Prentice Hall, Inc. All rights reserved.
4.10 User Style Sheets
• User-defined styles– Users can customize styles
• e.g., Web-site designers
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 4.14Modifying text size with the em measurement.
Line 13
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 4.14: user.html -->
6 <!-- User styles -->
7
8 <head>
9 <title>XML How to Program - User Styles</title>
10
11 <style type = "text/css">
12
13 .note { font-size: 1.5em }
14
15 </style>
16 </head>
17
18 <body>
19
20 <p>Thanks for visiting my Web site. I hope you enjoy it.</p>
21 <p class = "note">Please Note: This site will be moving soon.
22 Please check periodically for updates.</p>
23
24 </body>
25 </html>
Modify user-defined stylesheet by multiplying em style by 1.5
2002 Prentice Hall, Inc. All rights reserved.
Adding your own style sheet in IE
• Internet options Accessibility User Style Sheet