You can change the margin, create colorful borders, or increase or decrease the padding, to give the page more style.. See Figure 14.9 for a graphic representation, and Table 14.10 for a
Trang 1Containers. When you look at your document, it is composed of a number of
con-tainers The <body> tag is a container and it may contain a heading, a paragraph, a table,
or other elements Each of these elements also can be thought of as a container The
<div> tag is another special type of container used to define logical divisions with the
content of a page You can use the <div> tag to center a block of content or position a
content block in a specific place on the page
Margins, Padding, and Borders. Each container has an outer margin, and the
margin can have some padding (space between it and the next container) The padding
is like the CELLPADDING attribute of a table cell On the inside of the padding is a
bor-der that separates the container from its contents The borbor-der is normally invisible You
can change the margin, create colorful borders, or increase or decrease the padding, to
give the page more style See Figure 14.9 for a graphic representation, and Table 14.10
for a list of margin and border properties Different browsers might handle the borders
differently Margins and borders will behave better if enclosed within <div> tags.
Figure 14.9 How an element is contained.
Table 14.10 Margin and Border Properties
Elements Affected
border-bottom <border-bottom-width> or <border-style> or <color> All
border-bottom-width thin, medium, thick, 2em All
border-left <border-left-width> or <border-style> or <color> All
Continues
content
padding margin
border
Trang 2548 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript
border-left-width thin, medium, thick, 3em All
border-right <border-right-width> or <border-style> or <color> All
border-right-width thin, medium, thick, 1cm All
border-style [none], dotted, dashed, solid, double, groove,
ridge [ inset,outset ]{1,4}
All
border-top <border-top-width> or <border-style> or <color> All
border-top-width thin, medium, thick, 3em All
border-width thin, medium, thick, 5cm All
margin 5em, 3em, 2em, 1em (top, right, bottom, left) All
padding 2em, 4em, 6em (right, bottom, left) All
E X A M P L E 1 4 8
<html>
<head><title>Margins and Borders</title>
<style type="text/css">
border-style:solid;
border-color: red blue green yellow; padding:15px;
}
Table 14.10 Margin and Border Properties (continued)
Elements Affected
Trang 3h1{ /* grouping properties */
font-weight: bold;
font-size: 30pt;
font-family: verdana;
} h2 { /* grouping a property's values */
font: bold 24pt arial }
</style>
</head>
<body bgcolor=silver>
<h1>Crossing the Border!</h1>
<h2>Welcome!</h2>
<h3>Nice country.</h3>
</body>
</html>
E X P L A N A T I O N
1 The margins and borders are defined for the body of this document
2 The margin bottom is 1 centimeter up from the bottom of the document and 2
cen-timeters in from the left There will be more whitespace around the headings,
para-graphs, and other elements within the body because of the increased margin sizes
3 A thick, multicolored border is placed on the inside of the margin
4 The border style for h2 elements is purple dots See Figure 14.10.
Figure 14.10 Playing with margins and borders This is how the colorful border
appears in Opera (The border looks different in Internet Explorer 6: It surrounds the
entire window.)
E X A M P L E 1 4 8 (C O N T I N U E D)
Trang 4550 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript
14.5 Types of Style Sheets
There are several ways to define style sheets within a document:
1 Embedded—The style is defined within the <style> tags for the HTML
docu-ment
2 Inline—The style is defined for a specific HTML element.
3 External—The style is defined in an external file
14.5.1 The Embedded Style Sheet and the <style> Tag
A style sheet that is created with the HTML <style></style> tags right in the current
doc-ument is called an embedded style sheet
The <style> Tag. The <style></style> tags were introduced into HTML to allow the
style sheets to be inserted right into an HTML document They are used to create a set
of rules to define the style of an HTML element(s) The <style></style> tags are placed
between the <head></head> tags in the document, as shown here:
<html><title>CSS Example</title>
<head>
<style>
h1 { color: blue ; }
</style>
</head>
The type Attribute. Because it is possible to have more than one style sheet
lan-guage, you can tell the browser what type of style sheet you are using with the type
attri-bute of the HTML <style> tag When the browser loads the page, it will ignore the style
sheet if it doesn’t recognize the language; otherwise it will read the style sheet
The following example specifies that the type is text/css; that is, text and CSS.
F O RM A T
<style type="style sheet language">
Example:
<style type="text/css">