Introduction:

அனைவருக்கும் வணக்கம். கடைசியாக நாம் போட்ட பதிவில் HTML 5 என்றால் என்ன மற்றும் அதன் பயன்பாடுகளை பற்றி ஒரு விரிவாக்கம் ஆகா எடுத்துக்காட்டுடன் பார்த்தோம். இந்த பதிவில் CSS 3 என்றால் என்ன, எவ்வாறு அதனை பயன்படுத்தலாம் என்பதை பாப்போம். இதில் உங்களுக்கு ஏதேனும் கேள்வி இருந்தால் Comment Box இல் கேளுங்கள். இந்த CSS  ஐ நீங்கள் செய்துபார்க்க சிறந்த சைட் ஆனது w3schools ஆகும். இப்பொழுது CSS பற்றி பார்க்கலாம். Web Design  கற்றுக்கொள்ளும் அனைவர்க்கும் ஓர் குழப்பம் ஆனது இருக்கும், வெப் டிசைனிங் கற்றுக்கொள்ளும் நமக்கு எதற்கு css மற்றும் html என்று. உங்கள் கேள்விக்கான பதிலை இப்பொழுது பார்க்கலாம். அனைவர்க்கும் தெரியும் ஒரு website ஐ எடுத்துக்கொள்ளலாம். ( Ex: Facebook )

Facebook with CSS

Facebook without CSS

இப்பொழுது நீங்களே பார்க்கலாம் இதன் வித்யாசத்தை.

CSS:

CSS என்பது “Cascading  Style Sheet” ஆகும். இந்த CSS என்பது programming language கிடையாது. ஏனென்றால், programming  language  எடுத்துக்காட்டாக addition 5+5=10 இது லொஜிக்கல் ஆகா calculate செய்து டைனமிக் ஆகா 10 என்ற அவுட் ஆனது கிடைக்கும். அனால் ஸ்டைலிங் language இல் இந்த லொஜிக்கல் ஆனது செயல்படாது. இந்த css வைத்துக்கொண்டு நம்மால் addition substraction போன்றவற்றை செய்ய முடியாது. மற்றும் லாஜிக் ஆனா arithmetic operation களை இதில் செய்ய முடியாது.

இந்த css ஆனது எங்கெல்லாம் பயன்படுமென்றால், நீங்கள் செய்யும் website இல் layout build பண்ணவும், சைட் ஐ அழகாக மாற்றவும் இந்த css ஆனது பயன்படுகிறது. நீங்கள் செய்த css ன் அவுட் ஆனதை பார்க்க சிறந்த website கள் இதோ,

• Chrome
• Firefox
• Safari
• Microsoft Edge
• மற்றும் சில…

Internet explorer பயன்படுத்த வேண்டாம்.

மற்றும் இதில் coding எழுத சிறந்த இடங்களை பார்ப்போம்,

• Sublime text
• Visual Studio Code
• Atom
• Bractets
• Adobe Dreamweaver

இதை எப்படி பயன்படுத்துவது என்று பாப்போம்.

How To Use CSS :

CSS இல் இரண்டு விதம் உள்ளது.

1) Inline CSS

2) External CSS

Inline CSS :

CSS  செய்வதற்கு முன் அதெற்கென தனி Folder ஆனது உருவாக்க வேண்டும். பின்பு,  நீங்கள் ஒரு HTML file ஆனது உருவாக்க வேண்டும்.

HTML ஐ உருவாக்கிய பின் அதனை index.html என அந்த உருவாக்கிய folder இல் செய்ய வேண்டும்.

பின்பு அந்த html இல் ஏதேனும் ஒரு <h1> டேக்  ஆனது உருவாக்கலாம்.

அதில் inline css முறையில் அதன் color ஐ மாற்றுவது எப்படி என்று பாப்போம்.

 

நீங்கள் inline css பயன்படுத்தும்போது அதில் style என்ற டேக்உள் போடா வேண்டும். அந்த style tag உள்ளே உங்களுக்கு எந்தவிதமான style ஆனது பயன்படுத்த போகிறீர்களோ அதன் name ஐ அழைக்க வேண்டும். basic டேக் கள் இதோ,

Margin :

Margin என்பது நீங்கள் ஒரு div  அல்லது ஏதேனும் ஒரு டேக் ஆனது பயன்படுத்தினால் அதன் வெளிப்புற இடத்தை குறிப்பதாகும். இந்த margin இல் நான்கு option கள் உள்ளது. அவை, margin-top, margin-bottom, margin-right, margin-left ஆகும். இதில் margin-top என்பது ஒரு படத்துக்கும் அல்லது text கும் உள்ள border கு  மேலே  இடைவெளியை குறிக்கும். அதே போல் தான் bottom ,left  மற்றும் right ஆகும். Marginகு எடுத்துக்காட்டாக

Padding :

Padding  என்பது நீங்கள் ஒரு div  அல்லது ஏதேனும் ஒரு டேக் ஆனது பயன்படுத்தினால் அதன் உட்புற  இடத்தை குறிப்பதாகும். Marginஐ போல் இந்த padding இல் நான்கு option கள் உள்ளது. அவை, padding-top, padding-bottom, padding-right, padding-left ஆகும். இதில் padding-top என்பது ஒரு படத்துக்கும் அல்லது text கும் உள்ள border கு  உள்ளே உள்ள  இடைவெளியை குறிக்கும். அதே போல் தான் bottom ,left  மற்றும் right ஆகும். paddingகு எடுத்துக்காட்டாக

Color :

Color என்பது text ன் color ஐ மாற்ற பயன்படும். இதன் டேக் ஆனது <h1 style=”color:red”>Welcome to tech  know  tamil </h1> என்று கொடுத்தால் அதன் அவுட் ஆனது

இவ்வாறு கிடைக்கும். இதில் உங்களுக்கு எந்த color ஆகா மாற்றவேண்டுமென்றாலும் மாற்ற முடியும்.

Background – color :

Background-color என்பது நீங்கள் ஒரு div ஆனது உருவாக்கி அதற்கு Width and Height ஆனது கொடுத்த பின் அதற்கு color ஆனது கொடுப்பதாகும்.இந்த முறை மூலம் text கு color கொடுக்க முடியாது. div கு மட்டுமே கொடுக்க முடியும். உதாரணமாக

இவ்வாறு கொடுக்க முடியும்.

Width :

Width என்பது div ஆனது எவ்வளவு பெரிதாகவோ அல்லது சிறிதாகவோ இருக்கவேண்டும் என்பதை குறிப்பதாகும். நீங்கள் width:”20px ” என கொடுத்தால் 20px கொண்ட கட்டம் ஆனது கிடைக்கும்.

Height :

Height என்பது ஒரு div ஆனது கொடுத்தபின் அதன் உயரம் எவ்வளுவு இருக்க வேண்டும் என்பதை குறிப்பதாகும்.

முடிவு :

இதிலிருந்து உங்களுக்கு ஒரு தெளிவானது, CSS  இல் கிடைத்திருக்கும் என நினைக்கிறேன். இந்த பதிவானது உங்களுக்கு பிடித்திருந்தால் இதற்கு like மற்றும் share  செய்யுங்கள். மீண்டும் மற்றொரு பதிவில் சந்திக்குறேன். உங்களது கருது அல்லது ஏதேனும் கேள்வி ஆனது இருந்தால் அதனை comment box இல் கேளுங்கள். நன்றி.