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

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP