The font color can be defined via color. A color value is expected.
p { color: red; }You can specify color words or a hexadecimal color value as the value.
Specifying the writing direction
The direction property can be used to force the writing direction for elements. The reverse writing direction is interesting in connection with languages in which writing is from right to left.
It can also be used to determine on which side oversized content is cut off with overflow.
- ltr - from left to right
- rlt - from right to left
The following example shows how the property can be used.
.normal {direction:ltr;} .backward {direction:rtl;}
Two classes have been defined here.
<p class="normal">Text that is written from left to right. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Text that is written from right to left. 1 2 3 4 5 6 7 8 9 0</p>
The result looks like this in the browser:
The horizontal alignment of texts
The horizontal alignment of text paragraphs and other continuous text or inline elements contained in block elements is defined via the text-align property. Incidentally, the default setting is left-aligned alignment.
- left - left-aligned alignment
- right - right-aligned alignment
- center - centered
- justify - align as justification
An example:
<p style="text-align:right;"> Welcome </p>
The result looks like this:
The vertical alignment
The vertical-align property is used to determine the vertical text alignment within a line in relation to the line height. The specification always refers to the parent element, which must be an inline element. Text can also be aligned within tables.
The following values are available:
- sub - subscript
- super - superscript
- baseline - aligned to the baseline
- top - aligned to the top edge of the parent element
- bottom - aligned to the bottom edge of the parent element
- middle - aligned in the middle between the top and bottom edge of the parent element
- text-top - at the top of the text
- text-bottom - at the bottom of the text
- Length specification - a positive or negative value moves the element above or below the baseline.
- Percentage - a positive or negative value moves the element above or below the baseline.
Example:
.baseline { vertical-align: baseline; }
Note that the values of vertical-align are unfortunately interpreted very unevenly by the various browsers. You should therefore test the results before you put the pages online.
Determine the text decoration
text-decoration is used to assign additional properties to texts or hyperlinks.
- none - no text decoration
- underline - underlined
- overline - overlined
- line-through - strikethrough
- blink - blinking
Here is another example:
a:link { text-decoration: none; }
This means that the hyperlinks on the page no longer have an underline.
The spacing between the individual words can also be defined explicitly.
<span style="word-spacing:0.5em">Welcome to PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em"> Welcome to PSD-Tutorials.de!</span>
A numerical value is expected. Percentages, on the other hand, are not possible.
Incidentally, letter-spacing is similar to Word-spacing. However, letter-spacing is used to determine the space between the individual letters of a text. Numerical values are also permitted here, but not percentages.
<span style="letter-spacing:0.1em">Example text with character spacing 0.1em</span><br> <span style="letter-spacing:0.3em">Example text with character spacing 0.3em</span><br>
You can use the text-transform property to specify whether the text is capitalized or not. This is independent of the actual notation in the source text. Small caps can also be enforced.
- lowercase - lower case
- uppercase - upper case
- capitalize - word beginnings as capital letters
- none - no text transformation
Example:
.small { text-transform: lowercase; }The result looks like this in the browser:
Spaces and character breaks
The white-space property is used to specify how spaces and line breaks in the source text should be displayed in the browser.
- normal - an automatic line break is inserted. In addition, several spaces are combined into one.
- pre - line breaks are displayed as they appear in the source text.
- nowrap - there is no automatic line break.
- pre-line - several spaces are combined into one. In addition, a line break occurs if the box is not large enough for display.
- pre-wrap - a wrap occurs if the box is not large enough for the display.
Here is another example:
<pre class="brush:xml;"><!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <style> body>p { font-family:"Courier New", Courier, monospace; font-size: 200%; } body p { color:#0066FF; } </style> </head> <body> <p>paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <div> <p>paragraph 4</p> </div> </body> </html></pre>In the browser it looks like this:
Implement shadow
You can use the text-shadow property to force a shadow for texts. Please note that this property is only supported in relatively recent browsers. Browsers that cannot interpret text-shadow will display the font without a shadow.text-shadow is used as follows:
text-shadow: hV vV blur #xxxxxx;
And this is what the values mean:
- hV - Horizontal shift
- vV - Vertical shift
- blur - Blur
- #xxxxxx - The shadow color
The following example shows a typical application for text-shadow.
.shadow { color: #444; font-size: 34px; text-shadow: 2px 2px 3px #333; }
The defined class is then applied to a first-order heading.
<h1 class="shadow">PSD-Tutorials.de</h1>
And here too, a look at the result:
As already described, you can use text-shadow without any problems, as non-interpretation by the browsers has no negative effects. The text is then simply displayed without a shadow.
