Style Sheet Types – Whats the Difference ?

Before you begin using style sheets it’s important that you understand the different types that exist and how to use them effectively to style your web pages.

In-line Style Sheets

An in-line style sheet is applied to tags. As the name in-line signifies, it is used in the same line to style anything contained between the tags.

In the example below, the first paragraph is set to bold and the second paragraph is set to be in italics.

<p style="font-weight: bold;">Isn't this cool?</p>
<p style="font-style: italic;">Isn't this cool?</p>

The Output:

Isn’t this cool?

Isn’t this cool?

To apply a style in-line the use of they keyword style is important followed by the propety and value. Multiple styles can also be applied in-line.

<p style="font-weight: bold; font-style: italic;">Isn't this cool?</p>

Output:

Isn’t this cool?

Internal Style Sheets

An Internal style sheet is used when a style is to be applied to a specific page.

Internal style sheets are most commonly used on web pages which require a different style from all other pages.

In creating an internal style sheet the selectors, their properties and values are applied within a style tag.

This tag must be placed between the opening and closing head tags of your HTML document.

<head> 
    <style type="text/css"> 
        p { color: blue; }
    </style>
</head>

External Style Sheets

An external style sheet is one where the styles are written in a document separate from the HTML web page.

It is the most widely used style sheet type since you can style all your pages at once.

How to Create The External Style Sheet

All external style sheets must be saved with the extension .css. A link must also be made between the external style sheet and all pages that use it by using the link tag.

The example below create an external style sheet, style.css and then create a HTML web page that references it.

Step 1: style.css

p
{
    font-weight: bold;
}
h4
{
    text-decoration: underline;
}

To follow, open your notepad/notepad++ document and copy the code above into it. Navigate to save as and save the document as style.css in a folder.

Ensure that the area marked Save as type in notepad is set to “All Files” and if you use Notepad++ then set it to “All types”.

When you have completed this step, you have successfully created your first style sheet.

Step 2: index.html

Now copy the code below into a next text document and save it as an HTML file.

Ensure both files are in the same location for ease of access.

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
      <title> My First CSS Example </title>
   </head>
   <body>
      <h4> Paragraph </h4>
      This is my first paragraph of text. This text should be bold.
    </body>
</html>

Note how the external style sheet is referenced above.

The rel=”stylesheet” simply shows how the current HTML document relates to the linked document ( i.e. by a style sheet).

The type acknowledges that it’s a css file and then the familiar href attribute provides the name and location of the style sheet.