XML AND CSSXML AND CSSCSC1310 Fall 2009CSC1310 Fall 2009

STYLESHEETSSTYLESHEETS

• StylesheetsStylesheets map style properties to elements in documents (rulerule).

• PropertyProperty 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.

CASCADING STYLE SHEETSCASCADING STYLE SHEETS

• Cascading Style Sheets (CSS)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.

• CSS1CSS1 has 50 properties which is widely supported (1996)

• CSS2CSS2 has 120 properties which is supported by the most browsers (1998)

• CSS3CSS3 is in progress.

STYLESHEETS EMBEDDINGSTYLESHEETS EMBEDDING

• Processing instruction <?xml-stylesheet?> :Processing instruction <?xml-stylesheet?> :<?xml-stylesheet<?xml-stylesheet

type=“text/css”type=“text/css”href=“url-of-stylesheet”href=“url-of-stylesheet”

?>?>

CSS AND XML EXAMPLECSS AND XML EXAMPLE

CSS SYNTAXCSS SYNTAX

• SelectorSelector tells processor what element this rule matches.

• Items inside of the brackets are called property property declarationsdeclarations.

selectorselector{{

property1: value1;property1: value1; property2: value2; property2: value2;

}}• Comments: /* comment text *//* comment text */• Universal selectorUniversal selector is an asterisk (**)* {color: blue}

PROPERTY INHERITANCEPROPERTY 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.

COMBINING STYLESHEETSCOMBINING STYLESHEETS

• Reusability• Modularity• @import@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; }

SELECTORSELECTOR

• Universal selector(*)• Element selector (list of element selectors)• Attribute selector: element [attribute refinement]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

CONTEXTUAL SELECTION CONTEXTUAL SELECTION

• AncestryAncestry: (>>) book > title {font-size: 24pt;} chapter > title {font-size: 20pt;} title {font-size: 18pt;} table para {color: green} para {color: black}• PositionPosition:

– 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;}

UNITS OF MEASUREMENTS UNITS OF MEASUREMENTS

• Absolute measurementsAbsolute measurements use units that have a predefined size (inches, points, picas):– mm, cm, in, pt, pc

• Relative measurementsRelative 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.

DISPLAY TYPES DISPLAY TYPES

• block block is a rectangular region of text isolated form the content preceding and following by spacing. It has boundaries (marginsmargins) to keep text in the shape (paragraphs, titles, sections).

• inline inline is content that doesn’t interrupt the flow of text in a block (emphasis, keywords, hypertext links).

• none none is skipped by processor (children of such element are ignored as well)

• It is recommended to declare the displaydisplay property for XML.

BLOCKISH PROPERTIES BLOCKISH PROPERTIES

• MarginsMargins 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

This is a text inside of block.

margin-topmargin-top

margin-margin-bottombottom

mar

gin

-lef

tm

arg

in-l

eft

mar

gin

-rig

ht

mar

gin

-rig

ht

• 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%}

paddingpadding

BLOCKISH PROPERTIES BLOCKISH PROPERTIES

• borderborder– width: width: thin, medium, thick,

value – style: style: solid, dashed, dotted,

groove, ridge, double, inset, outset

– colorcolor• padding padding

– The value is a space-separated list of between one and four length measurements (see marginmargin)

• text-align: text-align: left, right, center, justify

• text-indent text-indent – Indents the first line of a block.

TEXT PROPERTIES TEXT PROPERTIES

• font-family font-family has a comma-separated list of font preferences, starting with the most specific and desirable, and finishing with the generic– serifserif (Times), sans-serifsans-serif (Helvetica),

monospacemonospace (Courier), cursivecursive, fantasyfantasy (Comic Strip)

font-family: Palantino, “Times New Roman”, serif;• font-size font-size has absolute or relative units or

measured by keywords: xx-small, x-small, small, xx-small, x-small, small, medium, large, x-large, xx-largemedium, large, x-large, xx-large

• line-height line-height affects font size and whitespace above it.

para1{line-height: 1}para2{line-height: 1.5}para3{line-height: 2}

TEXT PROPERTIES TEXT PROPERTIES

• font-style: font-style: normalnormal, italicitalic, oblique, inheritoblique, inherit

• font-weight:font-weight: light, light, normal, bold, lighter, normal, bold, lighter, bolderbolder

• colorcolor– colorcolor– background-colorbackground-color– RGB (red-green-blue): RGB (red-green-blue):

rgb(v1,v2,v3) (0-255), rgb(v1,v2,v3) (0-255), #000000 - #FFFFFF#000000 - #FFFFFF

– Predefined colors:Predefined colors:aqua, black, blue, fuchsia, aqua, black, blue, fuchsia,

gray, green, lime, gray, green, lime, maroon, navy, olive, maroon, navy, olive, purple, red, silver, teal, purple, red, silver, teal, white, yellowwhite, yellow

BACKGROUND BACKGROUND

• backgroundbackground• background-attachmentbackground-attachment

– sets whether a background image is fixed or scrolls with the rest of the page

– scroll, fixed• background-colorbackground-color

– Color or transparentColor or transparent• background-imagebackground-image

– url(URL) or noneurl(URL) or none• background-positionbackground-position• background-repeatbackground-repeat

LISTLIST

• display: list-item;display: list-item;• list-stylelist-style• list-style-imagelist-style-image

– url(URL) or noneurl(URL) or none• list-style-positionlist-style-position

– inside or outside inside or outside • list-style-typelist-style-type

LIST EXAMPLELIST EXAMPLE

TABLETABLE

• display: display: – table – table-row – table-row-group – table-header-group– table-column– table-column-group – table-cell – table-caption

TABLE EXAMPLETABLE EXAMPLE

TABLE PROPERTIESTABLE PROPERTIES

• border-collapse: border-collapse: collapse or separate

• empty-cells: empty-cells: show or hide