Cascading Style Sheets in XML

1
Cascading Style Sheets in XML

• COIN 78
• Lecture 4

2
Setting up CSS for HTML

• CSS was made to format
• Allows you to address presentation at three
  different levels
• External Style sheets
• global control of presentation
• Internal Style sheets and inline styles
• local control at page or element level

3
CSS with XML vs. CSS with HTML

• XML has no built in formatting
• CSS formats for each element
• No image control, use background
• Use XSL if images need to be rendered
• Can not format a link (yet)

4
CSS1, CSS2, and Browsers

• CSS1 is supported, CSS2 is iffy
• Netscapes browser future is uncertain
• Use both browsers to check, and look to FAQs /
  user groups for recent updates
• Microsoft is the better default browser
• Netscape has limited support for XML
• IE supports office applications and XML

5
The Anatomy of Style

• A style is made up of a selector and one or more
  declarations
• Declarations determine how the chosen elements
  will be displayed
• A selector can be as simple as an element name,
  or list of element names.
• Declarations have a property and a value
• colorred or fontbold 12pt Tekton

6
Specifying Where Styles are to be Applied (1)

• A selector specifies the elements in your
  document to which the formatting information will
  be applied.
• To write a selector that specifies where the
  style should be applied
• Type name to apply the style to very occurrence
  of the name element
• Type name1, name2, name3 to apply the style to
  each of the named elements

7
Specifying Where Styles are to be Applied (2)

• parent descendent
• parent gt child
• namefirst-child
• before after
• nameatt_name
• nameatt_nameatt_value
• nameatt_nameatt_value

8
Specifying Where Styles are to be Applied (3)

• nameid_name
• namelink
• namevisited
• nameactive
• namehover
• namefocus

9
Creating an External Style Sheet

• To create a style sheet
• Create a text document
• Type name of selector for elements
• Type to begin the properties that should be
  applied
• Define as many properties as desired
• Type to mark the end of the rule

10
Calling a Style Sheet for an XML Document

• lt?xml version1.0 ?gt
• lt?xmlstylesheet type"text/css" hreffile.css
  ?gt

11
Sample CSS code

• name displayblock positionabsolute
• intro displayblock bordermedium dotted red
  padding5 margin-top5
• picture displayblock
• population displayinline
• latin_name displayinline
• more_info displayinline

12
Calling a Style Sheet for an XML Document

• To create the processing instruction manually
• At the top of the document, after the initial XML
  declaration, type
• lt?xml-stylesheet typetext/css
• Then type hrefstyle.css
• Finally, type ?gt to complete the processing
  instruction

13
Create a Processing Instruction with XSLT

• In the root template of the XSLT style sheet,
  type ltxslprocessing-instruction
  namexml-stylesheetgt
• Then type typetext/css
• Then type hrefstyles.css
• Finally type lt/xslprocessing-instructiongt

14
Calling a Style Sheet for an XHTML Document

• To call a style sheet for an HTML document
• In the head section of the HTML code in your XSLT
  style sheet, type
• ltlink relstylesheet typetext/css
• Then type hrefstyles.css
• You must type / at the end of this block
• Then type gt to close the link element

15
Layout with CSS
16
Defining Elements as Block Level or Inline

• In HTML, every element is defined as block level
  (new line) or inline (same line)
• With XML, this must be explicitly defined
• Type either of the two style declarations
• element displayblock or
• element displayinline
• The default value for display is inline

17
Hiding Elements Completely

• To hide elements completely
• Type displaynone
• If you use displaynone, no trace of the hidden
  element is seen in the browser window. It is
  completely invisible.

18
Offsetting Elements in the Natural Flow

• To offset elements within the natural flow
• Type positionrelative
• Type top, right, bottom, or left
• Type v, where v is the desired distance that you
  want to offset the element from its natural
  location (10 pt or 2em)
• Type to add additional directions as needed

19
Positioning Elements Absolutely

• To absolutely position elements
• Type positionabsolute
• Type top, right, bottom, or left
• Type v, where v is the desired distance that you
  want to offset the element from its natural
  location (10 pt or 2em)
• Type to add additional directions as needed

20
Setting the Height or Width for an Element

• You can set the height and width for most
  elements, including images, form elements, and
  even blocks of text
• To set the height or width for an element
• Type widthw where w is the width of the element,
  and can be either absolute or a of the parent
  element
• Type heighth where h is the absolute height

21
Setting the Border (1)

• To set the border
• Type border
• If desired, type -top, -bottom, -left, or -right
  (with no space after border)
• Again, with no spaces, type (a colon)
• If desired, type thin, medium, thick, or an
  absolute value (like 4 px)

22
Setting the Border (2)

• Type none, dotted, dashed, solid, double, groove,
  ridge, inset, or outset
• If desired, type color (where color is one of 16
  color names
• silver, gray, white, black, maroon, red, green,
  lime, purple, fuchsia, olive, yellow, navy, blue,
  teal, and aqua (and sometimes magenta and cyan)

23
Add Padding Around an Element

• To add padding around an element
• Type padding
• If desired, type -top, -bottom, -left, or -right
  (with no space after padding)
• Type x, where x is the amount of the desired
  space to be added, expressed in units or as a
  of the parent element.

24
Set Margins Around an Element

• To set an elements margins
• Type margin
• If desired, type -top, -bottom, -left, or -right
  (with no space after margin) to limit where space
  should be added
• Type x where x is the amount of desired space to
  be added, expressed in units or a of the parent
  element

25
Wrapping Text Around Elements

• To wrap elements around other elements
• Type float
• Type left if you want the element on the left and
  the document on the right.
• Type right if you want the element on the right
  and the document on the left.

26
Stopping Text Wrap

• With style sheets, you can mark a particular tag
  so that other elements (like text) can not flow
  around it.
• To stop text wrap, type clear
• Type left to stop the flow until the left side is
  clear, right until the right side is clear, both
  until both sides are clear, or type none to
  continue the flow.

27
Changing the Foreground Color

• You can change the color of any element,
  including horizontal lines, form elements, and
  tables.
• To change the foreground color
• Type color
• Type colorname, where colorname is one of 16
  predefined colors, or type rrggbb, or rgb
  (r,g,b) 0-255, or rgb (r,g,b)

28
Changing the Background

• To change the background color or image, type
  background
• If desired, type transparent or color (where
  color is specified for foreground)
• If desired, type url(image.gif) where the image
  is applied to the background
• You can type fixed or scroll to determine if the
  image should scroll with the page

29
Positioning Elements in 3D

• To position elements in 3D
• Type z-index
• Type n, where n is a number that indicates the
  elements level in the stack of objects

30
Aligning Elements Vertically (1)

• To position text
• Type baseline - to align the elements baseline
  with the parent's baseline
• Or type middle - to align the middles of the
  element with the middle of the parent
• Or type sub - to position the element as a
  subscript with respect to the parent

31
Aligning Elements Vertically (2)

• Or type super - to position the element as a
  superscript with respect to the parent
• Or type text-top - to align the top of the
  element with the top of the parent
• Or type text-bottom - to align the bottom of the
  element with the bottom of the parent
• Or type top - to align the the top of the element
  with the top of tallest element line

32
Determining Where Overflow Should Go

• If you make an elements box smaller than its
  content in height and width properties the excess
  has to go somewhere
• To determine where the overflow should go
• Type overflow
• Type visible - to expand the box
• Type hidden - to hide the overflow
• Type scroll - to add a scroll bar to the box

33
Clipping an Element

• You can create a window that only reveals a
  particular section of the element
• To clip an element
• Type cliprect(
• Type t r l b - where t, r, l, and b are top,
  right, left, and bottom coordinates of the
  rectangular portion of the element
• Type the final ) to close the statement

34
Setting List Properties (1)

• There are several bullet styles for unordered
  lists, and several styles for ordered lists
• You can set these globally with the list-style
  property
• Type displaylist-item to indicate that the
  element should be displayed as a list (not block
  or inline)
• Next type list-style

35
Setting List Properties (2)

• To set the list item property to a solid, round
  circle, type disc
• Or circle - to use an empty, round, circle
• Or square - to use a solid square
• Or decimal - to use Arabic numerals
• Or lower-alpha - to use lowercase letters
• Or upper-alpha - to use uppercase letters

36
Setting List Properties (3)

• Or lower-roman - to use lowercase roman numerals
• Or upper-roman - to use uppercase roman numerals
• Or type url(image.gif) where image.gif is the URL
  of the image that you want to use as a marker for
  your lists.
• If desired, type outside or inside to hang the
  marker flush, or flush left, of the list.

37
Specifying Page Breaks

• To specify a page break after a given tag
• Type page-break-afteralways
• To specify a page break before a given tag
• Type page-break-beforealways
• To remove page breaks
• Type page-break-afterauto or page-break-before-au
  to

38
Formatting Text with CSS
39
Choosing a Font Family

• To set the font family
• Type font-familyfamilyname where familyname is
  your first choice of font
• If desired, type familyname2 where familyname2 is
  your second choice of font.
• Separate each choice with a comma.
• Repeat the step above as desired.

40
Embedding Fonts on a Page

• To embed fonts on a page
• Type _at_font-face font-family
• Type the full name of the font that you wish to
  embed
• Type srcurl(
• Type the URL of the font
• Type )

41
Creating Italics

• To create italics
• Type font-style
• Type oblique for oblique text
• Type italic for italic text
• To remove italics
• Type font-style
• Type normal

42
Applying Bold Formatting

• To apply bold formatting
• Type font-weight
• Type bold to give an average bold weight to the
  text
• Or type bolder or lighter to use a value relative
  to the current weight
• Or type a multiple of 100 between 100 and 900,
  where 400 represents book weight, and 700
  represents bold.

43
Setting the Font Size

• To set the font size
• Type an absolute font size xx-small, x-small,
  small, medium, large, x-large, or xx-large.
• Or type a relative font size larger or smaller
• Or type an exact size say 12pt or 15px
• Or type a percentage relative to any parent
  style, e.g., 150

44
Setting the Line Height

• To set the line height
• Type line-height
• Type n, where n is a number that will be
  multiplied by the font-size to obtain the desired
  line height
• Or type p, where p is a percentage of the font
  size
• Or type a, where a is an absolute value in
  points, pixels, or whatever

45
Setting all the Font Values at Once

• To set all the font sizes at once
• Type font
• If desired, type normal, oblique, or italic, to
  set the font-style
• If desired, type normal, bold, bolder, lighter,
  or a multiple of 100 (up to 900)
• If desired, type small-caps to use a small cap
  font variant

46
Setting the Text Color

• To set the text color
• Type color
• Type colorname, where colorname is one of 16
  predefined colors
• Or type rrggbb, or rgb (r,g,b) where each can be
  a value from 0-255
• Or rgb (r,g,b) where r, g, b, specify the
  percentage of red, green, or blue.

47
Changing the Texts Background

• To change the texts background
• Type transparent or color, where color is a color
  name or hex color
• If desired, type url(image.gif) where image.gif
  is the URL of the background image.
• If desired, set x and y to set the absolute
  position of the image from the upper left hand
  corner.

48
Controlling Spacing

• You can add or reduce spacing between words. To
  specify tracking
• Type word-spacing
• Type length, where length is a numerical value in
  pixels, points, ems, etc.
• To specify kerning
• Type letter-spacing
• Type length, where length is a numerical value in
  pixels, points, ems, etc.

49
Aligning Text

• You can set up certain HTML tags to always be
  aligned to the right, left, center, or justified,
  as desired.
• To align text
• Type left to align text to the left
• Type right to align text to the right
• Type center to center the text in the middle of
  the screen
• Type justify to align the text on both the right
  and left

50
Underlining Text

• To underline text
• Type text-decoration
• To underline text type underline
• For a line above the text, type overline
• To strike out text, type line-through
• To get rid of underlining, overlining. Etc., type
  text-decorationnone

51
Changing the Text Case

• To change the text case
• Type text-transform
• Type capitalize to put the first character in a
  line as uppercase
• Type uppercase to change all the letters to
  uppercase
• Type lowercase to change all the letters to
  lowercase
• Or type none to leave the text as is

52
Links and Images
53
Images and Links XML / CSS

• You can render images and links a number of ways,
  namespaces are best
• Images and links are HTML tags
• Simply put HTML tags into the XML document (HTML
  is XML remember?)
• Let the browser render it just like HTML
• Your tags look like lthtmltaggtlt/htmltaggt

54
Using the HTML Namespace

• In order to use an HTML prefix in an XML
  document, you have to declare an HTML namespace
  in the XML document
• Declare the HTML namespace
• xmlnshtml"http//www.w3.org/TR/REC-html40

55
Example Code

• ltroot_element xmlnshtml"http//www.w3.org/TR/REC
  -html40"gt
• This allows you to use prefixed tags
• lthtmla
• lthtmlimg
• lthtml (any valid HTML tag in 4.01)

56
Images

• Place images into the XML document
• lthtmlimg src"images/filename.jpg" border"0"
  vspace10" hspace10" /gt
• Or
• ltcover_image filename"images/filename.jpg"
  x"137" y"200"/gt

57
Links

• You can place links in XML documents the same way
  as we did with images
• lthtmla href"http//www.whatever.com/"gt
• And make sure to close with lt/htmlagt
• Anchor the link inside tags if you wish
• lttaggtlthtmla hrefURLgtvisible
  linklt/htmlagtlt/taggt

58
Example Code

• lttitlegtlthtmla href"http//www.amazon.com/exec/ob
  idos/ASIN/038525380X/"gtMetaman The Merging of
  Humans and Machines into a Global
  Superorganismlt/htmlagtlt/titlegt
• When you load the XML document with the CSS style
  sheet attached, the links will be underlined
  exactly like, well HTML ?

59
Summary

• CSS for rendering HTML
• Use selectors to describe elements
• Build CSS files just as with HTML
• Render XML with CSS in a Web browser using CSS
  and XML link
• Images and links can be rendered

60
Reference Sites

• Bobs Books
• http//www.rdcormia.com/COIN78/files/
• Download Bobs_Books.zip
• Or look at the example files
• http//www.rdcormia.com/COIN78/example_files.htm
• Learn by example and dissection!