CSS Programming/Inline
From Wikibooks, the open-content textbooks collection
[edit] Introduction
This section relates to the use of CSS in (X)HTML. See Applying CSS to XML for details of using CSS with XML.
The technique in this section does not have the maintenance benefit of using linked stylesheets. It should only be used during testing or for writing self-contained, single page examples. Production quality webpages and examples with more than one page should use linked stylesheets. Dynamically generated webpages may need to use inline CSS but this should be kept to a minimum. Even in dynamic pages any CSS that is common to multiple pages should generally be moved to a linked stylesheet.
It is expected that inline CSS will be removed from XHTML 2.0.
[edit] Inline CSS
Inline CSS is CSS specified directly in the element you want to apply it to. The style attribute contains the CSS.
For example
<div style="font-weight:bold">Bold Font</div>
would render as:
The style attribute can contain more than one CSS declaration (font-weight:bold is a CSS declaration). The declarations are separated by semi-colons.
For example
<div style="font-weight:bold;color:blue">Blue Bold Font</div>
would render as:
[edit] A Better Technique
It is better practice to use the id attribute to identify an element that requires an individual style. The element can then be selected by a CSS selector in a linked or embedded stylesheet. This allows the possibility of providing different styles for the element in different media, e.g. screen or print.
The previous example would be rewritten as
<div id="thisOne">Blue Bold Font</div>
and the CSS rule
#thisOne { font-weight:bold;color:blue }
would be included in a linked stylesheet.
