15.3 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 document.

  2. Inline ” the style is defined for a specific HTML element.

  3. External ” the style is defined in an external file.

15.3.1 The Embedded Style Sheet

A style sheet that is created with the HTML <style></style> tags right in the current document 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 language, you can tell the browser what type of style sheet you are using with the type attribute 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 cascading style sheet.

FORMAT

 
 <style type="style sheet language"> 

Example:

 
 <style type="text/css"> 
Example 15.8
 <html>     <head><title>Cascading Style Sheets</title> 1   <  style type="text/css"  >     <!-- 2       body { background-color: lightblue; } 3       p { background:yellow;             text-indent:5%;             margin-left: 20%;             margin-right: 20%;             border-width:10px;             border-style:groove;             padding: 15px;             font-family: times,arial;             font-size:150%;             font-weight:900 } 4       h1, h2, h3 {             text-align: center;             background:blue;             border-width:5px;             border-style:solid;             border-color:black;             margin-left:20%;margin-right:20%;             font-family:courier, arial;             font-weight:900;             color: white; } 5       h2,h3 { font-size:24; } 6       em { color: green;             font-weight: bold }     --> 7   </style>     </head>     <body> 8   <h1><center>Stylin' Web Page</center></h1> 9   <p>HTML by itself doesn't give you much other than structure in a     page and there's no guarantee that every browser out there will     render the tags in  the same way. So along came style sheets.     Style sheets enhance HTML as a word processor enhances plain text.     <p>But... no guarantees what a browser might do with a style     sheet, any more than what a stylist might do to your hair, but we     can hope for the best. 10  <h2><center>An H2 Element</center></h2>     <h3><center>An H3 Element</center></h3> 11  <p>This is not a <em>designer's dream style</em>, but it     illustrates the power.     </body>     </html> 

EXPLANATION

  1. The HTML <style> tag belongs within the <head></head> tags. The is the start of an embedded CSS.

  2. A rule is defined for the HTML body element. The background color of the document will be light blue.

  3. A rule is defined for the HTML p (paragraph) element. The left and right margins are set at 20%, meaning that they will be moved inward 20% from their respective edges. They will be surrounded by a grooved border, with the text given a 15-pixel size padding. The font face is Times or Arial (whichever works on your browser), point size 150% bigger than its default, weight 900 is the boldest of the bold.

  4. A rule is defined for a group of selectors (heading levels h1, h2 , and h3 ). They will be centered on the page, the text will be white against a blue bordered background, in a Courier or Arial font face.

  5. The rule for the h2 and h3 tags sets the font size to 24 points.

  6. A rule is defined for an em element. Text will be italicized, green, and bold.

  7. This marks the end of the HTML header that encloses the style sheet.

  8. As shown in the output (see Figure 15.9), the heading level is displayed according to the style defined in the style sheet, line 4.

    Figure 15.9. HTML and CSS ”An embedded style sheet.

    graphics/15fig09.jpg

  9. This paragraph is displayed according to the rule set in the style sheet, line 3. Notice how both the left and right margins have moved toward the center.

  10. The heading level is displayed according to the rule set in the style sheet, lines 4 and 5, and the first paragraph is indented.

  11. The <em> tag is embedded within the <p> tag. It inherits from the <p> tag everything but the font color and weight. These paragraph properties were overridden in the style sheet defined on line 6 for the em element.

15.3.2 The Inline Type and the <style> Attribute

Inline style sheets are also embedded within an HTML document, but are assigned as an attribute of the <style> tag in the body of the document and are useful for overriding an already exisiting style for a particular element in a linked style sheet. On the negative side, they have to be redefined for any element that requires that style, element by element. For example, if the h1 element has been defined to be blue and you want to temporarily change it to red, you can define the style as an attribute of the style tag for that element:

 
 <h1 style= "color: red; "> This is red text</h1> 
Example 15.9
 <html><head><title>Inline Style Sheets</title> 1   <style type="text/css"> 2       body { background-color: orange;                color:darkblue;  /*  color of text  */ }     </style>     </head>     <body> 3  <h1 style="color:darkred;   text-align:center;   text-decoration:underline;"  >Inline Stylin'</h1> 4  <p style="color:black;   background:white;   font-family:sans-serif;font-size:large">  This paragraph uses an inline style. As soon as another paragraph     is started, the style will revert back to its default. 5   <p> This paragraph has reverted back to its default style, and so     has the following heading.     <h1>Default heading</h1>     </body>     </html> 

EXPLANATION

  1. A CSS starts here in the head of the document.

  2. The background color is set to orange and the color of the font is set to dark blue.

  3. This h1 uses an inline style, an attibute of the <h1> tag and effective for this heading only. The color will be red, the text centered and underlined .

  4. This is an inline style for the paragraph tag. It is an attribute of the <p> tag and is only good for this paragraph. The text of the paragraph will be black, the background color of the paragraph will be white, and the font family, sans-serif, large. The next time a <p> tag is used, the style will revert to its former style.

  5. This paragraph has reverted to its former style. See Figure 15.10.

    Figure 15.10. Inline styles are temporary.

    graphics/15fig10.jpg

15.3.3 The External Type with a Link

External style steets are the most powerful type if you want the style to affect more than one page; in fact, you can use the same style for hundreds, thousands, or millions of pages. As the name implies, external style sheets are stored in an external file, not the current HTML file. The filename for the external style sheet has a .css extension, just as the HTML file has an .html or .htm extension. To link the external file to the existing HTML file, a link is created as shown here:

 
 <  link rel  =stylesheet  href  ="style_file.css"  type  ="text/css"> 

The following examples demonstrate the use of external style sheets. The first example is the HTML file containing a link to the external file and the second example is the .css file. It contains the style sheet.

Example 15.10
 <html>  <head>  <title>External Style Sheets</title> 1       <link rel=stylesheet type="text/css"  href="extern.css">  <!-- Name of external file is extern.css. See Example 15.11 -->  2   </head> 3   <body>         <h1><u>External Stylin'</u></h1>         <h2>Paragraph Style Below</h2>         <p>The style defined for this paragraph is found in an external         CSS document. The filename ends with <em>.css</em>.         Now we can apply this style to as many pages as we want to.         <h2>An H2 Element</h2>         <h3>An H3 Element</h3>         <p>This is not a <em>designer's dream style</em>, but it         illustrates the power. Don't you think so?<p>     </body>     </html> 

EXPLANATION

  1. The link tag is opened within the <head> tags of your HTML document. The link tag has a rel attribute that is assigned stylesheet . This tells the browser that the link is going to a style sheet type document. The href attribute tells the browser the name of the CSS file containing the style sheet. This is a local file called extern.css . If necessary, use a complete path to the file. The link tag is closed with a > .

  2. The <head> tag ends here.

  3. In the body of the document, each of the HTML tags will be affected by the style defined in the external CSS file. The output for Examples 15.10 and 15.11 is shown in Figure 15.11.

    Figure 15.11. External style sheets.

    graphics/15fig11.jpg

Example 15.11
 (The external extern.css file) 1   body { background-color: pink; } 2   p {         margin-left:20%;         margin-right:20%;         font-family: sans-serif;         font-size: 14 3   }     h1, h2, h3 { text-align: center;                  font-family: sans-serif;                  color: darkblue     } 4   em { color: green;          font-weight: bold     } 

EXPLANATION

  1. This is the external CSS file that will be linked to the file in Example 15.10. Using an external CSS file keeps the main file size smaller and allows the style sheet to be shared by multiple files.

  2. The paragraph <p> style is set to have a margin in 20% from the left and right, the text in size 14, and font family sans-serif.

  3. The heading levels 1, 2, and 3 styles are set to be centered with a dark blue font, from the sans-serif family.

  4. The <em> style will be a bold, green font.

15.3.4 Creating a Style Class

Rather than globally defining a style for an element, you can customize the style by defining a class. The class style can be applied to individual tags when needed. The class name, called the class selector, is preceded by a period and followed by the declaration enclosed in curly braces.

FORMAT

 
 .classname { style rules; } 

Example:

 
 .header { font-family: verdana, helvetica ; } 

Once you have defined a class, it can be used on any of the HTML elements in the body of the document as long as that element understands the style you have applied to it. To apply the class, you use the class attribute. The class attribute is assigned the name of the class; for example, for the <p> tag, you would stipulate <p class=name> where name is the name of the class.

Example 15.12
 <html><title>CSS Class Name</title> 1   <head> 2   <style> 3       p { margin-right: 30%;font-family: arial;             font-size: 16pt;             color:forestgreen; } 4  .bigfont { font-size: x-large; color:darkblue;   font-style:bold;}  5  .teenyfont {font-size:small; font-style: italic;color:black;}  </style>     </head>     <body> 6   <p>The text in this paragraph is green and the point size is 16.     The font family is <em>arial</em>. 7   <  p class="bigfont"  > This paragraph has a bigger font and is dark     blue in color. 8   <p>The font style is specified as a class called     <em>.bigfont</em>. 9   <  h1 class="bigfont"  >Testing the Class on an H1 Element</h1> 10  <  p class="teenyfont"  >Is this a small font?"     <p>Let's start a new paragraph. This is green with a font size of     16. What style is in effect here?     </body></html> 

EXPLANATION

  1. The style is defined in the <head> of the document.

  2. The CSS starts here.

  3. A rule is defined for the paragraph ( p selector). All paragraphs will have a right-hand margin, 30% in from both left and right. The Arial font will be 12 point and forest green.

  4. A class selector called .bigfont is defined. Class names start with a period. When used on an HTML element, the font will be extra large, dark blue, and bold.

  5. The class selector called .teenyfont is defined. All HTML elements that use this class will have a small, italic, black font.

  6. The paragraph is styled according to the rule on line 3.

  7. This paragraph is assigned the bigfont class. The text will be in the style defined for this class on line 4.

  8. This paragraph reverts to the style rule on line 3.

  9. The <h1> tag is using the bigfont class defined on line 4.

  10. The <p> tag is using the teenyfont class defined on line 5. See Figure 15.12.

    Figure 15.12. Using a CSS class.

    graphics/15fig12.jpg

15.3.5 The ID Selector

The ID selector is another way to create a style that is independent of a specific HTML tag. By using the ID selector, you can choose the style for the element by assigning it a unique ID. The name of the ID selector is always preceded by a hash mark (also called a pound sign, #). The declaration block, consisting of properties and values, follows the ID selector and is enclosed in curly braces.

FORMAT

 
 #IDselector { declaration ; } 

Example:

 
 #menu1 { font-family: arial;          font-size: big;          color: blue; } 

To apply an ID to an HTML tag, use the id attribute. The attribute will be assigned the same name given to the ID selector; so, to apply an ID selector to a <p> tag, you would stipulate <p id=name> where name is the name of the ID selector. (See Example 15.13.)

When JavaScript enters the picture, the id attribute is used to identify each element as a unique object so that it can be manipulated in a JavaScript program. The ID should be unique for an element and not used more than once on a page. If you need to use the style more than once for multiple elements, it would be better to use the class selector instead. The ID selector can be used with a class selector of the same name, as #big, .big { } .

Example 15.13
 <html><head><title>ID's</title> 1   <style type="text/css"> 2  p  { font-family:arial,sans-serif,helvetica;            font-style:bold;            font-size:18         } 3  #block  { /*  The ID selector  */  color: red;   text-decoration:underline;   }  </style>     </head>     <body > 4  <p>  When making my point, I will get quite red and underline what     I say!!</p> 5  <p id="block">  This text is red and underlined!!</P> 6   <p>and now I am somewhat appeased.     </body>     </html> 

EXPLANATION

  1. This is the start of a style sheet; it is placed between the <head></head> tags in the document.

  2. The style of the paragraph element is defined. This style will take effect anywhere in the document where the <p> tag is used. Note that point sizes may be different on different browsers. Pixels will give you more accuracy.

  3. The ID selector is called block and must be preceded by a hash mark. It can be used by any HTML element to produce red, underlined text. ID selectors should only be used once on a page to serve as a unique ID for the element.

  4. A paragraph containing text will be displayed according to the style defined in the style sheet on line 2.

  5. By adding the ID called block , the style for this paragraph will be changed to red, underlined text.

  6. The <p> tag will revert to the style defined on line 2. See Figure 15.13.

    Figure 15.13. Using the ID selector in style sheets.

    graphics/15fig13.jpg

15.3.6 The <span> Tag

The <span></span> tags are used if you want to change only a selected portion of text. By doing so, you can create an inline style that will be embedded within another element and apply only to that portion of the content. In this way you can add or override a style to an element for which a style has already been defined. Carriage returns and breaks in the text will not occur with these tags.

In the following example, the paragraph style has been defined in a CSS. But later in the body of the document, the <span> tag is used to override the font size and to add margins to the text.

Example 15.14
 <html><head><title>Margins</title></head>  <style type="text/css">  1  body { margin:10%;  border-width: 10px; border-style:solid;                border-color: white; padding:5px;} 2  p { color=black;  font-size: 22pt;             margin-left:10;             margin-right:10;             padding:5px;             border-style:groove;             border-color:white;             background-color:cyan;}  </style>  <body bgcolor=blue>     <p> 3  <span style="margin-left:10%;font-size:26pt;">  The Three Little     Bears  </span>  4   </p>     Once upon a time there were three little bears,     Mama bear, Papa bear, and Baby bear.     They lived very happily in the deep woods.     <p>And then there was Goldilocks!</p>     </body>     </html> 

EXPLANATION

  1. The style rule for the body element is defined. It will have a margin distance increased by 10% on all sides and a solid, white border with a padding of 5 pixels between the margin and the border. Margin borders will differ in appearance depending on your browser.

  2. The style rule for the paragraph defines black text of a 22 point font, with both right and left margins of 10 pixels, contained within a grooved, white border, against a cyan background.

  3. The <span> tag defines a left-hand margin increased by 10% relative to this paragraph, and changes the font size to 26 points. The only part of the document to be affected is the paragraph in which the <span></span> tags are enclosed. The text The Three Little Bears will be displayed according to this style.

  4. The <span> tags have no effect on this paragraph. The style reverts to the rule in the style sheet. See Figure 15.14.

    Figure 15.14. The <span> tag only affects a specific portion of the text.

    graphics/15fig14.jpg

15.3.7 Contextual Selectors

Contextual selectors have an inheritance basis. For example, if a <b> tag is nested withing a <p> tag, then the <b> tag takes on the characteristics assigned to its parent. If the <p> is green, than the bold text will also be green. If a bullet list <ul> has <li> tags nested within it, the bullets take on the characteristics of its parent. If the ul element is red, then all the bullets and the accompanying text will be red.

When you create a contextual selector, the last element in the selector list is the one that is affected by the style when it is used in context of the elements preceding it. For example, if you have a selector list: table td em { color: blue ;} , then the em element, the last in the list, will be affected by the style only when it is inside a table cell , td , at which point the table cell will be contain blue italic text.

Example 15.15
 <head><title>Contextual Selector</title>     <style type="text/css"> 1  table td  { color: blue; /*  Table cells will take this style  */                    font-size: 18pt;                    font-family: verdana; }     </style>     </head>     <body bgcolor=silver><center>        <h1><em>The Three Bears</em></h1>        <table cellspacing="20" cellpadding="20%" border="3">           <tr> 2  <td>Mama Bear</td>  <tr> 3  <td>Papa Bear</td>  <tr> 4  <td>Baby Bear</td>  </tr>        </table>     </center>     </body>     </html> 

EXPLANATION

1 A rule is defined for a table cell. The table's data will be blue, the font size 18 points, and the font family, Verdana. Whenever you create a table, each of the table cells, defined by the <td> tag, will have this style.

2 “4 The table data in these cells will take on the style described in line 1.

Figure 15.15. A table with stylized cells.

graphics/15fig15.jpg

Example 15.16
 <html>     <head><title>Contextual Selector</title>     <style type="text/css"> 1  table td em  { color: blue; /*  Table cells take this style  */                       font-size: 18pt;                       font-family: verdana; }     </style>     </head>     <body bgcolor=silver><center> 2  <h1><em>  The Three Bears</em></h1>         <table cellspacing="20" cellpadding="20%" border="3">            <tr> 3  <td><em>  Mama Bear</em></td>            <tr> 4  <td>  Papa Bear</td>            <tr> 5  <td>  Baby Bear</td>            </tr>         </table>     </center>     </body>     </html> 

EXPLANATION

  1. When a table is defined, the data cells will take on this style only if the <em> tag is used within the cell. See line 3.

  2. The <em> tag used within this <h1> tag is not affected by the contextual selector because it is not within a table cell; that is, it is out of context.

  3. The <em> tag is embedded within a <td> tag. The table's data will follow the style defined on line 1; it is in context.

  4. This table cell is not using the <em> tag, so will not be affected by the style rule on line 1. It can only be affected if in context.

  5. This table cell will not be affected by the style rule either because it doesn't use the <em> tag. See Figure 15.16.

    Figure 15.16. A table cell is defined by the contextual selector.

    graphics/15fig16.jpg

15.3.8 Positioning Elements and Layers

One of the most important features of CSS is the ability to position objects on a page, to size them, and to make them either visible or invisible. This feature makes it possible to move objects to different sections of a page, move text and images, create animation, tool tips, scrolling text, and more. Normally when you place tags in an HTML document, the flow is from top to bottom. Now, with style sheets, you can set the position of an element, even layering one on top of the other.

A note about Netscape layers. Netscape 4 introduced layer ( <layer><ilayer> ) tags, a prototype of CSS positioning, to control the position and visibility of elements on a page, and then with Netscape 6 abandoned the whole thing. This book does not address the Netscape 4 layer technology since it is fast becoming a thing of the past. However, the term "layer" is still in use, and is used to refer to objects using the id attribute.

Table 15.9. Positioning styles.

Property

What It Specifies

bottom, right

The placement of the bottom, right edges of an element

clip

A specified region of the element that will be seen

display

Whether an element is displayed

overflow

What to do if there is an overflow; i.e., there isn't enough space for the element

position

How to position the element on the page

top, left

The placement of the top, left edges of an element

visibility

Whether an element can be seen

width, height

The size in width and height of an element's content, not additional padding, margins, borders, etc.

z-index

The third dimension in a stack of objects

Absolute Positioning

Absolute positioning places an element in a specific location on the page and can be used to achieve full animation; for instance, moving an image across a page. It is used to specify the absolute coordinates ( x,y ) of the element in terms of the browser window itself. The top and left properties are used to determine the coordinates. (See Figure 15.17.) If not specified, the browser will assume the top left corner of the browser window, where x is 0 and y is 0. The top left corner of the window is position 0,0 and the bottom right corner depends on the resolution of the screen. If the screen resolution is set to 800 pixels in width and 600 pixels in height, the bottom right corner is positioned at coordinates 800, 600.

Figure 15.17. Absolute positioning.

graphics/15fig17.gif

If an absolutely positioned element is nested within another absolutely positioned element, it will be positioned relative to that element.

Example 15.17
 <html>     <head>     <title>layers</title>     <style type="text/css">     <!-- 2  #first  {              background-color: red;              border-style: solid;              font-weight:bold;              top: 20; 2  position: absolute;  left: 20;              height: 100;              width: 100;        } 3  #second  {               background-color: blue;               border-style: solid;               font-weight:bold;               top: 30 ;  position: absolute;  left: 60;               height: 100;               width: 100;        } 4  #third  {              background-color: orange;              border-style: solid;              font-weight:bold;              top: 40 ;  position: absolute;  left: 100;              height: 100;              width: 100;        }     </style> 5   <body> 6  <p id="first">  First position         </p> 7  <p id="second">  Second position         </p> 8  <p id="third">  Third position         </p>     </body>     </html> 

EXPLANATION

  1. An ID selector called #first sets the pixel positions for a red block that will be absolutely positioned 20 pixels from the top of the window, 20 pixels from the left-hand side, and have a size of 100 x 100 pixels (width x height).

  2. The position attribute is specified as absolute. It is independent of all other elements in the body of this document.

  3. An ID selector called #second sets the pixel positions for a blue block that will be absolutely positioned 30 pixels from the top of the window, 60 pixels from the left-hand side, and have a size of 100 x 100 pixels (width x height). The blue box will appear to be layered over the red one.

  4. An ID selector called #third sets the pixel positions for an orange block that will be absolutely positioned 40 pixels from the top of the window, 100 pixels from the left-hand side, and have a size of 100 x 100 pixels (width x height). The orange box will appear to be layered over the blue one.

  5. The <body> serves as the container for the four objects. The red, blue, and orange boxes will appear in the window at the absolute positions assigned to them in relationship to their container, the body of the document.

  6. The paragraph element is positioned and styled according to the rule for the first ID selector.

  7. The paragraph element is positioned and styled according to the rule for the second ID selector.

  8. The paragraph element is positioned and styled according to the rule for the third ID selector. See Figure 15.18.

    Figure 15.18. Three layers based on absolute positioning (IE5, NN7).

    graphics/15fig18.jpg

Top, Left, Bottom, Right ”Absolute Positions

As shown in the previous example, once the position has been set, the left, top, right , and bottom attributes can be used to specify exactly where on the page the element should be located. Although we used left and top to define the position of the element within the body of the document, right and left bottom can also position the element on the page. In the following example, four elements are placed in four corners of the document.

Example 15.18
 <html>     <head>     <title>layers</title>     <style type="text/css">     <!-- 1      #first{              background-color: red;              border-style: solid;              font-weight:bold;  position: absolute;   top: 100;   right: 200;   height: 100;   width: 100;  } 2      #second{               background-color: blue;               border-style: solid;               font-weight:bold;  position: absolute;   bottom:200;   left:200;   height: 100;   width: 100;  } 3      #third{              background-color: orange;              border-style: solid;              font-weight:bold;  position: absolute;   top: 100 ;   left: 200;   height: 100;   width: 100;  } 4      #fourth{               background color: yellow;               border-style: solid;               font-weight:bold;  position: absolute;   bottom: 200 ;   right: 200;   height: 100;   width: 100;  }     </style> 5   <body> 6  <p id="first">  First position         </p> 7  <p id="second">  Second position         </p> 8  <p id="third">  Third position         </p> 9  <p id="fourth">  Fourth position         </p>     </body>     </html> 

EXPLANATION

  1. An ID selector called #first sets the pixel positions for a red block that will be absolutely positioned 100 pixels from the top of the window, 200 pixels from the right-hand side, and have a size of 100 x 100 pixels (width x height).

  2. An ID selector called #second sets the pixel positions for a blue block that will be absolutely positioned 200 pixels from the bottom of the window, 200 pixels from the left-hand side, and have a size of 100 x 100 pixels (width x height).

  3. An ID selector called #third sets the pixel positions for an orange block that will be absolutely positioned 100 pixels from the top of the window, 200 pixels from the left-hand side, and have a size of 100 x 100 pixels (width x height).

  4. An ID selector called #fourth sets the pixel positions for a yellow block that will be absolutely positioned 200 pixels from the bottom of the window, 200 pixels from the right-hand side, and have a size of 100 x 100 pixels (width x height).

  5. The body is called the container for the elements within it. The red, blue, orange, and yellow boxes will appear in the window at the absolute positions assigned to them in relationship to their container, the body of the document.

  6. The paragraph element is positioned and styled according to the rule for the first ID selector, the top, right-hand corner.

  7. The paragraph element is positioned and styled according to the rule for the second ID selector, the left-hand, bottom corner.

  8. The paragraph element is positioned and styled according to the rule for the third ID selector, the top, left-hand corner.

  9. The paragraph element is positioned and styled according to the rule for the fourth ID selector, the bottom right-hand corner. See Figure 15.19.

    Figure 15.19. Absolute positions with four blocks.

    graphics/15fig19.jpg

The <div> Tag

One of the most important containers is the <div> tag. It serves as a container where you can put other elements, give them color, borders, margins, etc. The <div> tag is also used for absolute positioning of a block of text that separates itself from other content in the document. It allows you to create a paragraph style independent of the <p> tag. Within the block, the <span> tags can be used to introduce other styles.

In the following example, the <div> tag is used to create a block. It is absolutely positioned in the window at position 0,0, which is the top, left-hand corner.

Example 15.19
 <html><head><title>Positioning</title>     </head> 1   <style> 2  .divStyle {background-color:blue;  3  position: absolute;   width: 250px; height: 150px;   }  </style>     </head>     <body>         <font size="+2"> 4  <div class="divStyle">  5           <p>                This is a paragraph.             </p>  </div>  </body>     </html> 

EXPLANATION

  1. The style sheet starts here with the <style> tag.

  2. A class called divStyle is defined.

  3. This style will produce a blue box, 250 pixels wide and 150 pixels high. It will be positioned at the top, left-hand corner of the window (0,0) because the top and left properties are undefined.

  4. The div element will use the style defined by the divStyle class.

  5. The paragraph element is embedded within the <div> tags. The div box is like a mini window. It will placed at the top, left-hand corner of the window, because its position has not been defined. See Figure 15.20.

    Figure 15.20. The div block is absolutely positioned in the window.

    graphics/15fig20.jpg

Relative Positioning

Relative positioning places the element in a position relative to the element where it is defined in the document. In the following example the .ParaStyle class is positioned relative to where it should be placed within its container, a div block.

Example 15.20
 <html><head><title>Positioning</title>     </head> 1   <style> 2  .divStyle  { background-color:lightblue; 3                   position: absolute; 4                   width: 250px; height: 150px;                     border-style: solid;                     border-color: darkblue;         } 5  .paraStyle  { color:darkblue; 6                   position: relative;         }     </style>     </head>     <body>         <font size="+2"> 7  <div style="left:50px; top:50px" class="divStyle">  8  <p style="left:15%; top:30%" class="paraStyle">  This is a paragraph.             </p>  </div>  </body>     </html> 

EXPLANATION

  1. The style sheet starts here.

  2. A style class called divStyle is defined for the div element.

  3. The div box will be absolutely positioned in terms of the browser window.

  4. The dimensions of width and height of the div box are set. The border around the div container is a solid, dark blue.

  5. A style class called paraStyle is defined for the paragraph ( p ) element. The color of the text will be dark blue.

  6. The position will be relative to the div box where the paragraph is contained. If top and left properties are not defined, the paragraph will be in the top, left-hand corner of the box, position 0,0 relative to the div container where it is placed.

  7. An inline style is set for the div element, placing the box 50 pixels from both the top and the left-hand side of the browser window.

  8. An inline style is set for the p element, placing the paragraph at a percentage of 15% from the left and 30% from the top based on the dimensions of the div box. See Figure 15.21.

    Figure 15.21. The paragraph is postioned relative to the div style.

    graphics/15fig21.jpg

The z-index and Three Dimensions

The last type of position sets the precedence of a stack of overlapping elements. The absolute position properties include three coordinates: x, y, and z , where x is the left side of an object, y is the right side, and z is the value of the stacking position. If you have three containers layered on top of each other, the z position of the bottom layer is 0; the next layer, 1; and the top layer in the stack is layer 2. In the next section, JavaScript will allow us to move these objects around, rearranging the stacking order dynamically, by manipulating the z -position.

Example 15.21
 <html><head><title>layers</title></head>     <body bgcolor=lightgreen> 1   <span style="position: absolute;  z-index:0;  background-color: red; width: 200;height:250;         top: 50px; left:160px;"></span> 2   <span style="position: absolute;  z-index:1  ;         background-color:yellow; width: 90;height:300;         top: 20px; left:210px;"></span> 3   <span style="position: absolute;  z-index:2  ;         background-color: blue; width: 250;height:100;         top: 125px; left:134px;"></span> 4   <span style="position: absolute;  z-index:3  ;         background-color: white; width: 50;height:50;         top: 140px; left:230px;"></span>     </body></html> 

EXPLANATION

  1. A span style is used to create a red rectangle, size 200 pixels x 250 pixels, in the top left-hand corner of the screen. A z-index of 0 means that this rectangle will be the bottom layer in a stack.

  2. A span style is used to create a yellow rectangle, size 90 pixels x 300 pixels, positioned above the red rectangle, z-index of 1, or on top of it in the stacking order.

  3. A span style is used to create a blue rectangle, size 250 pixels x 100 pixels, positioned above the yellow rectangle, z-index of 2, or on top of it in the stacking order.

  4. A span style is used to create a white square, size 50 pixels x 50 pixels, positioned above the blue rectangle, z-index of 3, or on top of it in the stacking order.

Figure 15.22. Three dimensions and the z-index .

graphics/15fig22.jpg



JavaScript by Example
JavaScript by Example (2nd Edition)
ISBN: 0137054890
EAN: 2147483647
Year: 2003
Pages: 150
Authors: Ellie Quigley

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net