CSS in HTML

CSS in HTML
Introduction

CSS stands for 'cascading style sheet'. CSS is made of three words i.e. 'cascade + style +
sheet'. Cascade means an order follows by the browser.

Style+sheet means, a sheet which is used for styling of the tag.

CSS is used to control the formatting of HTML tag. Generally formatting HTML tag had some
limitations, but style sheet opens a gateway for web designer to create design and format
according to their choice. Using the style sheet one can create styles for our web page and
one can put multiple style in HTML documents. Style sheet improves various feature like
fonts, size, weight, margin, indent, paragraph, background, graphics etc.

Types of style sheet

There are following three types style sheet in HTML.

1. Inline style sheet
2. Internal(Embedded) style sheet
3. External(Linkes) style sheet

1. Inline style sheet

In the inline style sheet we can apply style in the same line. It adds a specific style to the
document controlled by the tags.

Example:

<html>
<head>
<title>Inline style sheet</title>
</head>
<body bgcolor="lime">
<h1 style="background-color:yellow"id="h1"><center>Inline Style Sheet</center></h1>
<p style="font-size:25pt" "font-weight:bold" id="p1">
In the inline style sheet we can apply style in same line. It adds a specific style to the
document controlled
by the tags.
</p>
<p>
<span style="font-weight:bold" id=s1>
B.Tech<br />
MBA<br />
MCA<br />
</span></p>
</body>
</html>

www.vineetsaini.wordpress.com

Output

2. Internal(Embedded) style sheet

Internal style sheet is also known as embedded style sheet because in this style sheet
embeds the style inside the <style> tags and ends with the </style> tags.

Example:

<html>
<head>
<title>Internal style sheet</title>
</head>
<style>
body{background-color:lime;color:red;margin-left:0.5in;margin-right:0.5in}
h1{background-color:yellow;color:red}
p{font-size:25pt;color:green}
span{font-weight:bold;font-size:14pt}
</style>
<body>
<h1><center>Internal style sheet</center></h1>
<p>
Internal style sheet is also known as embedded style sheet because in this style sheet
embeds the style inside the style tags.
</p>
<p>
<span>
B.Tech</br>


MBA</br>
MCA</br>
</span></p>
</body>
</html>

Output

3. External(Linked) style sheet

External style sheet is also known as linked style sheet because in this style sheet embeds
the style from an external file. In the external style sheet, style is created and saved with
an extension '.css'. Later it is linked with the HTML document.

Example: First of all we make css file like as follows.

body{background-color:lime;color:red;margin-left:0.5in;margin-right:0.5in}
h1{background-color:yellow;color:red}
p{font-size:25pt;color:green}
span{font-weight:bold;font-size:14pt}

Save this file .css extension. Now we will make html file.

<html>
<head>
<title>External style sheet</title>
<link rel=stylesheet href="link.css" type="text/css">
</head>
<body>


<h1><center>External style sheet</center></h1>
<p>External style sheet is also known as linked style sheet because in this style sheet
embeds the style from an external file. In the external style sheet style is created and
saved with an extension '.css'. Later it is linked with the HTML document.</p>
<p>
<span>
B.tech</br>
MBA</br>
MCA</br>
</span></p>
</body>
</html>

Output

Summary

So cascading style sheet is very useful for controlling the formatting of HTML.


CSS in HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (11)

Similar to CSS in HTML

Similar to CSS in HTML (20)

More from Vineet Kumar Saini

More from Vineet Kumar Saini (20)

Recently uploaded

Recently uploaded (20)

CSS in HTML