CSS in HTML

563 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
563
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS in HTML

  1. 1. CSS in HTMLIntroductionCSS 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 somelimitations, but style sheet opens a gateway for web designer to create design and formataccording to their choice. Using the style sheet one can create styles for our web page andone can put multiple style in HTML documents. Style sheet improves various feature likefonts, size, weight, margin, indent, paragraph, background, graphics etc.Types of style sheetThere 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 sheetIn the inline style sheet we can apply style in the same line. It adds a specific style to thedocument 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 thedocument controlledby 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
  2. 2. Output 2. Internal(Embedded) style sheetInternal style sheet is also known as embedded style sheet because in this style sheetembeds 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 sheetembeds the style inside the style tags.</p><p><span>B.Tech</br> www.vineetsaini.wordpress.com
  3. 3. MBA</br>MCA</br></span></p></body></html>Output 3. External(Linked) style sheetExternal style sheet is also known as linked style sheet because in this style sheet embedsthe style from an external file. In the external style sheet, style is created and saved withan 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> www.vineetsaini.wordpress.com
  4. 4. <h1><center>External style sheet</center></h1><p>External style sheet is also known as linked style sheet because in this style sheetembeds the style from an external file. In the external style sheet style is created andsaved 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>OutputSummarySo cascading style sheet is very useful for controlling the formatting of HTML. www.vineetsaini.wordpress.com

×