Cascading Style Sheets CSS

1
Cascading Style Sheets (CSS)
2
Overview

• The names of most XML elements describe the
  semantic meaning of the content they contain
• The content needs to be formatted and displayed
  to users
• There must be a step where formatting information
  is applied to the XML document and the semantic
  markup is transformed into presentation markup
• Cascading Style Sheets (CSS)
• XSL Formatting Objects (XSL-FO)

3
CSS

• CSS is a non-XML syntax for describing the
  appearance of particular elements in a XML
  document
• A CSS stylesheet does not change the markup of an
  XML document it merely applies styles to the
  content that already exists
• XSLT CSS
• Example used 12-1.xml

4
CSS Syntax

• A CSS stylesheet is simply a list of the elements
  you want to apply the styles to, primarily one to
  a line
• If the element is in a namespace, then the
  qualified name like recipedisk must be used
• Each element name is followed by the styles you
  want to apply to that element
• Enclosed in
• Neither the style names and values are case
  sensitive
• The styles cascade down the XML tree
• Associating Stylesheets with XML Documents
• lt?xml stylesheet type"text/css"
  href"css_stylesheet.css" ?gt
• CSS example 12-2.css

5
Selectors

• CSS provides limited ability to select the
  elements to which a given rule applies
• Many stylesheets only use element names and lists
  of element names separated by commas (,)
• The universal selector () matches any element
• Apply the rule to everything in the document that
  does not have a more specific, conflicting rule
• font-size large

6
Selectors (Cont.)

• Match descendants, children, and siblings
• An element name A followed by another element
  name B matches all B elements that are
  descendants of A elements
• ingredients quantity font-size medium
• If the two element names are separated by "gt",
  then the second element must be an immediate
  child of the first for the rule to apply
• ingredient gt quantity font-size medium
• If the two element names are separated by "",
  then the second element must be the next sibling
  element immediately after the first for the rule
  to apply
• directions story border-top-style solid

7
Selectors (Cont.)

• Attribute selectors
• Square brackets allow you to select elements with
  particular attributes or attribute values
• stepoption display none
• option display none
• stepoption"yes" display none
• recipesource "Anderson" font-weight bold
• contain a given word as part of the value of the
  attribute
• recipesource "Anderson" font-weight bold
• match against the first word in a
  hyphen-separated attribute value, such as
  "Anderson-Harold"
• stepP833 font-weight 800
• select elements with a given ID value

8
Selectors (Cont.)

• Pseudo-element selectors
• first-letter select the first letter of an
  element
• first-line apply to all characters in the first
  line of a block-level element
• before and after select the points immediately
  before and after the specified element
• 12-3.css
• Pseudo-class selectors
• first-child match the first child element of the
  named element
• link, visited, active, ? Xlinks
• hover, focus, lang(he)

9
The Display Property

• The display property determines how the element
  will be positioned on the page
• Inline elements display inline
• The default value. Place the element in the next
  available position
• quantity, step, person, city, state
• Block elements display block
• Separate from its siblings generally by a line
  break
• dish, directions, story
• Hidden elements display none
• Invisible and does not occupy any space or affect
  the placement of other elements

10
The Display Property (Cont.)

• List elements displaylist-item
• list-style-type, list-style-image,
  list-style-position
• Table elements
• table, inline-table
• table-row, table-row-group, table-header-group,
  table-footer-group
• table-column, table-column-group
• table-cell
• table-caption
• Their use should be consistent with each other
  and with other elements in the document

11
Pixels, Points, Picas

• Many CSS properties represent lengths
• border-width, font-size, line-height,
  margin-left, margin-top, margin-right,
  margin-bottom, left, top, height, width
• CSS provides many units to specify length
• Absolute units inches, centimeters, millimeters,
  points, picas
• Relative units ems, exes, pixels, percentages
  ()
• em relative to the width of M, in the current
  font
• ex relative to the height of x in the current
  font
• percentages of some other length
• line-height is dependent on font-height

12
Font Properties

• font-family a list of font names, separated by
  commas, in order of preference
• font-style italic, oblique, normal, inherit
• font-size
• xx-small, x-small, small, medium, large, x-large,
  xx-large
• percentage of the parent element
• absolute or relative length
• font-variant small-caps
• font-weight normal, bold, bolder, lighter, (100,
  200900)
• font-stretch normal, wider, narrower,
  ultra-condensed, extra-condensed, condensed,
  semi-condensed, semi-expanded, expanded,
  extra-expanded, ultra-expanded

13
Text Properties

• text-indent specify how far in to indent the
  first line of the block
• Hanging indents can be specified by making
  text-indent negative
• Only applies to block-level elements
• text-align left, right, center, justify
• Only applies to block-level elements
• text-decoration underline, overline,
  line-through, blink
• text-transform capitalize, uppercase, lowercase,
  none
• white-space normal, pre, nowrap, inherit
• determine whether text is wrapped

14
Colors

• CSS has several properties for changing the color
  of various items
• color the color of the text itself
• background-color the color of the background
  behind the text
• border-color the color of a visible box
  surrounding the text
• CSS uses a 24-bit color space to specify colors
• Color specification
• 16 named colors aqua, black, blue, fuchsia,
  gray, green, lime, maroon, navy, olive, purple,
  red, silver, teal, white, yellow
• color FF0000
• color rgb(43, 43, 43)
• color rgb(25, 38, 100)