JavaScript Validator
JavaScript Editor
|
|
Before we dive into the DHTML possible with different browsers, we will take a brief look at how we can add styling to HTML documents. For example, how do we specify that a certain paragraph, or a set of paragraphs, or all paragraphs have text that is colored red? There are various ways to do this, including using the style attribute and the <style> tag to include style sheet rules. We will look at how to do this shortly, but first, what are style sheets and what problems do they solve?
Style sheets allow us to apply a set of "styling" rules to various sets of HTML tags. For example, we might want all paragraph tags, <P>, to have the font Verdana, a font size of 12 points, a dark blue color, and be centered in the page. In older browsers, we'd tackle this using various HTML formatting tags, such as <center>, <font>, <strong>, <U>, and so on, to determine page alignment, font parameters, and whether a font was bold or underlined. However, these formatting tags have various problems.
The first problem with using HTML formatting tags is that we need to wrap every element that we want to have a particular style in its own HTML formatting tags. This makes for extra work for us. Also, should we decide we don't like dark blue Verdana any more, and want a bright pink color and Palatino Linotype for our font face, we need to change every font tag in the page.
The second problem with HTML formatting tags is that they provide only limited control over style. For example, we can't specify a 12-point font with the <font> tag and its size attribute, because that allows us to specify only that a font should either be bigger or smaller than the normal font size. A value of 1 will be smaller than the normal font size, 3 will be the same, 4 bigger than the normal font size, going all the way up to 7. This is only setting relative sizes; a user might have changed browser preferences so that the normal font size is very small. In such a case, when we specify that we want a font size smaller than normal, the user ends up with something barely visible.
Related to this lack of fine control over the page is the difficulty of specifying exactly where an HTML element appears on the page. Normally the display of HTML tags is based on where their element appears in the source. So, the following will display "Hello" first, then on the next line "Goodbye" will appear.
<P>Hello</P> <P>Goodbye</P>
We can't specify exactly where an element appears, but instead must rely on HTML to decide. We can use various tags to format positioning, for example putting things in lists or using tables, but we can't specify an exact position.
Style sheets give us, first, the ability to specify a certain type of style for the whole page in just one place, and, second, more control over how our page looks when loaded by the user.
We can add style to an HTML page by creating style sheets within the <style> tag or simply specifying style attributes for a particular element. There are a number of ways to define the style, but we'll look at just three of them:
Defining a style for certain HTML elements, for example a style for all paragraph elements.
Creating a style class. We then specify in the class attribute of a tag the name of the style class to be applied.
Specifying style for just one element.
The first two ways of adding style mentioned in the previous list, that is, defining a style for a type of tag or defining a style class, can be achieved by creating a <style> tag, which we add inside the <head> of a page.
To define the style for a particular element type, say a <P> tag, we use the following format:
<style> ElementName { Style Property Name : Style Property Value; Another Style Property : Another Value; } </style>
The ElementName tag is the tag we want the style to apply to, but without the brackets (< and >). For example, to define a style for all table cell tags, <TD>, the ElementName would be TD and for the <P> tag, the ElementName would be P.
Inside the curly braces we define the style attributes we want applied to the specified elements. We state the name of the attribute. Rather than an equals sign we use a colon, and then the value we want assigned to that attribute. If we want to define more than one style attribute, we need to separate them with semicolons.
For example, let's say we want all <P> tags to be in Verdana font, colored dark blue and 12 points in size. We would need to specify the font-family, font-size, and color style attributes.
<html> <head> <style> P { font-family: verdana; font-size : 12pt; color : darkblue; } </style> </head> <body> <P>Some dark blue verdana 12 point text</P> <P>Also dark blue verdana 12 point text</P> </body> </html>
The first attribute we specified is font-family with value verdana. This is followed by a semicolon to mark the end of that style attribute. Next we define the font-size attribute and specify a value of 12pt. Finally we specify the color attribute and value darkblue.
Both the paragraphs specified in the page will be in the same font, font size, and color, as specified in the <style> tag.
If we wanted to define similar properties for the <TD> tag, we'd just add it to the definition inside the <style> tag.
<style> P { font-family : verdana; font-size : 12pt; color : darkblue; } TD { font-family : verdana; font-size : 10pt; color : red; } </style>
This time I've set the font-family attribute to the same as the paragraph, but made the font-size 10pt and the color red.
Note that even using CSS (Cascading Style Sheets, defined a little later) doesn't guarantee the values set will be adhered to by the browser. For example, if we specify the Verdana font and the user's computer doesn't have it installed, then clearly there is no way the browser can use it. What the browser will do is try to match as closely as possible what has been specified in the style properties.
This is fine when we want to define the basic style for a certain type of tag, but what if we want some paragraphs in a larger font, say as a heading, while others remain in the 12-point font? For this we use the second technique mentioned in the previous list: We define a style class. We can use the style defined in a style class in any elements we choose.
Just as we saw that the styles for certain elements were specified using the style attribute for each tag, we define a style as an attribute for a tag and then create the CSS class inside the <style> tag. The only difference is that instead of the tag name, we create our own class name. A class name is distinguished by putting a dot in front of it. For example, to define a heading class called heading1 we'd write the following code:
<style> P { font-family : verdana; font-size : 12pt; color : darkblue; } .heading1 { font-size : 24pt; color : orange; } </style>
The heading1 class's style attributes specify that the font-size should be 24pt and the color should be orange.
Whenever we want to use the style specified in this class, we need to specify this within the HTML for the element. To do this we use the class attribute that most HTML elements support. Let's modify our previous example, so that the first of the two paragraphs has the heading1 style applied.
<html> <head> <style> P { font-family: verdana; font-size : 12pt; color : darkblue; } .heading1 { font-size : 24pt; color : orange; } </style> </head> <body> <P class="heading1">A Heading in dark blue verdana 24 point</P> <P>Some dark blue verdana 12 point text</P> </body> </html>
Now the first paragraph has the heading1 class of style applied to it, so it's 24pt in size and colored orange.
However, the style defined for the <P> tags is always applied to all tags of the type <P>. So the first <P> tag has both the P styling and the heading1 style class applied to it. If the same style attributes are defined by both, the P style definition and the style class conflict. When this happens, the style class takes precedence. Therefore the first paragraph has the Verdana font applied from the <P> definition, but the size and color style attributes of the class override those defined for all <P> tags.
The third way of defining styles is the direct route: For each tag we use its style attribute. For example, if we wanted just the second paragraph tag to be in green italics we could change the HTML tag definition to this:
<P style="font-style : italic; color: green"> Some green verdana 12 point text </P>
We define the style attributes inside the style attribute of the tag, just as we did previously when it was inside the <style> tag. First we set the font-style attribute to italic, then, separated by a semicolon, we set the color to green. As before, the setting of the color attribute here overrides the setting in the style sheet definition for all <P> tags. However, the paragraph will still take the font-family and font-size attributes set in the <style> tag.
Finally, it's worth noting that style sheets, or to give them their full name, Cascading Style Sheets (CSS), are called cascading because the style attributes defined for one tag may cascade down to tags inside that tag. That is, some style properties of a parent tag cascade down to child tags inside.
For example, in the following code we don't define any style attributes for the two paragraph tags, only for the <div> tag. The <div> tag is a container tag that does not display anything, and we'll look at it in more detail later. The <P> tag outside the <div> tag has no style applied to it, yet the <P> inside the <div> has inherited the style attributes set for the <div> tag.
<html> <head> <style> div { font-family: verdana; font-size : 12pt; color : darkblue; } </style> </head> <body> <P>This text has no style</P> <div> <P>This inherits its style from the div tag it's inside</P> </div> </body> </html>
Note that not all style properties will be inherited by enclosed tags.
HTML content normally flows from the top to the bottom of a page, the position of the output being based on where the tag is defined in the page. So it will display the two paragraphs.
<P>Para 1</P> <P>Para 2</P>
They appear one after the other.
Para 1 Para 2
However, using style sheets we can specify positioning for content in two ways, rather than let the browser decide where it wants to put things. With absolute positioning we can set the position of content in relation to the browser window itself. With relative positioning we can set the position of content relative to any content it is inside. For example, in the following HTML relative positioning of the <P> tag would be relative to the <div> tag it's inside. We'll see more about this shortly.
<div><P>My Para</P><div>
We can specify whether an element is positioned relatively or absolutely by using the position style attribute, which takes the values relative and absolute.
The keys to positioning an element are the style attributes left and top. We can use a number of different units for these values, but here I'll stick with those most commonly used: pixels and percentages. I'll start with pixels.
When we set our computer screen's display resolution, we can choose values like 800 * 600 or 1024 * 768 and so on. These values are actually pixels, so 800 * 600 means that our screen will be treated as 800 pixels wide by 600 pixels high. These values are independent of our actual physical monitor size. These screen resolutions determine the maximum sizes of the browser window. If the user has an 800-by-600 screen and we set a <div> tag to appear at a position 1000 down, it will be off-screen. We need to also keep in mind that the user can resize the browser window and that screen resolution is a theoretical maximum. In reality the browser toolbars and frame take up some space.
As far as absolute positioning is concerned, the top-left corner of the browser window is 0,0 and the bottom-right corner will be at most whatever the screen resolution determines. So, for 800 * 600 resolutions, the bottom-right corner is at the coordinates 800,600, whereas for 1024 * 768 resolutions, it's 1024,768, as shown in Figure 12-1:
If we specified that a <div> tag's left style attribute be set to 400 pixels and top style attribute be set to 300 pixels, the content's top-left corner would be near the middle of a browser window on an 800 * 600 resolution display. If the display were set to 1024 * 768, the top-left corner would be about two-fifths along the browser window by about two-fifths down the browser window. This has been marked approximately on the diagram in Figure 12-1.
Let's look at an example. Imagine we have an absolutely positioned <div> tag at a position left of 200 and top of 100, and with other style attributes specifying it should be 200 pixels wide by 200 pixels deep and have a background color of blue. Our browser window would look something like Figure 12-2.
Now how can we position a paragraph contained within the <div> tag relative to the <div> tag? If we think of the <div> tag as a sort of screen within a screen, in this case a screen of resolution 200 * 200, relative positioning is easier to understand.
If we think of the <div> tag as a browser window itself, the top-left corner of the <div> tag is 0,0 and the bottom-right corner is 200,200 in this case (that is, the <div> tag's width and height). If we then specify that the <P> tag should be at the relative position left of 100 and top of 100, that would leave the top-left corner of the <P> tag in exactly the middle of the <div> tag it's contained inside.
What if we relatively position a tag that is not inside another tag? Well in that case it'll be relative to the <body> tag, which is the whole page itself. Essentially this is the same as absolute positioning if the whole page fills the screen.
Let's see the HTML for a page with the <div> and <P> tags having the positioning we've been discussing.
<html> <head> <style> .DivStyle1 {background-color: blue; position : absolute; width: 200px; height: 200px;} .PStyle1 {color: white; position : relative;} </style> </head> <body> <div style="left: 200px; top: 200px" class="DivStyle1"> <P class="PStyle1" style="left: 100px;top: 100px">My Paragraph</P> </div> </body> </html>
Type this into a text editor and save it as relativepos.htm.
In the <style> tag, we create two style classes: DivStyle1 and PStyle1. Within these, we specify the style attributes we talked about previously. In DivStyle1 we specify a blue background, that the positioning should be absolute, and finally the width and height in pixels, that is, px. For the PStyle1 we just specify the color of the text and that it should be positioned relatively.
Then in the <div> tag, we apply the style specified in the DivStyle1 class using the class attribute of the tag. In the style attribute, we specify the left and top positions of the tag; again we specify pixels as the unit of measurement by adding px at the end of the value. Because the DivStyle1 class specified positioning should be absolute, the values 200 and 200 will be absolute screen values.
In the <P> tag, we apply the PStyle1 class and then specify the position of the tag as 100px and 100px. This time it will be relative to the <div> tag, with 0,0 as the top-left corner of the <div> and 200,200 as the bottom-right corner.
| Note |
Note that IE 4 does not support absolute positioning for the <P> tag, but NN 4+ and IE 5+ do. |
On an 800 * 600 resolution screen with the browser window maximized, the example should look like Figure 12-3.
Remember that the left and top style attributes apply to the left and top of the element, so My Paragraph has the top left of the letter M at position left 100 and top 100 relative to the <div> tag (that is, in the middle of the <div> tag).
We also mentioned earlier that, in addition to specifying position properties as pixels, we can use percentages. To do this we simply put % at the end of the value instead of px. In the case of absolute positioning, it's a percentage of the browser window's width and height. For relative positioning, it's a percentage of the containing tag's width and height.
For example, to position our <div> and <P> tags so that the top-left of the <div> tag appears in the middle of the browser window and the top-left of the <P> tag appears in the middle of the <div> tag, regardless of the screen resolution, we'd write the following code:
<div style="left: 50%; top: 50%" class="DivStyle1"> <P class="PStyle1" style="left: 50%;top: 50%">My Paragraph</P> </div>
You might be wondering why we have this introduction to style sheets in a book about JavaScript. The point is that by using JavaScript we can manipulate the style of tags to change the page's appearance even after it has loaded. For example, as a user's mouse pointer goes over a paragraph, we can change its color. Unfortunately, the way different browsers support the manipulation of style attributes using JavaScript varies greatly. IE 6 has the greatest level of manipulation with virtually every tag being changeable. Netscape 6/7 has greatly enhanced support when compared with NN 4. IE 4 also supports an ability similar IE 5's for changing style using JavaScript, but with a less extensive range of attributes and tags.
In the remainder of this chapter, we'll see how we can use JavaScript and style sheets with IE 4+ and NN 4.x. In the next chapter we'll concentrate on the enhancements in IE 5.5 and NN 6.
Style sheets themselves are a big topic and there are many books exclusively on them. For example, Cascading Style Sheets: The Definitive Guide available from O'Reilly publishers has extensive coverage of the many attributes available and which tags they apply to.
|
|
JavaScript Validator
JavaScript Editor
