Styles in HTML and CSS

Character attributes vs. paragraph attributes

The simplest way to apply a certain format to a portion of a HTML document is to store HTML format attributes such as b, i or align with any tag to be formatted in the particular way. While this approach is most flexible in terms of combination of such attributes, plain HTML attributes allow only limited formatting compared to CSS styles. As well this method adds a lot of formatting information to the plain content of a document with much redundancy in most cases.

CSS attributes

By using the style attribute, CSS attributes such as margin-top, padding-right, text-align, etc. can be added to HTML tags instead. This method opens additional formatting settings but it still requires attributes to be stored with each tag having the same impact as HTML attributes.

Paragraph styles

To reduce the formatting overhead HTML and CSS attributes can be applied to paragraph tags so that they are valid on any tag contained in such paragraph.

Style sheets with named styles

The most flexibility and power however is reached with usage of Cascading Style Sheets (CSS) in combination with a given HTML document. By defining styles in a separate style sheet groups of format attributes can be held independent from HTML documents resulting in significant advantages

- styles are defined only once avoiding redundancies and increasing maintainability
- styles can be shared over many documents again reducing redundancy and maintenance efforts
- documents only need references to styles reducing storage space
- a predefined group of attributes can be applied in a single making formatting faster