More CSS Jan 14 2019 A different emphasis CSS is the same for XML as it is for HTML and XHTML but HTML can use tables for layout 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 In XHTML you should use CSS but tables are much easier In XML you don t have tables Some browsers especially older versions of IE don t 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 2 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 display inline The element will start on a new line and so will the element that follows it an HTML paragraph is an example 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 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 tion absolute left 0in top 0inposition absolute right 0in top 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 tion absolute left 0in bottom position absolute 0in right 0in bottom 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
View Full Document
Unlocking...