1. Many Cascading Style Sheets properties need to have length measurements specified. So there are a lot of ways to use CSS to specify lengths.

CSS lengths can be positive or negative numbers (some properties must have positive numbers). They must real numbers, and can use decimals such as 3.5. They must be followed by a two-letter abbrevation of the type of unit being measured.

The two types of measurement units are absolute and relative. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).

2. In Cascading Style Sheets, absolute units just what they say they are:

in - inches
cm -- centimeters
mm - millimeters
pt - points (they're 72 points to an inch)
pc - picas (12 points. Used to be important for typewriters.)

However, because computer monitors and displays vary so much, absolute units of measurement are of little use to web designers.


3. In Cascading Style Sheets, relative units of measurement relate to other things on the web pages. They're much more useful for web designers, because an absolute unit such as an inch can vary widely depending on monitor size, screen resolution, user settings and so on. They include:

em - is the value of the font size of a text font

ex - height of a lower case "x" in the type of font being used (not particularly useful now. Normally, use em.)

px - pixels

% - percentages (always in terms of another value)

em is used for specifying font sizes. px and percentages can be used for many properties. These units are easy to understand once you start using them with specific properties. Though at first look it may seem confusing it is not really. An "em" unit or "1 em" displays at the default or "base" size for a rendered font glyph as contained within an HTML element where the default display is assigned by the user agent.


4. One great advantage of using Cascading Style Sheets is the ability to indent the first line of each paragraph without putting in spaces, as is necessary with ordinary HTML. This makes your text more reader-friendly to web browser, encouraging them to stay longer on your site.

You just use the text-indent property, and set it to any value you prefer. 

p {text-indent: 0.25in;}
indents 1/4 of an inch 
p {text-indent: 5%:}
indents 5% of paragraph's length 
p {text-indent: 20px;}
indents 20 pixels

You can also apply text-indent to <h1-6>, <pre> and <blockquote>.


5. Maybe you'd like to use Cascading Style Sheets to create a certain interesting visual effect by having the first few letters of text overlap an image.

This can be done by using a negative text-indent value. This will force the first line of the text to be displayed to the left of the rest of the paragraph.

Since we want this to occur in only one paragraph, we'll create a special class for this particular paragraph. The CSS code is: 
p.hanging  {text-indent: -35px;}

The HTML code is:
<p class="hanging"><img src="greatpicture.gif">
The first 35 pixels of this text will overlap the great image.
</p>


6. You use Cascading Style Sheets to specify how to align text in an element. The possible values are:

left
right
center
justify -- makes the lines of text all the exact same length, as with a professionally published book. But online justified text is harder to read than standard left aligned text.
p {text-align: left;}

Normally text should be left-aligned. Major headlines should be centered. Subheads can be either left aligned or centered.


7. Cascading Style Sheets contains some properties which seem of little value except to web designers after certain effects. One of these is white-space. It has 3 values:

pre -- preserves all spacing within the text of an HTML file, including extra spaces you put in accidentally while typing. Make any such mistakes and this command makes sure your web visitors see them too.

nowrap -- this prevents word-wrapping. If you didn't hit the Enter key while typing the text, it will extend the line as far as it goes to the right, off the screen. This creates a horizontal scroll bar at the bottom of your web visitors' browser and unnecessarily annoys them.

normal -- tells browsers to display text normally.

Normal is the default value, so there's no need to put in a declaration for browsers to use it.


8. One property of Cascading Style Sheets is good for web designers who want to manipulate the space between lines of text for artistic effect.

That's line-height. You can make lines of text seem closer together or farther apart. In offline printing this is known to as leading. Make text too close or too far apart and your visitors will have difficulty reading it.

The format is:
p {line-height: 1.2em;}

That means the line height will be 1.2% of the normal height of the font text. This is about normal. You can also specify "normal,"
 but normal is the default value.


9. You can use Cascading Style Sheets to create subscripts where some text is below the rest of the text. This applies to some mathematical and chemical notation.

You use the vertical-align property and the sub value:
sub {vertical-align: sub;}
in the style sheet.
<p>This text about chemistry wants to display H<sub>2</sub>O for water.</p>
in the HTML.


10. You can use Cascading Style Sheets to create superscript effects where some text is displayed higher than other text in the same line. This is good for footnotes and some mathematical notation such as raising a number to a certain power.

You use the vertical-align property and the super value:
sup {vertical-align: super;}
in the style sheet.
<p>This text needs to have a footnote<sup>23</sup> to document it.</p> in the HTML.