You are on page 1of 6

Including CSS In HTML Document

<p> There are four different methods used to add CSS within HTML document.
These methods differ on the basis of their placement, importance given to them by
a browser and how much of the document they effect. They are given below:</p>
<ul type=disc>
<li><b>Inline Style Sheets</b></li>
<li><b>Embedded Style Sheets</b></li>
<li><b>Linking to an External Style Sheet</b></li>
</ul>

<h2>Inline Style Sheets</h2>


<hr>
<p><b>Inline Style Sheets</b> are those which are included within a single
specific occurrence of an element in HTML document. In other words, they are
placed <b>Inline</b> within the element. Its effect is limited to the element in
which it is specified. </p>
<b>Example:</b>
<pre lang=HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline Style Sheets</title>
</head>
<body>
<h2>Inline Styles</h2>
<hr />
<p>
We are learning how the inline style works.</p>
<p style="color:#03F;font-size:24px">
We are learning how the inline style works.

</p>
</body>
</html>
</pre>
<h3>Output</h3>

<h2> Embedded Style Sheet</h2>


<hr>
<p>The inline style is very useful if you want to apply styles to a specific
occurrence of an element. But if you want to apply same style to all the occurrences
of a specific element within the entire webpage then you will have to specify style
to all the occurrences of the element which is a very time consuming process. So in
order to solve this problem, the embedded style sheets are used.</p>
<b>The General Form Is:</b>
<pre lang=HTML>
<head><title> Title Goes Here</title>
<STYLE TYPE=text/css>
</-CSS Rules
->
</STYLE>
</head>

</pre>

<p style="background-color:#ccff99;"><b>Note:</b> From the above syntax it is


clear that the style rules are enclosed between the HTML comments </-- and --> so
as it ignore the contents if the browser does not support CSS.</p>
<h3>>Example></h3>
<pre lang=HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded Style Sheets</title>
<style type="text/css">
<!-h1,p{color:blue;}
-->
</style>
</head>
<body>
<h1>Headings is blue</h1>
<p>This is the first paragraph of the webpage</p>
<h2>It is the Next Heading</h2>
</body>
</html>
</pre>

<h3>Output:</h3>

<h2>External Style Sheet:</h2>


<hr>
<p>An external style sheet is a template or file that consists only CSS rules. An
external style sheet must have an extension <b>.css</b>. These files are stored
separately from the WebPages of the website to which they are applied. In order to
apply these rules, you need to just link this file to each webpage on the website to
which rules need to be applied. This is done using <LINK> element in the
<HEAD> section of the webpage.</p>
<b>General Syntax for <LINK> Element :</b>

In order to create an external style sheet in your website follow the following steps:
<b>Step 1:</b> <p>To create an style sheet, use a plain text editor such as
Notepad, Notepad++ etc. Specify all the rules that you need to use in your
website.</p>
<pre lang=CSS>
@charset "utf-8";
/* CSS Document */
p{
color:#609;

font-size:18px;
}
h1{
color:#0F6;
font-family:Tahoma, Geneva, sans-serif;
}
</pre>
<b>Step 2:</b> After specifying the necessary rules needed, save your style sheet
with </b>.css</b> extension.

<b>Step 3:</b> Now link the external style sheet using <LINK> element in the
<HEAD> section of the webpage to which you want to apply the rule.

<pre lang=html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="file:///D|/CSS/css.css" />
</head>
<body>
<h1>Applying External Style Sheets</h1>
<hr />
<p> This is the tutorial of External Style Sheets in CSS.</p>
</body>
</html>
</pre>
<h3>Output :</h3>