Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

CSS Basics – Where to put the style definitions.

CSS paper clipFundamental to XHTML is the concept of separating presentational elements from structural elements. This is achieved by the use of Cascading Style Sheets (CSS). CSS can be included in documents in several ways; inline, embedded, and external. It is not recommended to use the inline method for styling documents because it defeats the purpose of separating presentation from structure. If there is no other alternative, it is possible to include the style attribute on almost any element.

<p style="background-color:#cc9900">A background-color inline CSS style has been applied to this element.</p>

To embed CSS styles in a page it is necessary to create a style block in the head section of the document. This is a better approach than inline styles because it allows for the control of all CSS styles for a whole document in one place.

<head>
<title>Title of Document</title>
<style type="text/css">
p {background-color:#cc9900}
</style>
</head>

Lastly, the recommended method for adding CSS styling to documents is to include a link to an external style sheet in the head of the document. This method also has the benefit that many documents can use the same style sheet definitions.

<head>
<title>Title of Document</title>
<link rel="stylesheet" type="text/css" href="http://www.xhtmltips.co.uk/myspace/background_style.css" />
</head>

The rel attribute defines the relationship between the document and the external link. In this case the external link is a style sheet for the document. The type attribute specifies that we’re linking to a document that should be interpreted as text/css. The most import attribute is href, however, which defines the URL to the stylesheet.

This entry was posted on Thursday, June 28th, 2007 at 11:03 am and is filed under CSS Tips, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “CSS Basics – Where to put the style definitions.”

  1. Coder says:

    Thank you.

    It would be nice to talk about using the link tag vs the @import as import can be used internally and externally.

    Really nice article.

  2. Rob says:

    Excellent site, and a great help to my MCAD studies.