CSS3 > stylesheet

Different style sheet in CSS3

How to link the style sheets to the HTML page?


Styles

There are three types of styles to apply the stylesheet to the HTML page

  • External stylesheet
  • Internal stylesheet
  • Inline stylesheet

External stylesheet

External style sheet is used to give the style sheet link to the HTML page 

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

In the above code snippet we are giving the link of the style sheet to the webpage

<head>
    <title>External style sheet</title>
    <link href="StyleSheet5.css" rel="stylesheet" />
</head>

<body>
    <i style="font-size:30px;">External stylesheet</i>
    <p>TechFunda</p>
</body>

External stylesheet

In the above code snippet we have defined the external stylesheet, we are having the link of the stylesheet page, the style sheet page contains the color of p tag as blue and body background color as green  

output

Internal Stylesheet

Internal style sheet is used to add the style in the HTML page

<style>
    p{
        color:green
    }
    i{
        background-color:pink
    }
</style>
</head>
<body>
    <h2 style="color:black">Internal stylesheet</h2>
    <i>TechFunda</i>
    <p>DotNetfunda</p>
</body>

Internal stylesheet

In the above code snippet we have defined the internal style sheet, we are having the style tag in the head section to define the internal style sheet

output

Inline stylesheet

It is used to define the style in the inline text

<body>
    <h2>InLine stylesheet</h2>
 <p style="color:black;background-color:magenta;font-size:30px;font-style:italic">TechFunda</p>
</body>

Inline stylesheet

In the above code snippet we have defined the inline style sheet , we have given the  tag<p> and applying the style tag to define the inline style

output

 Views: 704 | Post Order: 53



Write for us