![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
HTML WITH CSS:
நாம் html code பயன்படுத்தி எளிமையான வலை பக்கத்தை உறுவாக்கிவிடலாம்.ஆனால் அந்த வலை பக்கத்தை
மிகவும் அழகாக வடிவமைக்க css பயன்படுகிறது.
ஒவ்வொரு property-க்கும் பெயர் மற்றும் மதிப்பு உண்டு.ஒவ்வொரு property-யையும் தனித்தனியாக பிரித்து காண்ப்பிக்க semicolon(;) இட வேண்டும்.
மூன்று வழிகளில் நாம் இந்த css பயன்படுத்த முடியும்.
- Inline css
- internal css
- external css
ஒரு element-இல் ஒன்று அல்லது ஒன்றுக்கு மேற்பட்ட css property-யை பயன்படுத்த முடியும்.ஒவ்வொரு css property-யை பிரித்து காட்ட semicolon(;) பயன்படுத்த வேண்டும் .
இந்த inline css மூலம் ஒவ்வொரு element-க்கும் தனித்தனியாக style கொடுக்க முடியும்.
internal css:
internal css ஆனது <head> section-ல் <style> என்ற tag-ன் உள்ளே பயன்படுத்தப்படும்.இந்த internal css-யை class name மற்றும் id name-யை கொண்டு பயன்படுத்த முடியும் அல்லது element name -யை பயன்படுத்தி பயன்படுத்த முடியும்.
external css:
external css என்பது ஒரு தனி file ஆகும்.இந்த file ஆனது css code-யை மட்டும் கொண்டு இருக்கும்.
css code என்பது Class name,id name,tag name,…etc போன்றவற்றால் எழுதப்பட்டிருக்கும்.
<link> tag உதவியுடன் external css-யை html file-இல் பயன்படுத்த முடியும்.
பயன்படுத்தும் முறை:
- முதலில் html file-யை உருவாக்க வேண்டும்.
- css file-யை உருவாக்க வேண்டும்.அதனை .css என்ற extension -ல் சேமிக்க வேண்டும்.
- link tag-யை பயன்படுத்தி css file-யை html document-இல் இணைக்க வேண்டும்.link tag ஆனது header section உள்ளே கொடுக்க வேண்டும்.
HTML INLINE CSS
<html>
<head>
</head>
<body>
<h2 style="color:green;text-align:center;">Inline CSS</h2>
<p style="color: red;text-align: center;font-size: 50px;">எனக்கு கிரிக்கெட் விளையாடப் பிடிக்கும்.</p>
</body>
</html>
OUTPUT
HTML INTERNAL CSS USING CLASS NAME
<html>
<head>
<style>
/*Internal CSS using class name*/
.volleyball{color:red;}
.kabbadi{color:green;}
.football{color:yellow;}
</style>
</head>
<body>
<p class="volleyball">எனக்கு வாலிபால் விளையாடப் பிடிக்கும்.</p>
<h6 class="kabbadi">எனக்கு கபடி விளையாடப் பிடிக்கும்.</h6>
<h5 class="football">எனக்கு கால்பந்து விளையாடப் பிடிக்கும்.</h5>
</body>
</html>
OUTPUT
HTML INTERNAL CSS USING ELEMENT NAME
<html>
<head>
<style>
/*Internal CSS using element name*/
p{color:red;}
h6{color:green;}
h5{color:yellow;}
</style>
</head>
<body>
<p>எனக்கு வாலிபால் விளையாடப் பிடிக்கும்.</p>
<h6>எனக்கு கபடி விளையாடப் பிடிக்கும்.</h6>
<h5>எனக்கு கால்பந்து விளையாடப் பிடிக்கும்.</h5>
</body>
</html>
OUTPUT
HTML WITH EXTERNAL CSS
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h6>என்னிடம் கைக்கடிகாரம் உள்ளது.</h6>
<h5>என்னிடம் மிதிவண்டி உள்ளது.</h5>
</body>
</html>
OUTPUT
![[Tamil] How to create React Application](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8d-UOiQT7jAqr1Ep5yEP3cJk7OoBzC-gA7GQbTa1l3Jg6ov48ggfQmlgWj0fSpo8EmQjYgL2z0MRvAsfmcuPHfzK_QEL_7K1ZqbKOmxLEnjg9jH1ZB5AUOKDempIqHlt3obOWhJJNNM/s72-c/node_npm_version.png)
No comments:
Post a Comment