EASYCODE: css - introduction

Welcome to CSS Portion

In this introduction page of CSS you can learn following concepts:

1. CSS Definition

2. Features

3. CSS Rule

4. CSS Types

5. CSS Selectors

6. Id Selector

7. Class Selector

CSS Definition

CSS - Cascading Style Sheet

Features

CSS were added to HTML 4.0.
Its define how to display html elements.
CSS reduced the lot of editing work in HTML page.
CSS styles saved as separate stylesheet document with the extension of .css and applied to the HTML Document.

CSS Rule

Normally, CSS has two parts like one is Selector part and other one is Declaration part.
Example

h1 {color:red;}

In the above example 'h1' is selector and {color:red;} is declaration.

You can write multiple declaration for one selector.
Example

h1 {color:red; font-size:14px; background-color:#CCCCCC;}

You can write styles like below for more readable:

h1
{
color:red;
font-size:14px;
background-color:#CCCCCC;
}

You can give comments for your codes like below:
/* your comments */.
This is the comment rule for CSS.
Note: Comment section does not compiled when coding run.

h1 /* style for heading tag */
{
color:red; /* for red color */
font-size:14px; /* for text size */
background-color:#CCCCCC; /* for background color */
}

CSS Types

Three types of Stylesheets are there.

Internal Style Sheet
External Style Sheet
Inline Style Sheet

Internal Style Sheet

Internal Style sheets will be written within the HTML Document into the HTML head tag.

External Style Sheet

External Style sheets will be written as separated style sheet and saved with extension of .css and linked to the HTML Document.

Inline Style Sheet

Inline Styles will be written within the HTML Element.

CSS Selectors

Two type of Selector are there. These are very powerful sources of CSS. One is ID Selector and other one is Class Selector.

Id Selector

The Id Selector defines styles for single unique html element.
The Id Selector uses the id of html element and normally its defined by this "#" mark.

Example
Below style defines all the elements in the html document named with id of "#sample".

#sample {color:green; font-size:12px; background-color:#fff;}

Class Selector

The Class selector is used to indicate a style for group of elements.
The Class Selector may apply styles for many HTML elements in the document.
The Class Selector defined by this "." mark.

Example
Below style defines all the elements in the html document named with id of ".sample".

.sample {color:green; font-size:12px; background-color:#fff;}

Demo

Here you can view the sample demo which one applying style sheet.

Code view for demo

You can copy below code and paste into the Text Editor Program [like Notepad] and save as .html document and open that file in any browser window.

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
h1
{
 color:orange;
 text-align:center; 
}
.content
{
 width:655px;
 height:275px;
 background:white;
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;
 border:1px solid #333;
}

.demo
{
 color:green;
 padding:10px;
 text-align:justify;
}
</style>
</head>

<body>
<div class="content">
 <div>
    <h1>This is heading</h1>
    </div>
 <div class="demo">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>
</body>
</html>

PrevNext

EASYCODE

css - introduction