ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
XML Tutorial - Index
XML Tutorial - Introduction to XML
XML Tutorial - How XML interact with data?
XML Tutorial - How to write first XML document
XML Tutorial - What are XML Elements and Attributes?
XML Tutorial - What is XML Schema and DTD?
XML Tutorial - Which Browser support XML?
XML Tutorial - XML and Styles
XML Tutorial - Embedding XML in HTML
XML Tutorial - Working with XML Parser
XML Tutorial - Working with CDATA
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > XML Tutorial >XML and Styles
 

XML Tutorial - XML and Styles

 
Page 1 of 3
 
Overview
 
In this chapter you will learn
  • How to add style sheets in XML through CSS?
  • How to add inline, internal and external style sheets in a document?
  • How to use XML with XSL?

 

Developing an XML-related documents does not guarantee that it will be displayed the way you want it to appear. Browsers are not particularly good at formatting XML, and only the very latest browsers support it all. Although most of the time XML will be used to define data, not to display it, but sometimes you want to format the XML data for viewing. There are two main ways of doing this :

  • CSS
  • XSL

Using CSS with XML

CSS is a style language that lets you separate content and style as you design web pages. CSS can 'redefine' HTML tags, allowing them to be presented in different ways. Similarly, it can be used to define how XML tags are displayed. You can use three methods to specify styles for XML documents :

Using External Style Sheets with XML documents

External style sheets are always recommended because, you can change a document's style without having to access and modify the document itself and external style sheets can be shared among documents and thereby become the most efficient technique for applying your specified styles to more than one document at a time.

    Syntax
    <?xml-stylesheet type = "text/css" href = "stylesheetname.css"?>


    Example
    <?xml version="1.0"?>
    <?xml-stylesheet type = "text/css" href = "Ex1.css"?>
    <To>
    <SMS>
    <header>
    <from>  James  </from>
    <to>  Smith   </to>
    <Topic>  Jokes  </Topic>
    </header>
    <body>
          a a a a a b b b b b b a b a b a b a b a b a b a b a b a b a b b b b b b b b b b b b b b b b b b b b a a. . . . . .
          Long time no c (see).
    </body>
    </SMS>
    </To>


Below is the specification of the style sheet that has been included above :

                                                                             Ex1.css
    To
    {
              background-color : #ff00ff ;
              width : 100% ;
    }
    SMS
    {
              background-color: #Green ;
              margin-bottom: 30pt;
    }
    header
    {
               background-color: #999999;
               margin-bottom: 10pt;
    }
    from
    {
               color: #0000FF;
               font-size: 12pt;
    }

     

Specifying an Internal Style Sheet

You can include style rules in the data document itself by including the style rules in the <head> element of an XHTML file. Specifying an internal style sheet is practical for small-scale XML projects only.

    Syntax
                                         <?xml version ="1.0"?>
                                                        <html xmlns : "http ://www.xyz.com">
                                                        <head>
                                                        <style type = "text/css"> ...........</style>
                                                        </head>
                                                        <body> ...........</body>
                                                        </html>

Specifying Inline Styles

You can also use the STYLE attribute to add styles to individual elements inline, i.e., within the XML document. The generic inline style syntax is :
 

    Syntax
                    <elementname STYLE = "propertyname : value">............</elementname>


Various Cascading Style Sheet Properties are :

                   Category                                         Property Name

    Background properties

    background                                                                     background-image
    background-attachment                                                   background-position
    background-color                                                            background-repeat

          Font Properties font                                                                                 font-stretch
    font-family                                                                       font-style
    font-size                                                                          font-variant
    font-size-adjust                                                               font-weight
          Text properties

    color                                                                              text-shadow
    direction                                                                         text-transform
    letter-spacing                                                                  vertical-align
    line-height                                                                       white-space
    text-decoration                                                               word-spacing
    text-align                                                                        text-indent

          Box properties

    border                                                                            border-top
    border-bottom                                                                border-top-color
    border-bottom-color                                                       border-top-style
    border-bottom-style                                                        border-top-width
    border-bottom-width                                                       border-width
    border-color                                                                    margin
    border-left                                                                       margin-bottom
    border-left-color                                                              margin-left
    border-left-style                                                               margin-right
    border-left-width                                                              margin-top
    border-right                                                                       padding
    border-right-color                                                             padding-bottom
    border-right-style                                                              padding-left
    border-right-width                                                             padding-right
    border-style                                                                        padding-top

    Table properties border-collapse                                                                  empty-cells
    border-spacing                                                                  row-span
    column-span                                                                     table-layout
    List properties list-style                                                                            list-style-position
    list-style-image                                                                  list-style-type
    Element dimension properties height                                                                                min-height
    line-height                                                                            min-width
    max-height                                                                        max-width
     

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.