Including CSS into pages

Linking a style sheet to your document

They can take many forms - from the isolated style attribute, through style elements which you can copy and paste into your pages, to the actual stylesheets you can include into any of your pages. Each method has advantages and disadvantages over the other methods - no single method is right or wrong and if you understand their various strengths you be in a better position to use them.

STYLE attribute

Without a doubt this is the most basic way to get to the CSS attributes for any given element without all the extra work involved with the other methods listed here since you can just directly apply the attributes you require without having to do anything else.

Although using these is great for debugging during those few hours when a certain combinations of styles will not work (or often mysteriously stop working), they do not scale well - they defeat the point of using CSS as they force you to have to use them on an element-by-element basis rather, and would introduce more bloat than traditional techniques!

A style attribute is used like this:
<td style="font-size: 12pt; font-family: serif;">
  Text goes here, CSS makes it appear to be in a 12 point serif-type font.
</td>


STYLE element

Often referred to as an inline style sheet, an embedded style sheet, a style-block element or an embedded style-block element. It allows the functionality of a full style sheet without requiring a literal external style sheet, it will scale reasonably well with the obvious expection that if you use it over more than a few pages then you will get duplication which could be avoided if you went with a real style sheet.

Often this element comes into play when you want to create a self-contained page, or simply want to add a style or two to an existing style sheets but know that the only place this style gets used is this one page - using an inline style allows you to achieve the effect you want but also avoids adding an uncommon element to your style sheet, saving it for use exclusively with common elements.

A style element is used like this:
<style type="text/css">
  td.BigCellText {
    font-size: 12pt;
    font-family: serif;
  }
</style>

<td class="BigCellText>
  Text goes here, CSS makes it appear to be in a 12 point serif-type font.
</td>


Style sheet

Although they are called by many names; style sheets, cascading style sheets, CSS, and not to mention all the alternate spellings of style sheet such as style-sheet and even stylesheet - they all refer to the same concept, the most widely used implementation of which is this method. Composed of an external style sheet this is literally a text file with the contents of a style element inside it - this can then be referenced by any page you wish to have use that set of formatting rules.

This method is made the best use of when you have a large amount of pages which require a similar (if not identical) styling to them, as you can share a single styling specification between them all allowing you an easy way to consistently format your pages.

Assuming the following are the contents of your stylesheet (/mycss.css):
td.BigCellText {
  font-size: 12pt;
  font-family: serif;
}


Then to tell the page where the stylesheet is, add this inside the head element of the page:
<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css" title="MyCSS"/>


To assign formatting to an element you use the same syntax as you would for a style element:
<td class="BigCellText>
  Text goes here, CSS makes it appear to be in a 12 point serif-type font.
</td>


© evolved code
2000 - 2008