Css Founder.com | Cssfounder in

http://cssfounder.com

Cascading Style SheetsCSSJ. PontesCss 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 BrowserPrinter friendly versions and so onCss Founder.com

Note on XML StyleMost 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 CSSCSS 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;}SelectorPropertyDeclarationValueRulesDeclarationCss Founder.com

RulesRulesSelector 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

DeclarationsPropertyProperty of selected element(s) that we want to affect font-family.ValueSpecification for this property - ArialCss Founder.com

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

InheritanceCascading 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 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 DocumentRefer to handout.Css Founder.com

Link Style Sheet to XML DocumentProcessing instruction requires the following attributes:Css Founder.com

Link Style Sheet to XML DocumentProcessing instruction can also take the following optional attributes:Css Founder.com

SelectorsPortion 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 elements contained within a elementAdjacent sibling selector matches an element type that is the next sibling of another.first + second matches elements that have the same parent as element and appear immediately after the element.Css Founder.com

The Box ModelWhen 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 boxContentPaddlingBordermarginsCss Founder.com

The BoxElement ContentMarginPaddingBorderDefault value for margins, borders, and padding is zero. However, width can be specified using CSS. Different widthsCan be given for each side of the boxCss Founder.com

Block and Inline BoxesEach 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)HTMLBlock boxes are created by , , or Inline are created by , , and as well as content, such as text and images.Css Founder.com

Boxes.cssparagraph { 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 BoxesThe 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

//page element1//inline elementThis book is called XML For All, it will help you to learn XML // block-level element

Example

Css Founder.com

Addition to CSSpage { 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 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 Contdparagraph { 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 FlowFloat Positioning (floated) Absolute PositioningCss Founder.com

Normal FlowAll needed to be done is to add another paragraph to the XML.

How Does Normal Flow Work? and elements are Block-level elements element is treated as a block-level element because it is put in an anonymous box. and elements flow within the normal text of the paragraph, left to right.Css Founder.com

Relative PositioningPage 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 superscriptCss Founder.com

Rendering Subscript

CSS for footnoteNumberfootnoteNumber { 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

NotesYou 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.cssfootnoteNumber { 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.cssparagraph { 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 PositioningUnless 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 Elementkeywords { 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 PositioningCreates a box that floatsA box that is floated is shifted as far as to the left or right of the containing box as is possible within that blocks 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:

The Wrox Review If you want to learn XML, this is the book. 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. Beginning XML is for any developer who is interested in learning to use XML 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.

Css Founder.com

Creating a Floating BoxCreate 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 Contdparagraph { 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 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 ProblemsDouble Overlapping Example

Css Founder.com

Correcting Overlapping ProblemsThe Clear property is used to avoid wrap around the content of a floated element.Paragraph2 {clear:left;}ExampleCss Founder.com

Absolute Positioning Columns of TextLets create a page with two columns of text. root elementChildren Column1Column2 Css Founder.com

Absolute Positioning Columns of TextAbsolute.xml

Absolute Positioning Columns of TextAbsolute.csspage { 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 properlyCss Founder.com

Fixed Positioning

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;} 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 DataDisplay property replaces Table in HTML or XHTMLCss Founder.com

Tabular.xml

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.

Woodland Toys Tom Walter The Business Centre 127 Main Road Albury Seaforth BC 22001

126552 People Carrier Childs pedal operated car 122452 BubbleBaby Bean filled soft toy 129112 My First Drum Kit Childs plastic drum kit

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

AdditionsCreate 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