CSS - Introduction

CSS Introduction

"Save a lot of work with CSS!
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once."

Before you continue you should have a basic understanding of the following:

        »  HTML
If you want to study these subjects first learn HTML.

What is CSS?

        »  CSS stands for Cascading Style Sheets
        »  Styles define how to display HTML elements
        »  Styles were added to HTML 4.0 to solve a problem
        »  External Style Sheets can save a lot of work
        »  External Style Sheets are stored in CSS files

The example below shows how to use CSS on a web page:

Example

<html>
<head>
<style type="text/css">
p
{
color:green;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

The Output is Shown Here:

Hello Friends!

This paragraph is styled with CSS.

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

The id Selector

        »  The id selector is used to specify a style for a single, unique element.
        »  The id selector uses the id attribute of the HTML element, and is defined with a "#".
        »  The style rule below will be applied to the element with id="para1":

Example

<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This is chennaisunday.</p>
</body>
</html>

The Output is Shown Here:

Hello Friends!

This is chennaisunday.