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 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 as1.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 • sizeis 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:sizeto 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:sizeputs an element’s top size units from the page top • bottom: sizeputs an element’s bottom size units from the page bottom • left:sizeputs an element’s left side size units from the left edge of the page • right:sizeputs 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. 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. 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%

18. The End