Cascading Style Sheets CSS

Document Sample
Cascading Style Sheets CSS Powered By Docstoc
					Cascading Style Sheets
        CSS
       J. Pontes
   Why Cascading Style Sheet?
• XML focus on self-describing documents.
• Styling does not tell anything about the
  content.
• It is a separate document to indicate how
  documents should be rendered.
• Different style sheets for different mediums:
  – PC Browser
  – Printer friendly versions and so on…
         Note on XML Style
• Most XML languages do not include
  markup that indicates how a document
  should be styled. Indeed, many XML
  languages will never even be styled as they
  are to transfer data between applications.
              Introducing CSS
• CSS allows to style a document by
  associating presentation rules with the
  elements that appear in the document – how
  the content of these documents should be
  rendered.
             Rules       Declaration
  Selector       h1 {font-family:Arial;}

                     Property          Value
                                               Declaration
                    Rules
• Rules
  – Selector – indicates which element(s) the
    declaration applies to (you can have several
    elements separated by commas)
  – Declaration – sets out how the elements should
    be styled. h1 {font-family:Arial;} contents of
    h1 should be in arial typeface.
                Declarations
• Property
  – Property of selected element(s) that we want to
    affect – font-family.
• Value
  – Specification for this property - Arial
       CSS – Several Elements
         <h1>, <h2>, <h3>
h1, h2, h3 { color:#000000;
             background-color: #FFFFFF;
             font-family:arial, verdana, sans-serif;
             font-weight: bold;}
                         Inheritance
• Cascading indicates that CSS properties can
  be inherited by child elements.
• A rule, once declared, will apply to all child
  elements of the element to which it was
  applied.
h1, h2, h3 {color:#000000;
                   background-color: #FFFFFF;
                   font-family:arial, verdana, sans-serif;
                   font-weight: bold;}
• Imagine now you want <h3> to be italic as well. Then, you just add

h3         {font-style:italic;}
                          Inheritance
h1, h2, h3 {color:#000000;
                    background-color: #FFFFFF;
                    font-family:arial, verdana, sans-serif;
                    font-weight: bold;}
h3          {font-style:italic;}

• This saves writing all the property-value pairs out again.
                         Inheritance
h1, h2, h3 {color:#000000;
                    background-color: #FFFFFF;
                    font-family:arial, verdana, sans-serif;
                    font-weight: bold;}
h3          {font-style:italic;}
h3          {font-weight:normal} element not bold-faced.
  Styling an XHTML Document
• Refer to handout.
        Link Style Sheet to XML
               Document
• Processing instruction requires the
  following attributes:
 Attribute   Description


 href        Indicates the location of the style sheet – its value is a URL




 type        Indicates the MIME type of the style sheet, which is text/css for CSS style sheets. If the user
             agent does not understand the type (perhaps it’s a non CSS-aware mobile phone), it will not
             need to download it.
         Link Style Sheet to XML
                Document
• Processing instruction can also take the
  following optional attributes:
 Attribute   Description

 Title       The name or title of the style sheet.


 Media       Indicates which media the specified style sheet has been
             written to work with. Values include the screen (primarily for
             color computer screens), as well as aural, Braille, handheld,
             and TV
 Charset     Indicates the character set used


 Alternate   Indicates whether the style sheet is the preferred style sheet.
             It can take the values yes or no; if not supplied, the default
             value is no.
                            Selectors
• Portion of CSS rule that indicates which
  elements the rule should apply to.
  – * { } universal selector – matches all element types in document.
  – Type selector – matches all of the elements specified in the comma-
    delimited list.
      • page, heading, paragraph { }
  – Child selector – will match an element that is direct child of another.
      • Parent > child { }
  – Descendant selector – matches an element type that is a descendant of
    another specified element, at any level of nesting.
      • p a { } – matches <a> elements contained within a <p> element
  – Adjacent sibling selector –matches an element type that is the next sibling
    of another.
      • first + second – matches <second> elements that have the same parent as
        <first> element and appear immediately after the <first> element.
                 The Box Model
• When working with XML it is important to
  understand how CSS renders a page.
• CSS operates on something known as the box
  model.
• When displaying documents, CSS treats each
  element in the document as a rectangular box.
   – Components of a box
      •   Content
      •   Paddling
      •   Border
      •   margins
               The Box

       Margin


                Element Content
                            Padding



         Border
Default value for margins, borders, and padding is zero.
However, width can be specified using CSS. Different widths
Can be given for each side of the box
        Block and Inline Boxes
• Each box can contain other boxes, corresponding
  to elements that are nested inside of it.
• There are two types of boxes – necessary to
  specify as a property of the element (display
  which takes values – block or inline)
• HTML
   – Block boxes are created by <p>, <div>, or <table>
   – Inline are created by <b>, <em>, and <span> as well as
     content, such as text and images.
                              Boxes.css
paragraph {
  display:block;
  padding:10px;
  border:solid; border-width:4px; border-color:#CCCCCC;}

reference {
  display:inline;
  font-style:italic;
  color:#CC3333;
  border:solid; border-width:2px; border-color:#CCCCCC;}

keyword {
  display:inline;
  font-weight:bold;
  color:#990000;
  border:solid; border-width:2px; border-color:#CCCCCC;}
           Anonymous Boxes

• The direct children of a block is either all inline
  boxes or all block boxes (for simplification).
• If the children of an element, which is supposed
  to be displayed as a block level element, are to
  be displayed as both block and inline, then an
  anonymous box is created to make the inline
  element a block-level element.
           Anonymous Boxes
<?xml version=”1.0” encoding=”UTF-8”?>
<?xml-stylesheet type=”text/css” href=”boxes.css” ?>
<page> //page element
<pageNumber>1</pageNumber> //inline element
<paragraph>This book is called <reference> XML For
  All</reference>, it will help you to learn
  <keyword>XML</keyword></paragraph> // block-
  level element
</page>
Example
                          Addition to CSS
     page {
       display:block;
       padding:10px;
       margin:10px;
       border-style:solid; border-width:4px; border-color:#000000;}

     pageNumber {
       display:inline;
       font-style:italic;
       border-style:solid; border-width:4px; border-color:#CCCCCC;}
Although <pagenumber> element has its display property set to inline, it behaves like a
block box because an anonymous block box is created around it. This is just an invisible
container for the inline element so that it gets treated as a block box.
                        CSS Cont’d
paragraph {
 display:block;
 padding:10px;
 border:solid; border-width:4px; border-color:#CCCCCC;}

reference {
  display:inline;
  font-style:italic;
  color:#CC3333;
  border:solid; border-width:2px; border-color:#CCCCCC;}

keyword {
 display:inline;
 font-weight:bold;
 color:#990000;
 border:solid; border-width:2px; border-color:#CCCCCC;}
          Positioning in CSS

• Normal Flow
• Float Positioning (floated)
• Absolute Positioning
                    Normal Flow
• All needed to be done is to add another
  paragraph to the XML.
    <?xml version="1.0" encoding="UTF-8" ?>
    <?xml-stylesheet type="text/css" href=“normal.css" ?>
    <page>
     <pageNumber>1</pageNumber>
     <paragraph>This book is called <reference>Beginning XML</reference>,
     it will help you to learn <keyword>XML</keyword>.</paragraph>
     <paragraph>The current chapter focuses on using CSS to display
     XML documents.</paragraph>
    </page>
 How Does Normal Flow Work?
<page> and <paragraph> elements are Block-
  level elements
<pageNumber> element is treated as a block-
  level element because it is put in an
  anonymous box.
<keyword> and <reference> elements flow
  within the normal text of the paragraph, left
  to right.
         Relative Positioning
• Page is rendered just as normal flow but
  then offset the box by a given amount.
• A box should be relatively positioned by
  giving the position property a value of
  relative, then, use left, right, top and bottom
  properties to specify the offset values.
• Subscript or superscript
         Rendering Subscript
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css"
   href=“relative.css" ?>
<page>
  <pageNumber>1</pageNumber>
  <paragraph>This book is called
   <reference>Beginning XML</reference>
  <footnoteNumber>3</footnoteNumber>, it will
   help you to learn
  <keywords>XML</keywords>.</paragraph>
</page>
      CSS for footnoteNumber
footnoteNumber {
  position:relative; top:3px;
  display:inline;
  font-size:9pt; font-weight:bold;
  color:#990000;
  border-style:solid; border-width:2px;
  border-color:#CCCCCC;}
                   Notes
• You should only specify a left or right and a
  top or bottom offset.
• Be aware when offsetting a box relative to
  normal flow, one box will end up on top of
  another if the offset is large enough, unless
  if you intend to have it so.
       CSS for Rendering Subscript
               relative.css
footnoteNumber {
  position:relative; top:3px;
  display:inline;
  font-size:9pt; font-weight:bold;
  color:#990000;
  border-style:solid; border-width:2px; border-color:#CCCCCC;}

page {
  display:block;
  padding:10px;
  margin:10px;
  border-style:solid; border-width:4px; border-color:#000000;}

pageNumber {
  display:inline;
  font-style:italic;
  border-style:solid; border-width:4px; border-color:#CCCCCC;}
       CSS for Rendering Subscript
               relative.css
paragraph {
  display:block;
  padding:10px;
  border:solid; border-width:4px; border-color:#CCCCCC;}

reference {
  display:inline;
  font-style:italic;
  color:#CC3333;
  border:solid; border-width:2px; border-color:#CCCCCC;}

keyword {
  display:inline;
  font-weight:bold;
  color:#990000;
  border:solid; border-width:2px; border-color:#CCCCCC;}
Overlapping Relative Positioning
• Unless you set a background for a box (either a
  background color or image) it will, by default, be
  transparent, so when the overlapping of text
  occurs, you would get an unreadable mess.
• The CSS specification does not say which element
  should appear on top when relatively positioned
  elements overlap each other; therefore, there can
  be differences between browsers.
• Example Relative Overlapping
  Changes on Keyword Element
keywords {
  display:inline;
  position:relative; right:45px;
  background-color:#ffffff;
  color:#990000;
  font-weight:bold;
  border:solid; border-width:2px;
   border-color:#CCCCCC;}
                Float Positioning
• Creates a box that floats
• A box that is floated is shifted as far as to the left or right
  of the containing box as is possible within that block’s
  padding.
• To indicate that you want a box floated either to the left or
  the right of the containing box, you set the float property to
  have a value left or right.
• Whenever specifying a float property, you should also set a
  width property too, indicating the width of the containing
  box that the floating box should take up, otherwise it will
  assume 100%.
      Creating a Floating Box
Create a file called floating.xml and add:
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="ch17_eg07.css" ?>
<review>
 <title>The Wrox Review</title>
 <pullQuote>If you want to learn XML, this is the book.</pullQuote>
 <paragraph>Extensible Markup Languages is a rapidly maturing technology
   with powerful real-world applications, particularly for the management,
   display, and transport of data. Together with its many related
   technologies, it has become the standard for data and document delivery
   on the web. <reference>Beginning XML</reference> is for any developer
   who is interested in learning to use <keyword>XML</keyword> in web,
   e-commerce, or data storage applications. Some knowledge of mark up,
   scripting, and/or object oriented programming languages is
   advantageous, but not essential, as the basis of these techniques is
   explained as required.</paragraph>
</review>
              Creating a Floating Box
Create another file called floating.css and add:
review {
  display:block;
  padding:10px;
  margin:10px;
  border-style:solid; border-width:4px; border-color:#000000;}

title {
   display:block;
   font-size:24px;
   padding:5px;
   color:#FFFFFF; background-color:#000000;}

pullQuote {                                         Makes the pullQuote element float
 float:left;                                        to the left of the paragraph, so the
 width:20%;
 font-style:italic;                                 the float property is set to left and
 padding:10px; margin:10px;                         width set to 20%
 border:solid; border-width:4px; border-color:#CCCCCC;}
  Creating a Floating Box Cont’d
paragraph {
  display:block;
  padding:10px;
  border:solid; border-width:4px; border-color:#CCCCCC;}

keyword {
  display:inline;
  font-weight:bold;
  color:#990000;
  border:solid; border-width:2px; border-color:#CCCCCC;}

Example Floating Box
         How Does It Work?
• The <pullQuote> element has been given a
  property of float, with a value of left, which
  indicates that the box should be floated to
  the left of the containing review element.
      Overlapping Problems
• Double Overlapping Example
Correcting Overlapping Problems
• The Clear property is used to avoid wrap
  around the content of a floated element.
• Paragraph2 {clear:left;}
     Value      Description

     Left       The left side of the box must not be adjacent to an earlier floating box

     Right      The right side of the box must not be adjacent to an earlier floating
                box                                                                        Example
     Both       Neither the left nor right side of the box may be adjacent to an earlier
                floating box

     None       The default setting where content is placed adjacent to the floated
                element on either side

     Inherent   Inherits the parent element’s property
Absolute Positioning – Columns
           of Text
• Let’s create a page with two columns of
  text.
• <page> root element
  – Children
     • Column1
     • Column2
 Absolute Positioning – Columns of Text
             Absolute.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href=“absolute.css" ?>
<page>
  <column1>
    <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the
      page.</paragraph>
    <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the
      page.</paragraph>
    <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the
      page.</paragraph>
  </column1>
  <column2>
    <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the
      page.</paragraph>
    <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the
      page.</paragraph>
    <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the
      page.</paragraph>
  </column2>
</page>
        Absolute Positioning – Columns of Text
                     Absolute.css
page {
 display:block;
 width:470px;
 padding:10px;
 border-style:solid; border-width:2px; border-color:#000000;}

column1 {
 position:absolute;
                                                   Column1 is set to 200 pixels.
 left:10px; top:10px;
 width:200px;
 padding:10px;
 border-style:solid; border-width:2px; border-color:#CCCCCC;}

column2 {
 position:absolute;                                Column2 is positioned to 250 pixels.
 left:250px; top:10px;
 width:200px;
 padding:10px;                                                   Example in IE 6.0 code
 border-style:solid; border-width:2px; border-color:#CCCCCC;}
                                                                 does not run properly
paragraph {
 display:block;
 padding-bottom:10px;}
                   Fixed Positioning
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href=“fixed.css" ?>
<page>
  <heading>This is a Heading</heading>
  <column1>
    <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the
      page.</paragraph>
    <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the
      page.</paragraph>
    <paragraph>This is a paragraph inside column one. Column one is designed to appear on the left hand side of the
      page.</paragraph>
  </column1>
  <column2>
    <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the
      page.</paragraph>
    <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the
      page.</paragraph>
    <paragraph>This is a paragraph inside column two. Column two is designed to appear on the right hand side of the
      page.</paragraph>
  </column2>
</page>
          Fixed Positioning Fixed.css
page {
 display:block;
 width:470px;
 padding:10px;
 border-style:solid; border-width:2px; border-color:#000000;}

heading {                                                   <heading> element has been given the position
 position:fixed;
 width:100%; padding:20px;
                                                            property with a value of fixed to make sure the
 top:0px; left:0px;                                         heading stays in the same place. The width
 color:#FFFFFF; background-color:#666666;                   property makes sure the heading goes across the
 font-family:arial, verdana, sans-serif; font-size:22px;}
                                                            whole page, and the top and left offsets indicate
column1 {                                                   that it should be positioned at the top left-hand
 position:absolute;
 left:10px; top:10px;                                  corner      of the browser window.
 width:200px;
 padding:10px;
 border-style:solid; border-width:2px; border-color:#CCCCCC;}

column2 {
 position:absolute;
 left:250px; top:10px;
 width:200px;
 padding:10px;
 border-style:solid; border-width:2px; border-color:#CCCCCC;}

paragraph {
 display:block;
 padding-bottom:10px;}
     Laying Out Tabular Data
• Display property replaces Table in HTML
  or XHTML
     Value of Display         Description



     Display:table;           Indicates that an element’s content represents a table



     Display:table-row;       Indicates that an element’s content represents a table row



     Display:table-cell;      Indicates that an element’s content represents a table cell



     Display:table-caption;   Indicates that an element’s content represents a table caption
                             Tabular.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href=“tabular.css" ?>
<page>                                                   Example does not
 <table>                                                 work in IE 6. Use
  <tableRow>
    <tableCell1>One</tableCell1>
                                                         Link page to see
    <tableCell2>Two</tableCell2>                         effect.
    <tableCell3>Three</tableCell3>
  </tableRow>                                                     Two    Three
                                                           One
  <tableRow>
    <tableCell1>Four</tableCell1>
    <tableCell2>Five</tableCell2>                          Four   Five   Six
    <tableCell3>Six</tableCell3>
  </tableRow>
 </table>
</page>
                                  Tabular.css
page {
 display:block;
 color:#000000; background-color:#EFEFEF;
 border-style:solid; border-width:2px; border-color:#000000; }

table {
 display:table;
 padding:20px;
 color:#000000; background-color:#CCCCCC;
 border-style:solid; border-width:2px; border-color:#000000; }

tableRow {display:table-row;}

tableCell1, tableCell2, tableCell3 {
 display:table-cell;
 padding:10px;
 color:#000000; background-color:#EFEFEF;
 border-style:solid; border-width:2px; border-color:#000000; }
  Homework (purchase.xml)
This HW is based on a purchase order.
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="purchase.css" ?>

<purchaseOrder orderID="x1129001">

<buyer>
  <companyName>Woodland Toys</companyName>
  <purchaserName>Tom Walter</purchaserName>
  <address>
   <address1>The Business Centre</address1>
   <address2>127 Main Road</address2>
   <town>Albury</town>
   <city>Seaforth</city>
   <state>BC</state>
   <zipCode>22001</zipCode>
 </address>
</buyer>

<orders>
  <item>
    <sku>126552</sku>
    <product>People Carrier</product>
    <description>Childs pedal operated car</description>
  </item>
  <item>
    <sku>122452</sku>
    <product>BubbleBaby</product>
    <description>Bean filled soft toy</description>
  </item>
  <item>
    <sku>129112</sku>
    <product>My First Drum Kit</product>
    <description>Childs plastic drum kit</description>
  </item>
</orders>

</purchaseOrder>
                                  Purchase.css
purchaseOrder {
 display:block;
 margin:20px; padding:20px;
 border-style:solid; border-width:1px; border-color:#000000;}

purchaseOrder:before {
 font-family:arial, verdana, sans-serif;
 font-size:28px; font-weight:bold;
 content:"Purchase Order Number: " attr(orderID);}

buyer, companyName, purchaserName, address1, address2, town, city, state, zipcode {
 display:block;
 font-family:arial, verdana, sans-serif; font-size:14px;}

companyName {font-weight:bold;}

orders {display:table; padding-top:30px;}
item {display:table-row;}
sku, product, description {display:table-cell; padding:10px;}
                Additions
• Create a ruleto put the purchase order in a
  box, with a 1 pixel black border, 20 pixel of
  padding inside, and a 20-pixel margin to
  separate the box from the browser window.
• Create a rule that write “Purchase Order
  Number” in a large bold, arial typeface as
  the heading and collects the purchase order
  number from the orderID attribute.