Explain different ways to write the CSS in Web Technology

on

  • There are three ways of inserting a style sheet :

           1. External style sheet
           2. Internal/Embedded style sheet
           3. Inline style


1. External Style Sheet

  • When using CSS it is preferable to keep the CSS separate from your HTML.
  • Placing CSS in a separate file allows the web designer to completely differentiate between content and design.
  • External CSS is a file that contains only CSS code and is saved with a ".css" file extension.

Syntax :

body{ background-color: gray; }
p{ color:blue; }
h3{ color:white; }

Example :

Demo.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<h3> Hello Friends </h3>
<p id="param1">How are you? </p>
</body>
</html>

test.css

#param1
{
     text-align : center;
}
p
{
    color : blue;
}

2. Internal/Embedded CSS

  • This type of CSS is only for single page.
  • When using internal CSS, we must add a new tag, <style>, inside the <head> tag. The HTML code below contains an example of <style> usage.
Example :

<html>
<head>
<style type= "text/css">
p{ color : red }
</style>
</head>
<body>
<p> Your page's content</p>
</body>
</html>

3. Inline CSS

  • It is possible to place CSS right in your HTML code, and this method of CSS usage is referred to as inline css.
  • Inline CSS has the highest priority out of external , internal and inline CSS.
Example :

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<p style="background: blue; color: white;">A new background and front color with inline css </p>
</body>
</html>