Web Design in a Nutshell

Web Design in a Nutshell Chapter 17: Cascading Style Sheets (CSS)

Summary

Synopsis • For those frustrated with the limited control over document presentation provided by straight HTML markup, Cascading Style Sheets (CSS) are a welcome advance in web design. • They are also the official W3C standard for controlling all presentation, leaving HTML markup to indicate structure as it was designed to do.

Using style sheets • Style sheets in HTML allow authors to apply typographic styles and spacing instructions for elements on a web page. • The word cascading refers to what happens when several sources of style information vie for control of the elements on a page – style information is passed down from higher-level style sheets until it is overridden by a style command with more weight (higher priority).

Advantages of using style sheets • Greater typography and page layout control • With style sheets, you can specify traditional typography attributes such as font-size, line spacing, and letter spacing. Style sheets also offer methods for specifying indents, margins, and element positioning, and they even use terminology from traditional and desktop publishing, such as points and em spaces. • Style is separate from structure • HTML is designed for indicating the structure of a document, to which presentation is applied by the end user’s browsing environment. Style sheets, when done properly, mark the return to the original intent of HTML by removing presentation instructions from HTML and placing them in a separate, optional area • Easier site maintenance • It is possible to link multiple HTML pages to a single style sheet, which means not only can you make one change that affects every instance of that element on a single HTML page, but you can also make style changes to hundreds, or thousands, of web pages by editing a single file • It’s easy to learn • Creating basic style sheets is no more difficult than tagging documents, once you learn the rules.

Disadvantages of style sheets • The sole drawback to implementing style sheets remains uneven browser support. • The W3C first published its recommendation for style sheets in 1996, and were first implemented in IE 3.0. Since then, MS and Netscape have chosen diverging paths in the properties their browsers support and the way those properties are presented. A browser support list is maintained at http://siu.globaleyes.com/files/CSS/mastergrid.shtml • The outlook continues to improve with the release of standards-compliant browsers and as older versions fade away. IE 5.5+ & NS 6+ claim to support almost all of the CSS level 1 specification and parts of CSS Level 2.

Strategies for using style sheets • Include end tags • While current browsers don’t mind if you leave off the </p> or </li> tag, style sheets (and other web technologies such as XML and JavaScript) do mind. It is necessary to have clearly defined text elements, including both tags. • Serve different styles to different browsers • Another approach is to develop 2 versions of your site and deliver the proper version using a browser-detect JavaScript or server-side code. You might have a fully-styled version that is aimed at the standards-compliant browsers, and another “vanilla” version that is stable without style sheets for everyone else. Because of lingering differences between browsers, you may want to develop 3 style sheets: 1 for NS 6+, 1 for IE 5.5+, and another “vanilla” style sheet.

How style sheets work • The key to working with style sheets is understanding how to define rules and then attach those rules to one or more HTML documents and their elements • Rule syntax • Style sheets consist of one or more rules for describing how a page element should be displayed. The following example contains 2 rules. The first makes all the H1s in a document red; the second specifies that paragraphs should be set in 12-pixel high Verdana or some sans-serif font: • H1 • { • color: red; • } • P • { • font-size: 12px; • font-family: Verdana, sans-serif; • }

How style sheets work (cont.) • The two main sections are the selector (which identifies the element to be affected) and the declaration (the style or display instructions to be applied to that element). In the example code, H1 and P are the selectors. • H1 • { • color: red; • } • P • { • font-size: 12px; • font-family: Verdana, sans-serif; • } • The declaration, enclosed in curly brackets, is made up of a property and its value. Properties are separated from their values by the colon (:) character followed by a space. A property is a stylistic parameter that can be defined, such as color, font-family, or line-height. • The declaration may contain several property/value pairs. Multiple properties must be separated by semicolons (;). The last property does not require a semicolon, but it is usually included anyway to make it easy to add more property/value pairs later. • Values are dependant on the property. Some properties take length measurements, some take color names, and others have a predefined list of accepted values

Adding styles to an HTML document • Rules (and sets of rules) can be applied to HTML documents in 3 ways: • Inline styles: • Style information can be added to an individual element by adding the style attribute within the HTML tag for that element. The value of the style attribute is one or more standard style declarations <h1 style=“color: red;font-size: 12pt;”>This is red</h1> • Although a perfectly valid use of style information, inline styles are equivalent to the <font> tag in that they “pollute” the document with presentation information. Also, changes would need to be made to each individual tag when style changes are required. • Inline styles are best used only occasionally to override higher-level rules.

Adding styles to an HTML document (cont.) • Embedded style sheets • A more compact method for adding style sheets is to embed a style block in the <head> of the HTML document using the <style> element <head> <style type=“text/css”> H1 { color: red; font-size: 12pt; } </style> </head> • Currently, CSS is the only widely supported style sheet language. However, if the type=“text/css” attribute is missing, some browsers may ignore the entire style sheet.

Adding styles to an HTML document (cont.) • External style sheets • The most powerful way to use styles is to collect them all in a separate text document and create links to that document from all web pages in a site. In this way, you can make stylistic changes consistently across a whole site by editing the style information in a single document. • The style sheet document is a simple text document that contains a collection of style sheet rules. It may not contain HTML tags. It also may not include HTML comments. Style sheet documents should also always have an extension of .css. • There are 2 ways to refer to external style sheets within an HTML document (both which should occur within the <head> of your document: • Linking (most standard and best-supported method) <link rel=“stylesheet” href=“/path/stylesheet.css” type=“text/css”> • Importing (less-support but with potentially more options) <style type=“text/css”> @import url(http://path/stylesheet.css); </style> • @import commands must come before any embedded style rules • Whether linking or embedding, if multiple CSS files are loaded, the latest one takes precedence when there are conflicts in the style definitions

Inheritance • An important feature of style sheets is the concept of inheritance, in which style properties are passed down from an element (the parent) to any element contained within it (the child). An element is said to inherit properties applied to elements higher in the HTML hierarchy. In CSS, most properties can be inherited, but some (e.g. margins) cannot. • E.g., if you set the text color for a <ul> list, then this color will be inherited by every list item (<li>) within the list. • Styles applied to specific elements override settings higher in the hierarchy. • E.g., if you’d like all the text on the page to be blue except for list items and all text to be MS Comic Sans, you can set the color property and the font-family property for the <body> tag and then use another rule to make the <li> a different color. The more specific rules override more general rules, but non-overridden rules will still apply.

Conflicting style sheets: the cascade • Style sheets are said to be cascading because many different style sheet rules, coming from many different possible style sheets (inline, embedded, or external) can simultaneously affect the presentation of a single document. • For example, it is possible to add inline styles to a document that is already linked to an external style sheet. The final look will result from all these style components cascading • With several styles applied to a document, conflicts are certain to arise (and are usually designed that way) • For example, when an inline style says the paragraph should be maroon, but the external style sheet says all paragraphs are blue, which one gets used?

Conflicting style sheets: the cascade (cont.) • The W3C anticipated this situation and devised a hierarchical system that assigns different priorities to each type of style information. • Styles with a higher priority (those defined at the more specific level), take precedence over styles set in a higher-level style sheet. • This allows the author to design a general style for a whole site, then modify it for particular pages or elements • The following list shows the hierarchy of style from general to specific • Browser default settings • User style settings • Linked external style sheets (first to last if multiple files are linked) • Imported style sheets (first to last if multiple files are imported) • Embedded style sheets (later rules have higher priority than earlier ones) • Inline style information

Conflicting style sheets: the cascade (cont.) • If you want a rule never to be overridden by a subsequent rule, include the !important indicator just after the property value and before the semicolon p {color: blue !important;} • Even if the browser encounters an inline style later in the document, that paragraph will still be blue

Selectors • Selectors are the parts of the rule that identify the element to which the style will be applied. • There are several methods for identifying elements • Type selector • The simplest type of selector calls an HTML element by its tag h1 {color: blue;} h2 {color: blue;} • Type selectors can be grouped into comma-separated lists so a single property will apply to all of them h1,h2,h3,h4,h5,h6 {color: blue;} • Contextual selectors • You can also specify style attributes for HTML elements based upon the context in which they appear • Contextual selectors are created by specifying a list of simple selectors separated by a space • Using a contextual selector, you can specify that only the list items within an ordered list have the text set to blue ul li {color: blue;}

class and id attribute selectors • Attribute selectors allow web page authors to apply style rules based on special identifying attributes placed within HTML element tags. • There are currently 2 available attribute selectors which can be applied to all HTML elements except <base>, <head>, <html>, <meta>, <script>, <style>, <basefont>, <param>, and <title> • class selector • use the class attribute to identify a number of elements as being part of a conceptual group. Elements in a class can then be modified with a single style rule. For instance, you can identify all items in the HTML document that you classify as “important”: <h1 class=“important”>Attention!<h1> <p class=“important”>Your account is past due</p>

class and id attribute selectors (cont.) • To specify the styles for elements of a particular class, add the class name to the HTML selector, separated by a period. h1.important {color: red}; p.important {color: red}; • To apply a property to all the elements of the same class, omit the tag name in the selector (be sure to leave the period) .important {color: red}; • id selector • The id attribute is used similar to class, but it is used for targeting a single element rather than a group. id must be used to name an element uniquely. • In the following example, a paragraph is given a specific id (note that the value of an id attribute must always begin with a letter and only 1 element with that id can exist within the HTML document) <p id=“j042801”>New item added today</p> • id selectors are indicated by the hash (#) symbol within the style sheet p#j042801 {color: red;} or #j042801 {color: red;}

Pseudo-selectors • The CSS specification provides several pseudo-elements and pseudo-classes that are not based on structural elements of a document. They can be used as selectors, but the code does not appear in the HTML source; rather, they are interpreted by the browser based on context and function. • Pseudo-selectors are indicated by the colon (:) character • Pseudo-elements • The pseudo-elements (subparts of existing elements) are first-line and first-letter. They can be used to apply styles to the first line or letter of an HTML element as it is displayed in the browser window • The following code adds extra letter spacing in the first line of text for every paragraph p:first-line {letter-spacing: 6pt;} • Pseudo-elements can be combined with class information, so you can apply first-line or –letter effects to only a certain class of an element • The following code makes the first letter of any paragraph with a class of opener big and red p.opener:first-letter {font-size: 300%; color: red;}

Pseudo-selectors (cont.) • Pseudo-classes • CSS provides 4 pseudo-classes that can be applied to the anchor (<a>) tag • link: links that have not yet been visited • visited: links that have been visited by the client browser (in the history) • hover: when the mouse passes over a link (must be after :link & :visited) • active: when the user clicks on a link but prior to releasing the mouse button A:link { color: red } /* unvisited links */ A:visited { color: blue } /* visited links */ A:hover { color: yellow } /* user hovers */ A:active { color: lime } /* active links */ • Note: These don’t apply to named anchors, only those containing the HREF attribute • Another pseudo-class which doesn’t relate only to anchor tags is the :focus pseudo-class. A:focus { background: yellow } A:focus:hover { background: white }

Specifying Values • It is important to use the proper syntax for specifying length and color values in style sheet rules • Length Units

Specifying Values (cont.) • Some values can be specified as percentages that are relative to the font size or bounding box of the element p {line-length: 120%} • Designers should keep in mind that the specific unit measurements listed above (pt, pc, in, mm, and cm) are not good choices for screen design because of the variation in size from monitor to monitor. It is preferable to use the relative measurements, em & ex. Pixels are acceptable for measurements of elements, but not fonts. • Specifying color • As in HMTL tags, there are 2 methods for specifying color in style sheets • By Name • By RGB values: h1 {color: #0000FF;} /* as in HTML */ h1 {color: #00F;} /* replicating each hex value */ h1 {color: rgb(0,0,255);} /* comma-separated list of decimal values from 0 through 255 */ h1 {color: rgb(0%,0%,100%);} /* comma-separated list of relative percentages from 0 through 100% */

Properties • The real meat of style sheets lies in the collection of properties that can be applied to selected elements. The properties reviewed in this chapter reflect those provided in CSS1. Additional properties and values are also available in CSS2 (see the files tab of the class’ website). • The properties provided describe how each property ought to work according to the specification. Many of these are either unsupported or buggy in earlier versions of web browsers. For a listing of which browsers support which properties, see the class’ website or Appendix E of the textbook.

Type-related properties • font-family • You can specify any font (or list of fonts, separated by commas) in the font-family property. Bear in mind, however, that the font needs to be present on the user’s machine in order to display, so it is best to stick with common fonts • You may (and it is advisable) include a generic font family as the last option in your list so that if the specific fonts are not found, a font that matches the general style of your choices will be substituted. The 5 possible generic font family values are: • Serif (e.g. Times) • Sans-serif (e.g. Helvetica or Arial) • Monospaced (e.g. Courier or Courier New) • Cursive (e.g. Zapf-Chancery) • Fantasy (e.g. Western, Impact, MS Comic Sans, or some other font) • Font names that contain character spaces must be enclosed in quotes (single or double). Generic family names must never be enclosed in quotes. • Values: family name, generic family name • Example: P {font-family: “Trebuchet MS”, Verdana, sans-serif;} • Applies to: All elements • Inherited: Yes

Type-related properties (cont.) • font-style • The font-style property selects between normal (the default) and italic or oblique faces within a font family. Oblique is just a slanted version of the normal face. Italic is usually a separate face design with more curved characters. Note that bold is part of font-weight, not font-style • Values: normal|italic|oblique • Example: H1 {font-style: italic;} • Applies to: All elements • Inherited: Yes • font-variant • Use the font-variant property to specify that an element display in small caps. If a true small caps font face is not available in the specified font, the browser may simulate small caps by displaying all caps at a reduced size. More values may be supported in the future • Values: normal|small-caps • Example: P:first-line {font-variant: small-caps;} • Applies to: All elements • Inherited: Yes

Type-related properties (cont.) • font-weight • The font-weight property specifies the weight, or boldness, of the type. It can be specified either as a descriptive term (normal, bold, bolder, lighter) or as one of the 9 numeric values. The default (normal) weight corresponds to 400 on the numeric scale. Bold corresponds to 700 on the numeric scale. Browsers are currently inconsistent in their support of this property except with the bold value. • Values: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 • Example: STRONG {font-weight: 700;} • Applies to: All elements • Inherited: Yes • color • This property is used to describe the text (a.k.a. foreground) color of an element. • Values: color name|RGB color value • Example: BLOCKQUOTE {color: navy;} H1 {color: #666633;} • Applies to: Block-level elements • Inherited: Yes

Type-related properties (cont.) • font-size • As the name suggests, the font-size property specifies the size of the text element. There are 4 methods for specifying size: • absolute size • Values: xx-small|x-small|small|medium|large|x-large|xx-large • Example: H1 {font-size: x-large;} • Absolute sizes are descriptive terms that reference a table of sizes kept by the browser • relative size • Values: larger|smaller • Example: H1 {font-size: larger;} • These values specify the size of the type relative to the parent object • length • Values: number+em|ex|px|pt|pc|mm|cm|in • Example: H1 {font-size: 24pt;} • You can also specify font size using any length values described in the Length Units section • percentage • Values: n% • Example: H1 {font-size: 125%;} • Specifies the font size as a percentage of the inherited size • Applies to: All elements • Inherited: Yes

Type-related properties (cont.) • line-height • Sets the distance between the baselines of adjacent lines of text (called “leading” in traditional publishing and can be used to create different effects by adding white space to the block of text. • The default value is normal, which corresponds to 100-120%, depending on the browser’s interpretation of the tag. • The following examples show 3 alternative methods for the same amount of line spacing. • Values: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 • Example: P {line-height: 1.2;} P {line-height: 1.2em;} P {line-height: 120%;} • Applies to: All elements • Inherited: Yes • word-spacing • Specifies an additional amount of space to be placed between words of the text element. When specifying relative lengths (such as em), the calculated size will be passed down to child elements, even if they have a smaller font size than the parent. • Values: normal|length • Example: H3 {word-spacing: .5em;} • Applies to: All elements • Inherited: Yes

Type-related properties (cont.) • letter-spacing • Specifies an amount of space to be added between characters.When specifying relative lengths (such as em), the calculated size will be passed down to child elements, even if they have a smaller font size than the parent. • Values: normal|length • Example: P.opener:firstline {letter-spacing: 2pt;} • Applies to: All elements • Inherited: Yes • text-decoration • Applies a “decoration” to a text, such as underlines, overlines (a line over the text), strike-throughs, and the ever-beloved blinking effect. • Values: none|underline|overline|line-through|blink • Example: A:link, A:visited, A:active {text-decoration: none;} A:hover {text-decoration: underline;} • Applies to: All elements • Inherited: No, but a text decoration is “drawn through” any child elements

Type-related properties (cont.) • vertical-align • Affects the vertical alignment of an element. • The possible values are: • baseline: aligns the baseline of text (or bottom of an image) with the baseline of the parent element (this is the default) • bottom: aligns the bottom of the element with the bottom of the lowest element on the line • middle: aligns the “vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent” (in the words of the CSS1 specification) • sub: lowers the element relative to the baseline • super: raises the element relative to the baseline • text-bottom: aligns the bottom of the element with the bottom of the parent element’s font • text-top: aligns the top of the element with the top of the parent element’s font • top: aligns the top of the element with the tallest element on the line • percentage: values refer to the value of the line-height property of the element • Values: baseline|bottom|middle|sub|super|text-bottom|text_top|top|percentage • Example: IMG.capletter {vertical-align: text-top;} • Applies to: Inline elements • Inherited: No • text-align • Affects the horizontal alignment of the contained text within an element • Values: center|justify|left|right • Example: DIV.center {text-align: center;} • Applies to: Block-level elements • Inherited: Yes

Type-related properties (cont.) • text-transform • Affects the capitalization of the element. • The possible values are: • none: displays the element as it is typed in the HTML source and neutralizes any inherited value • capitalize: displays the first letter of every word in uppercase characters • lowercase: displays the whole element in lowercase characters • uppercase: displays the whole element in uppercase characters • Values: none|capitalize|lowercase|uppercase • Example: H1.title {text-transform: capitalize;} • Applies to: All elements • Inherited: Yes • text-indent • Specifies an amount of indentation (from the left margin) to appear in the first line of ext in an element. The value of text-indent may be negative to create hanging-indent effects, although this feature is poorly supported • Values: length|percentage • Example: P.first {text-indent: 3em;} • Applies to: Block-level elements • Inherited: Yes

Box properties • Style sheets treat each element on a page as though it were contained within a box (imagine 4 lines drawn against the edges of a paragraph). More accurately, each element is in a series of containing boxes, beginning with the content itself, surrounded by padding, then the border, which is surrounded by the margin. The margin padding and border parts, as well as an element’s width and height are illustrated below. • The content itself is contained within the element’s width. Any background applied to an element extends into the padding space and under the border, but not beyond the border’s outer edge. The boundary of the margin is not visible, but is a calculated amount. • CSS1 provides many properties for controlling the presentation of an element’s box, including setting the amount of padding and margin, the appearance of the borders, and the background color. The box model is also the basis for absolute positioning, so it is important to get a feel for how they work.

Box properties (cont.) • margin-top, margin-right, margin-bottom, margin-left • Specify the amount of margin on specific sides of the element. Values for margin-right and margin-left can be specified in length units, as a percentage based on the size of the element’s overall box width, or as auto, which automatically fills in a margin amount based on other elements on the page. Margin-top and margin-bottom may be specified in length units or auto (not in percentages) • Values: length|percentage|auto • Example: IMG {margin-top: 0px; margin-right: 12px; margin-bottom: 0px; margin-left: 12px;} • Applies to: All elements • Inherited: No • padding-top, padding-right, padding-bottom, padding-left • Specify an amount of padding to be added around the respective sides of an element’s contents • Values: length|percentage • Example: P.sidebar {padding-top: 1em;} • Applies to: All elements • Inherited: No

Box properties (cont.) • border-top-width, border-right-width, border-bottom-width, border-left-width • These properties specify the border widths of the respective sides of an elements box. The keywords thin, medium, and thick will be interpreted by the browser and are consistent throughout the document (they are not affected by the font size of the element). You can also specify a length unit. • Values: length|thin|medium|thick • Example: P.sidebar {border-right-width: medium; border-bottom-width: thick;} • Applies to: All elements • Inherited: No • border-width • Shorthand property for specifying the width of the border for all 4 sides of the element box. A single value will set the same border width for all 4 sides of the box. More than one value will be interpreted as described for the margin property (top, right, bottom, left) • Values: length|thin|medium|thick • Example: P.sidebar {border-width: 3px;} • Applies to: All elements • Inherited: No

Box properties (cont.) • border-color • This property sets the border color for each of the 4 sides of an element box. A single value will apply to all 4 borders of the box. More than one value will be applied as described for the margin property (top, right, bottom, left) • Values: color name|RGB value • Example: BLOCKQUOTE {border-color: red blue lime yellow;} • Applies to: All elements • Inherited: No • border-style • Sets the style of the border for an element box. A single value will result in a box with the same style border on all 4 sides. More than one value will be interpreted as described for the margin property (top, right, bottom, left). The example given will result in a box with a solid line on the top and bottom and with dashed rules on the left and right sides. • Values: none|dotted|dashed|solid|double|groove|ridge|inset|outset • Example: P.example {border-style: solid dashed;} • Applies to: All elements • Inherited: Yes

Box properties (cont.) • border-top, border-right, border-bottom, border-left • Each of these properties is a shorthand property for setting the sidth, style, and color of a specific side of a box. The example given would create a solid blue border, .5 em thick, on the left side of the H1 element only. • Values: border-top-width border-style border-color • Example: H1 {border-left: .5em solid blue;} • Applies to: All elements • Inherited: No • border • A shorthand property for setting the border width, style, and color for all 4 sides of an element box. The values specified in border will always apply to all 4 sides of the box and cannot be used to give different values to the different sides. • Values: border-top-width border-style border-color • Example: P.example {border: 2px dotted #666633;} • Applies to: All elements • Inherited: No

Box properties (cont.) • width • This property sets the width of the element and can apply to blocks (like paragraphs) in addition to things like images. If you use this on an image, be sure also to specify the height. Percentage values pertain to the width of the containing block. • Values: length|percentage|auto • Example: IMG.photo {width: 300px; height: 300px;} P.narrow {width: 75%;} • Applies to: Block-level elements and replaced elements (such as graphics) • Inherited: Yes • height • This property sets the height of the element and can apply to blocks (like paragraphs) in addition to things like images. If you use this on an image, be sure also to specify the width. CSS1 does not allow percentage values for height, although CSS2 does. The percentage is still taken as a percentage of the containing block’s width, oddly enough. • Values: length|percentage|auto • Example: IMG.photo {width: 300px; height: 300px;} P.sidebar {height: 20em;} • Applies to: Block-level elements • Inherited: Yes

Box properties (cont.) • float • The float property works much like the HTML align attribute for images; it positions an element against the left or right border and allows text to flow around it. Support for the float property is poor, but should improve in the future for creating drop caps and similar effects • Values: left|right|none • Example: P.sidebar {float: right;} • Applies to: All elements • Inherited: No • clear • This property specifies whether to allow floating elements on an image’s sides (more accurately, the sides along which floating items are not accepted). None means floated elements are allowed (but not required) on both sides. Functions similarly to the clear attribute of the BR HTML tag. • Values: none|left|right|both • Example: H1, H2, H3 {clear: left}; • Applies to: All elements • Inherited: Yes

Background properties • Background properties are applied to the “canvas” behind an element. Ideally, background color appears behind the content and its padding, stopping at the border. Background properties are not inherited, but since the default value is transparent, the parent’s background color or pattern shows through for child elements. • background-color • sets the background color of the element (creating a colored rectangle). The default is transparent. • Values: color name|RGB value|transparent • Example: P.warning {background-color: red;} • Applies to: All elements • Inherited: No • background-image • sets a background image for the element. If a background color is also specified, the image will be overlaid on top of the color • Values: URL|none • Example: BODY {background-image: url(stripes.gif);} • Applies to: All elements • Inherited: No

Background properties (cont.) • background-repeat • When a background image is specified, this property specifies whether and how the image is repeated. The position from which the image does or does not repeat is set by the background-position property • repeat: (default) allows the image to repeat both horizontally and vertically • repeat-x: allows the image to repeat only horizontally in both directions • repeat-y: allows the image to repeat only vertically in both directions • no-repeat: displays the image only once (does not repeat) • Values: repeat|repeat-x|repeat-y|no-repeat • Example: BODY { background-image: url(oldmap.gif); background-repeat: no-repeat;} • Applies to: All elements • Inherited: No • background-attachment • Determines whether the background image scrolls along with the document or remains in a fixed position (scoll is the default) • Values: scroll|fixed • Example: BODY { background-image: url(oldmap.gif); background-repeat: no-repeat; background-attachment: fixed;} • Applies to: All elements • Inherited: No

Background properties (cont.) • background-position • When a background image has been specified, this property specifies its initial position relative to the upper-left corner of the box that surrounds the content of the element (not including its padding, border, or margin). • The CSS methods for specifying position get a bit complicated. Values are given in horizontal/vertical pairs with a default value of 0%/0%, which places the upper-left corner of the image in the upper-left corner of the element. A value of 100%/100% would place the image in the bottom-right corner of the element. • Length values from the left and top margin can also be specified. Or you can use the keywords, which correspond to the percentage values 0%, 50%, and 100%, respectively. The 2 examples given create the same result, with the bottom-left corner of the image placed in the bottom-left corner of the element. • Values: percentage|length|[top|center|bottom left|center|bottom] • Example: BODY {background-image: url(oldmap.gif); background-position: bottom left;} • Applies to: Block-level elements and replaced elements • Inherited: No • background • Shorthand property for specifying all the individual background properties in a single declaration • Values: background-color background-image background-repeat background-attachment background-position • Example: BODY {background: silver url(oldmap.gif) no-repeat fixed;} • Applies to: All elements • Inherited: No

Classification properties • These properties classify elements into categories rather than setting specific visual parameters • display • Defines how and if an element is displayed. • none: turns off the display and closes up the space the element would otherwise occupy (the 2nd example turns off all images, for instance) • block: opens a new box that is positioned relative to adjacent boxes • list-item: similar to block except that a list-item marker is added • inline: results in a new inline box on the same line as the previous content • Values: block|inline|list-item|none • Example: P {display: block;} • Applies to: All elements • Inherited: No • white-space • Defines how white space in the source for the element is handled. The normal value treats text normally, with consecutive spaces collapsing to one. The pre value displays multiple characters, like the <pre> tag in HTML, except that the element is not displayed in a monospace font. nowrap prevents the text element from wrapping unless designated by a <br> tag. • Values: normal|pre|nowrap • Example: P.haiku {white-space: pre;} • Applies to: Block-level elements • Inherited: Yes

Classification properties (cont.) • list-style-type • Specifies the appearance of the automatic numbering or bulleting of lists. Values are the same as for the type attribute within a list item (<li>). These numbers/bullets will be displayed when no list-item image is specified or if the image cannot be found. • Values: disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none • Example: OL.first {list-style-type: upper-roman;} OL.second {list-style-type: decimal;} • Applies to: Elements with the display property set to list-item • Inherited: Yes • list-style-image • Specifies a graphic to be used as a list-item marker (bullet). • Values: URL|none • Example: UL {list-style-image: url(3dball.gif);} • Applies to: Elements with the display property set to list-item • Inherited: Yes • list-style-position • Specifies whether list items should be set with a hanging indent. The inside value makes subsequent lines of a list item wrap all the way to the left margin of the list item. The outside value starts subsequent lines under he first word of the list item, creating a hanging indent • Values: inside|outside • Example: OL {list-style-position: outside;} • Applies to: Elements with the display property set to list-item • Inherited: Yes • list-style • Shorthand property for setting the list-style type, image, and position in one declaration • Values: list-style-type list-style-image list-style-position • Example: UL {list-style: list-item url(3dball.gif) disc inside;} UL UL {list-style: circle outside;} • Applies to: Elements with the display property set to list-item • Inherited: Yes

Positioning with style sheets • Positioning specifications for style sheet properties allow greater control over object placement and can be used for more tightly designed static page layout as well as for creating and tracking motion effects with DHTML (Dynamic HTML). • Positioning has been one of the most inconsistently implemented and buggy aspects of using style sheets. Recent browser versions, however, have overcome many of these inconsistencies. You should still be cautious when utilizing positioning features and make sure that you test your pages using these elements thouroughly.

The position property • The position property has 3 possible values: absolute, relative, and static. • It works in conjunction with the top and left properties (used for specifying distances from the top and left starting point), the bottom and right properties, and the width and height properties (for specifying the width and height of the element, including its padding and border). Values for these properties can either be specified as length units or percentages.

Relative positioning • Relative positioning places the element relative to its initial position in the flow (i.e., where it would be if it weren’t being positioned). Once the element is moved, the space it previously occupied is left blank. The resulting position may cause the element to overlap other elements on the page. Relative positioning is the most reliable of the CSS2 positioning values and is handled fairly well by V4 and higher browsers. • Measurements are taken as an offset from the appropriate sides of the element box, so using right and top defines offsets from the top and right sides of the containing block. Adding a positive top value moves the element down the specified amount from its initial top position. Adding a positive value for the left property moves the element that amount to the right. You can also specify negative values to move an element up and to the left.

Relative positioning (cont.) • This sample code moves the emphasized text 20 pixels down and 12 pixels to the right of its initial position: <head> <style type=“text/css”> EM.moved {position: relative; top: 20px; left: 12px;} </style> </head> <body> <p>This line contains some <em class=“moved”>emphasized</em> text that will be repositioned.</p> <p>This is some more text that follows the line with emphasized text.</p> </body>

Absolute positioning • Absolute positioning places the element in an arbitrary position, but technically it is still relative to the containing block of another element or to the document coordinates (it will scroll when the document scrolls). Measurements in absolute positioning are relative to the sides of the document itself (or the containing block of the “positioned” block the element is inside). Again, negative values can be specified. • When an element is positioned absolutely, the space it previously occupied is closed up. In its new position, the element may overlap other elements on the page. An absolutely positioned element has a margin of 0 by default – changing the width of the element's margin results in a corresponding shift in the element’s position. • If its parent element (or an element somewhere above the parent) is specified to have relative positioning (whether or not it is actually moved), the absolutely positioned child element will be placed relative to the position of the top-left corner of this “relatively positioned” parent. One possible application of this is keeping notations near their source paragraphs.

Absolute positioning (cont.) • This sample code moves the emphasized text to a specific location within the container element: <head> <style type=“text/css”> EM.moved {position: absolute; top: 20px; left: 12px;} </style> </head> <body> <p>This line contains some <em class=“moved”>emphasized</em> text that will be repositioned.</p> <p>This is some more text that follows the line with emphasized text.</p> </body>

Web Design in a Nutshell