Professional Documents
Culture Documents
Learn Css in Tamil PDF
Learn Css in Tamil PDF
CSS
www.kaniyam.com
3
, .
""
, 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
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
www.kaniyam.com
9
CSS file-,
HTML file-
. HTML file- css file-
.
www.kaniyam.com
10
<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
<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-
.
<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
www.kaniyam.com
16
nithya.css file- <link>- .
external style sheet .
nithya.css- .
<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
.
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
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
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
www.kaniyam.com
26
4 Links
a: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>
<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>
www.kaniyam.com
29
<li>Automation Testing</li>
</ul>
</body>
</html>
list-type-style list-
.
Visibility
. hidden
.
www.kaniyam.com
30
<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>
</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
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 .
www.kaniyam.com
37
division- content-
margin 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
.
.
www.kaniyam.com
41
.
no repeat .
.
www.kaniyam.com
42
no-repeat .
no-repeat right top .
.
www.kaniyam.com
43
repeat-x
, repeat-y
, . .
www.kaniyam.com
44
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;
.
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 .
<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>
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>
www.kaniyam.com
53
<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>
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>
www.kaniyam.com
56
www.kaniyam.com
57
11 Gallery
Gallery .
Gallery-
, .
gallery- .
<html>
<head>
<style>
</style>
</head>
www.kaniyam.com
58
<body>
</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>
</style>
www.kaniyam.com
61
</head>
<body>
</body>
</html>
www.kaniyam.com
62
www.kaniyam.com
63
12 CSS3
CSS3
. screenshot
.
. .
13 Transitions
. cursor- ,
.
cursor-
.
division-
transition . <div>
</div> program- style section-
.
www.kaniyam.com
64
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
14 Animations
Animation
.
Animation .
division-
. <div> </div> program-
style section-
.
100px
. Animation- ,
animation .
www.kaniyam.com
66
@keyframes:
- 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-
.
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 .
h1 {column-span: all;}
www.kaniyam.com
70
16 Re-sizing
,
border- Re-sizing .
heading, division, paragraph
. heading-
program- style section-
.
www.kaniyam.com
71
17 Shadows
Shadows .
text-shadow , box-
shadow
.
,
.
www.kaniyam.com
72
www.kaniyam.com
73
18 Border Radius
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
www.kaniyam.com
75
19 Gradients
division-
gradient . linear-gradient, radical-
gradient .
linear-gradient
. radical-
gradient .
division- program-
style section- .
www.kaniyam.com
76
linear-gradient . .
, linear-gradient(to
right, red, blue) .
radical-
gradient .
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
<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>
www.kaniyam.com
81
21
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
,
, , ,
, ,
.
www.kaniyam.com
88
25
Creative Commons ,
.
www.kaniyam.com