SakhaliaNetHome PageHistory of the RailwayVorKutaAcceptance of cookiesAcceptance of cookies

CSS Tutorial :: Part IV

CSS Example #19

Measuring units

In all the CSS properties that control the size of an element is possible to use two type of measuring units: absolute and relative. Examples of relative units and their usage:

em: (line-height:3em;) This example indicates that the heigth of the line should be three times the maximum height of the font used in that line.

ex: (line-height:4ex;) This example indicates that the heigth of the line should be four times the half of the maximum height of the font used in that line.

%: (width:12%;) This example indicates that the width of the element should be 12% of the total width of the higher-level element that contains that element.

px: (font-size:12px;) This example indicates the size of the font used in a style should be 12 pixels. This is a relative unit because it depends on the resolution and physical size of the screen where the document is displayed, but can be considered as well as an absolute unit, because it is not dependant in the size of any element present on a document.

Examples of absolute units and their usage:

pt: (font-size:12pt;) This example indicates that the heigth of the font used in a style should be 12 points. Points are typographical units.

pc: (text-indent:12pc;) This example indicates that the indentation of the text should be 12 picas. Picas are units used in typography and design.

in: (width:7in;) This example indicates that the width of the element should be 7 inches. One inch equals 25.4 milimeters.

mm: (font-size:20mm;) This example indicates that the size of the font should be 20 milimeters.

cm: (width:23cm;) This example indicates that the width of the element should be 23 centimeters.

CSS Example #20

Styling text

CSS offers many capabilities for formatting and styling text, hence allowing endless visual possibilities. Thanks to the endless options that CSS offers for styling block-level elements and text, websites can be designed with an infinity of interesting layouts. The first property that we will see is line-height, which allows to indicate in diverse measuring units (an absolute value, a relative value or a percentage value) the height of a text line. The first example below indicates that the height of the text line should be 1.5 times the maximum height of the font used in the line, the second example indicates that the height of the text line should be 150% larger the size of the font used in the line, and the third example indicates that the height of the text line should be 200 pixels.

line-height:1.5;
line-height:150%;
line-height:200px;


The property text-decoration allows to represent the text with five possible effects: none, underline, line-through, overline and blink.

text-decoration:none;
text-decoration:underline;
text-decoration:line-through;
text-decoration:overline;
text-decoration:blink;


The property text-transform allows to represent the text with three possible effects: capitalize (uppercases the first letter on each word), uppercase (uppercases every letter) and lowercase (lowercases every letter).

text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase;


The property text-align allows to represent the text with the four alignment styles that are common in text processors: left, right, center and justify.

text-align:left;
text-align:right;
text-align:center;
text-align:justify;


The property text-indent allows to define the indentation of the first line on a text, and only admits absolute values (pixels, picas, points, etc...) and percentages. By using a negative sign before the values, the indentation will be set to the left.

text-indent:100px;
text-indent:-100px;
text-indent:5%;
text-indent:-5%;

<div style="text-decoration:overline; text-transform:lowercase; line-height:400%;">
This line of text is affected by some CSS parameters
</div>

<div style="text-decoration:none; text-transform:uppercase; text-align:center; line-height:400%;">
This line of text is affected by some CSS parameters
</div>

<div style="text-decoration:underline; text-transform:capitalize; text-align:right; line-height:400%;">
This line of text is affected by some CSS parameters
</div>
This line of text is affected by some CSS parameters
This line of text is affected by some CSS parameters
This line of text is affected by some CSS parameters

CSS Example #21

Block-level elements

A block-level element is the one that causes a break line before and after its application, unlike inline elements, that preserve the natural flow of the text that is before and after them. In CSS, block-level elements are considered as enclosed within a box, which has properties such as size, margins, borders, background color and image, text align, etc...

To define the background color of a block-level element, we use the background-color property, that admits values in different formats: as a keyword, for the most basic colors, as a hexadecimal value, as an RGB absolut value or as an RGB percentage value.

background-color:red;
background-color:#ff0000;
background-color:rgb(255, 0, 0);
background-color:rgb(100%, 0%, 0%);


To especify the color of the text contained by a block, we use the property color and the values that the property can take are exactly the same.

color:red;
color:#ff0000;
color:rgb(255, 0, 0);
color:rgb(100%, 0%, 0%);


A background image can be applied by assigning the URL of an image file. Any element placed inside the block-level element will be displayed over the background. We can write the instruction in different ways:

background-image:url(images/my_image.jpg);
background-image:url('images/my_image.jpg');
background-image:url("images/my_image.jpg");


Margins are one of the most important feature of a block-level element; they allow to define the distance between the block-level element and the surrounding elements. Margins exist outside the borders of the elements. Since a block-level element is a rectangle, it has four margins; these can be treated individually or at once:

margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;

margin:10px 20px 10px 20px;
(margin:top right bottom left)

margin:20px;

Margins can be measured with the different measuring units that CSS allows, for example, points, pixels or percentages:

margin-top:20pt;
margin-left:34px;
margin-right:23%;


A block-level element possesses as well internal margins, called padding, which are the distance between the border and the content of the block-level element. These work exactly the same as the external margins, the syntax and measuring units are the same.

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;

padding:10px 20px 10px 20px;
(padding:top right bottom left)

padding:20px;

padding-top:20pt;
padding-left:34px;
padding-right:23%;


It is important to not omit the measuring units when writing CSS properties, as this ensures a correct interpretation of the values by the browsers.

The size of a block-level element can be set with the properties width and height, whose values can be fixed or based in a percentage.

width:300px;
height:150px;

width:80%;
height:40%px;


It is possible to align a block-level element in respect of the document or any other block-level element of higher hierarchy containing it. The block can be aligned by using the property float, whose possible values are left, right, and none. This property is similar to the now deprecated HTML property align. When we float an element, we are extracting it from the normal flow of the document.

float:left;
float:right;
float:none;


The property clear is useful for preventing elements floating at the left, right or both sides of a certain element, or otherwise allowing elements to float on any side. This property allows the following values:

left: no elements are allowed to float on the left of the element.
right: no elements are allowed to float on the right of the element.
both: no elements are allowed to float on both sides of the element.
none: elements are allowed to float on both sides of the element. This is the default value.

(clear:left)
(clear:right)
(clear:both)
(clear:none)


It is possible to specify the width for the borders of a block-level element by using the property border-width. As with margins, the property can be set individually or at once.

border-width:12px;

border-top-width:5px;
border-bottom-width:5px;
border-left-width:10px;
border-right-width:10px;


It is possible to specifiy as well the color of the border by using the property border-color, whose possible values are any color specified in the forementioned ways (keyword, hexadecimal, absolute decimal and percentage).

border-color:red;
border-color:#ff0000;
border-color:rgb(255, 0, 0);
border-color:rgb(100%, 0%, 0%);


Another property that can be used for borders is border-style, that allows to select a visual style from a predefined set of values: none, hidden, dotted, dashed, solid, double, inset, outset, groove, ridge, initial and inherit.

border-style:dotted;

We can as well specify in the same command all the possible properties for a given border:

border-style:dotted 5px blue;

By using all the styling possibilities that a block-level element allows for its borders, we can achieve an infinity of visual effects, as it can be seen below.

<div style="margin:20px; padding:10px; background-color:cyan; border:solid 2px blue;">
This is an example of styling a <span class="italic">div</span> element.
</div>

<div style="margin:20px; padding:10px; background-color:orange; border:dotted 2px blue;">
This is an example of styling a <span class="italic">div</span> element.
</div>

<div style="margin:20px; padding:10px; background-color:pink; border:dashed 3px fuchsia;">
This is an example of styling a <span class="italic">div</span> element.
</div>

<div style="margin:20px; padding:10px; color:white; background-color:grey; border:none;">
This is an example of styling a <span class="italic">div</span> element.
</div>

<div style="margin:20px; padding:10px; background-image:url('images/diags.gif'); border:dotted 2px black;">
This is an example of styling a <span class="italic">div</span> element.
</div>
This is an example of styling a div element.
This is an example of styling a div element.
This is an example of styling a div element.
This is an example of styling a div element.
This is an example of styling a div element.