Alex W
Alex W

Reputation: 38253

Correct Semantic use of CSS Properties

Since it is recommended not to use table elements for layout purposes (non-tabular data), because the special formatting applied to those elements may change in the future, is it also not recommended to use CSS properties such as text-align, which was designed to be used on text, for img elements for the same semantic reason?

I have been looking through the w3c specifications and for instance, line-height seems to be designed for text purposes and has plenty of references in the documentation to font size, so would it be appropriate or abusive to use this property on img elements, simply because they are displayed as inline?

I can understand how the W3C idea of a Semantic Web would use CSS to remove styling information from a page, leaving data exclusively in the HTML for content accessibility. But where is the original rationale documentation for CSS, and why wouldn't they use extremely abstract properties like horizontal-align from the get go, instead of unique alignments for each display type (e.g. text-align: center can be used on all display: inline elements such as img elements) ?

Upvotes: 1

Views: 202

Answers (2)

Allan Kimmer Jensen
Allan Kimmer Jensen

Reputation: 4389

It is perfectly fine, to use text-align in table cells, that just styling the table as you should be doing. If you want to. Just do it in CSS. Do not use align="right".

https://developer.mozilla.org/en/CSS/text-align Says it applies to: block level elements, table cells and inline-blocks. So it is a use that is documented and intended. If you have inline content use this property to style its alignment.

http://www.w3.org/TR/CSS21/text.html#propdef-text-align Also states

This property describes how inline-level content of a block container is aligned.

So it is not just text, but all inline content.

Upvotes: 0

Quentin
Quentin

Reputation: 944439

No. CSS is purely presentational. Some of the properties are just poorly named (text-align being a prime example, it is designed to align all inline children).

Upvotes: 3

Related Questions