 |
| Introduction of CSS |
ஒரு வலைதள வடிவமைப்பாளர் (Web Developer) மிக முக்கியமாக தெரிந்துக்கொள்ள வேண்டியவைகளில் ஒன்று CSS ஆகும். CSS என்பதற்கு Cascading Style Sheet என்று பொருள்.
ஒரு வலைத்தளம் பயனரை கவரும் வண்ணம் இருக்க வேண்டும். அதற்கு, அந்த வலைத்தளமானது அழகாவும், கண்களை கவரும்படியாகவும் இருக்க வேண்டும். அதற்கு தான் CSS உதவுகிறது.
வலைத்தளம் ஆனது, மூன்று படிநிலைகளை கொண்டு பொதுவாக வடிவமைக்கப்படுகிறது. அதாவது, முதலில் HTML-ஐப் பயன்படுத்தி, வலைத்தளத்திற்கான Structure உருவாக்கப்படுகிறது.
பின்னர், அதை அழகாக மாற்ற CSS பயன்படுகிறது. பின்னர், அவைகளுக்கு (Functionality) உயிரோட்டத்தை அளிக்க, JavaScript பயன்படுகிறது.
இதில் இரண்டாவதாக, வலைத்தளத்தை பயனர்கள் கவரும் வண்ணம் அழகாக மாற்றப் பயன்படுத்தப்படும் CSS பற்றி, இந்த பதிவில் பார்க்கலாம்.
Table of Contents
- Introduction of CSS
- How to Link CSS?
- Method 1: Internal CSS
- Method 2: External CSS
- Method 3: Inline CSS
- Method 4: @Import
Introduction of CSS
CSS என்பதற்கு Cascading Style Sheet என்று பொருள். ஒரு வலைத்தளத்தை, அழகாக கட்டமைக்க பயன்படும் ஒரு நிரலாகும். இதன் மூலமாக, வலைத்தளத்தில் உள்ள அனைத்தையும் அழகாக மாற்றியமைக்கலாம்.
அதாவது, வார்த்தைகளின் வண்ணம், அளவு, வடிவம் என அனைத்தையும் மாற்றியமைக்கலாம். அதுமற்றுமின்றி, எந்த இடத்தில், எது இடம் பெறவேண்டும் என்று CSS மூலமாக, இடம்பெற செய்யலாம்.
 |
| Mr Tech Code Website |
How to Link CSS?
ஒரு வலைத்தளத்திற்கு நாம் கொடுக்கின்ற CSS Code அல்லது File ஆனது, HTML File-இல் சரியான இடத்தில், முறையாக இணைக்கப்பட்டு இருக்க வேண்டும். அவ்வாறு இணைக்கப்பட்டு இருக்கும் பட்சத்தில், CSS File -இல் கொடுக்கப்படும் Design ஆனது, HTML Code உடன் இணைத்து அழகான வலைத்தளமாக காட்சியளிக்கும்.
HTML File உடன் CSS-ஐ இணைக்க பல்வேறு வழிகள் உள்ளன. அவற்றை ஒவ்வொன்றாக, தற்பொழுது பார்க்கலாம்.
Method 1: Internal CSS
HTML Code உடன், CSS-க்கான Code-ஐ ஒன்றாக கொடுத்து, வலைத்தளத்தை வடிவமைப்பதை Internal CSS என்கின்றோம். இந்த முறையில் CSS-க்கு என்று தனியான File ஆனது தேவைப்படுவதில்லை.
பொதுவாக, CSS File-ஐ Html Code-இல் Head Tag-க்குறிய இடத்தில் தர வேண்டும். அதாவது HTML Code-இல் உள்ள <head>, </head> Tag-க்கு இடையில் <style> Tag கொடுத்து, <style> Tag-க்குரிய Opening மற்றும் Closing Tag-க்கு இடையில் CSS-க்கான Styles-ஐ தர வேண்டும்.
 |
| Internal CSS |
நாம் HTML-இல் உள்ள அனைத்து விதமான Element-களுக்கும், CSS-ஐ பயன்படுத்தி Style-களை கொடுக்க இயலும். அதற்கு, அந்த Element உடைய குறியீட்டையோ, அல்லது Selector என்கின்ற முறையையோ பயன்படுத்தலாம்.
 |
| Selector and CSS Code |
Selector என்பது CSS-இல் பயன்படுத்தப்படும் மிகமுக்கியமான ஒரு பிரிவாகும். இதன் மூலமாக, எந்தவொரு Element-களுக்கும், துல்லியமாக Style-களை கொடுக்க இயலும். Selector-களைப் பற்றி, வேறொரு பதிவில் விரிவாக காணலாம்.
Internal CSS முறையானது,அதிகமாக பயன்படுத்துவதில்லை. காரணம், ஒரு File-இல் அனைத்து விதமான Code-களையும் இடம்பெற செய்வது சிறந்த வழியாக இருக்காது. இது அந்த File உடைய Processing வேகத்தை குறைத்து விடும்.
 |
| Heading with Shadow |
Method 2: External CSS
இந்த முறையில், CSS Design-க்கு என்று தனியாக ஒரு File-ஐ உருவாக்கி, அதில் அந்த வலைத்தளத்திற்கு தேவையான அனைத்து Style-களையும் இடம்பெற செய்யலாம். பெரும்பாலான CSS File-களுக்கு, பொதுவாக Style.css என்றே பெயரை குறிப்பிடுகின்றோம்.
இதில் .css என்கின்ற Extension ஆனது, அந்த File ஆனது CSS உடைய Design-களை கொண்டது என்பதை, கணினிக்கு தெரிவிக்கும் பொருட்டே உருவாக்கப்பட்ட, File Type ஆகும்.
இந்த Style.css File-ஐ, HTML File உடன் இணைக்கும் பட்சத்தில், CSS Style-கள் ஆனது, வலைத்தளத்தில் இயங்கும். இந்த ஸ்டைல்.css File-ஐ, HTML File உடைய <head>, </head> Tag-க்கு இடையில் <link> Tag பயன்படுத்தி இணைக்கப்பட வேண்டும்.
 |
| External CSS |
Link Tag-இல், CSS File-ஐ இணைக்கும் பொழுது, Link Tag-க்குரிய Attributes ஆன rel Attribute-இல் Style Sheet என்று கொடுக்கப்பட வேண்டும். பின்னர், href Attribute-இல் CSS File-க்கான Location Url-ஐ தர வேண்டும்.
 |
| Heading |
 |
| style.css File |
 |
| CSS Code |
இவ்வாறு இணைக்கப்பட்ட CSS File-இல் HTML-க்கான Design-களை, நாம் முன்பே குறிப்பிட்டதுப்போல HTML Element உடைய பெயர்களின் மூலமாகவோ, அல்லது Selectors மூலமாகவும் Styles-ஐ தரலாம்.
|
| Heading with Shadow |
Method 3: Inline CSS
இந்த முறையானது, நாம் Style கொடுக்க விரும்பும் HTML Element உடைய Opening Tag-இல் நேரடியாக CSS உடைய Style-களை தரலாம். இதற்கு HTML Element உடைய Attribute ஆன Style Attribute உதவுகிறது.
இதில் நாம் கொடுக்க விரும்பும் Style-களை, Style Attribute கொடுத்து, பின்னர், Double quotes-க்கு உள்ளே CSS Style-களை தரலாம். இந்த முறைக்கு Inline CSS என்று பெயர்.
 |
| Inline CSS |
ஆனால், இந்த Inline CSS முறையானது பெரும்பாலும் பயன்படுத்துவதில்லை. இந்த முறையில் அதிகப்படியான CSS Code-களை தரும் பொழுது HTML Code-ஐ புரிந்துக்கொள்வது சற்று கடினம்.
|
| Heading with Shadow |
Method 4: @Import
இந்த முறையானது, External மற்றும் Internal CSS முறைகளின் கலவையை போன்றது. இந்த முறையிலும், CSS-க்கு என்று தனியாக ஒரு File-ஐ உருவாக்கி, அந்த File-ஐ Internal CSS முறையை போல, <head>, </head> Tag-களுக்கு இடையில் @Import எனக்கொடுத்து CSS File உடைய Location URL-ஐ கொடுப்போம்.
 |
| @import Method |
|
| Heading with Shadow |
Conclusion
இந்த பதிவின் மூலமாக, CSS Style-களை HTML File உடன், வெவ்வேறான முறைகளில் எவ்வாறு இணைக்கலாம் என்பதையும், எது சிறப்பான முறை என்பதையும் தெரிந்துக்கொண்டு இருப்பீர்கள்.
0 Comments