2

CSS

www.kaniyam.com
 3

Cascading Style Sheets

.
, CSS .

, .

""
, 2012 . CSS

.

, editor@kaniyam.com
.

http://kaniyam.com/learn-css-in-tamil-ebook
.
.

, .

.
tshrinivasan@gmail.com

editor@kaniyam.com

www.kaniyam.com
 4

CSS

2016

2016 .

- . - nithyadurai87@gmail.com

: . - tshrinivasan@gmail.com

: .

- - socrates1857@gmail.com

.
,
.
.
.
, , www.kaniyam.com
.
. .

http://static.kaniyam.com/ebooks/learn-css-in-tamil/learn-css-in-tamil.odt

www.kaniyam.com
 5

This work is licensed under a Creative Commons Attribution-ShareAlike

4.0 Unported License.

www.kaniyam.com
 6

http://www.csszengarden.com
. CSS

.

CSS
.
.

, ''
,
.

,
, .

,
, FreeTamilEbooks.com ,
.

www.kaniyam.com
 7

.
,
.

3 2015

: nithyadurai87@gmail.com
: http://nithyashrinivasan.wordpress.com

www.kaniyam.com
 8

1 Cascading Style Sheets....................................................................................10

1.1 HTML without CSS.........................................................................................11
1.2 Internal style sheet.......................................................................................13
1.3 External style sheet......................................................................................15
1.4 Inline style sheet............................................................................................17
1.5 Multiple style sheet.......................................................................................18
2 Text.............................................................................................................................. 22
3 Font..............................................................................................................................25
4 Links............................................................................................................................ 27
5 Lists............................................................................................................................. 29
6 Tables..........................................................................................................................33
7 Divisions....................................................................................................................36
8 Body background.................................................................................................40
9 Positioning............................................................................................................... 46
10 Combinators.........................................................................................................51
11 Gallery......................................................................................................................58
12 CSS3.......................................................................................................................... 64
13 Transitions..............................................................................................................64
14 Animations............................................................................................................ 66
15 Multiple Columns...............................................................................................69
16 Re-sizing................................................................................................................. 71
17 Shadows..................................................................................................................72
18 Border Radius.......................................................................................................74
19 Gradients................................................................................................................76
20 Displaying Texts..................................................................................................78
21 ......................................................................................................................82
22 .............................................................................................................83
23 ......................................................................................84
24 .............................................................................................................86
25 .................................................................................................................. 89

www.kaniyam.com
 9

1 Cascading Style Sheets

Cascading Style Sheets CSS . HTML

. HTML- font color, size,
bgcolor attributes-
,
.
.
HTML .
CSS .

CSS file-,
HTML file-
. HTML file- css file-
.

html file- css file 4 .

,
1. External style sheet
2. Internal style sheet
3. Inline style sheet
4. Multiple style sheet

www.kaniyam.com
 10

style sheets html

.
css-
.

1.1 HTML without CSS

css . html
.

<html>
<head></head>
<body bgcolor='skyblue'>
<h1 align='center'><font color="blue" size=18
face="Arial">
<u>Most children love being told Nursery
Rhymes</u></font></h1>
<p><i><font color="green" size=18 face="Times New Roman">
The most popular rhymes are listed here. Even elders love
to hear these rhymes.
The list is clearly not exhaustive but it is believed that
a good cross section
of famous poems for children have been
included.</font></i></p>
</body>
</html>

www.kaniyam.com
 11

<h1> , <p> -
tag-
. <u>,
<i>, <font>
<h1> , <p> tag- .
html
.

output .

www.kaniyam.com
 12

1.2 Internal style sheet

Internal style sheet-
.

<html>
<head>
<style>
body {background-color:skyblue;}
h1 {text-align:center;text-
decoration:underline;color:blue;font-family:Arial;font-
size=36pt;}
p{font-style:italic;color:green;font-size=36pt;}

www.kaniyam.com
 13

</style>
</head>
<body>
<h1>Most children love being told Nursery Rhymes</h1>
<p>The most popular rhymes are listed here. Even elders
love to hear these rhymes.
The list is clearly not exhaustive but it is believed that
a good cross section
of famous poems for children have been included.</p>
</body>
</html>

www.kaniyam.com
 14

<h1> , <p> -
<style> tag -
. <head> tag -
.

h1, p - { } - .
{ -: ; -: ;
-: ; } .

<u>- text-decoration:underline
, <i>- font-style:italic
. css-
.

1.3 External style sheet

External style sheet-
.

<html>
<head><link rel="stylesheet" type="text/css"
href="nithya.css"></head>
<body>
<h1>Most children love being told Nursery Rhymes</h1>
<p>The most popular rhymes are listed here. Even elders
love to hear these rhymes.

www.kaniyam.com
 15

The list is clearly not exhaustive but it is believed that

a good cross section
of famous poems for children have been included.</p>
</body>
</html>

<style> <head> tag - .

<link> .
rel, type, href- stylesheet
.

Internal style sheet- <style>-

file- .css
. <h1> , <p> -

www.kaniyam.com
 16

nithya.css file- <link>- .
external style sheet .
nithya.css- .

1.4 Inline style sheet

Inline style sheet-
.

<html>
<head></head>
<body style="background-color:skyblue;">
<h1 style="text-align:center;text-
decoration:underline;color:blue;font-family:Arial;font-
size=36pt;">
Most children love being told Nursery Rhymes</h1>
<p style="font-style:italic;color:green;font-size=36pt;">
The most popular rhymes are listed here. Even elders love
to hear these rhymes.
The list is clearly not exhaustive but it is believed that
a good cross section
of famous poems for children have been included.</p>
</body>
</html>

www.kaniyam.com
 17

<h1> , <p> -
tag-
. html -
<u> , <i> html
{text-decoration:underline ; font-style:italic} css
.

1.5 Multiple style sheet

Multiple style sheet inline, internal, external
. inline, internal , external 3
css .

www.kaniyam.com
 18

<html>
<head>
<link rel="stylesheet" type="text/css" href="nithya.css">
<style>
body {background-color:skyblue;}
h1 {font-family:Times New Roman;}
p{font-style:italic;color:green;font-size=36pt;}
</style>
</head>
<body style="background-color:skyblue;">
<h1>Most children love being told Nursery Rhymes</h1>
<p style="color:red;font-size=36pt;">
The most popular rhymes are listed here. Even elders love
to hear these rhymes.
The list is clearly not exhaustive but it is believed that
a good cross section
of famous poems for children have been included.</p>
</body>
</html>

www.kaniyam.com
 19

<h1> - Times New Roman-

internal css-
external css- . <p> -
inline css- internal css-
.
inline css- internal,
external- .
inline, internal, external .
multiple style sheet .

www.kaniyam.com
 20

( HTML -
http://www.kaniyam.com/learn-html-in-tamil/ ) Text, font, links, list,
tables HTML
.
CSS .

www.kaniyam.com
 21

2 Text
color . 3
: HEX
(e.g: "#ff0000") , RGB (e.g: "rgb(255,0,0)")
. (e.g: "red").

text-align
. Left , Right
, center
. Justify
, margin-
.

text-decoration
link-
.

text-transform
. uppercase
, lowercase
, Capitalize

.

www.kaniyam.com
 22

text-indent (eg. 50px)

.

HTML program- .

<html>
<head>
<style>
p.first {color:green; text-decoration:overline; text-
transform:uppercase; text-indent:50px;}
p.second {color:#0000ff; text-align:right; text-
decoration:line-through; text-transform:lowercase;}
p.third {color:rgb(255,0,0); text-align:center; text-
decoration:underline; text-decoration:capitalize;}
</style>
</head>
<body>
<p class=first> Dont Giveup! Keep on Trying! </p>
<p class=second>Even through it seems to be impossible,
It will happen in your life one day. </p>
<p class=third> All the very best Friends! Wait to
receive the surprises in your life!!!!!!</p>
</body>
</html>

www.kaniyam.com
 23

www.kaniyam.com
 24

3 Font

font-family .
("Times New
Roman", Times, serif),
, 3-
.

font-style
. Normal, Italic, Bold, Oblique
.

font-size . px-
em- .

HTML program- .

<html>
<head>
<style>
p.first {font-family:Tiems New Roman, Times, serif;
font-style:normal; font-size:10;}
p.second {font-style:italic; font-size:20;}

www.kaniyam.com
 25

p.third {font-style:bold; font-size:30;}

</style>
</head>
<body>
<p class=first> Dont Giveup! Keep on Trying! </p>
<p class=second>Even through it seems to be impossible,
It will happen in your life one day. </p>
<p class=third> All the very best Friends! Wait to
receive the surprises in your life!!!!!!</p>
</body>
</html>

www.kaniyam.com
 26

4 Links

link- color, font-family, font size

.
.

a:link = link .

a:hover = Mouse cursor- link-

link
.

a:active = link-
.

a:visited = link-
.

<html>
<head>
<style>
a:hover {color:red;background-color:yellow;}
a:active {color:white;background-color:black;}
</style>
</head>

www.kaniyam.com
 27

<body>
<a href=http://www.kaniyam.com/mysql-book-in-tamil/
target=_blank> Click here for MYSQL book </a>
</body>
</html>

www.kaniyam.com
 28

5 Lists

HTML- Ordered list 1,2,3...

, Unordered list
. CSS-
.
, (a,b,c...), (I, II, III) , (A,B,C..)
. .

<html>
<head>
<style>
ol li {list-style-type:upper-roman;}
ol li {list-style-type:circle;}
</style>
</head>
<body>

Types of Testing
<ol>
<li>Functional Testing</li>
<li>Non-functional Testing</li>
</ol>

Types of non-functional testing

<ul>
<li>Performance Testing</li>

www.kaniyam.com
 29

<li>Automation Testing</li>
</ul>

</body>
</html>

list-type-style list-
.

Visibility
. hidden
.

www.kaniyam.com
 30

Display Inline list-

.

<html>
<head>
<style>
ol li {visibility: hidden;}
ol li {display: inline;}
</style>
</head>
<body>

Types of Testing
<ol>
<li>Functional Testing</li>
<li>Non-functional Testing</li>
</ol>

Types of non-functional testing

<ul>
<li>Performance Testing</li>
<li>Automation Testing</li>
</ul>

</body>

www.kaniyam.com
 31

</html>

www.kaniyam.com
 32

6 Tables
CSS- tables-
. table
, table heading ,
table data
.

<html>
<head>
<style>
table {width:60%; height: 40%; border: 3px solid red;}
th {border: 2px solid green;}
td {border: 1px solid orange;}
</style>
</head>
<body> <table>

<tr>
<th>Name</th>
<th>Marks</th>
<th>Rank</th>
</tr>

<tr>
<th>Viyan</th>
<th>1200/1200</th>

www.kaniyam.com
 33

<th>First</th>
</tr>

<tr>
<th>Harini</th>
<th>1180/1200</th>
<th>Second</th>
</tr>

</table></body>
</html>

table, th & td 3-
border . 3- table-
.
border-collapse
collapse . .

www.kaniyam.com
 34

table {width:60%; width:40%; border: 3px solid red;

border-collapse: collapse;}

www.kaniyam.com
 35

7 Divisions
Division content-
.
.

<html>
<head>
<style>
div {width:60%; height: 40%; border: 3px solid red; }
</style>
</head>
<body> <div>Dont Giveup! Keep on Trying! Even though it
seems to be impossible, It will happen in your life one
day. All the very best friends! Wait to see the miracle in
your life!!!!!! </div></body>
</html>

www.kaniyam.com
 36

division- , , border
.
margin:25px division
25px .

div {width:60%; height: 40%; border: 3px solid red;

margin:25px; }

www.kaniyam.com
 37

division- content-
margin padding:25px .
.

div {width:60%; height: 40%; border: 3px solid red;

margin:25px;padding: 25px; }

www.kaniyam.com
 38

www.kaniyam.com
 39

8 Body background

style .

<html>
<head>
<style>
body {background-color: skyblue;}
</style>
</head>
<body> Dont Giveup! Keep on Trying! Even though it seems
to be impossible, It will happen in your life one day. All
the very best friends! Wait to see the miracle in your
life!!!!!! </body>
</html>

www.kaniyam.com
 40

.
.

body {background: url("image.gif");}

www.kaniyam.com
 41

.
no repeat .
.

body {background: url("image.gif")no-repeat;}

www.kaniyam.com
 42

no-repeat .
no-repeat right top .
.

body {background: url("image.gif")no-repeat right top;}

www.kaniyam.com
 43

repeat-x
, repeat-y
, . .

body {background: url("image.gif")repeat-x;}

www.kaniyam.com
 44

body {background: url("image.gif")repeat-y;}

www.kaniyam.com
 45

9 Positioning
Positioning-
.
Left, Right, Top, Bottom
. Fixed, Static, Relative 3
positioning- .

static positioning . 4 .
.

<html>
<head>
<style>
p.a {position:static; top:5px; right:30px}

</style>
</head>
<body>
<p class=a> Dont Giveup! Keep on Trying! </p>
<p class=b>Even though it seems to be impossible, It will
happen in your life one day. </p>
<p class=c>All the very best friends! Wait to see the
miracle in your life!!!!!! </p>
</body>
</html>

www.kaniyam.com
 46

top:5px; right:30px;
.

Position : fixed top:5px;

right:30px; ,
. .

browser-
,
overwrite .

www.kaniyam.com
 47

<html>

<head>
<style>
p.a {position:fixed; top:5px; right:30px}

</style>
</head>
<body>
<p class=a> Dont Giveup! Keep on Trying! </p>
<p class=b>Even though it seems to be impossible, It will
happen in your life one day. </p>
<p class=c>All the very best friends! Wait to see the
miracle in your life!!!!!! </p>
</body>
</html>

www.kaniyam.com
 48

Position : relative
.
, 30px
.

<html>

<head>
<style>
p.a {position:relative; top:5px; right:30px}

</style>
</head>
<body>
<p class=a> Dont Giveup! Keep on Trying! </p>
<p class=b>Even though it seems to be impossible, It will
happen in your life one day. </p>
<p class=c>All the very best friends! Wait to see the
miracle in your life!!!!!! </p>
</body>
</html>

www.kaniyam.com
 49

www.kaniyam.com
 50

10 Combinators

Combinator selector-
. <div> , <p>
selectors.
combinator .

div p { ----- } : div, p selector-

style- , style-
div p- .

<html>

<head>
<style>
div p {background-color:skyblue;}

</style>
</head>
<body>
<div>
<p> Dont Giveup! Keep on Trying! </p>
<b><p>Even though it seems to be impossible, It will
happen in your life one day. </p></b>

www.kaniyam.com
 51

</div>

<p>All the very best friends!</p>

<p> Wait to see the miracle in your life!!!!!! </p>
</body>
</html>

div ~ p { ----- } : div, p selector- ~

div- p-
style .

www.kaniyam.com
 52

<html>

<head>
<style>
div ~ p {background-color:skyblue;}

</style>
</head>
<body>
<div>
<p> Dont Giveup! Keep on Trying! </p>
<b><p>Even though it seems to be impossible, It will
happen in your life one day. </p><b>
</div>

<p>All the very best friends!</p>

<p> Wait to see the miracle in your life!!!!!! </p>
</body>
</html>

www.kaniyam.com
 53

div + p { ----- } : div, p selector- +

div- p-
style .

<html>

<head>
<style>
div + p {background-color:skyblue;}

</style>
</head>
<body>
<div>
<p> Dont Giveup! Keep on Trying! </p>
<b><p>Even though it seems to be impossible, It will
happen in your life one day. </p></b>

www.kaniyam.com
 54

</div>

<p>All the very best friends!</p>

<p> Wait to see the miracle in your life!!!!!! </p>
</body>
</html>

div > p { ----- } : div, p selector- >

div p- style . p-
tag- style
.

www.kaniyam.com
 55

<html>

<head>
<style>
div > p {background-color:skyblue;}

</style>
</head>
<body>
<div>
<p> Dont Giveup! Keep on Trying! </p>
<b><p>Even though it seems to be impossible, It will
happen in your life one day. </p></b>
</div>

<p>All the very best friends!</p>

<p> Wait to see the miracle in your life!!!!!! </p>
</body>
</html>

www.kaniyam.com
 56

www.kaniyam.com
 57

11 Gallery

Gallery .
Gallery-
, .
gallery- .

<html>

<head>
<style>

div.one {margin:5px; padding:5px; border:1px; solid red;

float:left; text-align:center;}

div.one img { display:inline; margin: 5px; border:1px

solid yellow; width:170px; height:150px;}

div.one a:hover img{border:1px solid blue;}

div.two {text-align:center; font-weight:normal;

width:120px; margin:5px;}

</style>
</head>

www.kaniyam.com
 58

<body>

<div class="one"> <a target="_blank" href="a1.jpg"><img

src="a1.jpg"></a> <div class="two">1</div></div>

<div class="one"> <a target="_blank" href="a2.jpg"><img

src="a2.jpg"></a> <div class="two">2</div></div>

<div class="one"> <a target="_blank" href="a3.jpg"><img

src="a3.jpg"></a> <div class="two">3</div></div>

<div class="one"> <a target="_blank" href="a4.jpg"><img

src="a4.jpg"></a> <div class="two">4</div></div>

</body>

</html>

www.kaniyam.com
 59

<style>- div.one
one division
. <img>-
.
cursor image- image
border a:hover
. one
division- two division-

www.kaniyam.com
 60

image- .
Gallery- image- cursor
image ,
Opacity
. 100- image-
. .

<html>

<head>
<style>

div.one {margin:5px; padding:5px; border:1px; solid red;

float:left; text-align:center;}

div.one img { display:inline; margin: 5px; border:1px

solid yellow; width:170px; height:150px; opacity: 0.4;
filter:alpha(opacity=40);}

div.one a:hover img{border:1px solid blue;opacity: 1;

filter:alpha(opacity=100);}

div.two {text-align:center; font-weight:normal;

width:120px; margin:5px;}

</style>

www.kaniyam.com
 61

</head>

<body>

<div class="one"> <a target="_blank" href="a1.jpg"><img

src="a1.jpg"></a> <div class="two">1</div></div>

<div class="one"> <a target="_blank" href="a2.jpg"><img

src="a2.jpg"></a> <div class="two">2</div></div>

<div class="one"> <a target="_blank" href="a3.jpg"><img

src="a3.jpg"></a> <div class="two">3</div></div>

<div class="one"> <a target="_blank" href="a4.jpg"><img

src="a4.jpg"></a> <div class="two">4</div></div>

</body>

</html>

www.kaniyam.com
 62

IE8 version- filter:alpha(opacity=40);

. opacity:0.4;
.

www.kaniyam.com
 63

12 CSS3

CSS3
. screenshot
.
. .

13 Transitions

. cursor- ,

.
cursor-
.

division-
transition . <div>
</div> program- style section-
.

div {width: 100px; height: 100px; background: red;

transition: width 1s, height 1s;}
div:hover {width: 300px; height: 300px;}

100px divition- 300px

. 100px

www.kaniyam.com
 64

division- cursor- , 300px

div:hover .
1 second-
transition- <div> property- .

division- cursor 1 second-

division- . cursor
1 second- division .

Transition-Delay:

Transition-delay
.
div {transition-delay: 1s; transition: width 1s, height
1s; }
, 1 1
division- .

Transform:

Transform
.
div:hover {width: 300px; height: 300px; transform:
rotate(180deg)}

www.kaniyam.com
 65

180 degree- 300px

. degree- 90, 180, 360, 1200
.

14 Animations

Animation
.

Animation .

division-
. <div> </div> program-
style section-
.

div {width: 100px; height: 100px; background: red; }

100px
. Animation- ,

animation .

div {width: 100px; height: 100px; background: red;

position: relative; animation: nithya 5s; }

www.kaniyam.com
 66

animation: nithya 5s; 'nithya' 5 second-

animation- . 2s
, animation- 2
(animation: nithya 5s 2s;). animation-
.
infinite
(animation: nithya 5s 2s infinite;). .

@keyframes:

animation @keyframes nithya-

. style section- .

@keyframes nithya {0%{left:0px; top:0px;}25%{left:200px;

top:0px;}50%{left:200px; top:200px;}75%{left:0px;
top:200px;}100%{left:0px; top:0px;}}

- division- .
, animation- 5 second 25%
division , 50%
division , 75%, 100% -
. 5 second- division
. 0px, 200px

. @keyframes division
.

www.kaniyam.com
 67

background-color
keyframes - . 25%{background-color: yellow;
left:200px; top:0px;}

www.kaniyam.com
 68

15 Multiple Columns

columns-
.
column-count
. paragraph-
program- style section-
.

<p><b>This blog will tells you about how to make

estimation for an ETL project with SMC Model.</b></p>

<div> Based on the requirement we need to calculate the

overall tables count and we need to categorize them as
simple tables, medium tables and complex tables. Rough
values are given below. Here I have considered all the 30
staging tables as simple. So I have categorized only the
warehouse tables. All the values mentioned in the above
Test Case Unit Efforts are fact values. We cant change
it. So no need to worry about this. We can keep this as it
is and lets go for the staging table & warehouse tables
validation part.</div>

div{-webkit-column-count: 3;}

www.kaniyam.com
 69

paragraph-
3 column- . column-
column-gap: 40px;
. column-
rule . column-rule: 1px solid lightblue; 1px
, solid ,
lightblue .

paragraph- h1- column-

column-
, column-span . style
section- .

h1 {column-span: all;}

www.kaniyam.com
 70

16 Re-sizing

,
border- Re-sizing .
heading, division, paragraph
. heading-
program- style section-
.

<h1>This blog will tells you about how to make estimation

for an ETL project with SMC Model.</h1>

h1 {border: 2px solid; padding: 20px; width: 300px;

resize: both; overflow: auto;}

resize: both heading-

resize . resize
horizontal , vertical .
overflow: auto resize-
.

www.kaniyam.com
 71

17 Shadows

Shadows .
text-shadow , box-
shadow
.
,

.

text division- program-

style section-
.

<h1>This blog will tells you about how to make estimation

for an ETL project with SMC Model.</h1>
<div>SMC Model is nothing but simple, medium and complex
estimation</div>

h1 {text-shadow: 2px 2px 5px red;}

div {width: 300px; height: 50px; border: 2px solid; box-
shadow: 10px 10px 5px blue;}

www.kaniyam.com
 72

text-shadow- 2px 2px

.
5px red ,
pixel-
.

www.kaniyam.com
 73

18 Border Radius

CSS- border content- border-

. CSS3- border-radius
border- ,
. 25px, 50px,
100px
.

heading- program-
style section- .

<h1>This is my Country</h1>
h1 {border-radius: 25px; border: 2px solid black;
padding:20px; width: 200px; height: 100px;}

www.kaniyam.com
 74

border-radius 25px , border-

25px- .

border-radius: 15px 25px 50px 100px;
.

www.kaniyam.com
 75

19 Gradients

division-
gradient . linear-gradient, radical-
gradient .

linear-gradient
. radical-
gradient .

division- program-
style section- .

div {height: 200px; background: linear-gradient(red,

blue); }

www.kaniyam.com
 76

linear-gradient . .
, linear-gradient(to
right, red, blue) .

radical-
gradient .

div {height: 200px; background: radical-gradient(red,

blue, green); }

www.kaniyam.com
 77

20 Displaying Texts

border
CSS3- .
text-overflow, word-wrap, word-break 3
.

text-overflow border- .
clip border-
. ellipsis
border-
... .

text-overflow overflow-

. overflow- hidden
, visible
.

<body>
<p class="a">India is my country. All Indians are my
brothers and sisters. I love my country.</p>
<p class="b">India is my country. All Indians are my
brothers and sisters. I love my country.</p>
<div class="test" style="text-overflow:ellipsis;">This is

www.kaniyam.com
 78

some long text that will not fit in the box</div><br>

<div class="test" style="text-overflow:clip;">This is some
long text that will not fit in the box</div>
</body>

<style>
p.a{white-space: nowrap; width: 200px; border: 1px solid
black; overflow: hidden; text-overflow: clip;}
p.b{white-space: nowrap; width: 200px; border: 1px solid
black; overflow: hidden; text-overflow: ellipsis;}
div.test {white-space: nowrap; width: 200px; overflow:
hidden; border: 1px solid black;}
div.test:hover {text-overflow: inherit; overflow:
visible;}
</style>

www.kaniyam.com
 79

word-wrap border-

.

.
<p> CognizantTechnologySolutions. The bestplacetowork.</p>
p{width: 150px; border: 1px solid green; word-wrap: break-
word;}

word-wrap

.

word-wrap break-all
, keep-all

.

www.kaniyam.com
 80

.
<p class="a">CognizantTechnologySolutions. The
bestplacetowork.</p>
<p class="b">CognizantTechnologySolutions. The
bestplacetowork.</p>

p.a{width: 140px; border: 1px solid black; word-break:

keep-all;}
p.b{width: 140px; border: 1px solid black; word-break:
break-all;}

www.kaniyam.com
 81

21

Cascading Style Sheets -

.
.
,
.

http://www.w3schools.com/css/

http://learnlayout.com/

http://www.csstutorial.net/

http://alistapart.com/

http://www.csszengarden.com/

www.kaniyam.com
 82

22

. Cognizant Technologies
Solutions , Datawarehouse Testing .

,
, .

- nithyadurai87@gmai.com
- http://nithyashrinivasan.wordpress.com

www.kaniyam.com
 83

23

'

www.kaniyam.com
 84

http://freetamilebooks.com/ebooks/learn-mysql-in-tamil/
http://freetamilebooks.com/ebooks/learn-gnulinux-in-tamil-part1/
http://freetamilebooks.com/ebooks/learn-gnulinux-in-tamil-part2/
http://freetamilebooks.com/ebooks/html-in-tamil/
http://freetamilebooks.com/ebooks/learn-mysql-in-tamil-part-2/

www.kaniyam.com
 85

24

.
, , .
.

.
, ,
.

.
.

.
editor@kaniyam.com

.
:



.

.
, .

www.kaniyam.com
 86

.
,
.
.
, , , ,
,
.
.

editor@kaniyam.com .
,
.
editor@kaniyam.com .

.

.

.
.

.

2013 .

http://creativecommons.org/licenses/by-sa/3.0/
.

www.kaniyam.com
 87

,

, , ,
, ,
.

: . editor@kaniyam.com +91 98417 95468

.

www.kaniyam.com
 88

25

Creative Commons ,

.

Name - Nithya Duraisamy

ICICI - 006101540799
Branch - Mcity branch, chengalpattu.
IFSC code - ICIC0000061

www.kaniyam.com