![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
மூன்று வழிகளில் நம்மால் CSS-யை HTML உடன் இணைக்க முடியும்.
1.)Inline CSS
2.)Internal CSS
3.)External CSS
Inline CSS:
Inline CSS என்பது ஒரு element-க்கு மட்டும் style-யை கொடுக்க பயன்படுகிறது.
Syntax
<html_tag style="css_Property:Value";></html_tag>
Example:
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:yellow;background-color:gray;font-size:40px;">Inline CSS</p>
</body>
</html>
Internal CSS:
Internal CSS என்பது ஒரே ஒரு html page-க்கு மட்டும் style-யை கொடுக்க பயன்படுகிறது.
Internal style-யை <style> element-க்கு உள்ளே தான் கொடுக்க வேண்டும்.
முக்கியமாக, <style> element ஆனது head section-க்கு உள்ளே கொடுக்க வேண்டும்.
Syntax
<style>
selector{
property:value;
}
</style>
Example:
<html>
<head>
<title>Internal CSS</title>
<style>
p{
color:red;
background-color:gray;
font-size:45px;
}
</style>
</head>
<body>
<p>Internal CSS</p>
</body>
</html>
External CSS:-
External CSS என்பது அனைத்து HTML page-க்கும் style-யை கொடுக்கப் பயன்படுகிறது.
<link> என்கிற element-க்கு உள்ளே தான் External CSS file ஆனது கொடுக்கப்பட்டிருக்கும்.
இந்த link element-யை அனைத்து webpage-க்கும் உள்ளே கண்டிப்பாக கொடுக்க வேண்டும்.
இந்த link element-யை head section-க்கு உள்ளே தான் கொடுக்க வேண்டும்.
Syntax
<head>
<link href="URL" rel="relation_type"></link>
</head>
href -> href என்பது எந்த இடத்தில் external style sheet இருக்கிறது என்கிற இடத்தைக் குறிக்கின்றது.
rel -> rel என்பது html-க்கும் style sheet-க்கும் ஒரு தொடர்பை ஏற்படுத்துகிறது.
External style sheet-க்கு உள்ளே CSS Code-யை மட்டும் கொடுக்க வேண்டும்.html code-யை கொடுக்க கூடாது.
External style sheet-யை save செய்யும்போது .CSS என்கிற extension-யை கொடுக்க வேண்டும்.
demo.html
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="demo.css"></link>
</head>
<body>
<p>External CSS</p>
</body>
</html>
demo.css
p{
color:blue;
background-color:red;
font-size:50px;
}
![[Tamil] How to create React Application](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8d-UOiQT7jAqr1Ep5yEP3cJk7OoBzC-gA7GQbTa1l3Jg6ov48ggfQmlgWj0fSpo8EmQjYgL2z0MRvAsfmcuPHfzK_QEL_7K1ZqbKOmxLEnjg9jH1ZB5AUOKDempIqHlt3obOWhJJNNM/s72-c/node_npm_version.png)
![[Tamil] Width and Height Using CSS In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAylJcAp4QVKwr-YSHaK9UuXEYdDNHoXSmgAMrhouWJzkVUhIE78h1JBTAXuAXaj6JSXWV5uaNGmm4Rf5yrL8a6jyFCucViWXVy4zemDRdfaK4h_pDvXPH1wIFxrvwPaM89qY8Cccivcc/s72-c/width+and+height.jpg)
![[Tamil] CSS Colors In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWik-zqoewl_4rECbqiXTCH8JDOd1-KzBLir6kDtcXvckUGviR8qrVssIbwhVYTjg34tvnEBI1JNGl3t-IS5FLxnnp0N_oRIWtraqnhnMkrp0hsJgEjLLUutR4Je9cZ3Mh7hZx7l0EUPc/s72-c/0b743151-3e0f-4449-ae13-4289151a166f.jpg)
![[Tamil] How to add css in tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBee2UdJwVztGLVJtCKSy8TX3AeWGNCnbpn26IYFVMvEIsKI1aFJyN_kPukHTsoMOQjBTqIXx6w0Zoy85z-tDiNcGYA59-B3_G_3tTFzxwS70M_u_zCP04-uZGPjzk7DzbvFhdi6Csdac/s72-c/add+css.jpg)
No comments:
Post a Comment