XML AND CSS

1. XML AND CSS CSC1310 Fall 2009

2. STYLESHEETS • Stylesheets map style properties to elements in documents (rule). • Property is anything that affects the appearance or behavior of the document (typeface, color, size, etc.) • For each element it can be multiple rules that match, so processor either apply all of them or try to find the best fit. • Stylesheets: • Making design changes easier by separating details from document • Enabling multiple uses for one document. • Giving the end user more control and accessibility.

3. CASCADING STYLE SHEETS • Cascading Style Sheets (CSS) is recommendation of W3C (1994, Hakon Lee) • The goal is to create a simple yet expressive language that could combine style descriptions from different sources. • CSS1 has 50 properties which is widely supported (1996) • CSS2 has 120 properties which is supported by the most browsers (1998) • CSS3 is in progress.

4. STYLESHEETS EMBEDDING • Processing instruction <?xml-stylesheet?> : • <?xml-stylesheet • type=“text/css” • href=“url-of-stylesheet” • ?>

5. CSS AND XML EXAMPLE

6. CSS SYNTAX • Selector tells processor what element this rule matches. • Items inside of the brackets are called property declarations. • selector • { • property1: value1; • property2: value2; • } • Comments: /* comment text */ • Universal selector is an asterisk (*) • * {color: blue}

7. PROPERTY INHERITANCE • In XML: • <sect1> <para>Inheritance Example</para> </sect1> • In CSS: • sect1{ • margin-left: 25pt; • margin-right: 25pt; • font-size: 18pt; • color: navy; } • para { • margin-top: 10pt; • margin-bottom: 10pt; • font-size: 12 pt;} • Margins are never inheritable.

8. COMBINING STYLESHEETS • Reusability • Modularity • @import links current stylesheet to another and causes the style settings in the target to be imported. • @import url(http://www.example.org/math.css) • @import url(http://www.example.org/text.css) • To override imported rules, you need to redefine them in your local stylesheet. • @import url(http://www.example.org/math.css) • h1: { font-size: 3em; }

9. SELECTOR • Universal selector(*) • Element selector (list of element selectors) • Attribute selector: element [attribute refinement]: • element[attribute] • [attribute] • element[attribute=“value”] • element[attribute~=“value”] • # space-separated list of strings • element[attribute|=“value”] • # hyphen-separated value list • element[attribute1=“value”] [attribute2=“value”] • #IDvalue

10. CONTEXTUAL SELECTION • Ancestry: (>) • book > title {font-size: 24pt;} • chapter > title {font-size: 20pt;} • title {font-size: 18pt;} • table para {color: green} • para {color: black} • Position: • para:first-child {font-variant: uppercase;} • para:before {content: “element”;} • para:after {content: “element”;} • url:link{color:red;} • url:visited{color:blue;} • para:first-child:first-line {color:red;} • para:first-child:first-letter {color:red;}

11. UNITS OF MEASUREMENTS • Absolute measurements use units that have a predefined size (inches, points, picas): • mm, cm, in, pt, pc • Relative measurements use percentages and fractions of some variable distance: • em (size of current font), ex (x-height), % • b {font-size:200%} • In general, relative measurements are better since they do not need to be rewritten if default properties are changed.

12. DISPLAY TYPES • block is a rectangular region of text isolated form the content preceding and following by spacing. It has boundaries (margins) to keep text in the shape (paragraphs, titles, sections). • inline is content that doesn’t interrupt the flow of text in a block (emphasis, keywords, hypertext links). • none is skipped by processor (children of such element are ignored as well) • It is recommended to declare the display property for XML.

13. BLOCKISH PROPERTIES • Margins are distances between the bounding box and any neighboring element. • margin-left • margin-right • margin-top • margin-left • margin v1 • margin v1 v2 • margin v1 v2 v3 • margin v1 v2 v3 v4 margin-top margin-left This is a text inside of block. margin- bottom margin-right padding • Negative values are acceptable. • Unspecified values margins default to 0. • para {margin: 5% 10em 0 } • para{margin-left: 10em; margin-right:10em; margin-top: 5%}

14. BLOCKISH PROPERTIES • border • width: thin, medium, thick, value • style: solid, dashed, dotted, groove, ridge, double, inset, outset • color • padding • The value is a space-separated list of between one and four length measurements (see margin) • text-align: left, right, center, justify • text-indent • Indents the first line of a block.

15. TEXT PROPERTIES • font-family has a comma-separated list of font preferences, starting with the most specific and desirable, and finishing with the generic • serif (Times), sans-serif (Helvetica), monospace (Courier), cursive, fantasy (Comic Strip) • font-family: Palantino, “Times New Roman”, serif; • font-size has absolute or relative units or measured by keywords: xx-small, x-small, small, medium, large, x-large, xx-large • line-height affects font size and whitespace above it. • para1{line-height: 1} • para2{line-height: 1.5} • para3{line-height: 2}

16. TEXT PROPERTIES • font-style: normal, italic, oblique, inherit • font-weight:light, normal, bold, lighter, bolder • color • color • background-color • RGB (red-green-blue): rgb(v1,v2,v3) (0-255), #000000 - #FFFFFF • Predefined colors: • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

17. BACKGROUND • background • background-attachment • sets whether a background image is fixed or scrolls with the rest of the page • scroll, fixed • background-color • Color or transparent • background-image • url(URL) or none • background-position • background-repeat

18. LIST • display: list-item; • list-style • list-style-image • url(URL) or none • list-style-position • inside or outside • list-style-type

19. LIST EXAMPLE

20. TABLE • display: • table • table-row • table-row-group • table-header-group • table-column • table-column-group • table-cell • table-caption

21. TABLE EXAMPLE

22. TABLE PROPERTIES • border-collapse: collapse or separate • empty-cells: show or hide