Tutorials, extensions, and source files for ActionScript, Flash, and other Adobe products.

 

Adding CSS to Documents

There are a number of ways to add styles to a document. Styles can be defined directly within a document with inline styles or through a header definition using the style tag. Style sheets can also be imported though an header definition using @import or linked externally through a link element.

Internal Styles

Inline Styles

The most basic form of attaching a style to an element is through an inline style. Inline styles are attached directly to specific elements by definitions defined within that element's style attribute.

<element style="definition">

Example:

<p style="margin:2em; font-size:large">Text</p>  

Inline styles, however, are not very versatile and often result in there being more text in the source code than necessary.

Note: Do not confuse inline styles with inline elements. Inline styles can be used with both inline and block elements.

Embedded Header Styles

Styles can also be embedded within a document using a style tag. Though the style tag does not have to be, but is often located in the head of a document. Style definitions are placed in the style tag and used to affect elements within the document. Example:

<head>
<style type="text/css">
p {
	margin:2em;
	font-size:large
}
</style>
</head>

External Styles

Importing Styles

The style tag can also use an @import directive to bring in external style sheets. By specifying a url with @import, you can bring styles in from an external style sheet as though they were written directly within the style tag itself. Example:

<head>
<style type="text/css">
@import url("my_style.css");
</style>
</head>

Note: External style sheets contain style definitions only, no addtitional HTML tags such as head or style.

Linking Styles

External styles can also be included into a document using the link tag. The link tag is placed in the head of a document and can specify an external css document the current document can reference (link more specifically represents a document relationship). Example:

<head>
<link href="my_style.css" rel="stylesheet" type="text/css" />
</head>

Differences Between @import and Link

The primary incentive for using @import is that older browsers do not support it. In fact, some older browsers only support certain uses (syntax) of it. Because of this, you can use @import to single out older browsers and avoid adding styles to your pages when viewers visit your page with those browsers. For a reference chart for browser support, see centricle.com's browser rule support page.

The use of the link tag, however, is supported by a wider range of graphics meaning css attached with the link tag will most likely be applied to any fairly modern browser viewing the page. The link tag also lets you specify persistent, preferred, and alternate styles.

Persistent styles are styles that are always applied to a web page. Even if you change to an alternate style, the persistent style sheets styles will still be applied. When using the link tag, a persistent style is attached with a link tag with a rel value of "stylesheet" and an absent title attribute.

<link href="styles.css" rel="stylesheet" type="text/css" />

Preferred styles are those that act like default style sheets. These, like persistent, are loaded when the page loads, but can be swapped out for other styles. A web page should have only one preferred style assigned to it. The format is similar to persistent styles only a title attribute is assigned to the link tag attaching the style sheet.

<link href="styles.css" rel="stylesheet" type="text/css" title="My Preferred Style" />

Alternate styles are styles that the user can pick to replace a preferred style sheet. These styles are not loaded when the page loads, but rather as the result of the user selecting the style as a replacement for the preferred style. You may have as many alternate styles for a page as you wish, though only one can be seen at a time. The format is similar to preferred style sheets except the rel attribute has a value of "alternate stylesheet".

<link href="styles.css" rel="alternate stylesheet" type="text/css" title="My Alternate Style" /> 

Note: Currently, not all browsers support the ability to select alternate stylesheets, however JavaScript can be used as an alternative to doing so.