HTML கற்போம் - 8
Styling HTML with CSS
CSS ஆனது HTML 4 இலே அறிமுகப்படுத்தப்பட்டது, HTML ஆவனம் ஒன்றினை அழகு படுத்துவதற்காக பயன்படுத்தப்படும் ஒரு முறையாகும்.
CSS ஆனது பின்வரும் வளிமுறைகளில் HTML ஆவனம் ஒன்றினுல் உள்ளடக்க முடியும்.
Inline Styles
<p style="color:blue;margin-left:20px;">This is a paragraph.</p> இங்கு style attributeஆனது <p> tag இனுல் பயன்படுத்தப்படும் விதம் காட்டப்பட்டுள்ளது.
HTML Style Example - Background Color
கீழ் வரும் உதாரணம் ஊடாக body, Heading, Paragraph போன்ற பகுதிகளுக்கு பின்னுட்டல் நிறம் வழங்கும் முறைகாட்டப்பட்டுள்ளது.
Example
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
HTML Style Example - Font, Color and Size
Example
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
HTML Style Example - Text Alignment
Example
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Internal Style Sheet
குறிப்பட்ட ஒரு HTML document ஒன்றினுல் குறிப்பட்ட ஒரு தனித்துவமான style இனை பயன்படுத்துவதற்கு இம்முறை பயன் படுத்தப்படும். இதனை HTML page ஒன்றினுல் <head> பகுதியினுல் <style> tag இனை பயன்படுத்தி வரையறை செய்யப்படும்.
Example
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
இங்கு body இன் பின்புற நிறத்தினையும், paragraph இன் எழுத்தின் நிறமும் வரையறை செய்யப்பட்டுள்ளது.
External Style Sheet
இம் முறையின் கீழ் ஒரு style sheet ஆவனத்தினை வெவ்வேறான HTML page இனுல் இணைப்பினை ஏற்படுத்தும் முறையாகும். இதன் நன்மைகள் என்னவெனில்
· ஒவ்வரு ஆவனத்துக்கும் style எழுதுவதக்கான நேர விரையம் குறைக்கப்படும்
· குறிப்பிட்ட ஒருமைப்படுத்தப்பட்ட style ஆனது வெவ்வேறு ஆவனங்களில் பயன்படுத்த முடியும்.
· ஒரு external style sheet இல் மாற்றத்தினை ஏற்படுத்துவதன் ஊடாக ஒரு இணைய தளத்தில் உள்ள (Web site) எல்ல பக்கங்களிலும் மாற்றத்தினை ஏற்படுத்த முடியும்.
ஒரு style sheet ஆவனத்தினை HTML page இனுல் இணைப்பதற்கு <link> tagபயன்படுத்தப்படும். இது <head> tag பகுதியினுல் உள்ளடக்கப்படும்.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
இங்கு mystyle.css என்பது stylesheet ஆவனம் ஆகும்.
Example
Exstyle.css file
body
{
background-color:#c0f2d9;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:”arial”;
font-size:20px;
}
HTML file
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”Exstyle.css”/>
</head>
<body>
<h1> Our School </h1>
<p> My School is 1AB School </p>
</body>
</html>
