×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


Using CSS in HTML



Actually we are having three methods by which we can use our CSS inside the HTML. These are as follows :-


  • External style sheet
  • Internal style sheet
  • Inline sheet


External style sheet



It means that you are having any different stylesheet in which you are doing the styling part of your HTML elements and this different style sheet is linked with your existing webpage. And this link we provide through <link> tag inside the <head> tag.

For Example:-

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<p> Let's see here </p>

<p id="main"> I am Manish Singh Bhakuni </p>

</body>

</html>

This stylesheet can be written in any editor but it must be saved with the .css extension.

Here is our "main.css" file . Let's see:-


body{

      background-color:pink;

}

p{

      color:red;

      font-size:20px;

}

Output of the program



Let's see here


I am Manish Singh Bhakuni





Internal style sheet



Internal style sheet can be used with the same HTML page inside the <script> tag which must be inside the <head> tag.

For example:-

<<!DOCTYPE html>

<<html>

<head>>

<style>

body{

background-color:pink;

}

p{

color:red;

font-size:20px;

} </style>

</head>

<body>

<p> Let's see here </p>

<p id="main"> I am Manish Singh Bhakuni </p>

</body>

</html>

Output of the program



Let's see here


I am Manish Singh Bhakuni





Inline style



We can also defines the styling for any element in the same line after using style attribute following after the tags.

For example:-

<!DOCTYPE html>

<html>

<head>

</head>

<body style="background-color:pink";>

<p> Let's see here <p>

<p style="color:red"; font-size:20px;> I am Manish Singh Bhakuni <p>

</body>

</html>

Output of the program



Let's see here


I am Manish Singh Bhakuni











CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute