Post
Ask Question

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 that is used for styling of the tag.
 
CSS is used to control the formatting of the HTML tag. Generally, formatting HTML tags had some limitations, but the style sheet opens a gateway for a 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 styles in HTML documents. Style sheet improves various feature like fonts, size, weight, margin, indent, paragraph, background, graphics, etc.
 
Types of the style sheet
 
There are following three types of a style sheet in HTML.
  1. Inline style sheet
  2. Internal(Embedded) style sheet
  3. External(Links) style sheet
Inline style sheet
 
In the inline style sheet, we can apply the style in the same line. It adds a specific style to the document controlled by the tags.
 
Example
  1. <html>  
  2.     <head>  
  3.         <title>Inline style sheet</title>  
  4.     </head>  
  5.     <body bgcolor="lime">  
  6.         <h1 style="background-color:yellow"id="h1">  
  7.             <center>Inline Style Sheet</center>  
  8.         </h1>  
  9.         <p style="font-size:25pt" "font-weight:bold" id="p1">  
  10.             In the inline style sheet we can apply style in same line. It adds a specific style to the document controlled  
  11.             by the tags.  
  12.         </p>  
  13.         <p>  
  14.             <span style="font-weight:bold" id=s1>  
  15.             B.Tech<br />  
  16.             MBA<br />  
  17.             MCA<br />  
  18.             </span>  
  19.         </p>  
  20.     </body>  
  21. </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:
  1. <html>  
  2.     <head>  
  3.         <title>Internal style sheet</title>  
  4.     </head>  
  5.     <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>  
  6.     <body>  
  7.         <h1>  
  8.             <center>Internal style sheet</center>  
  9.         </h1>  
  10.         <p> Internal style sheet is also known as embedded style sheet because in this style sheet embeds the style inside the style tags. </p>  
  11.         <p> <span> B.Tech</br> MBA</br> MCA</br> </span></p>  
  12.     </body>  
  13. </html> 
Output
 
internal.gif
 
External(Linked) style sheet
 
External style sheet is also known as a linked style sheet because 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.
  1. body{background-color:lime;color:red;margin-left:0.5in;margin-right:0.5in}  
  2. h1{background-color:yellow;color:red}  
  3. p{font-size:25pt;color:green}  
  4. span{font-weight:bold;font-size:14pt} 
Save this file .css extension. Now we will make HTML file.
  1. <html>  
  2.     <head>  
  3.         <title>External style sheet</title>  
  4.         <link rel=stylesheet href="link.css" type="text/css">  
  5.     </head>  
  6.     <body>  
  7.         <h1>  
  8.             <center>External style sheet</center>  
  9.         </h1>  
  10.         <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>  
  11.         <p> <span> B.tech</br> MBA</br> MCA</br> </span></p>  
  12.     </body>  
  13. </html> 
Output
 
external.gif
 

Summary

 
So the cascading style sheet is very useful for controlling the formatting of HTML.
Next Recommended Reading How to customize HTML/ASP.NET button style using CSS?