Depth Levels. The elements of a page, texts as well as graphics, can be considered as layers stacked one on top of the other. Hence, we
need to know which element should be placed on top of another one. This is the role undertaken by the z-index. The lower the value of this property, the higher the priority assigned to it and its position in the stacking order. So
assigning the lowest value, i.e. 1, to an element means that it will sit on top of all the other elements.
Webmaster
Style sheets : Creating a Reusable Template
[ Contents ]
Dr Benton
Typographical Style Rules
We will now define the appearance of the styles in our template.
If you have read the previous workshops contained in this CSS lab book, the following code will be familiar to you. We will not go into the details of what has already been studied but rather concentrate on the new properties.
- Titre style:
.Titre { position: absolute; - SousTitre style:
.SousTitre { position: absolute;
- Texte style:
.texte {
left: 100px;
top: 0px;
z-index: 2;
font-size: 36pt;
font-family: Tahoma;
font-weight: 900;
color: #0066DD }
We have set the font-weight property to 900, which will produce a title with very bold characters. You can also use the values between 100 and 200, normal, lighter or bolder.
The three first lines enable us to place the text with pixel precision. Our goal is to position the title with an offset of 100 pixels from the left margin, but directly aligned with the top margin.
left: 130px;
top: 60px;
z-index: 10;
font-size: 14pt;
font-family: Tahoma;
font-variant: small-caps; }
The only new aspect here is the use of the font-variant property to which we have applied the small-caps value: the text assigned to this style will be displayed in small-caps.
Depth Levels. The elements of a page, texts as well as graphics, can be considered as layers stacked one on top of the other. Hence, we
need to know which element should be placed on top of another one. This is the role undertaken by the z-index. The lower the value of this property, the higher the priority assigned to it and its position in the stacking order. So
assigning the lowest value, i.e. 1, to an element means that it will sit on top of all the other elements.
font-family: Verdana;
font-size: 9pt;
text-align: justify;
line-height: 14pt;
}
To improve the presentation of our text, we have justified the Texte style (left- and right-aligned at the same time) and slightly increased the line spacing, using the line-height property.
Which units should be used for size settings? Sizes can be expressed in centimetres [cm], millimetres [mm], pixels [px] or points [pt].