Cascading Style Sheets என்பதே CSS என்றழைக்கப்படுகிறது. இது HTML மூலம் உருவாக்கப்படும் வலைத்தளப் பக்கங்களை இன்னும் அழகுபடுத்த உதவும் ஒரு சிறப்பு வகை நிரல் ஆகும். அதாவது HTML-ல் font color, size, bgcolor என்பது போன்ற பல்வேறு வகையான attributes-ஐப் பயன்படுத்தி நாம் விரும்பும் நிறம் வடிவம், அளவு போன்ற சில குறிப்பிட்ட விவரங்களைக் கொடுப்போம். மேலும் ஒவ்வொரு பக்கத்திற்கும் இத்தகைய விவரங்களை நாம் இணைக்க வேண்டியிருக்கும். அதனால் இவ்வாறு அமைக்கும்போது HTML code படிப்பதற்கும் பார்ப்பதற்கும் மிகவும் கடினமாகத் தெரியும். இதனைத் தவிர்ப்பதற்காக வந்ததே CSS ஆகும்.
அதாவது அழகு சார்ந்த சின்னச்சின்ன விஷயங்களெல்லாம் CSS file-லிலும், அடிப்படையான முக்கிய விஷயங்கள் அனைத்தும் HTML file-லிலும் சேமிக்கப்படும். பின்னர் HTML file-ல் css file-ஐ இணைப்பதன் மூலம் எளிமையான முறையில் ஓர் அழகிய வலைத்தளத்தை உருவாக்க முடியும்.
ஒரு html file-ல் css file இணைக்கப்படுவதை 4 விதங்களில் அமைக்கலாம். அவை,
- External style sheet
- Internal style sheet
- Inline style sheet
- Multiple style sheet
முதலில் style sheets எதையும் பயன்படுத்தாமல் வெறும் html code-ஐ மட்டுமே பயன்படுத்தி ஒரு வலைத்தளத்தை உருவாக்குவோம். பின்னர் அதே வலைத்தளத்தை css-ஐப் பயன்படுத்தி எவ்வாறு உருவாக்குவது என்றும் பார்க்கலாம்.
HTML without CSS
இங்கு css எதையும் பயன்படுத்தவில்லை. வெறும் html code-ஐ பயன்படுத்தி மட்டுமே ஒரு வலைத்தளத்தை உருவாக்கியுள்ளோம்.
[code]
<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>
[/code]
இங்கு <h1> , <p> – க்குள் உள்ளவை என்னென்ன விதங்களில் அமைக்கப்பட வேண்டும் எனும் விவரங்களெல்லாம் அந்தந்த tag-க்குள்ளேயே கொடுக்கப்பட்டுள்ளது. உதாரணத்துக்கு அடிக்கோடிட <u>, சாய்வெழுத்தில் அமைக்க <i>, குறிப்பிட்ட நிறத்திலும் வடிவத்திலும் அமைக்க <font> ஆகிய அனைத்தும் அந்தந்த <h1> , <p> tag-க்குள்ளேயே கொடுக்கப்பட்டுள்ளது. இதனால் html code பார்ப்பதற்கு சற்று கடினமாகவும் குழப்பும் வகையிலும் உள்ளது.
இதன் output பின்வருமாறு.
Internal style sheet
Internal style sheet-ஐப் பயன்படுத்தி மேற்கண்ட அதே வலைதளத்தை உருவாக்குவதற்கான code பின்வருமாறு அமையும்.
[code]
<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;}
</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>
[/code]
இங்கு <h1> , <p> – க்குள் உள்ளவை என்னென்ன விதங்களில் அமைக்கப்பட வேண்டும் எனும் விவரங்களெல்லாம் தனியாக <style> tag – க்குள் கொடுக்கப்பட்டிருப்பதை கவனிக்கவும். இது எப்போதும் <head> tag – க்குள் அமையும்.
h1, p -ன் மதிப்புகள் அனைத்தையும் { } -க்குள் கொடுக்க வேண்டும். இதற்குள் உள்ள மதிப்புகள் { மாற்ற-வேண்டியது:மதிப்பு ; மாற்ற-வேண்டியது:மதிப்பு ; மாற்ற-வேண்டியது:மதிப்பு ; } எனும் விதத்தில் அமையும்.
உதாரணத்துக்கு அடிக்கோடிட்ட <u>-க்கு பதிலாக text-decoration:underline எனவும், சாய்வெழுத்தில் அமைக்க <i>-க்கு பதிலாக font-style:italic எனவும் கொடுக்கப்பட்டுள்ளது. இவையே css-ல் நாம் கற்க வேண்டிய புதிய விஷயங்கள் ஆகும்.
External style sheet
External style sheet-ஐப் பயன்படுத்தி மேற்கண்ட அதே வலைதளத்தை உருவாக்குவதற்கான code பின்வருமாறு அமையும்.
[code]
<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.
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>
[/code]
இங்கு <style> என்ற ஒன்று <head> tag – க்குள் பயன்படுத்தப்படவில்லை. ஆனால் அதற்கு பதிலாக <link> பயன்படுத்தப்பட்டுள்ளது. இதன் பண்புகளான rel, type, href-ல் நமது stylesheet பற்றிய விவரங்களைக் கொடுக்க வேண்டும்.
அதாவது Internal style sheet-ல் <style>-க்குள் கொடுக்கப்படும் மதிப்புகள் அனைத்தையும் தனியாக ஒரு file-ல் கொடுத்து அதனை .css என்று சேமிக்க வேண்டும். இங்கு நான் <h1> , <p> – க்குள் உள்ளவை என்னென்ன விதங்களில் அமைக்கப்பட வேண்டும் எனும் விவரங்களெல்லாம் தனியாக nithya.css எனும் file-ல் சேமித்து அதனை <link>- ல் இணைத்துள்ளேன். இதுவே external style sheet ஆகும்.
nithya.css-ல் உள்ள code பின்வருமாறு.
[code]
<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;}
</style>
[/code]
Inline style sheet
Inline style sheet-ஐப் பயன்படுத்தி மேற்கண்ட அதே வலைதளத்தை உருவாக்குவதற்கான code பின்வருமாறு அமையும்.
[code]
<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>
[/code]
இங்கு <h1> , <p> – க்குள் உள்ளவை என்னென்ன விதங்களில் அமைக்கப்பட வேண்டும் எனும் விவரங்களெல்லாம் அந்தந்த tag-க்குள்ளேயே கொடுக்கப்பட்டுள்ளது. இதற்கும் வெறும் html code-க்கும் உள்ள ஒரே வித்தியாசம் என்னவெனில் <u> , <i> என்று html மொழிகளைப் பயன்படுத்தாமல் {text-decoration:underline ; font-style:italic} என்று css மொழிகளைப் பயன்படுத்தியுள்ளது.
Multiple style sheet
Multiple style sheet என்பது inline, internal, external ஆகியவைகளின் கலவை ஆகும். பின்வரும் உதாரணத்தில் inline, internal , external ஆகிய 3 விதங்களிலும் css இணைக்கப்பட்டிருப்பதைக் காணலாம்.
[code]
<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>
[/code]
இங்கு <h1> – க்குள் உள்ள எழுத்துக்களின் வடிவம் Times New Roman-ஆக இருக்க வேண்டும் என்பது internal css-லும் அவற்றின் நிறம் மற்றும் அளவு external css-லும் கொடுக்கப்பட்டுள்ளது. அவ்வாறே <p> – க்குள் உள்ள எழுத்துக்களின் நிறம் inline css-ல் சிவப்பாகவும் internal css-ல் பச்சையாகவும் கொடுக்கப்பட்டுள்ளதை கவனிக்கவும். இத்தகைய நிலையில் inline css-ல் உள்ள மதிப்பினை மட்டுமே எடுத்துக்கொண்டு internal, external-ல் உள்ள மதிப்புகளை புறக்கணித்துவிடும். அதாவது மதிப்புகளை inline, internal, external எனும் வரிசை முறையில் எடுத்துக்கொள்ளும். இதுவே multiple style sheet ஆகும்.
“எளிய தமிழில் HTML” புத்தகத்தில் Text, font, links, list, tables மற்றும் சில விஷயங்களை எவ்வாறு HTML கொண்டு வெளிப்படுத்துவது என்று பார்த்தோம். இந்தப் புத்தகத்தில் அவை எல்லாவற்றையும் CSS கொண்டு எவ்வாறு அழகாக்குவது என்று பார்க்கலாம்.
து.நித்யா