Page 41 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF

As an example, see the following:

< h t m l >
< h e a d >
< t i t l e > S i m p l e C S S E x a m p l e < / t i t l e >
< s t y l e >
< ! - -
P { m a r g i n - l e f t : 2 0 p x ; }
. c l s C o d e { f o n t - f a m i l y : " A r i a l " ; c o l o r : n a v y ; }
# i d P 1 { t e x t - a l i g n : l e f t ; f o n t - w e i g h t : b o l d ; }
- - >
< / s t y l e >
< / h e a d >
< b o d y t e x t = ” # F F 0 0 0 0 ” >
< p i d = " i d P 1 " c l a s s = " c l s C o d e " > A c o n f u s i n g b i t o f
t e x t . < / P >
< / b o d y >
< / h t m l >
As you can see, the formatting of this one line is affected by the style rules for < b o d y > ,
< P > , c l s C o d e , and i d P 1 . These potentially conflicting styles are resolved through the laws
of cascading and inheritance.

This means that first, the formatting included in the < b o d y > element is applied, followed by
the formatting in the < p > element, followed by c l s C o d e , and finally, i d P 1 , with each style
taking precedence over the previous one. If we had an inline style defined as well, it would
have been applied last, overriding all others.

CSS Positioning
The Cascading Style Sheets Level 2 specification introduces positioning, which opens up a
whole new level of control over Web page layout. Instead of building awkward tables to
arrange objects on the page, you can place each object exactly where you want it. While no
browsers completely support CSS2 yet, the 4.0 and later versions of Navigator, Internet
Explorer, and Opera already support CSS positioning.

It works like this: when a browser renders an object on the page with CSS positioning, it
places it into an invisible rectangle, called a box. You can set the box's exact distance from
the top and/or left edges of the browser window (known as absolute positioning), or you
can offset the box from other elements on the page (known as relative positioning). You can
also specify the height and width of the box. You can even layer objects on top of one
another. And since objects can overlap, CSS positioning includes clipping features that let
you cut off an area of an element--for example, to have a top object reveal another one
beneath it. Finally, you can make entire objects visible or invisible.

To use positioning on an element, you must first declare its position property to be absolute
or relative:
H 1 { p o s i t i o n : a b s o l u t e }
Then you can add whatever positioning properties you like (see the CSS reference table for
available properties and values). For instance, the following code places <H1> text inside a
box that's 150 pixels from the top of the page and is 200 pixels wide by 200 pixels high:

H 1 { p o s i t i o n : a b s o l u t e ; t o p : 1 5 0 p x ; w i d t h : 2 0 0 p x ; h e i g h t : 2 0 0 p x }

LoudOffice.com Guide to HTML – Part II Page 41