Cascading Style Sheets (CSS) 1. What is CSS? Why CSS? How to write a CSS? 2.
Css Founder.com | Cssfounder in
-
Upload
cssfounder -
Category
Technology
-
view
44 -
download
2
Transcript of Css Founder.com | Cssfounder in
Css Founder.com | Cssfounder in
http://cssfounder.com
Cascading Style SheetsCSS
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
DeclarationCss 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; 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
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
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.
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
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
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; border:solid; border-width:2px; border-color:#CCCCCC;}
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; 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;}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 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
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 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 Founder.com
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;}
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 OverlappingCss 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 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>Css Founder.com
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
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
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 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>
<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
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;}
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
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
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;}
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
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 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
Tabular.csspage { 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 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>
Css Founder.com
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;}
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