1 / 20

Cascading Style Sheets

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

aspen-terrell
Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets Eugenia Fernandez IUPUI

  2. 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.

  3. 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

  4. 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

  5. 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)

  6. Linking a Stylesheet To attach a stylesheet to an XML document, add the following processing instruction: <?xml-stylesheet type="text/css" href="employees.css"?>

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

  8. 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.

  9. 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.

  10. 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.

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

  12. 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

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

  14. Color & Background Properties • foreground color • background color • background image

  15. 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.

  16. Text Properties • text-indent • line-height • text-align • vertical-align • 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

  17. 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

  18. 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

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

  20. The End

More Related