CSS Tips
FIRST LINE INDENT.
Word processing and page layout programs let you indent the first line of a text block separately from the rest. For example --
Here the first line is indented more. Some publications use this to indicate where paragraphs begin.
You can use the CSS property "text-indent" to specify the extra first line indentation, in this case 30 pixels. The code reads: "text-indent: 30px". Even though the property is called "text-indent," the setting applies only to the first line of the text block.
Negative "text-indent" makes the first line stick out on the left. For example --
This line is indented less than the others. You may see it referred to as a hanging indent.
Here the "text-indent" is -30 pixels while the entire paragraph has "padding-left" of 30 pixels. The code reads "padding-left: 30px; text-indent: -30px".
Please note that both samples are indented an extra 50 pixels to distinguish them from the explanation.
<DIV> VERSUS <SPAN>.
You can use <DIV> and <SPAN> to assign styles to page items that otherwise do not have their own tags.
While neither by itself changes the appearance of an item, <DIV> does create a paragraph break whereas <SPAN> does not. Thus you cannot apply <DIV> to one or two words within a line; you can <SPAN>. In the parlance of HTML, <DIV> is a block-level element while <SPAN> is inline.
<CLASS> VERSUS <ID>.
In addition to enabling web authors to specify the appearance of HTML elements, CSS permits them to define new styles using <class> and <id> selectors.
The difference is that <id> is for items that appear only once on a page, such as headers and footers. <Class> is for elements that can appear many times, for example photo captions.
The definition of an <id> must begin with the "#" character (e.g., "#footer"); that of a <class> with a "." (e.g., ".caption").
Another difference is that a class can be limited to a particular HTML tag. Thus, a style defined as "p.caption {specs}" will have no effect if assigned to any element other than <p>.
Finally, if an <id> and a <class> are applied to the same page element, the <id> should take precedence to the extent its properties differ from those of the <class>.
