Types of CSS

When we are learning CSS, we are usually writing CSS in the head of the HTML document. However, there are three different places where CSS can be written within an HTML document. So in this chapter, it has been explained with examples.

Here "CSS types" means when writing the CSS style in the HTML document, where should it be placed on the document? And what are the different ways to use CSS styles?

What Are the Types of Stylesheets?

There are three different ways you can use to insert CSS definitions in your web page. These are:
  1. Inline Style
  2. Embedded Style Sheet
  3. External Style Sheet

Let us now learn about each of them in details:

Inline Style

Styles sheets that are of type inline refer to information related to the style being functional to the existing HTML element. The use of inline approach, rather than defining your style once, here, you have to write the style in every HTML element that you use for designing your web page. It can be more precisely called an inline style rather than the inline style sheet. It uses the style attribute within that HTML element.

Syntax:
<HTML ELEMENT style="properties: value"> .... </HTML ELEMENT>
Example:
<p style="color: blue">The text gets the effect of inline style.</p>

Drawbacks of Inline Styles

  • Using inline styles is not as powerful as other types of style sheets available in CSS. If you define your styles for many HTML tags, which are in use to design a web page, then you will not be able to use most of the power associated with CSS.
  • For example, you have to define the style over and over again whenever it is used, instead of defining it only once.
  • Furthermore, if you want to change a specific style, you have to change it in many places in your documents instead of changing it to one place.

Embedded Style Sheets

Embedded Style Sheets is a style sheet where designers can embed information of the style sheet in an HTML document by making use of the <style> element. This embedding of style sheet info within <style> .... </style> tags are done within head section of HTML.

The syntax for embedded style sheets has no such exception. Simply you have to place the style sheet code between the <head>.....</head> tags where <style> .... </style> is nested within head element:

Example:
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Embedded Style Sheets Example</title>
    <style>
        h1 {
            border-bottom: 1px solid #DDDDDD;
            color: #069;
            font-family: Helvetica, Arial;
            font-size: 25px;
            font-weight: normal;
            line-height: 34px;
            margin-bottom: 10px;
            outline: 0 none;
            padding-bottom: 3px;
            padding-top: 0;
            text-decoration: none;
        }
        
        hr {
            background-color: #069;
            border: 0 none;
            clear: both;
            color: #D4D4D4;
            height: 1px;
        }
        
        .sublines {
            background-color: #DAF4FE;
            padding: 5px;
            border: 1px solid #09C;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
        }
        
        .infotext {
            font-size: 10pt;
            background-color: #F2F2F2;
            padding: 5px;
        }
    </style>
</head>

<body>
    <h1><span class="headlines">Welcome to w3schools.in</span><br>
</h1>
    <div class="sublines"> This is an example page using CSS.
        <br> The example is really simple,
        <br> and doesn't even look good,
        <br> but it shows the technique. </div>
    <br>
    <table border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td class="sublines"> As you can see:
                <br>
            </td>
            <td class="sublines">The styles even work on tables.</td>
        </tr>
    </table>

    <hr>

    <div class="infotext">Example from w3schools.in</div>
    <hr>
</body>

</html>

External Style sheets

This type of style sheet gets a separate file in which designers can state every CSS styles which seems relevant for your web site. Then this has to be linked with the external style sheet from your HTML page. You have to follow some specific steps to make this conceptual style sheet implementable.

Steps to create External Style Sheets:

  1. Build the Style Sheet by typing the CSS code in a plain text file (using text editor, usually), and then save the with as a .css extension.
  2. Now, you have to link the Style Sheet with the HTML document by using an HTML link element.
Example:
<head>
<link rel="stylesheet" href="style.css" />
</head>

Scroll Back to Top