Cascading Style Sheets Eugenia Fernandez IUPUI

CSS Purpose CSS allow you to specify the style in which your XML elements are displayed. CSS were originally designed for use with HTML, but work for XML as well. Supports the separation of structure from presentation.

CSS Versions CSS1 Adopted by W3C in December 1996 CSS2 Became a W3C Recommendation in May 1998 Adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables. CSS3 Currently under development

Browser Support for CSS Currently most browsers support CSS1. Few support CSS2. For a review of what is supported by each browser, go to WebReview.coms Style Sheet Reference GuideWebReview.coms Style Sheet Reference Guide

Creating a Stylesheet A stylesheet is a text document with a.css extension that contains a list of style rules. You can create a stylesheet using Notepad FrontPage Visual InterDev (GUI Interface)

Linking a Stylesheet To attach a stylesheet to an XML document, add the following processing instruction:

CSS Syntax A style sheet is made up of style rules. Each style rule has this syntax: selector { declaration } The selector identifies which XML element the rule applies to. The declaration specifies how the element’s content is to be displayed.

Declarations A declaration has two parts: a property a value e.g. color: red; font-size: 14pt; Properties and values are separated by : Declarations end with a ; Valid properties and values are given in the CSS specification.

Flow & Box Objects A browser normally places text and elements on the screen in the order they appear in the XML document. These elements flow from the top of the screen to the bottom. Every element has a rectangular box drawn around it. The content of the element is displayed in its box.

Inheritance Flow objects inherit properties from their parents. XML documents have a hierarchical structure. Any property specified for a parent element is automatically inherited by its child elements. Rules attached to client elements override inherited properties, i.e., more specific rules override more general rules.

Box Properties margin (transparent) padding element contents border element width box width

Types of Boxes Block has line break before and after it, i.e. appears on its own line Inline no line breaks, i.e., appears in single line

Box Properties display margin padding border border-style, border-width, border-color width height Useful for images, but can be used with text

Color & Background Properties foreground color background color background image

Font Properties font-style font-variant: small-caps font-weight font-size font-family list several in case not available on the client, separate by commas font shorthand for font-style font-variant font-weight font-size, line-height and font-family, in that order.

Text Properties text-align vertical-align text-indent line-height word-spacing addition to the default space between words letter-spacing addition to the default space between characters text-decoration underline | overline | line-through | blink text-transform capitalize | uppercase | lowercase | none

Property Values: Length Used for widths, heights, and sizes em: relative height of element’s font ex: relative to height of letter “x” px: pixels in: inches cm: centimeters mm: millimeters pt: points, where point is 1/72 inch pc: picas, 1 pica = 12 points

Property Values: Color Hexadecimal RGB value e.g. #00FF00 RGB values with integers or % Integer range e.g., rgb(0,0,255) Percentage range 0%-100% e.g., rgb(0%, 0%, 255) Keywords e.g., black, maroon, green, navy, silver, red, lime, blue, gray, purple, olive, teal, white, fuchsia, yellow, aqua

Property Values Percentage Used for width, height and position Format 50% URL Used for images Format url(image.gif)

The End