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.
- Inline style sheet
- Internal(Embedded) style sheet
- External(Linkes) style sheet
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>
Output
![inline.gif]()
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
![internal.gif]()
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
![external.gif]()
Summary
So cascading style sheet is very
useful for controlling the formatting of HTML.