CSS பாணி வரையறை:

 

தலைப்புப் பகுதியில் CSS கோப்பை HTML உடன் இணைக்க < link > ஒட்டு பயன்படுத்தப்படுகிறது. < link > ஓட்டினைப் பயன்படுத்தும் பொழுது, பின்வரும் பண்புக்கூறுகளை அதன் நிலையான மதிப்புகளுடன் சேர்த்துக் கொள்ளலாம். rel = "stylesheet"
1. type = "text/css"
2. href பண்புக்கூறு .css கோப்பை இணைக்கப் பயன்படுகிறது.
< Link > ஓட்டின் பொது வடிவம்:
< Link rel = "stylesheet" type = "text/css" href = CSS_File_Name_with_Extension > 
எ.கா:
< head >
< title > Demonstration of using CSS < /title >
< link > rel = "stylesheet" type = "text/css"
href = "mystyle.css" >
< /head >

ஒரு ஓட்டை ஆவணம் முழுவதும் ஒரே சீராகப் பயன்படுத்த வேண்டியிருக்கும். இதற்கு பாணி ஒட்டு (style) பயன்படுகிறது. வலை ஆவணத்தில் ஒரு குறிப்பிட்ட ஒட்டு எங்கெல்லாம் இடம் பெற்றுள்ளதோ அங்கெல்லாம் ஓட்டின் முன்னியல்பான பண்பியல்புகளை மாற்றி அமைக்க பாணி ஒட்டு பயன்படுகிறது.
எ.கா:
< h3 > என்ற தலைப்பு ஒட்டு பக்கம் முழுவதும் எழுத்து பாணி, அளவு மற்றும் நிறம் ஆகியவற்றை மாற்றி அமைக்க ஓட்டை கீழ்வரும் தலைப்பு பகுதியின் மூலம் வரையறுக்கலாம்.
< style >
h3
{
colr: blue;
font - family: "Copper plate Gothic Bold";
font - size: 14 pt;
}
< /style >

Mystyle.css
H1
{
font - family: "Comic Sans MS";
font - style: italic;
font - size: 24 px;
}
CSS_Test.htm
< html >
< head >
< title > Demonstration of using CSS < /title >
< link rel = "stylesheet" type = "text/css" href = "mystyle.css" >
< /head >
< body >
< H1 > Welcome to CSS < /H1 >
< P >
CSS was invented by HakonWium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a recommendation.
< /P >
< body >
< html >

Mystyle.css
p{
Text - align: centre;
color: Medium Sea Green;
}
CSS_Test.htm
< html >
< head >
< title > Demonstration of using CSS < /title >
< link re = "stylesheet" type = "text/ css" href = "mystyle.css" >
< /head >
< body >
< H1 > Welcome to CSS < /H1 >
< p >
CSS was invented by HakonWium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group. THe CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a recommendation.
< /P >
< body >
< html >

CSS பாணி வரையறுப்பின் இரண்டு முதன்மைப் பகுதிகள் தேர்வி மற்றும் அறிவித்தல் தேர்வி (Selector) என்பது பாணிகளை இடுவதற்கான HTML ஓட்டினைக் குறிக்கிறது.
அறிவித்தல் என்பது பாணி வரையறுப்பைக் கொண்ட குறிமுறைத் தொகுதியைக் குறிக்கிறது. இது நெரிவு அடைப்புக்குறிக்குள் ( { } ) கொடுக்கப்படுகிறது.
ஒரு தேர்விக்கு எத்தனை பண்புகளை வேண்டுமானாலும் சேர்க்கலாம். அவை அரைப்புள்ளியால் பிரிக்கப்படுகிறது. பண்பின் பெயரும் அதன் மதிப்பும் முக்கர் புள்ளியால் ( : ) பிரிக்கப்படுகிறது. ஒவ்வொரு வரையறுப்பும் அரைப்புள்ளியால் ( ; ) முடிக்கப்பட வேண்டும்.

வடிவூட்டல்	பண்புகள்	மதிப்புகள்	எடுத்துக்காட்டு
உரைநிறம்	நிறம்	Predefined_Color_Name	P color:pink; } HI { color: MediumSeaGreen; }
உரை இசைவு	Text-align	Center / Left/Right/ Justify	P { Text-align:center; }
எழுத்து வகை	Font-family	Font_name	P { Font-family:"Times New Roman"; }
எழுத்துப்பாணி	Font-style	Normal/ Italic	P { Font-family:"Times New Roman"; Font-style:Italic; }
எழுத்துப்பாணி தடித்து	Font-weight	Normal/ Bold	P { Font-family:"Times New Roman:; Font-style:Italic; Font-weight:bold; }
எழுத்து அளவு	Font-size	Size in Pixels	P { Font-family:"Times New Roman"; Font-style:Italic; Font-size:14px }
பின்புற வண்ணம்	background-color	Predefined Color_Name	Body { background-color: violet; }
எல்லையின் வண்ணம்	Border	Border thickness border style Predefined borderColor_Name	H2 { border: 2px solid red;)
பின்புற படம்	Background-image	URL("Image name with extension")	Body { background-iamge:url ("Flower gif"); }
	Background repeat	norepeat	Body { background-iamge:url ("Flower gif"); background-repeat:norepeat; }
	Background position	Direction	Body { background-image:url (Flower.gif'); background-repeat:norepeat; background-position:right top; }
பத்தி ஓரம்	Margin-top  Margin-bottom  Margin -left  Margin-right	Margin size in pixesls	P  { Margin-top : 50px  Margin-left : 50 px; }

 

HTML CODE:
Mystyle.css
H1
{
font - family: "Comic Sans MS";
Font - weight: Bold;
border: 2 px solid blue;
}
P {
Font - family: "Cooper Black";
font - style: Italic;
color: Blue;
Font - weight: bold;
}
CSS_Test.htm
< html >
< head >
< title > Demonstration of using CSS < /title >
< link rel = "stylesheet" type = "text/css"
href = "mystyle.css" >
< /head >
< body bgcolor = yellow >
< H1 > State Institute of Education (SIE) < /H1 >
< P >
The State Institute of Education (SIE) was established in 1965 to provide for systematic study of problems relating to School Education under the administration of Directorate od School Education.
< /P >
< body >
< html >
வெளியீடு: