More CSSA different emphasisThe display propertyCSS unitsBoxesPaddingBordersMarginsBox and display interactionsSizing elementsSetting absolute positionSetting relative positionPseudo-elementsExternal style sheetsNamespace selectorsSome border styles and valuesBut wait! There’s more...The EndJan 14, 2019More CSS2A different emphasisCSS is the same for XML as it is for HTML and XHTML, but--XML contains no display informationIf you want your XML to be easily read by humans, you need CSSYou need to take charge of arranging text on the pageHTML can use tables for layout In XHTML you should use CSS (but tables are much easier)In XML you don’t have tablesSome 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), orYou should test your pages in all the most common browsers3The display propertyEvery 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: blockThe 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: noneThe element is hidden and will not appear on the display4CSS unitsFor many of the remaining CSS values, we will need to be able to specify size measurementsThese 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 sizeThese are also used to specify sizes, but don’t really make sense unless you know the screen resolution:in inchescm centimetersmm millimeterspt points (72pt = 1in)pc picas (1pc = 12pt)Note: you can use decimal fractions, such as 1.5cm5border (can be colored)BoxesThe invisible box containing a styled element has three special areas:padding (invisible)margins (invisible)The element6PaddingPadding is the extra space around an element, but inside the borderTo set the padding, use any or all of:padding-top: sizepadding-bottom: sizepadding-left: sizepadding-right: sizepadding: size to set all four sides at oncesize is given in the units described earlierExample: sidebar {padding: 1em; padding-bottom: 5mm}7BordersYou 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 outsetThe 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 sound8MarginsMargins are the extra space outside the borderSetting margins is analogous to setting paddingTo set the margins, use any or all of:margin-top: sizemargin-bottom: sizemargin-left: sizemargin-right: sizemargin: size to set all four sides at once9Box and display interactionsWith display:none, contents are invisible and margin, border, and padding settings have no effectWith display:block, margin, border, and padding settings work about as you would expectWith 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 expectMargin, border, and padding settings for top and bottom do not add extra space above and below the line containing the elementThis means that inline boxes will overlap other text10Sizing elementsEvery element has a size and a natural position in which it would be displayedYou can set the height and width of display:block elements with:height: sizewidth: sizeYou 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)11Setting absolute positionTo move an element to an absolute position on the pageposition: absolute (this is required!) and also one or more ofleft: size or right: sizetop: size or bottom: sizeConfusing stuff:size can be positive or negativetop: size puts an element’s top size units from the page topbottom: size puts an element’s bottom size units from the page bottomleft: size puts an element’s left side size units from the left edge of the pageright: size puts an element’s right side size units from the right edge of the pageChanging an element’s absolute position removes it from the natural flow, so other elements fill in the gapYou need to be careful not to overlap other elementsposition:absolute; left: 0in; top: 0inposition:absolute; right: 0in; top: 0inposition:absolute; left: 0in; bottom: 0inposition:absolute; right: 0in; bottom: 0in12Setting relative positionTo move an element relative to its natural position, useposition: relative (this is required!) and also one or more ofleft: size or right: size top: size or bottom: size Confusing stuff:size can be positive or negativeto move left, make left negative or right positiveto move right, make right negative or left positiveto move up, make top negative or bottom positiveto move down, make bottom negative or top positiveSetting an element’s position does not affect the position of other elements, soThere will be a gap in the element’s original, natural positionUnless you are very careful, your element will overlap other elements13Pseudo-elementsPseudo-elements describe “elements” that are not actually between tags in the XML documentSyntax: element:pseudo-class {...}first-letter the first character in a block-level elementfirst-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 elementExample: author:before {content: "by "}after adds
View Full Document
Unlocking...