How to use CSS?

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

  • Inline css
  • Internal css
  • External css

Inline CSS

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

<!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.

<!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>
Output

Everything that is real was imagined first!..

Everything that is real was imagined first!..

Everything that is real was imagined first!..

External CSS

HTML document-க்கான css(styles) அனைத்தையும், வேறு ஒரு .css file-லில் இருந்து link tag மூலமாக எடுத்க்கொண்டால் அது External css.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link href="external_css_file.css" rel="stylesheet"/>
</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>

</body>
</html>
Output

Everything that is real was imagined first!..

Everything that is real was imagined first!..

Everything that is real was imagined first!..

Comments