CSS. Formatting rules block elements.

CSS. Manage text attributes.

CSS has several options for defining the styles of text.

FONT PROPERTIES An example of a typical font definition would be:

B {font-family:arial, helvetica; font-size:12px; font-weight:bold;}

But since all font attributes can actually be expressed with the font property we could actually write it this way:

B {font:arial, helvetica 12px bold}

TEXT PROPERTIES

Some options for defining text properties such as alignments, underlines, etc.

Property	Values	NS	IE	Example
line-height	normal number length percentage	4W 4+ 4+ 4+	4+ 4P 4+ 4P	line-height:normal line-height:1.5 line-height:22px line-height:150%
text-decoration	none underline overline line-through blink	4+ 4+   4+ 4+	4M 4+ 4W 4+	text-decoration:none text-decoration:underline text-decoration:overline text-decoration:line-through text-decoration:blink
text-transform	none capitalize uppercase lowercase	4+ 4+ 4+ 4+	4W 4W 4W 4W	ext-transform:none text-transform:capitalize text-transform:uppercase text-transform:lowercase
text-align	left right center justify	4+ 4+ 4+ 4+	4+ 4+ 4+ 4W	text-align:left text-align:right text-align:center text-align:justify
text-indent	length percentage	4+ 4+	4+ 4+	text-indent:20px; text-indent:10%
white-space	normal pre	4+ 4+		white-space:normal white-space:pre

4P:problems, 4M:Mac only, 4W:Windows only

Note:

line-height : When using a number (such as 1.5) the number refers to the font size, where 1.5 would mean that a 1.5 lines spacing (using the current font size) will be inserted between the lines.

text-transform : Capitalize sets the first letter of each word in uppercase.

Uppercase forces all letters to uppercase.

Lowercase forces all letters to lowercase.

text-indent : Use this to indent the first word of a paragraph.

white-space : If white-space is set to pre the browser will show all spaces in the text, rather than ignoring all occurrences of more than one space. This is similar to the <pre> tag in plain HTML. Since the white-space is only supported by NS you should use the <pre> tag instead.

COLORS

As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color.

The color is not part of the font collection in CSS - rather it has its own definition.

If you want to add a color to the text in the above example you'd do it this way:

B {font:arial, helvetica 12px bold; color:red}

 

CSS. Formatting rules block elements.

When we specify the positions or dimensions of element boxes, we’re doing so relative to what’s known as the containing block, which is a very important concept in CSS layout.

If the value of the position property is static (the default) or relative, the containing block is formed by the edge of the content box of the nearest ancestor element whose display property value is one of:

block, inline-block, list-item , run-in , table, table-cell

Block Formatting.In a block formatting context, boxes are laid out vertically, starting at the top. Block-level elements—elements with a display property value of block, list-item, table, and (in certain circumstances) run-in—participate in block formatting contexts.

A block-level element with a display property value other than table will generate a principal box block. A principal box will contain either block boxes or inline boxes as children, never both. If the element contains a mix of block-level and inline children, anonymous block boxes will be generated where necessary, so that the principal box will only contain block boxes. Consider the following example:

<div>

<p>A paragraph</p>

Some text in an anonymous box

<p>Another paragraph</p>

</div>