Introduction to CSS

What is CSS?

Cascading Style Sheets(CSS) are used to describe the visual presentation of a web page. It decides how to display a web page and hence separates the presentation part from the content part of a web page.

Altogether, HTML handles content and structure of a web page while CSS handles presentation of a web page.

Structure of a CSS Document

Here's the basic structure of a CSS document:

selector
{
    property:value;
}

Here, selector can be a pre-defined tag, a class or an id.

Example : p{ color:red; }

p tag is a selector.

color is a property that defines font color of paragraph.

red is the value of color property.

Tools for writing CSS documents

CSS documents can be written using same tools as that for writing html docs. For learning purpose, use notepad or notepad++.

Extension of a CSS Document

External CSS documents have .css extension. So while saving your CSS documents make sure that you put .css at the end of your file name.

Types of CSS

There are three types of CSS:

  • Inline CSS

    Inline CSS is defined inside the tag itself using style attribute.

    Syntax for using inline CSS:

    <p style="color:#F00";>

  • Internal CSS

    Internal CSS is defined inside the head tag using style tag.

    Syntax for internal CSS:

    <!DOCTYPE html>
<head>
    <title>Internal CSS</title>
    <style>
        p{ color:#F00; }
    </style>
</head>
<body>
<p>I am written in red color.</p>
</body>
</html>

  • External CSS

    External CSS is defined in an external CSS file that is included or imported in an html document by using <link> tag or @import rule.

    Syntax for using external CSS:

    <!DOCTYPE html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" type="text/css"
                                   href="mystyle.css" />
    @import "mystyle1.css";
    @import url("mystyle2.css");
</head>

    Here, link tag is used to include "mystyle.css" file using href attribute.

    @import and @import url are equivalent and are used here to include "mystyle1" and "mystyle2" respectively.

CSS Core Concepts >>