You can use the following properties to align paragraphs or the contents of table cells according to your requirements. These properties can also be applied to all other elements to which a defined or calculated height or width can be assigned.
Indentation of the first line
Let's start with the text-indent property. This defines how the first line of a paragraph should be indented. It is also possible to "indent" to the left. A negative text-indent value must be used for this. (Detailed information on when extreme indentation can be useful follows below). A numerical specification is expected.
An example:
.paragraph { text-indent: 2em; }
This looks like this in the browser:
If you use a negative value, there will be a text indentation in the first continuous text line.
.paragraph { text-indent: -2em; }
And again, of course, take a look at the result in the browser:
So something like this is also possible. When defining indents, however, make sure that the content can actually still be read if that is what you want. In fact, text-indent can also be interesting in the context of search engine optimization. For example, sometimes you may want to display graphics instead of text.
However, if the text should still be available for search engines, you are initially faced with a dilemma. Jens's dilemma can be solved by using text-indent. As you know, this feature allows you to move texts. This means you can make texts disappear from the visitor's field of vision.
Advantage of the text-indent variant: The text that is to be replaced by a graphic remains unchanged in the source text.
<h1>PSD-Tutorials.de</h1> ... h1 { background: url(logo.png) 0 0 no-repeat; text-indent: -99999px; height:200px; }
This syntax assigns a background graphic to the h1 element. (The background property has already been introduced in this series). With text-indent: -99999px, the text of the heading is shifted 99999 pixels to the left. The text is therefore no longer visible. Now only the image is actually displayed.
If you deactivate the stylesheet, the text can be seen as normal again.
Setting the line height
I have already mentioned the line height in connection with the general font property. At this point, I will now deal with this topic in more detail. The definition of the line height in connection with thefont size is interesting.
The line height can be defined using the line-height property. Numerical values are permitted. Percentage values are also possible. These then refer to the font size of the element for which the line height was specified. Note the following before defining the line height: It can happen that a browser/end device gives the line height specification priority over other properties and truncates elements if they are higher. This can be particularly annoying with graphics. So test the results before you put the page online.
The following example shows how line-height can be used.
<p style="line-height:1.4em; font-size:1em;">Sometimes you have created a great layout, but the photos are still missing, and if you only use empty frames, the layout looks pretty bare. There's a better way:<br /> In this video training, I'll show you the best web addresses to quickly get free suitable image placeholders. You can find an ingenious list, for example, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">here</a>.</p> <p style="line-height:2em;font-size:1em;">Sometimes you have created a great layout, but the photos are still missing, and if you only use empty frames, the layout looks pretty bare. There's a better way:<br /> In this video training, I'll show you the best web addresses to quickly get free suitable image placeholders. You can find an ingenious list, for example, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">here</a>.</p> <p style="line-height:1em; font-size:1em;">Sometimes you have created a great layout, but the photos are still missing and if you only use empty frames, the layout looks pretty bare. There's a better way:<br /> In this video training, I'll show you the best web addresses to quickly get free suitable image placeholders. You can find an ingenious list, for example, <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">here</a>.</p>
Three text paragraphs have been defined here, each of which has been assigned different line heights.
As you can see, the readability of continuous text can be greatly influenced by the line height. So be careful with line-height.
Finally, of course, the question arises as to which line height you should actually choose. Line heights between 130 and 150 percent are usually assumed.
p { line-height: 150%; }
Ultimately, however, good legibility depends above all on the width of the font. The following applies here: The longer the lines of text run, the greater the line height should be. It is therefore essential to test the page to ensure that legibility is actually maintained.
Horizontal text alignment
The horizontal alignment of text paragraphs and other continuous text or inline elements contained in block elements is defined via the text-align property. The following values can be set for text-align:
- left - left-aligned alignment
- right - right-aligned alignment
- center - centered
- justify - align as justification
Here is another example:
<!DOCTYPE html> <html> <head> <style> h1 {text-align:center} h2 {text-align:left} h3 {text-align:right} </style> </head> <body> <h1>PSD-Tutorials.de</h1> <h2>PSD-Tutorials.de</h2> <h3>PSD-Tutorials.de</h3> </body> </html>And this is what the result looks like in the browser:
Note that text-align does not only apply to text content. The property actually applies to all inline elements. So if an image is included, the text-align definition also applies to this element.
One more note: text-align should - at least according to the official CSS specification - not affect block elements. (Even though there are browsers that also apply it to block elements). If you want to align block elements, use the margin properties already introduced in these cases.
