style guide
Text align
text-align is one of the more simple properties in CSS to understand; anyone with basic word processing skills should find themselves at home with it.
The three values left, right, and center, behave exactly as you would expect, setting the text in the corresponding fashion within its element.
h1 {text-align:center;
border:1px solid #f00;}
Our Example Header
The example header above illustrates an important feature of text-align. Notice that the h1 element itself does not move. It is still a block level element extending to 100% of it parents width. text-align only effects the in-line content of the element it is applied to. A common error is to try and align whole elements such as a <div> or <table>, using this property in the way you may have done with the <CENTER> tag. Simply remember that the property is called text-align, and will only effect in-line content of the element it is applied to.
The following code demonstrates this.
a.center {text-align:center;}
This code will result in the link it is applied to being rendered as follows.
link which goes nowhere—literally.
Justified Text
The value justify sets the text to align with both the left and right margins of the element. This is an effect often seen in newspapers and magazines, and is created by increasing or decreasing spaces between words and letters.
Justified text is not a particularly common feature of the web. The way that user agents/browsers display it can be unpredictable. CSS doesn't specify how justification should be achieved, and browsers are left to figure out the best way on their own. No browsers at the time of writing are able to generate hyphens for long words, and at small widths this can lead to rather odd looking gaps and spaces in the text. However, as this paragraph shows, justified text can have an appealing look when formatted well.
| text-align | |
| Values: | left | center | right | justify | inherit |
| Initial Value: | user-agent specific. Normally left. |
| Applies to: | block-level elements |
| Inherited: | yes |
Previous Posts
Latest Links
- Trumpet Quartet
- Bella Tromba this week recording at EMI with Kanye West.
- Are we designers or developers?
- I struggle with this one as well. My title at work is Software Engineer as well, which doesn't help matters.
- Dear W3C, Dear WaSP
- I'm not sure what I think about this. There seems to be a lot of general moaning about this stuff and not very much doing (with a few notable exceptions).
- The King of Web Standards
- Jeffrey Zeldman crowned by Business Week Magazine
- iPhone Javascript and spec benchmark
- Interesting JavaScript benchmarks on the new iPhone vs. Mac Book Pro
