My Blog in ICT: Week7-Done (July 14-18)

These are the topics that we discussed in this week:

Contextual Selector

Contextual selectors have an inheritance basis. 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 the context of the elements preceding it.

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 contain two italic text.

The <div> tag

One of the most important containers is the <div> tag. It serves as a computer where you can put other elements, give them colors, borders, margins, etc. 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.

Relative Positioning

Relative positioning places the element in a position relative to the element where it is defined in the document. An example is the .Parastyle class which could be positioned relatively to where it should be placed within its container, a div block.

The ID Selector

The ID selector is another way of creating 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 usually preceded by a hash mark (#). The declaration block consisting of properties and values, follows the ID selector and is enclosed in curly braces.

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 element, 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, the JavaScript will allow us to move these objects around, rearranging the stacking order dynamically, by manipulating the z-position.

Absolute Positioning

Absolute positioning places an element in a specific location on the page and can be used to full animation. It is used to specify the absolute coordinates (x, y) of an element in terms of the browser window itself.