CSS

Second CSS Lecture

Applications to XML

Dec 9, 2021
 A different emphasis
 CSS is the same for XML as it is for HTML, but--
 HTML already does a pretty good job of layout (arranging elements on the
page)
 XML contains no layout information, so by itself it will typically be
displayed as one single huge blob of text
 When writing CSS for XML, typically the first thing you need to
worry about is arranging text on the page
 No current browser does a good job of supporting CSS,
particularly when used with XML, 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

2
 The display property
 Every XML element that is formatted by a CSS
command is considered to be in an invisible “box”
 The box containing an XML 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

3
 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 don’t 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
4
 Boxes
 The invisible box containing a styled XML element has
three special areas:

The element
padding (invisible)
border (can be colored)

margins (invisible)

5
 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}

6
 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

7
 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

8
 Box and display interactions
 With display:none, contents are invisible and margin,
border, and padding settings have no effect
 With display:block, margin, border, and padding settings
work about as you would expect
 With display:inline (which is the default if you don’t
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

9
 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 display:block
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)

10
position:absolute; left: 0in; top: 0in position:absolute; right: 0in; top: 0in

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 element’s top size units from the page top
 bottom: size puts an element’s bottom size units from the page bottom
 left: size puts an element’s left side size units from the left edge of the page
 right: size puts an element’s right side size units from the right edge of the
page
 Changing an element’s 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

position:absolute; left: 0in; bottom: 0in position:absolute; right: 0in; bottom: 0in
11
 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 element’s position does not affect the position of other
elements, so
 There will be a gap in the element’s original, natural position
 Unless you are very careful, your element will overlap other elements

12
 Pseudo-elements

 Pseudo-elements describe “elements” that are not

actually between tags in the XML document
 Syntax: element:pseudo-class {...}
 first-letter the first character in a block-level element
 first-line the first line in a block-level element (depends on the
browser’s current window size)
 Especially useful for XML (but not implemented in
Internet Explorer):
 before adds material before an element
 Example: author:before {content: "by "}
 after adds material after an element

13
 External style sheets
 In HTML, within the <head> element:
<link REL="STYLESHEET" TYPE="text/css" HREF="Style
Sheet URL">

 As a PI in the prologue of an XML document:

<?xml-stylesheet href="Style Sheet URL" type="text/css"?>

 Note: "text/css" is the MIME type

14
 Namespace selectors
 Namespace selectors (XML only) choose tags from the
given namespace
namespace|element {...} 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

15
 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

16
 Padding
 Padding is used to set the space around an element
 You can set padding individually:
padding-top:, padding-left:,
padding-bottom:, padding-right:
 Or all at once: padding:
 Allowable values: length | 12%

17
The End

18