Chapter 5 - Presentation Part I:CSS Learning XML by Erik T. Ray

Chapter 5 - Presentation Part I:CSSLearning XMLbyErik T. Ray Slides were developed by Jack DavisCollege of Information Scienceand TechnologyRadford University

Why CSS? • Problems with presentational markup (HTML) • Low information contentA client (machine) can't understand between a typical body paragraph and a poem or code sample. A variety of things are marked with in-line tags, a bold tag may be used for a price or a description. Search engines can only try to match strings, since tags don't reflect content. • When mark-up is presentational, the design details are inextricably mixed with content. You have to change the original document anytime you make even a format change. • Designers often focus on getting something to look just right, without realizing it only looks good on their display. For the web, design must be based on a broad range of display equipment (different size monitors). • Stylesheets allow designers to format many pages with a single stylesheet and can provide flexibility for displays.

Specifying Style Sheets • Normally, we use a link tag in the head section of an HTML document to specify a style sheet to be used in formatting the document • <html> <head> <title>The Behavior of Martian Bees</title> <link rel="stylesheet" type="text/css" href="martianstyle.css" /> </head> … • XML provides a generic way to embed a stylesheet using a processing instruction<? xml-stylesheet type="MIME-type" href="url-of-stylesheet" ?> • the type and href attributes must be specifiedtype is set to: text/csshref is set to: the url of the stylesheet • <?xml version="1.0" ?><?xml-stylesheet type="text/css" href="bookstyle.css" ?>

CSS Syntax • CSS rules consists of two parts: • Element selector • Properties declarations • CSS rule example: address { font-size:12pt; font-family:arial; } • CSS comments: /* This is a comment */

CSS Properties • Major property categories: • Font propertiesfont-family, font-weight, font-style, … • Text propertiestext-indent, text-align, text-decoration, … • Color propertiescolor, background-color, … • Border propertiesborder-style, border-width, border-color, … • Display propertiesmargin-left, margin-top, display-type, … (normally use display-type:block)

CSS Example – XML Document <?xmlversion=”1.0” standalone=”yes”?> <?xml-stylesheettype=”text/css” href=”emails-1.css”?> <emails>  <message> <to>joe@acmeshipping.com</to> <from>brenda@xyzcompany.com</from> <date_sent>02/12/01</date_sent> <subject>Order 10011</subject> <body> Joe, Please let me know if order number 10011 has shipped. Thanks, Brenda </body> </message>  </emails>

CSS Example – CSS File to, from { font-weight:bold; text-align:left; border-style:solid } date_sent { font-style:italic; color:blue } subject { text-decoration:underline; background-color:green; color:yellow } body { margin-top:10; display:block }

Property Inheritance • XML documents have a hierarchy of elements. CSS uses that hierarchy to pass along properties via inheritance.sect1 { margin-left: 10px; margin-right:15px; font-size:18pt; color: blue; }para { margin-top:10px; margin-bottom:10px; font-size:12pt;}Let's assume sect1 contains a para. The para's set of properties is a combination of those explicitly declared for it and those it inherits from the elements in its ancestry. Not all properties are inherited. For example, margins are never inheritable, so in the above example, only font-size and color may be inherited. However, the font-size property is not inherited by para because it is redefined there. So the para's properties include those specifically defined for it, plus the one it inherited, color: blue.

Combining Stylesheets • An important feature of CSS is its ability to combine multiple stylesheets by importing one into another. This lets you define styles by importing style definitions so you don't have to reinvent the wheel. Any style settings that you want to redefine or don't need can be overridden in the local stylesheet. • Modularity and "code reuse" are the main reasons to combine stylesheets. It is more manageble to break up a large stylesheet into several smaller files. For example, all the styles pertaining to math equations could be stored in math.css and all the styles for regular text in text.css. Breaking stylesheets into modular components promotes reuse. • In the stylesheet, other stylesheets can be imported with:@import url(http://www.example.org/mystyles/ math.css);

Attribute Selectors • For a finer level of control for applying stylesheet rules, the selection elements can include attributes for example:planet[atmosphere] {font-weight:bold}- This selector matches any planet element in the XML document that has an atmosphere attribute. It selects:<planet atmosphere="poisonous" />or <planet atmosphere="breathable" />, but not <planet>. The element name can be omitted in the style rule and that will allow you to select any element with that attribute.[atmosphere] matches both <planet atomosphere="poisonous"> and <moon atmosphere="minor" >You could make the selector more specific by adding an attribute value.planet[atmosphere="poisonous"] { … }

Attribute Selectors (cont.) • planet [atmosphere~="sweet"]if the attribute's value is a space-separated list of strings, you can match any one of them by using the operator ~= instead of the equals sign. This selector matches<planet atmosphere="breathable sweet"/>but does not match <planet atmosphere="poisonous stinky"> • Selectors can string together multiple attribute requirements. To match, the attribute selectors must be satisfied just as if they were bound with a logical AND operator.planet[atmosphere="poisonous"] [populace="friendly"] { … } • Can use defined classesplanet.uninhabited will match<planet class="uninhabited"> • #marsthis will match any element with an id attribute of mars<planet id="mars"> remember id attributes must be unique

Contextual Selection • Contextual information includes information like an elements ancestry (its parent, its parent's parent, etc.) and siblings, and is useful for cases in which an element needs to be rendered differently depending on where it occurs.You can specify that an element is a child of another element using the greater-than symbol (>). For example:book > title {font-size:24pt;}chapter > title {font-size:20pt;}title {font-size:18pt;}The > operator works only when there is one level separating the two elements. To reach an element at an arbitrary depth inside another element, list them in the selector, separated by spaces.table para {color:blue;} applies only to para in tablespara {color:black}

Position Selection • You may want to format an element differently depending on where it occurs in a sequence of same-level elements. For example, you might want to treat the first paragraph of a chapter differently from the rest, by making it all uppercase.para:first-child {font-variant:uppercase;}Another way to examine the context of an element is to look at its siblings. The sibling selector matches an element immediately following another. For example:title + para {text-indent: 0;}Matches every para that follows a title and turns off its initial indent.

Display Types • blockA rectangular region of text isolated from the content preceding and following by spacing. It begins on a new line, often after some whitespace, and it has boundaries (margins) that keep the text in the rectangular shape. The text wraps at the margin. (paragraphs, titles, sections) • inlineAn inline is content that doesn't interrupt the flow of text in a block. It wraps at the margin of the block it resides in like ordinary character data. It can set properties that don't affect the flow (font-family, color) but can't have properties related to blocks, like text alignment or text indentation. (examples, keywords, hypertext links) • noneAny element defined this way will be skipped by the CSS processor. It's a convenient way to turn off large portions of a document for faster processing.

Counters • Counters in CSS are variables that hold numeric values. They are used for chapter numbers, ordered lists, and anything else that needs to be labeled with a number. To use a counter, you have to give it a name and tell CSS when to increment it using the property counter-increment. You can get the value of the counter any time with the counter() function.chapter {counter-increment: chapnum}chapter > title:before {content: "Chapter " counter(chapnum)}counter-reset is another property that is used to set the counter value back to zero when the element is processed.numberedlist {counter-reset: list_item_number; }

In Class Exercise • Develop an XML tag set that will list faculty (both administrative and teaching)data that should be represented in the tag set - department name - faculty teaching rank (assistant, assoc., full) - courses each faculty member teaches (including course number and a description of the content of the class) - research interests for each teaching faculty member - name - admin faculty should only have name and their position included • build a dtd that defines the tag set that can be used for the above data, think about what separate "cuts or slices" of the data might be useful • build an XML document that conforms to the dtd with 2 teaching and 1 administrative faculty data

Chapter 5 - Presentation Part I:CSS Learning XML by Erik T. Ray