CSS என்பது
என்ன?
CSS என்பது கேஸ்கேடிங் ஸ்டைல் ஷீட்(cascading style sheet) என்பதை குறிக்கின்றது.
Css
என்பது டிசைனிங்க் மொழியாகும்.html பக்கங்களை பார்ப்பவரை ஈர்க்கும் வண்ணம்
ஈர்க்கும் வண்ணம் வடிவமைக்க css உதவுகின்றது.
Css
என்பதனால் நண்மைகள் என்ன?
நேரத்தை மிச்சசப் படுத்துகின்றது.
பேஜ் லோடிங்க் விரைவாக
நடைபெறுகின்றது.
நிர்வாகிப்பது எளிது.
பிளாட்பார்ம் இண்டிபெண்டெண்ட்
Css
ன் பகுதிகள் யாது?
1.செலெக்டர்-எந்த html டேக்கிற்க்கு ஸ்டைல் அப்ளை செய்ய வேண்டும்.
2.
பிராப்பர்ட்டி-இது எந்த ஸ்டைல் அப்ளை செய்ய வேண்டும் என்பதைக் குறிக்கின்றது.
3.மதிப்பு-அந்த
பிராப்பட்டியின் மதிப்பைக் குறிக்கின்றது.
டைப்
செலக்டர் என்பது என்ன?
டைப்
செலக்டர் என்பது எந்த html டேக்கிற்கு ஸ்டைல் அப்ளை செய்ய வேண்டும் என செலக்ட்
செய்வது.
சான்று:
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
7.
h1 {
8.
color: lightblue;
9.
text-align: left;
10.
}
11.
12.
p {
13.
font-family: verdana;
14.
font-size: 20px;
15.
text-align: center;
16.
}
17.
</style>
18.
</head>
19.
<body>
20.
21.
<h1>Muthu karthikeyan</h1>
22.
<p>freelance software trainer</p>
23.
24.
</body>
25.
</html>
யுனிவர்சல்
செலக்டர் என்பது என்ன?
யுனிவர்சல்
செலக்டர் என்பது எல்லா html எலிமெண்டுகளையும் செலெக்ட் செய்கின்றது.
சான்று
நிரல்.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
7.
*{
8.
color: red;
9.
text-align: center;
10.
}
11.
12.
</style>
13.
</head>
14.
<body>
15.
16.
<h1>Muthu karthikeyan</h1>
17.
<p>freelance software trainer</p>
18.
19.
</body>
20.
</html>
டிசெண்டெண்ட்
செலக்டர் என்பது என்ன?
ஒரு
எலிமென்டின் உள்ளே இருக்கும் மற்ற எலிமென்டிற்கு ஸ்டைல் அப்ளை செய்ய இது பயன்படுகின்றது.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
h1{
7.
color:red;
8.
}
9.
h1 em{
10.
color: blue;
11.
12.
}
13.
14.
</style>
15.
</head>
16.
<body>
17.
18.
<h1>Muthu <em>karthikeyan</em></h1>
19.
<p>freelance software trainer</p>
20.
21.
</body>
22.
</html>
Output
கிளாஸ்
செலக்டர் என்பது என்ன?
கிளாஸ்
செலெக்டர் ஆனது இரு வேறு விதமான html டேக்கிற்கு ஒரே ஸ்டைலை அப்ளை செய்ய
பயன்படுகின்றது.
சான்று நிரல்
1.
< DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
.heading{
7.
color:red;
8.
text-align:center;
9.
}
10.
11.
12.
</style>
13.
</head>
14.
<body>
15.
16.
<h1 class="heading">Muthu karthikeyan</h1>
17.
<p class="heading">freelance software
trainer</p>
18.
19.
</body>
20.
</html>
கிளாஸ்
செலக்டரை பயன்படுத்தி குறிப்பிட்ட எலிமென்ட் டைப்பிற்கு மட்டும் அப்ளை செய்ய
முடியுமா?
முடியும்.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
h1.heading{
7.
color:red;
8.
text-align:center;
9.
}
10.
11.
12.
</style>
13.
</head>
14.
<body>
15.
16.
<h1 class="heading"> Muthu
karthikeyan</h1>
17.
<p class="heading">freelance software
trainer.</p>
18.
19.
</body>
20.
</html>
Id
செலக்டர் என்பது என்ன?
இது
யுனிக் ஆக குறிப்பிட்ட எலிமெண்டிற்க்கு மட்டுக் ஸ்டைல் அப்ளை செய்ய உதவுகின்றது.
சான்று
நிரல்.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
#heading{
7.
color:red;
8.
text-align:center;
9.
}
10.
#para{
11.
color:blue;}
12.
13.
14.
</style>
15.
</head>
16.
<body>
17.
18.
<h1 id="heading">Muthu
karthikeyan</h1>
19.
<p id="para">freelance software trainer</p>
20.
21.
</body>
22.
</html>
Id
செலக்டரை குறிப்பிட்ட் டைப் எலிமென்டிற்க்கு மட்டும் பயன்படுத்த முடியுமா?
முடியும்.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
h1#heading{
7.
color:red;
8.
text-align:center;
9.
}
10.
11.
</style>
12.
</head>
13.
<body>
14.
15.
<h1 id="heading">c#corner</h1>
16.
<p id="heading">community for developer</p>
17.
18.
</body>
19.
</html>
சைல்ட்
செலக்டர் என்பது என்ன?
இது
ஒரு html டேக்கின் சைல்ட் டேக்கை செலட் செய்ய பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
body>p{
7.
color:red;
8.
font-size:30px;
9.
}
10.
</style>
11.
</head>
12.
<body>
13.
14.
<h1 id="heading">Muthu karthikeyan</h1>
15.
<p id="heading">freelance software
trainer</p>
16.
17.
18.
</body>
19.
</html>
ஆட்ரிபியூட்
செலக்டர் என்பது என்ன?
ஒரு
ஆட்ரிபியூட்டை அடிப்படையாக கொண்டு செலெக்ட் செய்தல் ஆகும்.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
input[type="text"]
7.
{
8.
color:red;
9.
background-color:powderblue;
10.
font-size:20px;
11.
}
12.
</style>
13.
</head>
14.
<body>
15.
16.
<h1 id="heading">Muthu karthikeyan</h1>
17.
<p id="heading">freelance software
trainer</p>
18.
enter your name<input type="text"/>
19.
</body>
20.
</html>
Lang
அட்ரிபியூட் உள்ள எல்லா பாராகிராப் எலிமெண்டயும் செலக்ட் செய்வது எப்படி?
இதற்கு
p[lang] பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
p:lang(it) {
7.
background: yellow;
8.
}
9.
</style>
10.
</head>
11.
<body>
12.
13.
<h1 id="heading">Muthu karthikeyan</h1>
14.
<p id="heading">freelance software
trainer.</p>
15.
<p lang=it>programmingintamil.blogspot.com</p>
16.
</body>
17.
</html>
Html பக்கங்களில் css ஆனதை எவ்வாறெல்லாம் பயன்படுத்தலாம்?
நான்கு
வழிகளில் பயன்படுத்தலாம்.
Style
எலிமெண்ட்
கொண்டு html பக்கத்திலேயே எழுதல்.
ஒரு
html எலிமெண்டின் கூடவே இன்லைன் ஆக எழுதுதல்
எக்ஸ்டர்னல்
ஆக எழுதி வைத்து ஒன்றிற்கு மேற்கண்ட பக்கங்களுக்கு பொதுவான ஸ்டைல் ஷீட்டை
பயன்படுத்துதல்.
@import
பயன்படுத்தி எக்ஸ்டர்னல் ஷீட்டை இம்போர்ட் செய்தல்.
%
அளவிடுதல் யூனிட்டின் பயன் என்ன?
%
ஆனது மதிப்பை சதவீதக் கணக்கில் குறிப்பிட பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
div{
6.
width:20%;
7.
background-color:lightblue;}
8.
9.
p:lang(it) {
10.
background: yellow;
11.
}
12.
</style>
13.
</head>
14.
<body>
15.
<div>
16.
<h1 id="heading">Muthu karthikeyan</h1>
17.
</div>
18.
<p id="heading">freelance software
trainer</p>
19.
<p lang=it>programmingintamil.blogspot.in</p>
20.
</body>
21.
</html>
Cm
மெசர்மென்ட் யூனிட் பயன் யாது?
.இது அளவிடுதலை
சென்டிமீட்டர் கணக்கில் குறிப்பிட பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
div{
6.
width:20%;
7.
background-color:lightblue;
8.
border-style: dotted;
9.
border-width: 0.1cm;}
10.
11.
p:lang(it) {
12.
background: yellow;
13.
}
14.
</style>
15.
</head>
16.
<body>
17.
<div>
18.
<h1 id="heading">Muthu karthikeyan</h1>
19.
</div>
20.
<p id="heading">software trainer</p>
21.
<p lang=it>programmingintamil.blogspot.in</p>
22.
</body>
23.
</html>
ஒரு எலிமெண்டின்
பின்னனி வண்ணத்தைக் குறிப்பிடுவது எப்படி?
அதற்கு
background-color
பிராப்பர்ட்டி
பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
div{
6.
width:20%;
7.
background-color:lightblue;
8.
9.
}
10.
</style>
11.
</head>
12.
<body>
13.
<div>
14.
<h1 id="heading">Muthu karthikeyan</h1>
15.
</div>
16.
<p id="heading">freelance software
trainer</p>
17.
</body>
18.
</html>
பின்னனி
படத்தைக் குறிப்பிடுவது எப்படி?
சான்று நிரல்
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
body {
6.
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
7.
background-repeat: no-repeat;
8.
}
9.
</style>
10.
</head>
11.
<body>
12.
<br>
13.
<h1>Muthu karthikeyan</h1>
14.
15.
</body>
16.
</html>
பின்னனி
படத்தை ரிபீட் செய்ய எது பயன்படுகின்றது.
bachground-repeat அதற்கு பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
body {
6.
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
7.
background-repeat: repeat-y;
8.
}
9.
</style>
10.
</head>
11.
<body>
12.
<br>
13.
<h1>Muthu karthikeyan</h1>
14.
15.
</body>
16.
</html>
ஒரு
படத்தின் இருப்பிடத்தை குறிப்பிடுவது எப்படி?
இதற்கு
background-position
பண்பு
பயன்படுகின்றது.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
body {
6.
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
7.
background-repeat: no-repeat;
8.
background-position: center;
9.
}
10.
</style>
11.
</head>
12.
<body>
13.
<br>
14.
<h1>Muthu karthikeyan</h1>
15.
16.
</body>
17.
</html>
பேக்ரவுண்ட்
இமேஜை ஸ்குரோல் செய்வதை எந்த பிராப்பர்ட்டி கண்ட்ரோல் செய்கின்றது?
அதற்கு background-attachment என்ற
பிராப்பர்ட்டி பயன்படுகின்றது.
சான்று
நிரல்
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
body {
6.
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
7.
background-repeat: no-repeat;
8.
background-position: center;
9.
background-attachment: fixed;
10.
}
11.
</style>
12.
</head>
13.
<body>
14.
<br>
15.
<h1>Muthu karthikeyan</h1>
16.
</body>
17.
</html>
ஒரு
ஃபாண்டை மாற்றுவது எப்படி?
அதற்கு
font-family பண்பு பயன்படுகின்றது
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
p.serif {
6.
font-family: "Times New Roman", Times, serif;
7.
}
8.
9.
p.sansserif {
10.
font-family: Arial, Helvetica, sans-serif;
11.
}
12.
</style>
13.
</head>
14.
<body>
15.
16.
<h1>Muthu karthikeyan</h1>
17.
<p class="serif">freelance software
trainer</p>
18.
<p class="sansserif">programmingintamil.blogspot.in</p>
19.
20.
</body>
21.
</html>
ஒரு ஃபாண்டை போல்ட் மற்றும் இட்டலிக்
செய்வது எப்படி?
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5.
6.
7. .italic {
8. font-style: italic;
9. color:red;
10.
}
11.
12.
.oblique {
13.
font-style: oblique;
14.
}
15.
</style>
16.
</head>
17.
<body>
18.
19.
20.
<h1 class="italic">Muthu karthikeyan</h1>
21.
<p class="oblique">freelance software
trainer</p>
22.
23.
</body>
24.
</html>
Small
–caps எஃப்ஃபெக்டிற்கு
எந்த பிராப்பர்ட்டி பயன்படுகின்றது.
Font-variant
என்ற
பண்பு பயன்படுகின்றது.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5.
6.
7. .italic {
8. font-style: italic;
9. color:red;
10.
}
11.
12.
.oblique {
13.
font-style: oblique;
14.
font-variant: small-caps;
15.
}
16.
</style>
17.
</head>
18.
<body>
19.
20.
21.
<h1 class="italic">Muthu karthikeyan</h1>
22.
<p class="oblique">freelance software
trainer.</p>
23.
24.
</body>
25.
</html>
ஒரு ஃபாண்ட் ஆனது
எவ்வளவு போல்ட் ஆக இருக்க வேண்டும் என்பதை எவ்வாறு குறிப்பிடுவது?
font-weight பிராப்பர்ட்டி அதற்கு பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
6.
7.
.italic {
8.
font-style: italic;
9.
color:red;
10.
font-weight: bold;
11.
}
12.
13.
.oblique {
14.
font-style: oblique;
15.
font-weight: 900;
16.
}
17.
</style>
18.
</head>
19.
<body>
20.
21.
22.
<h1 class="italic">Muthu karthikeyan</h1>
23.
<p class="oblique">freelance software
trainer</p>
24.
25.
</body>
26.
</html>
ஒரு
டெக்ஸ்டின் ஃப்லோ மற்றும் ஃபார்மட்டிங்கை கன்ட் ரோல் செய்யும் பிராப்பர்ட்டி எது?
White-space
பிராப்பர்ட்டி பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
p {
6.
white-space: nowrap;
7.
}
8.
</style>
9.
</head>
10.
<body>
11.
12.
<p>
13.
Muthukarthikeyan
14.
c# corner
15.
Muthukarthikeyan
16.
Muthukarthikeyan
17.
Muthukarthikeyan
18.
Muthukarthikeyan
19.
Muthukarthikeyan
20.
Muthukarthikeyan
21.
Muthukarthikeyan
22.
Muthukarthikeyan
23.
Muthukarthikeyan
24.
Muthukarthikeyan
25.
Muthukarthikeyan
26.
Muthukarthikeyan
27.
Muthukarthikeyan
28.
Muthukarthikeyan
29.
Muthukarthikeyan
30.
Muthukarthikeyan
31.
Muthukarthikeyan
32.
Muthukarthikeyan
33.
Muthukarthikeyan
34.
Muthukarthikeyan
35.
Muthukarthikeyan
36.
Muthukarthikeyan
37.
Muthukarthikeyan
38.
Muthukarthikeyan
39.
Muthukarthikeyan
40.
Muthukarthikeyan
41.
Muthukarthikeyan
42.
Muthukarthikeyan
43.
Muthukarthikeyan
44.
Muthukarthikeyan
45.
Muthukarthikeyan
46.
Muthukarthikeyan
47.
Muthukarthikeyan
48.
Muthukarthikeyan
49.
Muthukarthikeyan
50.
Muthukarthikeyan
51.
Muthukarthikeyan
52.
Muthukarthikeyan
53.
</p>
54.
55.
</body>
56.
</html>
லெஃப்ட் மார்ஜினை குறிப்பிட எந்த பிராப்பர்ட்டி
பயன்படுகின்றது.
margin-left
என்ற
பண்பு பயன்படுகின்றது.
சான்று நிரல்
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
.lm{
6.
margin-left: 5cm;
7.
}
8.
</style>
9.
</head>
10.
<body>
11.
12.
<p>Muthu karthikeyan</p>
13.
<p class="lm">freelance software
trainer</p>
14.
</body>
15.
</html>
பாட்டம்
பேடிங்கைக் குறிப்பிடுவது எப்படி?
padding-bottom என்ற
பிராப்பர்ட்டி பயன்படுகின்றது.
Example
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
p.padding {
6.
padding-bottom: 2cm;
7.
}
8.
9.
p.padding2 {
10.
padding-bottom: 50%;
11.
}
12.
</style>
13.
</head>
14.
<body>
15.
16.
<p>Muthu karthikeyan</p>
17.
18.
<p class="padding">freelance software
trainer</p>
19.
20.
<p class="padding2">programmingintamil.blogspot.in</p>
21.
22.
</body>
23.
</html>
டாப்
பேடிங்கை குறிப்பிடுவது எப்படி?
padding-top என்ற பண்பு பயன்படுகின்றது.
1.
<!DOCTYPE html>
2.
<html>
3.
<head>
4.
<style>
5.
p.padding {
6.
7.
padding-top: 2cm;
8.
}
9.
10.
</style>
11.
</head>
12.
<body>
13.
14.
<p>Muthu karthikeyan</p>
15.
16.
<p class="padding">freelance software
trainer</p>
17.
18.
<p class="padding2">programmingintamil.blogspot.in</p>
19.
20.
</body>
21.
</html>
-நன்றி
முத்து
கார்த்திகேயன்,மதுரை.
