web design in a nutshell

_______________________________________________________________________________________________________________PHP Bible, 2nd Edition 1 Wiley and the book authors, 2002

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:

1. 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.)

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

3. 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 semicolonp {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 blueul 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 redp.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

o link: links that have not yet been visitedo visited: links that have been visited by the client browser (in the history)o hover: when the mouse passes over a link (must be after :link & :visited)o 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 */o 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

Code Unit Description

px Pixel Pixel units are relative to the monitor resolution

pt Point Traditional publishing unit. Approximately 72 points in an inch.

pc Pica Traditional publishing unit equal to 12 points (or 1/6 of an inch)

em Em Relative unit of measurement that equals the width of the capital letter M in the current font. Generally equal to the point size of the font.

ex Ex Relative unit of measurement that equals the height of the letter x for that font (approximately half the length of an em)

in Inches Inches

mm mm Millimeters

cm cm Centimeters


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

o By Nameo 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 sizeo Values: xx-small|x-small|small|medium|large|x-large|xx-largeo Example: H1 {font-size: x-large;}o Absolute sizes are descriptive terms that reference a table of sizes kept by the browser

relative sizeo Values: larger|smallero Example: H1 {font-size: larger;}o These values specify the size of the type relative to the parent object

lengtho Values: number+em|ex|px|pt|pc|mm|cm|ino Example: H1 {font-size: 24pt;}o You can also specify font size using any length values described in the Length Units

section percentage

o Values: n%o Example: H1 {font-size: 125%;}o 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:

o baseline: aligns the baseline of text (or bottom of an image) with the baseline of the parent element (this is the default)

o bottom: aligns the bottom of the element with the bottom of the lowest element on the lineo 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)o sub: lowers the element relative to the baselineo super: raises the element relative to the baselineo text-bottom: aligns the bottom of the element with the bottom of the parent element’s fonto text-top: aligns the top of the element with the top of the parent element’s fonto top: aligns the top of the element with the tallest element on the lineo 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:

o none: displays the element as it is typed in the HTML source and neutralizes any inherited value

o capitalize: displays the first letter of every word in uppercase characterso lowercase: displays the whole element in lowercase characterso 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

o repeat: (default) allows the image to repeat both horizontally and verticallyo repeat-x: allows the image to repeat only horizontally in both directionso repeat-y: allows the image to repeat only vertically in both directionso 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;}


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



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. o none: turns off the display and closes up the space the element would otherwise occupy (the 2nd example

turns off all images, for instance)o block: opens a new box that is positioned relative to adjacent boxes o list-item: similar to block except that a list-item marker is addedo 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>


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>


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>


Static positioning

Static is the default value for the position property. Static elements can never serve as a context for child element placement (as discussed in the explanation of absolute positioning). Static elements cannot be positioned or repositioned.


Z-Order

Z-order refers to the overlapping of elements that can occur when elements are positioned outside of their normal flow. CSS2 provides a special property, z-index, for handling the placement of objects in 3-dimensional space.

Elements with a higher z-index value will cover up those with lower values. When z-index is not specified, elements appear from back to front in the order in which they appear in the HTML source.


Z-Order (cont.)

In this example, 2 ordinary GIFs, A.gif and B.gif, are stacked using z-index settings. In the top example, B.gif is given a higher z-index value and thus overlaps A.gif. In the bottom example, the positioning code is the same, but A.gif has the higher z-index value


Visibility

The CSS2 specification also includes a new property called visibility, which takes the values visible (default) or hidden.

When an element is hidden, it is not displayed on the page and the space it occupies is held blank

This is different from display: none in that display: none removes the element completely from the display and closes up the space that would have been taken up by the element


Overflow

Another new property is overflow which provides alternative ways for handling text that does not fit in the box dimensions as specified. It has 4 possible values:

visible: allows the overflowed content to “flow out” of the fixed box dimensions for the element (some older browsers incorrectly resize the box dimensions to contain the text)

hidden: hides from view the portion of the element that does not fit in the box (can be used for clipping a picture)

scroll: places a scroll bar in the box so the user can scroll down to read its contents

auto: places a scroll bar only when necessary

Note: you must use absolute positioning for this property to function correctly

web design in a nutshell

Documents