Your SlideShare is downloading. ×
0
CSS Inculsionwww.eshikshak.co.in
● There are four ways to associate styles  with your HTML document. Most  commonly used methods are inline CSS  and Extern...
Embedded CSS● You can put your CSS rules into an HTML  document using the <style> element.● This tag is placed inside <hea...
Embedded CSS<head><style type="text/css" media="...">Style Rules............</style></head>                   www.eshiksha...
Embedded CSS   Attribute          Value                       Description                                          Specifi...
Inline CSS● You can use style attribute of any HTML  element to define style rules. These rules  will be applied to that e...
External CSS● The <link> element can be used to  include an external stylesheet file in your  HTML document.● An external ...
External CSS         <head>         <link type="text/css" href="..." media="..." />         </head>The <link> tag defines ...
External CSS        Attribute                  Value                 Description                                          ...
External CSSmystyle.cssh1, h2, h3 {color: #36C;font-weight: normal;letter-spacing: .4em;margin-bottom: 1em;text-transform:...
Imported CSS● @import is used to import an external  stylesheet in a manner similar to the  <link> element. Here is the ge...
CSS Rules Overriding● The rule to override any Style Sheet Rule.  ○ Any inline style sheet takes highest priority. So it w...
Upcoming SlideShare
Loading in...5
×

Lecture 11 css_inculsion

620

Published on

Four different ways to include cascading style sheet in html document.

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

  • Be the first to like this

No Downloads
Views
Total Views
620
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lecture 11 css_inculsion"

  1. 1. CSS Inculsionwww.eshikshak.co.in
  2. 2. ● There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS● Embedded CSS - The <style> Element● Inline CSS● External CSS● Imported CSS www.eshikshak.co.in
  3. 3. Embedded CSS● You can put your CSS rules into an HTML document using the <style> element.● This tag is placed inside <head>... </head> tags.● Rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax www.eshikshak.co.in
  4. 4. Embedded CSS<head><style type="text/css" media="...">Style Rules............</style></head> www.eshikshak.co.in
  5. 5. Embedded CSS Attribute Value Description Specifies the style sheet language as a content-typetype text/css (MIME type). This is required attribute. screen tty tv Specifies the device the projection document will be displayedmedia handheld on. Default value is all. This print is optional attribute. braille aural all www.eshikshak.co.in
  6. 6. Inline CSS● You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. <element style="...style rules...."> Attribute Value Description The value of style attribute is a combination of style style style rules declarations separated by semicolon (;). www.eshikshak.co.in
  7. 7. External CSS● The <link> element can be used to include an external stylesheet file in your HTML document.● An external style sheet is a separate text file with .css extension.● You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element. www.eshikshak.co.in
  8. 8. External CSS <head> <link type="text/css" href="..." media="..." /> </head>The <link> tag defines the relationship between a document and an externalresource www.eshikshak.co.in
  9. 9. External CSS Attribute Value Description Specifies the style sheet language as a content-type text/css type (MIME type). This attribute is required. Specifies the style sheethref URL file having Style rules. This attribute is a required. screen tty tv Specifies the device the projection document will be displayedmedia handheld on. Default value is all. print This is optional attribute. braille aural all www.eshikshak.co.in
  10. 10. External CSSmystyle.cssh1, h2, h3 {color: #36C;font-weight: normal;letter-spacing: .4em;margin-bottom: 1em;text-transform: lowercase;}<head><link type="text/css" rel=“stylesheet” href="mystyle.css"media="all" /></head> www.eshikshak.co.in
  11. 11. Imported CSS● @import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule. <head> <@import "URL"; </head> <head> @import "mystyle.css"; </head> <head> <@import url("URL"); </head> www.eshikshak.co.in
  12. 12. CSS Rules Overriding● The rule to override any Style Sheet Rule. ○ Any inline style sheet takes highest priority. So it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file. ○ Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file. ○ Any rule defined in external style sheet file takes lowest priority and rules defined in this file will be applied only when above two rules are not applicable. www.eshikshak.co.in
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×