ptg 14.4 Common Style Sheet Properties 547 14.4.6 Working with Margins and Borders Containers. 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 border 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 Property Value/Example Elements Affected border-bottom <border-bottom-width> or <border-style> or <color> All border-bottom-width thin, medium, thick, 2em All border-color red, green, #0C0 All border-left <border-left-width> or <border-style> or <color> All Continues content padding margin border From the Library of WoweBook.Com ptg 548 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 margin-bottom 100px, 50% All margin-left .5in, 40% All margin-right 20em, 45% All margin-top 1cm, 20% All padding 2em, 4em, 6em (right, bottom, left) All padding-bottom 2em, 20% All padding-left .25in, 20% All padding-right .5cm, 35% All padding-top 20px, 10% All EXAMPLE 14.8 <html> <head><title>Margins and Borders</title> <style type="text/css"> 1 body { margin-top: 1cm; margin-left: 2cm ; 2 margin-bottom: 1cm; margin-right: 2cm; 3 border-width: thick; border-style:solid; border-color: red blue green yellow; padding:15px; } Table 14.10 Margin and Border Properties (continued) Property Value/Example Elements Affected From the Library of WoweBook.Com ptg 14.4 Common Style Sheet Properties 549 h1{ /* grouping properties */ font-weight: bold; font-size: 30pt; font-family: verdana; } h2 { /* grouping a property's values */ 4 border-style:dotted; border-color:purple; font: bold 24pt arial } </style> </head> <body bgcolor=silver> <h1>Crossing the Border!</h1> <h2>Welcome!</h2> <h3>Nice country.</h3> </body> </html> EXPLANATION 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.) EXAMPLE 14.8 (CONTINUED) From the Library of WoweBook.Com ptg 550 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. FORMAT <style type="style sheet language"> Example: <style type="text/css"> From the Library of WoweBook.Com . Library of WoweBook.Com ptg 548 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript border-left-width thin, medium, thick, 3em All border-right <border-right-width>. Library of WoweBook.Com ptg 550 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.