Monday, January 23, 2012

CSS: Inline Styles

By Richard York
The last method for including CSS in a document is from within the XHTML elements themselves. Sometimes it doesn’t make sense to clutter your external or embedded style sheets with a rule that will be used on only one element in one document. This is where the style="" attribute comes into play; it’s demonstrated by the following markup:

This method allows for the text to be formatted from within the document and may be applied to any rendered element.
The following Try It Out demonstrates how the style attribute is used to add styles directly to the elements of a web document.
Try It Out-Including CSS Using the style Attribute 
Example 2-10. To use the style attribute to apply styles directly to the elements of a document, follow these steps.
  1. Return to your text editor and enter the following XHTML:
    1. Save the preceding document as Example_2-10.html
    2. Load up Example 2-10 in your favorite browser. You should see output like that in Figure 2-6.
    How It Works
    Note that the output is identical to output of the earlier example shown in Figure 2-6. The style attribute allows CSS declarations to be included directly in the XHTML element. The style attribute, however, is not as dynamic as a style sheet. It gives you no way to group repetitive rules or declarations. The style attribute should only be used when a more efficient method is not available (if, for example, the element to be styled does not appear on multiple pages).
Post a Comment