More CSS

1
More CSS
2
A different emphasis

• CSS is the same for XML as it is for HTML and
  XHTML, but--
• XML contains no display information
• If you want your XML to be easily read by humans,
  you need CSS
• You need to take charge of arranging text on the
  page
• HTML can use tables for layout
• In XHTML you should use CSS (but tables are much
  easier)
• In XML you dont have tables
• Some browsers, especially older versions of IE,
  dont support CSS very well, so
• You should make sure everyone who views your
  pages uses the same version of the same browser
  (this is possible in some companies), or
• You should test your pages in all the most common
  browsers

3
The display property

• Every element that is formatted by a CSS command
  is considered to be in an invisible box
• The box containing an element can have one of
  three display properties
• display block
• The element will start on a new line, and so will
  the element that follows it (an HTML paragraph is
  an example)
• display inline
• (default) The element will not start on a new
  line, or cause the next element to start on a new
  line (bold is an HTML example)
• display none
• The element is hidden and will not appear on the
  display

4
CSS units

• For many of the remaining CSS values, we will
  need to be able to specify size measurements
• These are used to specify sizes
• em width of the letter m
• ex height of the letter x
• px pixels (usually 72 per inch, but depends on
  monitor)
• percent of inherited size
• These are also used to specify sizes, but dont
  really make sense unless you know the screen
  resolution
• in inches
• cm centimeters
• mm millimeters
• pt points (72pt 1in)
• pc picas (1pc 12pt)
• Note you can use decimal fractions, such as 1.5cm

5
Boxes

• The invisible box containing a styled element has
  three special areas

The element
6
Padding

• Padding is the extra space around an element, but
  inside the border
• To set the padding, use any or all of
• padding-top size
• padding-bottom size
• padding-left size
• padding-right size
• padding size to set all four sides at once
• size is given in the units described earlier
• Example sidebar padding 1em padding-bottom
  5mm

7
Borders

• You can set border attributes with any or all of
  border-top, border-bottom, border-left,
  border-right, and border (all at once)
• The attributes are
• The thickness of the border thin, medium
  (default), thick, or a specific size (like 3px)
• The style of the border none, dotted, dashed,
  solid, double, groove, ridge, inset, or outset
• The color of the border one of the 16 predefined
  color names, or a hex value with rrggbb or
  rgb(r, g, b) or rgb(r, g, b)
• Example section border-top thin solid blue
• Note the special styles (such as groove) are not
  as cool as they sound

8
Margins

• Margins are the extra space outside the border
• Setting margins is analogous to setting padding
• To set the margins, use any or all of
• margin-top size
• margin-bottom size
• margin-left size
• margin-right size
• margin size to set all four sides at once

9
Box and display interactions

• With displaynone, contents are invisible and
  margin, border, and padding settings have no
  effect
• With displayblock, margin, border, and padding
  settings work about as you would expect
• With displayinline (which is the default if you
  dont specify otherwise)
• Margin, border, and padding settings for left and
  right work about as you would expect
• Margin, border, and padding settings for top and
  bottom do not add extra space above and below the
  line containing the element
• This means that inline boxes will overlap
  other text

10
Sizing elements

• Every element has a size and a natural position
  in which it would be displayed
• You can set the height and width of displayblock
  elements with
• height size
• width size
• You cannot set the height and width of inline
  elements (but you can set left and right margins)
• In HTML, you can set the height and width of
  images and tables (img and table tags)

11
Setting absolute position

• To move an element to an absolute position on the
  page
• position absolute (this is required!) and
  also one or more of
• left size or right size
• top size or bottom size
• Confusing stuff
• size can be positive or negative
• top size puts an elements top size units from
  the page top
• bottom size puts an elements bottom size units
  from the page bottom
• left size puts an elements left side size
  units from the left edge of the page
• right size puts an elements right side size
  units from the right edge of the page
• Changing an elements absolute position removes
  it from the natural flow, so other elements fill
  in the gap
• You need to be careful not to overlap other
  elements

12
Setting relative position

• To move an element relative to its natural
  position, use
• position relative (this is required!) and
  also one or more of
• left size or right size
• top size or bottom size
• Confusing stuff
• size can be positive or negative
• to move left, make left negative or right
  positive
• to move right, make right negative or left
  positive
• to move up, make top negative or bottom positive
• to move down, make bottom negative or top
  positive
• Setting an elements position does not affect the
  position of other elements, so
• There will be a gap in the elements original,
  natural position
• Unless you are very careful, your element will
  overlap other elements

13
Pseudo-elements

• Pseudo-elements describe elements that are not
  actually between tags in the XML document
• Syntax elementpseudo-class ...
• first-letter the first character in a
  block-level element
• first-line the first line in a block-level
  element (depends on the browsers current window
  size)
• Especially useful for XML (but not implemented in
  Internet Explorer)
• before adds material before an element
• Example authorbefore content "by "
• after adds material after an element

14
External style sheets

• In HTML, within the ltheadgt elementltlink
  REL"STYLESHEET" TYPE"text/css"
  HREF"Style Sheet URL"gt
• As a PI in the prologue of an XML
  documentlt?xml-stylesheet href"Style Sheet URL"
  type"text/css"?gt
• Note "text/css" is the MIME type

15
Namespace selectors

• Namespace selectors (XML only) choose tags from
  the given namespace
• namespaceelement ... chooses the element if
  and only if it is from the given namespace
• element ... chooses the element regardless of
  the namespace
• element ... chooses the element if it has no
  declared namespace
• Namespace selectors are currently supported only
  by Netscape 6

16
Some border styles and values

• You can put borders around elements
• Borders have width, style, and color
• These can be set individually
• border-left-style, border-bottom-color, etc.
• Or a border at a time
• border-top, border-right, etc.
• Or all borders at once border
• Available values are
• border-width thin medium thick length
• border-style none hidden dotted dashed
  solid double groove ridge inset outset
• border-color color

17
But wait! Theres more...

• In this and the preceding lectures, Ive covered
  some of the more commonly useful parts of CSS
• (In other words, the parts Ive been using)
• There are other features I havent touched on

18
The End