The different types of stylesheets

Internal style sheet

An internal style sheet is created using the <style> tag. Should be placed in the head element of a document.

Syntax:

<style type="text/css">
styles go here
</style>

Example:

<html>
<head>
<style type="text/css">
p {color: green;}
</style>
</head>
<body>
<p>
The text in this paragraph will be green.
</p>
</body>
</html>

Output:

The text in this paragraph will be green.

External style sheet

An external stylesheet is created in an external file. Should be called in an HTML document using the <link> tag inside the head element.

Example:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<p>
The text in this paragraph will be blue.
</p>
</body>
</html>

Output:

The text in this paragraph will be blue

Inline stylesheet

Use inline stylesheets when you want to apply a style to a single occurence of an element.

Inline stylesheets are declared within individual tags and affect those tags only.

Inline stylesheets are declared with the style attribute.

Example:

<p style="color:gray">This text will be gray.</p>

In this example, we are using the stylesheet command color to denote that the text in a paragraph will be gray.

Output:

This text will be gray.

For more detailed information about the different types of stylesheets, read the different types of stylesheets lesson.

For some hands on CSS practice, go to the First internal stylesheet tutorial.