Cascading Style Sheets/Text

From WikiKnowledge

[edit] letter-spacing

The letter-spacing property controls the amount of space between letters. Its values are:

For example, to put 5 pixels of space between every letter you can use this code:

<span style="letter-spacing:5px;">
5 pixels of space between every letter
</span>

You can also use negative values to have letters come closer to each other. In this example you put -2 pixels of space between the letters.

<span style="letter-spacing:-2px;">
-2 pixels of space between every letter
</span>

[edit] word-spacing

This is similar to the letter-spacing property shown above except it controls the space between the words and not between the letters. Note that a "word" to CSS is any group of characters with white space around them, so this property will have no effect on languages such as Japanese which don't use spaces between words. Its values are the same as those used for the letter-spacing property:

In this example we will put 10 pixels of space between the words.

<span style="word-spacing:10px;">
10 pixels of space between every word
</span>

Just as with the letter-spacing property, the word-spacing property can also take a negative values to reduce the amount of space between words.

<span style="word-spacing:-5px;">
-5 pixels of space between every word
</span>

[edit] text-indent

This property allows you to indent the first line in a paragraph. Values are:

By setting this to a positive value, the paragraph will be indented. A negative value will cause the first line to over hang the paragraph. When using negative values, the text will hang outside its container, so you will need to make sure that there is space to the left of the paragraph for this text. As the text is overflowing the block it is affected by any settings made to the overflow property.

[edit] text-align

This allows you to control the alignment of text. Values are:

These settings are the same as what you would find in a word processor. Left aligned text will line up to the left, right aligned text will line up to the right and centered text will be in the center. Justified text will line up to the left and right at the same time, this is done by changing the space between the words so that every sentence will end exactly on the right margin.

[edit] text-decoration

This property controls the underlining, strikethrough, overlining and blinking of text. Values are:

It is possible to apply as many of the styles to a single bit of text as you want. For example to apply all of the styles to a single piece of text simply use this code:

<span style="text-decoration: underline overline line-through blink; ">Example text</span>

The text-decoration of an element is drawn over the elements contents, including any child elements, and cannot be overriden by child elements. Example text with this part in red

[edit] text-transform

The text-transform property allows you to alter the case of text. Its values are:

You need to be careful when using the lowercase setting as some words in English need to be in uppercase. For example the sentence "Videos I like", will end up being displayed as "videos i like" even though the I should always be a capital I.

[edit] white-space

This property allows you to control what is done with the white space in a document. By default a browser will collapse extra spaces between words and ignore all line breaks. Values are:

Lots      of        unneeded      spaces.

All of the extra spaces in the above sentence will normally be turned in to a single space when you view it in a web browser. Sometimes you may not want this to happen, such as when writing out example HTML code. In these situations, you can set the white-space property to pre to prevent the browser replacing the extra spaces.

<span style="white-space: pre;">Lots      of        unneeded      spaces.</span>

The nowrap setting tells the browser not to wrap text if it doesn't fit on one line. The pre setting tells the browser not to collapse white space between words.

[edit] line-height

This property allows you to control the amount of space between lines of text. Values are:

[edit] text-shadow

• CSS 2

The text-shadow property applies drop shadows to text. Safari is at present the only web-browser to offer any support for this property. The syntax is:

<color> <x-offset> <y-offset> <blur>

You start with the color of the shadow, then the x-offset, the y-offset, and finally a optional blur radius. An example text-shadow.

text-shadow: blue 5px 5px 2px;

This creates a blue shadow 5 pixels below and 5 pixels to the right of the text with a small blur.

You can create multiple text shadows by using a comma separated list of shadows, for example:

text-shadow: blue 5px 5px 2px, black -5px -5px 2px;

This rule will create two drop shadows. Note that no browser (including Safari) currently supports multiple shadows.

[edit] Tips

Example text given a glow effect using text-shadow

• By potting the shadow at 0,0 and giving it a blur, you can create a "glow" effect instead of a shadow.

[edit] Navigation