Session 3 Stylesheets
Objectives <ul><li>Stylesheets </li></ul><ul><li>Selectors in CSS </li></ul><ul><li>Properties and Values </li></ul><ul><l...
Need of Style Sheets <ul><li>Style sheets are a set of rules that describe the appearance of data in an XML document. Howe...
Various Style Sheets <ul><li>Cascading Style Sheet(CSS) allows you to control the appearance of data in HTML and XML docum...
Cascading Style Sheet <ul><li>Cascading Style Sheet is a rule-based language invented in 1996 to  write formatting instruc...
Style rules <ul><li>A style sheet in CSS comprises a set of style rules. These rules define how the content enclosed in an...
Ways of writing  Style rules <ul><li>Single selector, multiple property declarations </li></ul><ul><ul><li>CD{font-family:...
External style sheets <ul><li>In CSS, the style rules are written in a file with extension .css. This file is associated w...
Simple selectors <ul><li>Simple selector comprises an element name followed by one or more property declarations. Same pro...
Universal selector <ul><li>A universal selector comprises an asterisk followed by property declarations. It is used where ...
ID selector <ul><li>A ID selector comprises a hash (#) symbol, immediately followed by an attribute’s value followed by pr...
Color properties <ul><li>The CSS provides properties to set the foreground </li></ul>
Setting color properties <ul><li>Syntax </li></ul><ul><ul><li>color: colorValue </li></ul></ul><ul><ul><li>background-colo...
Font-family property <ul><li>The font-family is used to specify the name of the font family to be applied to an element </...
Font-size <ul><li>Syntax: </li></ul><ul><ul><li>font-size: “xx-small | x-small | small | medium | large | x-large | xx-lar...
Font-style and weight properties <ul><li>Sytax: </li></ul><ul><ul><li>font-style:normal | oblique | italic </li></ul></ul>...
Margins in CSS <ul><li>CSS provides four properties namely margin-left, margin-right, margin-top, margin – bottom </li></u...
Border properties in CSS <ul><li>Syntax: </li></ul><ul><ul><li>border: border_width  border_style  border_color </li></ul>...
Padding properties in CSS <ul><li>The border property surrounds the text in an element with an outline. To insert space be...
Text Alignment and Indentation <ul><li>The display: block property renders the text of an element in a separate block. Ins...
CSS Units <ul><li>The values assigned to CSS properties are expressed in length units. The table describes these units. </...
Position Properties <ul><li>Every element’s text is placed in a box of its own. The table lists the CSS positioning proper...
Display property <ul><li>In HTML, if you wanted the text to appear as new paragrahp, you would use the <P> tag. The same c...
Inheritance in CSS <ul><li>Inheritance is the ability of one entity to acquire the characteristics of another entity. </li...
Summary and workshop
Upcoming SlideShare
Loading in …5
×

Session 3

1,074 views

Published on

XML by Example Session 3

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,074
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Session 3

  1. 1. Session 3 Stylesheets
  2. 2. Objectives <ul><li>Stylesheets </li></ul><ul><li>Selectors in CSS </li></ul><ul><li>Properties and Values </li></ul><ul><li>Inheritance and Cascades in CSS </li></ul>
  3. 3. Need of Style Sheets <ul><li>Style sheets are a set of rules that describe the appearance of data in an XML document. However, both XML and style </li></ul><ul><li>sheets are defined in </li></ul><ul><li>separate files </li></ul>
  4. 4. Various Style Sheets <ul><li>Cascading Style Sheet(CSS) allows you to control the appearance of data in HTML and XML document by providing various properties to define the position, size, foreground, background color, Font, spacing between data </li></ul><ul><li>Extensible Style Sheet(XSL) is a style sheet language used to define the appearance of data contained only in XML documents. However, it also allows you to transform XML documents. </li></ul>
  5. 5. Cascading Style Sheet <ul><li>Cascading Style Sheet is a rule-based language invented in 1996 to write formatting instructions for data comtained in HTML documents. </li></ul><ul><li>Benefits of CSS </li></ul><ul><ul><li>Code reusability </li></ul></ul><ul><ul><li>Device independence </li></ul></ul><ul><ul><li>Change in one place </li></ul></ul>
  6. 6. Style rules <ul><li>A style sheet in CSS comprises a set of style rules. These rules define how the content enclosed in an element will be displayed. These rules are applicable to all child elements within an element. </li></ul><ul><li>Syntax : </li></ul><ul><ul><li>Selector{Property:value;} </li></ul></ul><ul><ul><li>Selector is an element name of an XML document </li></ul></ul><ul><ul><li>Property is a CSS style property that defines how the element will be rendered </li></ul></ul><ul><ul><li>Value is the value assorciated with a CSS property. Once CSS property can have several values. </li></ul></ul>
  7. 7. Ways of writing Style rules <ul><li>Single selector, multiple property declarations </li></ul><ul><ul><li>CD{font-family:sans-serif; color:black} </li></ul></ul><ul><li>Multiple selectors, multiple property declarations </li></ul><ul><ul><li>CD, Name, Title{fonnt-family:sans-serif; color:black} </li></ul></ul>
  8. 8. External style sheets <ul><li>In CSS, the style rules are written in a file with extension .css. This file is associated with an XML document using a style sheet processing instruction. A few points to note: </li></ul><ul><ul><li>It should appear in the prolog section of an XML document, that is, it should appear before any tag of an element. </li></ul></ul><ul><ul><li>One XML document can have more than one style sheet processing instructions, each linked to one .css file. </li></ul></ul><ul><ul><li>Syntax: </li></ul></ul><ul><ul><li><?xml-stylesheet href=“url” [type=“text/css”]?> </li></ul></ul><ul><ul><li>Where, xml-stylesheet is the processing instruction, url is the URL of a .css file. type=“text/css” is optional </li></ul></ul>
  9. 9. Simple selectors <ul><li>Simple selector comprises an element name followed by one or more property declarations. Same property declarations can be assigned to multiple elements by separating element names with a comma. </li></ul>
  10. 10. Universal selector <ul><li>A universal selector comprises an asterisk followed by property declarations. It is used where you want to assign the same style rules to all the element in a document. </li></ul><ul><li>Example </li></ul><ul><ul><li>*{color:blue} </li></ul></ul><ul><ul><li>Displays the content of all elements in a documents in blue </li></ul></ul>
  11. 11. ID selector <ul><li>A ID selector comprises a hash (#) symbol, immediately followed by an attribute’s value followed by property declarations. It is used to define styles for unique elements in a document. </li></ul>
  12. 12. Color properties <ul><li>The CSS provides properties to set the foreground </li></ul>
  13. 13. Setting color properties <ul><li>Syntax </li></ul><ul><ul><li>color: colorValue </li></ul></ul><ul><ul><li>background-color: colorValue </li></ul></ul>View file XML View CSS
  14. 14. Font-family property <ul><li>The font-family is used to specify the name of the font family to be applied to an element </li></ul><ul><li>Syntax: </li></ul><ul><ul><li>font-family: “font-family name(s)” </li></ul></ul>View file XML View CSS
  15. 15. Font-size <ul><li>Syntax: </li></ul><ul><ul><li>font-size: “xx-small | x-small | small | medium | large | x-large | xx-large” </li></ul></ul>View file XML View CSS
  16. 16. Font-style and weight properties <ul><li>Sytax: </li></ul><ul><ul><li>font-style:normal | oblique | italic </li></ul></ul><ul><ul><li>font-weight: light | normal | bold </li></ul></ul>View file XML View CSS
  17. 17. Margins in CSS <ul><li>CSS provides four properties namely margin-left, margin-right, margin-top, margin – bottom </li></ul><ul><li>Syntax: </li></ul><ul><ul><li>margin-left | margin-right | margin-top | margin – bottom=marginValue </li></ul></ul>View file XML View CSS
  18. 18. Border properties in CSS <ul><li>Syntax: </li></ul><ul><ul><li>border: border_width border_style border_color </li></ul></ul>View file XML View CSS
  19. 19. Padding properties in CSS <ul><li>The border property surrounds the text in an element with an outline. To insert space between the border and the text of an element </li></ul><ul><li>Syntax: </li></ul><ul><ul><li>padding: padding_width </li></ul></ul>View file XML View CSS
  20. 20. Text Alignment and Indentation <ul><li>The display: block property renders the text of an element in a separate block. Inside this block, you can align and indent the text using the CSS properties text-align and text-indent properties respectively </li></ul><ul><li>Syntax: </li></ul><ul><ul><li>text-align: alignment_value </li></ul></ul><ul><ul><li>text-indent: value </li></ul></ul>View file XML View CSS
  21. 21. CSS Units <ul><li>The values assigned to CSS properties are expressed in length units. The table describes these units. </li></ul>
  22. 22. Position Properties <ul><li>Every element’s text is placed in a box of its own. The table lists the CSS positioning properties to position the text inside the box </li></ul>View file XML View CSS
  23. 23. Display property <ul><li>In HTML, if you wanted the text to appear as new paragrahp, you would use the <P> tag. The same can be achieved in XML by using CSS display property </li></ul><ul><li>Syntax: </li></ul><ul><ul><li>display: value </li></ul></ul><ul><ul><li>Where value=none | inline | block </li></ul></ul>View file XML View CSS
  24. 24. Inheritance in CSS <ul><li>Inheritance is the ability of one entity to acquire the characteristics of another entity. </li></ul><ul><li>In CSS, the child elements inherit the styles rules defined for parent element. However, this is applicable only if the child has no explicit style rule defined for it. Otherwise, the style rule defined for child element overrides the style rule defined for parent element </li></ul>View file XML View CSS
  25. 25. Summary and workshop

×