3. 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âŠ
Css Founder.com
4. 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.
Css Founder.com
5. 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.
h1 {font-family:Arial;}Selector
Property
Declaration
Value
Rules
Declaration
Css Founder.com
6. 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.
Css Founder.com
7. Declarations
âą Property
â Property of selected element(s) that we want to
affect â font-family.
âą Value
â Specification for this property - Arial
Css Founder.com
9. 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;}
Css Founder.com
10. 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.
Css Founder.com
13. 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.
Css Founder.com
14. 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.
Css Founder.com
15. 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.
Css Founder.com
16. 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
âą marginsCss Founder.com
17. The Box
Element Content
Margin
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
Css Founder.com
18. 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.
Css Founder.com
20. 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.
Css Founder.com
21. 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
Css Founder.com
22. 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 Founder.com
24. Positioning in CSS
âą Normal Flow
âą Float Positioning (floated)
âą Absolute Positioning
Css Founder.com
25. 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>
Css Founder.com
26. 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.
Css Founder.com
27. 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
Css Founder.com
28. 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 Founder.com
30. 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 Founder.com
33. 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
Css Founder.com
34. 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;}
Css Founder.com
35. 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%.
Css Founder.com
36. 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>
Css Founder.com
37. 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 {
float:left;
width:20%;
font-style:italic;
padding:10px; margin:10px;
border:solid; border-width:4px; border-color:#CCCCCC;}
Makes the pullQuote element float
to the left of the paragraph, so the
the float property is set to left and
width set to 20%
Css Founder.com
39. 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.
Css Founder.com
41. 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
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
Example
Css Founder.com
42. Absolute Positioning â Columns
of Text
âą Letâs create a page with two columns of
text.
âą <page> root element
â Children
âą Column1
âą Column2
Css Founder.com
43. 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>
Css Founder.com
44. 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;
left:10px; top:10px;
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;}
Column1 is set to 200 pixels.
Column2 is positioned to 250 pixels.
Example in IE 6.0 code
does not run properly
Css Founder.com
45. 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>
Css Founder.com
46. Fixed Positioning Fixed.css
page {
display:block;
width:470px;
padding:10px;
border-style:solid; border-width:2px; border-color:#000000;}
heading {
position:fixed;
width:100%; padding:20px;
top:0px; left:0px;
color:#FFFFFF; background-color:#666666;
font-family:arial, verdana, sans-serif; font-size:22px;}
column1 {
position:absolute;
left:10px; top:10px;
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;}
<heading> element has been given the position
property with a value of fixed to make sure the
heading stays in the same place. The width
property makes sure the heading goes across the
whole page, and the top and left offsets indicate
that it should be positioned at the top left-hand
corner of the browser window.
Css Founder.com
47. 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
Css Founder.com
48. Tabular.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href=âtabular.css" ?>
<page>
<table>
<tableRow>
<tableCell1>One</tableCell1>
<tableCell2>Two</tableCell2>
<tableCell3>Three</tableCell3>
</tableRow>
<tableRow>
<tableCell1>Four</tableCell1>
<tableCell2>Five</tableCell2>
<tableCell3>Six</tableCell3>
</tableRow>
</table>
</page>
Example does not
work in IE 6. Use
Link page to see
effect.
One Two Three
Four Five Six
Css Founder.com
52. 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.
Css Founder.com