Cascading Style Sheets

Eugenia FernandezIUPUI

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 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:

<?xml-stylesheet type="text/css" href="employees.css"?>

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 0-255 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