Scribd
Upload
88 views

Cascading Style Sheets™ (CSS)

Uploaded by

Gaafar Mohammed
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
88 views

Cascading Style Sheets™ (CSS)

Uploaded by

Gaafar Mohammed
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 84

1

5
Cascading Style
Sheets™ (CSS)

 2008 Pearson Education, Inc. All rights reserved.


2

OBJECTIVES
In this chapter you will learn:
 To control the appearance of a website by
creating style sheets.
 To use a style sheet to give all the pages of a
website 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
margins, borders and padding.
 To use style sheets to separate presentation from
content.
 2008 Pearson Education, Inc. All rights reserved.
3

5.1 Introduction
5.2 Inline Styles
5.3    Embedded Style Sheets
5.4    Conflicting Styles
5.5    Linking External Style Sheets
5.6    Positioning Elements
5.7    Backgrounds
5.8    Element Dimensions
5.9    Box Model and Text Flow
5.10    Media Types
5.11    Building a CSS Drop-Down Menu
5.12    User Style Sheets
5.13    CSS 3
5.14    Wrap-Up
5.15    Web Resources
 2008 Pearson Education, Inc. All rights reserved.
4

5.1 Introduction
• Cascading Style Sheets (CSS)
– Used to specify the presentation of elements separately
from the structure of the document
• CSS validator
jigsaw.w3.org/css-validator/

 2008 Pearson Education, Inc. All rights reserved.


5

5.2 Inline Styles


• Inline style
– declare a style for an individual element by using the
style attribute in the element’s start tag
• Each CSS property is followed by a colon and the
value of the attribute
– Multiple property declarations are separated by a
semicolon

 2008 Pearson Education, Inc. All rights reserved.


6

5.2 Inline Styles (Cont.)


• color property sets text color
– Color names and hexadecimal codes may be used as the
value

 2008 Pearson Education, Inc. All rights reserved.


7

Good Programming Practice 5.1

Inline styles do not truly separate presentation


from content. To apply similar styles to
multiple elements, use embedded styles sheets
or external style sheets, introduced later in
this chapter.

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 8
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Fig. 5.1 | Using
4 inline styles
5 <!-- Fig. 5.1: inline.html -->
6 <!-- Using inline styles --> (Part 1 of 2).
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Inline Styles</title>
10 </head>
11 <body>
12 <p>This text does not have any style applied to it.</p>
Style attribute
13
14 <!-- The style attribute allows you to declare -->
15 <!-- inline styles. Separate multiple style properties -->
16 <!-- with a semicolon. --> Sets the paragraph’s
17 <p style = "font-size: 20pt">This text has the
18 <em>font-size</em> style applied to it, making it
font size toSets
20pt.
20ptthe paragraph’s
19 </p> color to light blue
20
21 <p style = "font-size: 20pt; color: #6666ff">
22 This text has the <em>font-size</em> and
23 <em>color</em> styles applied to it, making it
24 20pt. and light blue.</p>
25 </body>
26 </html>

 2008 Pearson Education,


Inc. All rights reserved.
9

Fig. 5.1 | Using inline styles (Part 2 of 2).

 2008 Pearson Education, Inc. All rights reserved.


10

5.3 Embedded Style Sheets


• Styles that are placed in a style element use
selectors to apply style elements throughout the
entire document
• style element attribute type specifies the
MIME type (the specific encoding format) of the
style sheet. Style sheets use text/css
• Each rule body in a style sheet begins and ends
with a curly brace ({ and }).

 2008 Pearson Education, Inc. All rights reserved.


11

5.3 Embedded Style Sheets (Cont.)


• Style-class declarations are preceded by a period
and are applied to elements of the specific class
– The class attribute applies a style class to an element
• CSS rules in a style sheet use the same format as
inline styles:
– The property is followed by a colon (:) and the value of
that property
– Multiple properties are separated by semicolons (;)

 2008 Pearson Education, Inc. All rights reserved.


12

5.3 Embedded Style Sheets (Cont.)


• font-weight property specifies the “boldness”
of text. Possible values are:
– bold
– normal (the default)
– bolder (bolder than bold text)
– lighter (lighter than normal text)
– Boldness also can be specified with multiples of 100, from
100 to 900 (e.g., 100, 200, …, 900). Text specified as normal
is equivalent to 400, and bold text is equivalent to 700

 2008 Pearson Education, Inc. All rights reserved.


13

5.3 Embedded Style Sheets (Cont.)


• background-color attribute specifies the
background color of the element
• font-family attribute names a specific font
that should be displayed
– Generic font families allow authors to specify a type of font
instead of a specific font, in case a browser does not
support a specific font
• font-size property specifies the size used to
render the font

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 14
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 Sets the MIME type
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> to
4 Style sheet begins text/css Fig. 5.2 |
5 <!-- Fig. 5.2: embedded.html -->
6 <!-- Embedded style sheets. -->
Embedded
Sets the properties for all
7 <html xmlns = "http://www.w3.org/1999/xhtml">
elements in the document
style sheets
8
9
<head>
<title>Style Sheets</title> within em tags (Part 1 of 2).
10 Sets the properties for all
11 <!-- this begins the style sheet h1 elements in the
section -->
12 <style type = "text/css"> document
13 em { font-weight: bold;
14 color: black } Sets the properties for all
15 h1 { font-family: tahoma, helvetica, sans-serif }
p elements in the
16 p { font-size: 12pt;
17 font-family: arial, sans-serif }
document
18 .special { color: #6666ff } Creates a special class
19 </style>
20 </head>
21 <body>
Style sheet ends
22 <!-- this class attribute applies the .special style -->
23 <h1 class = "special">Deitel &amp; Associates, Inc.</h1>
24
25 <p>Deitel &amp; Associates, Inc. is an internationally
26 recognized corporate training and publishing organization
27 specializing in programming languages, Internet/World
28 Wide Web technology and object technology education.
29 The company provides courses on Java, C++, Visual Basic,
30 C#, C, Internet and World Wide Web programming, Object
31 Technology, and more.</p>  2008 Pearson Education,
Inc. All rights reserved.
32 15
33 <h1>Clients</h1>
34 <p class = "special"> The company's clients include many
35 <em>Fortune 1000 companies</em>, government agencies, Fig. 5.2 |
36 branches of the military and business organizations.
37 Through its publishing partnership with Prentice Hall,
Embedded
38 Deitel &amp; Associates, Inc. publishes leading-edge The special class style
is sheets
applied to this p element
39
40
programming textbooks, professional books, interactive
web-based multimedia Cyber Classrooms, satellite
(Part 2 of 2).
41 courses and World Wide Web courses.</p>
42 </body>
43 </html>

 2008 Pearson Education,


Inc. All rights reserved.
16

5.4 Conflicting Styles


• Styles defined by the user take precedence over
styles defined by the user agent
• Styles defined by authors take precedence over
styles defined by the user
• Most styles are inherited from parent elements.
Styles defined for children have higher specificity
and take precedence over the parent’s styles
• Conflicts are resolved in favor of properties with
a higher specificity

 2008 Pearson Education, Inc. All rights reserved.


17

5.4 Conflicting Styles (Cont.)


• text-decoration property applies
decorations to text in an element
underline
overline
line-through
blink

 2008 Pearson Education, Inc. All rights reserved.


18

5.4 Conflicting Styles (Cont.)


• Pseudoclasses give the author access to content
not specifically declared in the document
• Pseudoclasses are separated by a colon (with no
surrounding spaces) from the name of the
element to which they are applied
• hover pseudoclass is activated when the user
moves the mouse cursor over an element

 2008 Pearson Education, Inc. All rights reserved.


19

5.4 Conflicting Styles (Cont.)


• To apply rules to multiple elements, separate the
elements with commas in the style sheet
• To apply rules to only a certain type of element
that is a child of another type, separate the
element names with spaces

 2008 Pearson Education, Inc. All rights reserved.


20

5.4 Conflicting Styles (Cont.)


• Relative length measurements:
– px (pixels – size varies depending on screen resolution)
– em (usually the height of a font’s uppercase M)
– ex (usually the height of a font’s lowercase x)
– Percentages (of the font’s default size)
• Absolute-length measurements (units that do not vary in
size):
– in (inches)
– cm (centimeters)
– mm (millimeters)
– pt (points; 1 pt = 1/72 in)
– pc (picas; 1 pc = 12 pt)

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 21
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.3 |
5
6
<!-- Fig. 5.3: advanced.html -->
<!-- Inheritance in style sheets. -->
Inheritance
7 <html xmlns = "http://www.w3.org/1999/xhtml">
Defines the class nodec in style
that can only be used by
8 <head> sheets (Part
9 <title>More Styles</title> anchor elements
10 <style type = "text/css">
1 of 3).
11 body { font-family: arial, helvetica, sans-serif }
12 a.nodec { text-decoration: none }
13 a:hover { text-decoration: underline } Sets the properties for the hover
14 li em { font-weight: bold } pseudoclass for the a element, which is
15 h1, em { text-decoration: underline } activated when the user moves the
16 ul { margin-left: 20px } cursor over an anchor element
17 ul ul { font-size: .8em }
18 </style>
All em elements that are children of li
19 </head>
elements set to bold
20 <body>
21 <h1>Shopping list for Monday:</h1>
22
Applies underline style to
all h1 and em elements

 2008 Pearson Education,


Inc. All rights reserved.
23 <ul> 22
24 <li>Milk</li>
25 <li>Bread
26 <ul> Fig. 5.3 |
27
28
<li>White bread</li>
<li>Rye bread</li>
Inheritance
29 <li>Whole wheat bread</li> in style
30 </ul>
sheets (Part
31 </li>
32 <li>Rice</li> 2 of 3).
33 <li>Potatoes</li>
34 <li>Pizza <em>with mushrooms</em></li>
35 </ul>
36
37 <p><em>Go to the</em>
38 <a class = "nodec" href = "http://www.deitel.com">
39 Grocery store</a>
40 </p>
41 </body>
42 </html>

 2008 Pearson Education,


Inc. All rights reserved.
23

Fig. 5.3 | Inheritance in style sheets (Part 3 of 3).

 2008 Pearson Education, Inc. All rights reserved.


24

Portability Tip 5.1

To ensure that your style sheets work in


various web browsers, test them on all the
client web browsers that will render
documents using your styles, as well as using
the W3C CSS Validator.

 2008 Pearson Education, Inc. All rights reserved.


25

Common Programming Error 5.1

Including a space before or after the colon


separating a pseudoclass from the name of the
element to which it is applied is an error that
prevents the pseudoclass from being applied
properly.

 2008 Pearson Education, Inc. All rights reserved.


26

Good Programming Practice 5.2

Whenever possible, use relative-length


measurements. If you use absolute-length
measurements, your document may not be
readable on some client browsers (e.g.,
wireless phones).

 2008 Pearson Education, Inc. All rights reserved.


27

5.5 Linking External Style Sheets


• External style sheets are separate documents that
contain only CSS rules
• Help create a uniform look for a website
– separate pages can all use the same styles
– Modifying a single style-sheet file makes changes to styles
across an entire website

 2008 Pearson Education, Inc. All rights reserved.


28

Software Engineering Observation 5.1

Always use an external style sheet when


developing a website with multiple pages.
External style sheets separate content from
presentation, allowing for more consistent
look-and-feel, more efficient development, and
better performance.

 2008 Pearson Education, Inc. All rights reserved.


29

5.5 Linking External Style Sheets (Cont.)

• link element
– Uses rel attribute to specify a relationship between two
documents
– rel attribute declares the linked document to be a
stylesheet for the document
• type attribute specifies the MIME type of the
related document
• href attribute provides the URL for the
document containing the style sheet

 2008 Pearson Education, Inc. All rights reserved.


1 /* Fig. 5.4: styles.css */ 30
2 /* External stylesheet */
3
4 body { font-family: arial, helvetica, sans-serif } Fig. 5.4 |
5
6 a.nodec { text-decoration: none }
External
7 style sheet.
8 a:hover { text-decoration: underline }
9
10 li em { font-weight: bold }
11
12 h1, em { text-decoration: underline }
13
14 ul { margin-left: 20px }
15
16 ul ul { font-size: .8em; }

 2008 Pearson Education,


Inc. All rights reserved.
1 <?xml version = "1.0" encoding = "utf-8"?> 31
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.5 |
5
6
<!-- Fig. 5.6: external.html -->
<!-- Linking an external style sheet. -->
Linking an
7 <html xmlns = "http://www.w3.org/1999/xhtml"> external
8 <head> style sheet
9 <title>Linking External Style Sheets</title>
10 <link rel = "stylesheet" type = "text/css" (Part 1 of 2).
11 href = "styles.css" />
12 </head>
The linked document is declared to be
13 <body>
the current one’s stylesheet
14 <h1>Shopping list for <em>Monday</em>:</h1>
15 The linked document’s MIME type is
16 <ul> text/css
17 <li>Milk</li>
18 <li>Bread
19 <ul>
The linked document’s URL is
20 <li>White bread</li> styles.css
21 <li>Rye bread</li>
22 <li>Whole wheat bread</li>
23 </ul>
24 </li>
25 <li>Rice</li>
26 <li>Potatoes</li>
27 <li>Pizza <em>with mushrooms</em></li>
28 </ul>
29
 2008 Pearson Education,
Inc. All rights reserved.
30 <p><em>Go to the</em> 32
31 <a class = "nodec" href = "http://www.deitel.com">
32 Grocery store</a>
33 </p> Fig. 5.5 |
34 </body>
35 </html>
Linking an
external
style sheet
(Part 2 of 2).

 2008 Pearson Education,


Inc. All rights reserved.
33

Software Engineering Observation 5.2

External style sheets are reusable. Creating


them once and reusing them reduces
programming effort.

 2008 Pearson Education, Inc. All rights reserved.


34

Performance Tip 5.1

Reusing external style sheets reduces load


time and bandwidth usage on a server, since
the style sheet can be downloaded once, stored
by the web browser, and applied to all pages
on a website.

 2008 Pearson Education, Inc. All rights reserved.


35

5.6 Positioning Elements


• CSS position property
– Allows absolute positioning, which provides greater control
over where on a page elements reside
– Normally, elements are positioned on the page in the order
that they appear in the XHTML document
– Specifying an element’s position as absolute removes it
from the normal flow of elements on the page and positions
it according to distance from the top, left, right or bottom
margin of its parent element

 2008 Pearson Education, Inc. All rights reserved.


36

5.6 Positioning Elements (Cont.)


• The z-index property allows a developer to layer
overlapping elements
• Elements that have higher z-index values are
displayed in front of elements with lower z-index
values

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 37
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.6 |
5
6
<!-- Fig. 5.6: positioning.html -->
<!-- Absolute positioning of elements. -->
Absolute
7 <html xmlns = "http://www.w3.org/1999/xhtml"> Class that sets an element’s positioning
absolute position at the top
8 <head>
of elements
9 <title>Absolute Positioning</title> left of the containing element
10 <style type = "text/css"> (Part 1 of 2).
11 .bgimg { position: absolute;
12 top: 0px;
13 left: 0px; Lowest z-index, so this element is
14 z-index: 1 } behind all the others
15 .fgimg { position: absolute;
16 top: 25px;
Set element’s position 25px from the
17 left: 100px;
top and 100 from the left
18 z-index: 2 }
This element will appear on top of the
19 .text { position: absolute; first one, since it has a higher z-index
20 top: 25px;
21 left: 100px; This element will appear on top of all
22 z-index: 3;
others, since it has the highest z-index
23 font-size: 20pt;
24 font-family: tahoma, geneva, sans-serif }
25 </style>
26 </head>
27 <body>
28 <p><img src = "bgimg.gif" class = "bgimg"
29 alt = "First positioned image" /></p>
30
 2008 Pearson Education,
Inc. All rights reserved.
31 <p><img src = "fgimg.gif" class = "fgimg" 38
32 alt = "Second positioned image" /></p>
33
34 <p class = "text">Positioned Text</p> Fig. 5.6 |
35 </body>
36 </html>
Absolute
positioning
of elements
(Part 2 of 2).

 2008 Pearson Education,


Inc. All rights reserved.
39

5.6 Positioning Elements (Cont.)


• Relative positioning keeps elements in the general
flow on the page and offsets them by the specified
top, left, right or bottom value

 2008 Pearson Education, Inc. All rights reserved.


40

5.6 Positioning Elements (Cont.)


• Inline-level elements
– Do not change the flow of the document
– Examples:
• img
•a
• em
• strong
• span
– Grouping element
– Does not apply any formatting to its contents
– Creates a container for CSS rules or id attributes to be
applied to a section

 2008 Pearson Education, Inc. All rights reserved.


41

5.6 Positioning Elements (Cont.)


• Block-level elements
– Displayed on their own line
– Have virtual boxes around them
– Examples:
•p
• all headings (h1 through h6)
• div
– A grouping element like span

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 42
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.7 |
5
6
<!-- Fig. 5.7: positioning2.html -->
<!-- Relative positioning of elements. -->
Relative
7 <html xmlns = "http://www.w3.org/1999/xhtml"> positioning
8 <head> of elements
9 <title>Relative Positioning</title>
10 <style type = "text/css"> (Part 1 of 2).
11 p { font-size: 1.3em;
12 font-family: verdana, arial, sans-serif }
13 span { color: red;
14 font-size: .6em;
15 height: 1em }
16 .super { position: relative;
Positions element 5 ex upwards
17 top: -1ex }
18 .sub { position: relative; Positions element 1 ex downwards
19 bottom: -1ex }
20 .shiftleft { position: relative;
Positions element 1 ex to the left
21 left: -1ex }
22 .shiftright { position: relative;
Positions element 1 ex to the right
23 right: -1ex }
24 </style>
25 </head>
26 <body> Apply the super class to this
27 <p>The text at the end of this sentence
span element
28 <span class = "super">is in superscript</span>.</p>
29
 2008 Pearson Education,
Inc. All rights reserved.
30 <p>The text at the end of this sentence 43
31 <span class = "sub">is in subscript</span>.</p>
Apply the sub class to this
32
span element
33 <p>The text at the end of this sentence Fig. 5.7 |
34
35
<span class = "shiftleft">is shifted left</span>.</p>
Relative
Apply the shiftleft class
36 <p>The text at the end of this sentence positioning
to this span element
37 <span class = "shiftright">is shifted right</span>.</p>
of elements
38 </body>
Apply the shiftright
(Part 2 of 2).
39 </html>
class to this span element

 2008 Pearson Education,


Inc. All rights reserved.
44

Common Programming Error 5.2

Because relative positioning keeps elements in


the flow of text in your documents, be careful
to avoid unintentionally overlapping text.

 2008 Pearson Education, Inc. All rights reserved.


45

5.7 Backgrounds
• CSS can control the backgrounds of block-level
elements by adding:
– Colors
– Images

 2008 Pearson Education, Inc. All rights reserved.


46

5.7 Backgrounds (Cont.)


• Property background-image
– Specifies the URL of the image, in the format
url(fileLocation)
• Property background-position
– Places the image on the page using the values top,
bottom, center, left and right individually or in
combination for vertical and horizontal positioning. You
can also position by using lengths

 2008 Pearson Education, Inc. All rights reserved.


47

5.7 Backgrounds (Cont.)


• Property background-image specifies the URL
of the image
– Use the format url(fileLocation)
• Property background-position places the
image on the page
– Use the values top, bottom, center, left and right
individually or in combination for vertical and horizontal
positioning
– You can also position by specifying horizontal then vertical
distances from the top-left corner of the screen

 2008 Pearson Education, Inc. All rights reserved.


48

5.7 Backgrounds (Cont.)


• background-repeat property controls the
tiling of the background image
– Setting the tiling to no-repeat displays one copy of the
background image on screen
– Setting to repeat (the default) tiles the image vertically
and horizontally
– Setting to repeat-x tiles the image only horizontally
– Setting to repeat-y tile the image only vertically

 2008 Pearson Education, Inc. All rights reserved.


49

5.7 Backgrounds (Cont.)


• Property setting
background-attachment: fixed
– fixes the image in the position specified by background-
position. Scrolling the browser window will not move the
image from its set position. The default value, scroll, moves
the image as the user scrolls the window

 2008 Pearson Education, Inc. All rights reserved.


50

5.7 Backgrounds (Cont.)


• text-indent property indents the first line of
text in the element by the specified amount
• font-style property allows you to set text to
none, italic or oblique

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 51
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Inserts the image at Fig. 5.8 |
5 <!-- Fig. 5.8: background.html --> logo.gif as the
Adding
6 <!-- Adding background images and indentation. --> background
7 <html xmlns = "http://www.w3.org/1999/xhtml"> background
8 <head> Places the image at the bottom
images and
9 <title>Background Images</title>
right of the page
10 <style type = "text/css"> indentation
11 body { background-image: url(logo.gif);
(Part 1 of 2).
Displays only one copy of the
12 background-position: bottom right;
13 background-repeat: no-repeat;
image
14 background-attachment: fixed;
15 background-color: #eeeeee } Keeps the image in place
16 p { font-size: 18pt; when the user scrolls in the
17 color: #1144AA; browser window
18 text-indent: 1em;
19 font-family: arial, sans-serif; }
20 .dark { font-weight: bold } Fills the remainder of the
21 </style> window with a light gray
22 </head> background

Indents the first line of text in


the element by 1 em

 2008 Pearson Education,


Inc. All rights reserved.
23 <body> 52
24 <p>
25 This example uses the background-image,
26 background-position and background-attachment Fig. 5.8 |
27 styles to place the <span class = "dark">Deitel
28 &amp; Associates, Inc.</span> logo in the bottom,
Adding
29 right corner of the page. Notice how the logo background
30
31
stays in the proper position when you resize the
browser window. The background-color fills in where
images and
32 there is no image. indentation
33 </p> (Part 2 of 2).
34 </body>
35 </html>

 2008 Pearson Education,


Inc. All rights reserved.
53

5.8 Element Dimensions


• Dimensions of elements on a page can be set with
CSS by using properties height and width
– Their values can be relative or absolute
• Text in an element can be centered using text-
align: center; other values for the text-align
property are left and right

 2008 Pearson Education, Inc. All rights reserved.


54

5.8 Element Dimensions (Cont.)


• Problem with setting both vertical and horizontal
dimensions of an element
– Content might sometimes exceed the set boundaries, in which case the
element must be made large enough for all the content to fit
– Can set the overflow property to scroll, which adds scroll bars if
the text overflows the boundaries set for it

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 55
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.9 |
5 <!-- Fig. 5.9: width.html -->
6 <!-- Element dimensions and text alignment. -->
Element
7 <html xmlns = "http://www.w3.org/1999/xhtml"> dimensions
8
9
<head>
<title>Box Dimensions</title>
and text
10 <style type = "text/css"> alignment
11 div { background-color: #aaccff; (Part 1 of 2).
12 margin-bottom: .5em;
13 font-family: arial, helvetica, sans-serif } Sets the width of the element
14 </style> to 20% of the browser’s
15 </head> screen’s size
16 <body>
17 <div style = "width: 20%">Here is some
18 text that goes in a box which is Sets the width of the element
19 set to stretch across twenty percent
to 80% of the browser’s
20 of the width of the screen.</div>
screen’s size and centers it
21
22 <div style = "width: 80%; text-align: center">
23 Here is some CENTERED text that goes in a box
24 which is set to stretch across eighty percent of
25 the width of the screen.</div>
26

 2008 Pearson Education,


Inc. All rights reserved.
27 <div style = "width: 20%; height: 150px; overflow: scroll"> 56
28 This box is only twenty percent of
29 the width and has a fixed height.
Sets the width of the element
30 What do we do if it overflows? Set the
to 20% of the browser’s
Fig. 5.9 |
31 overflow property to scroll!</div>
32 </body> screen’s size, the height to 150 Element
33 </html> px, and allows the element to dimensions
scroll if the text overflows the and text
allotted size
alignment
(Part 2 of 2).

 2008 Pearson Education,


Inc. All rights reserved.
57

5.9 Box Model and Text Flow


• Block-level XHTML elements have a virtual box drawn around them
based on the box model
• When the browser renders using the box model, each element is
surrounded by:
– Padding
• The padding property determines the distance between the content inside an
element and the edge of the element
• Padding be set for each side of the box by using padding-top, padding-
right, padding-left and padding-bottom
– Margin
• Determines the distance between the element’s edge and any outside text
• Margins for individual sides of an element can be specified by using
margin-top, margin-right, margin-left and margin-bottom
– Border

 2008 Pearson Education, Inc. All rights reserved.


58

5.9 Box Model and Text Flow (Cont.)


• The border is controlled using the properties:
– border-width
• May be set to any of the CSS lengths or to the predefined
value of thin, medium or thick
– border-color
• Sets the color used for the border
– border-style
• Options are: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset and outset

 2008 Pearson Education, Inc. All rights reserved.


59

5.9 Box Model and Text Flow (Cont.)


• class attribute
– allows more than one class to be assigned to an XHTML
element by separating each class name from the next with a
space

 2008 Pearson Education, Inc. All rights reserved.


60

Fig. 5.10 | Box model for block-level elements.

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 61
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.11 |
5
6
<!-- Fig. 5.11: borders.html -->
<!-- Borders of block-level elements. -->
Borders of
7 <html xmlns = "http://www.w3.org/1999/xhtml"> block-level
8 <head> elements
9 <title>Borders</title>
10 <style type = "text/css">
(Part 1 of 2).
11 div { text-align: center;
12 width: 50%;
13 position: relative;
Defines several border classes
14 left: 25%;
15 border-width: 4px }
16 .medium { border-width: medium }
17 .thin { border-width: thin }
18 .solid { border-style: solid }
19 .double { border-style: double }
20 .groove { border-style: groove }
21 .inset { border-style: inset }
22 .outset { border-style: outset }
23 .dashed { border-style: dashed }
24 .red { border-color: red }
25 .blue { border-color: blue }
26 </style>
27 </head>

 2008 Pearson Education,


Inc. All rights reserved.
28 <body> 62
29 <div class = "solid">Solid border</div><hr /> Applies several
30 <div class = "double">Double border</div><hr />
classes to the same
31 <div class = "groove">Groove border</div><hr />
element Fig. 5.11 |
32 <div class = "inset">Inset border</div><hr />
33 <div class = "dashed">Dashed border</div><hr />
Borders of
34 <div class = "thin red solid">Thin Red Solid border</div><hr /> block-level
35
36
<div class = "medium blue outset">Medium Blue Outset border</div>
</body>
elements
37 </html> (Part 2 of 2).

 2008 Pearson Education,


Inc. All rights reserved.
63

5.9 Box Model and Text Flow (Cont.)


• Browsers normally place text and elements on
screen in the order in which they appear in the
XHTML file.
• Elements can be removed from the normal flow of
text.
• Floating allows you to move an element to one
side of the screen; other content in the document
will then flow around the floated element

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 64
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.12 |
5
6
<!-- Fig. 5.12: floating.html -->
<!-- Floating elements. -->
Floating
7 <html xmlns = "http://www.w3.org/1999/xhtml"> elements
8 <head>
(Part 1 of 3).
9 <title>Flowing Text Around Floating Elements</title>
10 <style type = "text/css">
11 div.heading { background-color: #bbddff;
12 text-align: center;
13 font-family: arial, helvetica, sans-serif; Sets a spacing of .5 em from
14 padding: .2em } the outside of the border to
15 p { text-align: justify;
all other content
16 font-family: verdana, geneva, sans-serif;
17 margin: .5em }
18 div.floated { background-color: #eeeeee;
Sets a spacing of .2 em from
19 font-size: 1.5em; the inside of the border to
20 font-family: arial, helvetica, sans-serif; the element’s content
21 padding: .2em;
22 margin-left: .5em;
23 margin-bottom: .5em;
Define left and right margins
24 float: right;
25 text-align: right;
Moves element to the right,
26 width: 50% }
27 div.section { border: 1px solid #bbddff }
and lets other content flow
28 </style> around it
29 </head>
Defines the border for this
div class  2008 Pearson Education,
Inc. All rights reserved.
30 <body> 65
31 <div class = "heading"><img src = "deitel.png" alt = "Deitel" />
32 </div>
33 <div class = "section"> Fig. 5.12 |
34 <div class = "floated">Corporate Training and Publishing</div>
35 <p>Deitel &amp; Associates, Inc. is an internationally
Floating
36 recognized corporate training and publishing organization elements
37
38
specializing in programming languages, Internet/World
Wide Web technology and object technology education.
(Part 2 of 3).
39 The company provides courses on Java, C++, Visual Basic, C#,
40 C, Internet and web programming, Object
41 Technology, and more.</p>
42 </div>
43 <div class = "section">
44 <div class = "floated">Leading-Edge Programming Textbooks</div>
45 <p>Through its publishing
46 partnership with Prentice Hall, Deitel &amp; Associates,
47 Inc. publishes leading-edge programming textbooks,
48 professional books, interactive CD-ROM-based multimedia
49 Cyber Classrooms, satellite courses and DVD and web-based
50 video courses.</p>
51 </div>
52 </body>
53 </html>

 2008 Pearson Education,


Inc. All rights reserved.
66

Fig. 5.12 | Floating elements (Part 3 of 3).

 2008 Pearson Education, Inc. All rights reserved.


67

5.10 Media Types


• CSS media types
– allow a programmer to decide what a page should look like
depending on the kind of media being used to display the
page
– Most common media type for a web page is the screen
media type, which is a standard computer screen

 2008 Pearson Education, Inc. All rights reserved.


68

5.10 Media Types (Cont.)


• A block of styles that applies to all media types is
declared by @media all and enclosed in curly
braces
• To create a block of styles that apply to a single
media type such as print, use @media print
and enclose the style rules in curly braces

 2008 Pearson Education, Inc. All rights reserved.


69

5.10 Media Types (Cont.)


• Other media types in CSS 2 include:
– handheld
• Designed for mobile Internet devices
– braille
• For machines that can read or print web pages in braille
– aural
• Allow the programmer to give a speech-synthesizing web
browser more information about the content of the web page
– print
• Affects a web page’s appearance when it is printed

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 70
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.13 |
5
6
<!-- Fig. 5.13: mediatypes.html -->
<!-- CSS media types. -->
CSS media
7 <html xmlns = "http://www.w3.org/1999/xhtml"> types (Part 1
8 <head> Sets properties for all media
of 2).
9 <title>Media Types</title> types
10 <style type = "text/css">
11 @media all
12 {
13 body { background-color: #4488aa }
14 h1 { font-family: verdana, helvetica, sans-serif;
15 color: #aaffcc }
16 p { font-size: 12pt;
17 color: white; Sets properties for a page if
18 font-family: arial, sans-serif } it is being printed
19 } /* end @media all declaration. */
20 @media print
21 {
22 body { background-color: white }
23 h1 { color: #008844}
24 p { font-size: 14pt;
25 color: #4488aa;
26 font-family: "times new roman", times, serif }
27 } /* end @media print declaration. */
28 </style>
29 </head>
30 <body>
 2008 Pearson Education,
31 <h1>CSS Media Types Example</h1>
Inc. All rights reserved.
32 71
33 <p>
34 This example uses CSS media types to vary how the page
35 appears in print and how it appears on any other media. Fig. 5.13 |
36 This text will appear one font on the screen and a
37 different font on paper or in a print preview. To see
CSS media
38 the difference in Internet Explorer, go to the Print types (Part 2
39
40
menu and select Print Preview. In Firefox, select Print
Preview from the File menu.
of 2).
41 </p>
42 </body>
43 </html>

 2008 Pearson Education,


Inc. All rights reserved.
72

Look-and-Feel Observation 5.1

Pages with dark background colors and light


text use a lot of ink and may be difficult to
read when printed, especially on a black-and
white-printer. Use the print media type to
avoid this.

 2008 Pearson Education, Inc. All rights reserved.


73

Look-and-Feel Observation 5.2

In general, sans-serif fonts look better on a


screen, while serif fonts look better on paper.
The print media type allows your web page
to display sans-serif font on a screen and
change to a serif font when it is printed.

 2008 Pearson Education, Inc. All rights reserved.


74

5.11 Building a CSS Drop-Down Menu

• :hover pseudoclass
– used to apply styles to an element when the mouse cursor is
over it
• display property
– allows a programmer to decide if an element is displayed as
a block element, inline element, or is not rendered at all
(none)

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 75
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.14 |
5
6
<!-- Fig. 5.14: dropdown.html -->
<!-- CSS drop-down menu. -->
CSS drop-
7 <html xmlns = "http://www.w3.org/1999/xhtml"> down menu
8 <head> (Part 1 of 2).
9 <title>
10 Drop-Down Menu
11 </title>
12 <style type = "text/css">
13 body { font-family: arial, sans-serif }
14 div.menu { font-weight: bold;
15 color: white;
16 border: 2px solid #225599; Sets anchor elements in a
17 text-align: center; menu div to be displayed
18 width: 10em; as block-level when the
19 background-color: #225599 } menu is moused-over
20 div.menu:hover a { display: block } Prevents the browser from
21 div.menu a { display: none; rendering the links inside
22 border-top: 2px solid #225599; the menu div
23 background-color: white;
24 width: 10em;
25 text-decoration: none; Sets anchor elements in a
26 color: black } menu div to have a light-
27 div.menu a:hover { background-color: #dfeeff } blue background when they
28 </style> are moused-over
29 </head>
30 <body>  2008 Pearson Education,
Inc. All rights reserved.
31 <div class = "menu">Menu 76
32 <a href = "#">Home</a>
33 <a href = "#">News</a>
34 <a href = "#">Articles</a> Fig. 5.14 |
35 <a href = "#">Blog</a>
36 <a href = "#">Contact</a>
CSS drop-
37 </div> down menu
38 </body>
39 </html>
(Part 2 of 2).

 2008 Pearson Education,


Inc. All rights reserved.
77

5.12 User Style Sheets


• Users can define their own user style sheets to
format pages based on their preferences
• Absolute font size measurements override user
style sheets, while relative font sizes will yield to a
user-defined style
• User style sheets are not linked to a document;
rather, they are set in the browser’s options

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 78
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.15 | pt
5 <!-- Fig. 5.15: user_absolute.html --> measurement for
6 <!-- pt measurement for text size. -->
text size.
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>User Styles</title>
10 <style type = "text/css">
11 .note { font-size: 9pt }
A class defined by the
12 </style>
author with absolute
13 </head>
14 <body>
measurements: a font-size
15 <p>Thanks for visiting my website. I hope you enjoy it. of 9 pt
16 </p><p class = "note">Please Note: This site will be
17 moving soon. Please check periodically for updates.</p>
18 </body>
19 </html>

 2008 Pearson Education,


Inc. All rights reserved.
1 /* Fig. 5.16: userstyles.css */ 79
2 /* A user stylesheet */
A different font-size of 20
3 body { font-size: 20pt;
pt is defined by the user for
4 color: yellow; Fig. 5.16 |
5 background-color: #000080 } all body elements
User style
sheet.

 2008 Pearson Education,


Inc. All rights reserved.
80

Fig. 5.17 | User style sheet in Internet Explorer 7.

 2008 Pearson Education, Inc. All rights reserved.


81

The author’s style has


higher precedence than the
user’s, so the font is 9 pt

Fig. 5.18 | User style sheet applied with pt measurement.

 2008 Pearson Education, Inc. All rights reserved.


1 <?xml version = "1.0" encoding = "utf-8"?> 82
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Fig. 5.19 | em
5
6
<!-- Fig. 5.19: user_relative.html -->
<!-- em measurement for text size. -->
measurement
7 <html xmlns = "http://www.w3.org/1999/xhtml"> for text size.
8 <head>
9 <title>User Styles</title>
A relative measurement of .
10 <style type = "text/css">
11 .note { font-size: .75em }
75 em is used by the author
12 </style> for the font size
13 </head>
14 <body>
15 <p>Thanks for visiting my website. I hope you enjoy it.
16 </p><p class = "note">Please Note: This site will be
17 moving soon. Please check periodically for updates.</p>
18 </body>
19 </html>

 2008 Pearson Education,


Inc. All rights reserved.
83
The user style sheet is
considered, so the font-size
is 15 pt (.75 em for 20 pt)

Fig. 5.20 | User style sheet applied with em measurement.

 2008 Pearson Education, Inc. All rights reserved.


84

5.13 CSS 3
• While CSS 2 is the current W3C
Recommendation, CSS 3 is in development, and
some browsers are beginning to implement some
of the new features that will be in the CSS 3
specification
• CSS 3 will introduce new features related to
borders, backgrounds, text effects, layout, and
more

 2008 Pearson Education, Inc. All rights reserved.

You might also like