CSS

1. CSS Second CSS Lecture Applications to XML

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

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

4. CSS units • For many of the remaining CSS values, we will need to be able to specify how much space to put around elements • CSS uses several measurement units: • em the current font size • ex the x-height (height of an x) in the current font • px number of pixels (typically about 72 per inch) • % percent of the size in the parent element • in inches (assuming about 72 pixels per inch) • cm centimeters (assuming about 72 pixels per inch) • mm millimeters (assuming about 72 pixels per inch) • pt points, 1/72 of an inch (assuming about 72 pixels per inch) • pc pica; one pica = 12 points • Note: you can use decimal fractions, such as 1.5cm

5. padding (invisible) border (can be colored) margins (invisible) Boxes • The invisible box containing a styled XML 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 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 bottomdo 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 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)

11. position:absolute; left: 0in; top: 0in position:absolute; right: 0in; top: 0in position:absolute; left: 0in; bottom: 0in position:absolute; right: 0in; bottom: 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

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

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

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

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

16. Lengths • These are used in measurements: • em, ex, px, % • font size, x-height, pixels, percent of inherited size • in, cm, mm, pt, pc • inches, centimeters, millimeters, points (1/72 of an inch), picas (1 pica = 12 points), relative to the inherited value

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

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