Css Founder.com | Cssfounder in

Css Founder.com | Cssfounder in
http://cssfounder.com

Cascading Style Sheets
CSS
J. Pontes
Css Founder.com

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

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

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

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

Declarations
• Property
– Property of selected element(s) that we want to
affect – font-family.
• Value
– Specification for this property - Arial
Css Founder.com

CSS – Several Elements
<h1>, <h2>, <h3>
h1, h2, h3 { color:#000000;
background-color: #FFFFFF;
font-family:arial, verdana, sans-serif;
font-weight: bold;}
Css Founder.com

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;
font-weight: bold;}
• Imagine now you want <h3> to be italic as well. Then, you just add
h3 {font-style:italic;}
Css Founder.com

Inheritance
h1, h2, h3 {color:#000000;
font-weight: bold;}
• This saves writing all the property-value pairs out again.
Css Founder.com

Inheritance
h1, h2, h3 {color:#000000;
font-weight: bold;}
h3 {font-weight:normal} element not bold-faced.
Css Founder.com

Styling an XHTML Document
• Refer to handout.
Css Founder.com

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

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

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

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

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

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

Boxes.css
paragraph {
display:block;
padding:10px;
border:solid; border-width:4px; border-color:#CCCCCC;}
reference {
display:inline;
font-style:italic;
color:#CC3333;
keyword {
display:inline;
font-weight:bold;
color:#990000;
border:solid; border-width:2px; border-color:#CCCCCC;}Css Founder.com

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

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

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

CSS Cont’d
paragraph {
display:block;
padding:10px;
reference {
display:inline;
font-style:italic;
color:#CC3333;
keyword {
display:inline;
font-weight:bold;
color:#990000;
border:solid; border-width:2px; border-color:#CCCCCC;}Css Founder.com

Positioning in CSS
• Normal Flow
• Float Positioning (floated)
• Absolute Positioning
Css Founder.com

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

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

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

Rendering Subscript
<?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

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;}
Css Founder.com

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

CSS for Rendering Subscript
relative.css
footnoteNumber {
position:relative; top:3px;
display:inline;
font-size:9pt; font-weight:bold;
color:#990000;
page {
display:block;
padding:10px;
margin:10px;
pageNumber {
display:inline;
font-style:italic;
Css Founder.com

CSS for Rendering Subscript
relative.css
paragraph {
display:block;
padding:10px;
reference {
display:inline;
font-style:italic;
color:#CC3333;
keyword {
display:inline;
font-weight:bold;
color:#990000;
Css Founder.com

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

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

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

Creating a Floating Box
Create a file called floating.xml and add:
<?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

Creating a Floating Box
Create another file called floating.css and add:
review {
display:block;
padding:10px;
margin:10px;
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;
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

Creating a Floating Box Cont’d
paragraph {
display:block;
padding:10px;
keyword {
display:inline;
font-weight:bold;
color:#990000;
Example Floating Box
Css Founder.com

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

Overlapping Problems
• Double Overlapping Example
Css Founder.com

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

Absolute Positioning – Columns
of Text
• Let’s create a page with two columns of
text.
• <page> root element
– Children
• Column1
• Column2
Css Founder.com

Absolute Positioning – Columns of Text
Absolute.xml
<?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>
page.</paragraph>
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>
page.</paragraph>
page.</paragraph>
</column2>
</page>
Css Founder.com

Absolute Positioning – Columns of Text
Absolute.css
page {
display:block;
width:470px;
padding:10px;
column1 {
position:absolute;
left:10px; top:10px;
width:200px;
padding:10px;
column2 {
position:absolute;
width:200px;
padding:10px;
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

Fixed Positioning
<?xml-stylesheet type="text/css" href=“fixed.css" ?>
<page>
<heading>This is a Heading</heading>
<column1>
page.</paragraph>
page.</paragraph>
page.</paragraph>
</column1>
<column2>
page.</paragraph>
page.</paragraph>
page.</paragraph>
</column2>
</page>
Css Founder.com

Fixed Positioning Fixed.css
page {
display:block;
width:470px;
padding:10px;
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;
width:200px;
padding:10px;
column2 {
position:absolute;
width:200px;
padding:10px;
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

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

Tabular.xml
<?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

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; }Css Founder.com

Homework (purchase.xml)
This HW is based on a purchase order.
<?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>
Css Founder.com

Purchase.css
purchaseOrder {
display:block;
margin:20px; padding:20px;
purchaseOrder:before {
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;}
Css Founder.com

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

Css Founder.com | Cssfounder in

Recommended

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Css Founder.com | Cssfounder in (20)

More from Css Founder (20)

Recently uploaded (20)

Css Founder.com | Cssfounder in