Cascading Style Sheets CSS J. Pontes. Why Cascading Style Sheet? XML focus on self-describing documents. Styling does not tell anything about the content

Cascading Style SheetsCSS

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.

h1 {font-family:Arial;}Selector

Property

Declaration

Value

Rules

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



h3 {font-style:italic;}

• This saves writing all the property-value pairs out again.

Inheritance



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

Element Content

Margin

Padding

BorderDefault value for margins, borders, and padding is zero. However, width can be specified using CSS. Different widthsCan 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

http://albany.edu/faculty/pontes/INF-523/ch17_eg02.xml

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;}



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 Subscriptrelative.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;}



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

http://www.albany.edu/faculty/pontes/INF-523/ch17_eg06.xml

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 BoxCreate 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 { 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%

Creating a Floating Box Cont’d

paragraph {

display:block;

padding:10px;


keyword {

display:inline;

font-weight:bold;

color:#990000;


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

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


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 TextAbsolute.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>



</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>



</column2>

</page>

Absolute Positioning – Columns of TextAbsolute.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;}


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


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>




</column1>

<column2>




</column2>

</page>

Fixed Positioning Fixed.csspage { 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;}



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.

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> <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



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.csspurchaseOrder { 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.

Documents

Cascading Style Sheets CSS J. Pontes. Why Cascading Style Sheet? XML focus on self-describing documents. Styling does not tell anything about the content