Home > CSS > Implementing CSSprinter version

Implementing CSS

CSS can be implemented in three ways that have slightly different effects.

Inline - This is where a style definition is applied directly to a single HTML tag as an attribute.
Using the <style> element - This is where a style declaration is placed within the head of a document.
Using the <link> element - This is where the style declaration is placed within an external style document and is linked to from an HTML document.

Using the Inline Style Attribute

This way of setting style is easy to use but requires that each tag be specified individually using a style attribute. This removes the advantage of being able to set style universally across multiple documents leaving you little better off than if you had used <font>.

More than one style property may be specified within the attribute as shown below with a paragraph element.

Inline Style Example

<p style="color: #ff0000; font-size: 15px;">This paragraph is red</p>

Using the <style> Element

This is a style declaration within the head of a document using the <style> element.

This means that any change to the style declaration will only affect this page and similarly removes the advantage of being able to set style universally across multiple documents - however maintenance is easier than with inline style.

<style> Element Example

<html>
<head>
<style type="text/css">
  p {
    color: #ff0000;
    font-size: 15px;
  }
</style>
</head>
<body>
    <p>This paragraph is red</p>
</body>
</html>

Using the <link> Element

This uses a link within the head section of an HTML document to an external style document. Since the link can be placed on multiple pages then a change to the style document will affect all pages that contain the link.

<link> Element Example

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>This paragraph is red</p>
</body>
</html>

Example Style Sheet "mystyle.css" Linked to by the Above

p {
color: #ff0000;
font-size: 15px;
}

The style sheet "mystyle.css" is a plain text file saved with a .css extension instead of .txt and only contains the information that would be placed between the opening and closing <style> tags.

What Cascading Means

This can be quite a complicated issue since multiple style declarations can be made that apply to the same elements - and this causes conflicts.

But assuming that you don't implement multiple external linked style sheets then it can be simplified to that below.

If there are no style declarations then the browser implements its default style.
If there is a style definition then this overrides the browser and becomes the default.
If there is an external linked stylesheet and a <style> element within the head of a document and a conflict occurs then the <style> element becomes the default.
If there is an external linked stylesheet, a <style> element within the head of a document and an inline style declaration and a conflict occurs then the inline style declaration becomes the default.

To summarise: Inline has priority over the <style> element which has priority over the external linked stylesheet which has priority over the browser.

Previous - CSS Basics Next - CSS Syntax