HTML Style Tag

<style>

tag, ஒரு HTML document-ன் style information-ஐ வரையறுக்க பயன்படுத்தப்படுகிறது.

HTML document-ன் style ஆனது 3 விதமாக apply செய்யப்படுகிறது.

  • Inline css
  • Internal css
  • External css

Inline CSS

ஒரு HTML tag-ற்க்குள் style என்ற attribute-ஐ பயன்படுத்தி styles-ஐ apply செய்தால் அது inline css.

Example

Example

Try this code 
<!DOCTYPE html>
			<html>
			<head>
			<title>Page Title</title>
			</head>
			<body>
			<p style="background-color:orange;color:black;">Everything that is real was imagined first!..</p>
			<p style="background-color:blue;color:white;font-size:15px;">Everything that is real was imagined first!..</p>
			<p style="background-color:crimson;color:white;font-size:18px;padding:10px;">Everything that is real was imagined first!..</p>
			</body>
			</html>
Output

Everything that is real was imagined first!..

Everything that is real was imagined first!..

Everything that is real was imagined first!..

Internal CSS

<style> </style>

tag-ற்க்குள், class அல்லது id attribute-ஐ பயன்படுத்தி head section அல்லது body section-க்குள் HTML document-க்கான styles-ஐ apply செய்தால் அது Internal css.

Example

Example

Try this code 
<!DOCTYPE html>
			<html>
			<head>
			<title>Page Title</title>
			</head>
			<body>
			<p class="cgstyle1">Everything that is real was imagined first!..</p>
			<p class="cgstyle2">Everything that is real was imagined first!..</p>
			<p id="cgstyle3">Everything that is real was imagined first!..</p>
			
			<style> 
			.cgstyle1{
			background-color:orange;
			color:black;
			}
			.cgstyle2{
			background-color:blue;
			color:white;
			font-size:15px;
			}
			#cgstyle3{
			background-color:crimson;
			color:white;
			font-size:18px;
			padding:10px;
			}
			</style>
			
			</body>
			</html>

Comments

Nallavan 12th March,2022 09:15 pm
Illa Enaku Puriyala !!
venkat 17th June,2021 09:04 am
This tutorial is very useful to learn. Thank you.