text:
Cascading Style Sheets/Positioning

Position Schemes
Instead of using table(s) to layout a page you can use CSS positioning. By using the CSS positioning you can make a page more dynamic. Positioning is not compatible with all browsers, so when coding it is necessary to know your audience.

Types of positioning:
 * Normal Flow/Static Positioning
 * Relative Positioning
 * Absolute Positioning
 * Fixed Positioning

The examples below are all using basically the same XHTML document. Only the CSS positioning changes. To make it easy to see what is happening with the CSS there are colored borders around the two blocks. The outer block has a blue border (, abbreviated ). The inner block has a red border (, abbreviated ). Only the rule for the inner block changes in these examples.

Normal Flow
Normal Flow is the default behavior of a web browser. You do not specify this in your style sheet since it is the default. With normal flow boxes will show up in the order that you placed them in your code, and each box level element is stacked on the next.

Static Positioning
Static positioning is applied by the declaration. This places the element in the normal flow. Since normal flow is the default it is not normally necessary to explicitly use this.

Where it is useful is over-riding another rule of lower specifity, e.g.

would absolutely position all  elements except the one whose   attribute has the value notMe.

The,  ,   and   properties are not needed since they don't influence static positioning. They are used below to show they have no influence.

Relative Positioning
The browser first lays out the element as though it was in the normal flow. The element is then displaced by the amount specified by the  or   properties and the   or   properties. A gap is left in the normal flow at the point the element should have appeared. Relative positioning does not allow an element to change size. If both  and   are specified   will be ignored in languages which are written left to right such as English. is ignored if  is specified.

Absolute Positioning
This positions a box relative to its containing block. However, unlike relative positioning the gap in the normal flow left by removing the element closes up. The containing block is the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'.

You can use any one or combination of left, top, right, and bottom properties to position the box. The co-ordinates for absolute position have (0,0) at the top left of the containing block. Increasing the value of top moves the element down the page.

Since absolutely positioned boxes are taken out of the normal flow they can be positioned anywhere on the page regardless of their position in the document's source order.

Fixed Positioning
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the browser window size. A fixed element does not move when a web page is scrolled as all other elements do. It is calculated in the same way as absolute positioning with respect to containing blocks in that it pulls the positioned box out of the normal flow.

Floating Elements
Elements can be made to float within the normal flow. Boxes are moved left or right as far as they can go. Elements after the float box will move up to fill any gap left behind thus flowing around the box with the float position.

Notice that float is not a position property, but it acts like one. Float is applied with the  property not the   property. The float is positioned to the left in the example, but you could easily make it positioned to the right. A width was added to the content block so you can see how elements after the float block move up and wrap around the area the content block does not occupy.

You must set the  property when floating block-level elements otherwise they will expand to fill the entire width of their container.

CSS/Posizionamento

title: Cascading Style Sheets/Positioning


text:
Cascading Style Sheets/Box Model

Block-level and inline elements – the property
W3C Specification CSS1 CSS2.1

CSS has no understanding of the semantics of the underlying document. In particular it has no idea that the  elements in the HTML fragment below should start on a new line whilst the   element should not. The property provides this information.

CSS1 defines four values for. CSS2.1 adds two more general purpose values plus a number of values for creating tables. The table values are described in Displaying Tables. The values are explained in detail in later sections.
 * – this causes the element to start a new line.
 * (CSS2.1)
 * (CSS2.1)
 * (CSS2.1)
 * (CSS2.1)
 * (CSS2.1)

Note: in CSS1 the initial value for is. Under CSS2.1 this changes to. This property should be explicitly set for all element types that can occur in a document to ensure consistency between different implementations. Most web browsers will set appropriate values for elements in (X)HTML documents. (See Appendix D of the CSS 2.1 Specification for the suggested values.) In XML documents use a rule such as to set the  property for all element types. Then use more specific rules to set the value for individual element types.

The value affects the set of other properties that are valid for an element. For example the list properties are only valid if is . In the example below no bullets appear on the list items because  has been set to.

CSS rule:

Sample HTML:

Example rendering:

An element with set to  starts a new line. It also acts as a container for the content of its child elements.

Elements with set to  flow with other content within the containing box of their nearest  ancestor. They do not start new lines.

The and  properties are not valid on non-replaced inline elements. In (X)HTML documents replaced elements are embedded content such as images.

The alignment of inline elements is controlled by the property. The initial value for this property is. Since (X)HTML images are normally elements this means that the bottom edge of images are aligned with the baseline of the text. If there is no text on the line the web browser must still calculate where the baseline would be and leave the appropriate amount of room for it. This can cause problems when trying to align images.

is similar to except that it enables the list properties, ,  and.

When is  the web browser must act as though the element and all its child elements do not exist. This can't be overridden by setting the property on the child elements because they don't exist to have properties applied to them. The web browser must not leave any space on the display or print out or speak any of the content or give any other hint of the existence of the element.

Hiding elements with this value can be very useful in conjunction with CSS2.1 media types. For example you can specify that the navigation bar is removed from the printed page by setting its value to  for print media.

If you want to simply hide the element whilst leaving a visible gap set the CSS2.1 property to.

An element flows in the same manner as an  element but it acts as a  container for its own children.

allows a single element to be merged into the start of a element that follows it immediately. The element will only be merged if it doesn't contain any  elements. If a element can't be merged it acts as though it was a  element.

CSS rule:

Sample HTML: element is allowed.

Example rendering:

Interaction with
If the property for an element is set to anything other than  the element behaves as though  is set to  regardless of its actual value.

The Box Model
The CSS box model is fundamental to laying out documents with CSS. The content of every element is rendered within one or more boxes. A CSS box consists of:
 * the content area,
 * surrounded by padding (optional),
 * surrounded by borders (optional),
 * surrounded by margins (optional).

If all three optional parts of the box are present then crossing the box from one outer margin edge to the content the following boundaries are encountered: as illustrated by the following diagram. This is the margin. This is the border. This is the padding. This is the content area.
 * outer margin edge
 * outer border edge = inner margin edge
 * outer padding edge = inner border edge
 * content edge = inner padding edge

Height and Width

 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1

is ignored by non-replaced inline elements, table columns and table column groups.

is ignored by non-replaced inline elements, table rows and table row groups.

The and  properties specify the dimensions of the content area (but see the section on quirks mode below). This is the distance from the inner edge of the padding on one side to the inner edge of the padding on the other side. The values may be given as non-negative lengths or percentages. If is given as a percentage the value is based on the width of the containing block. If is given as a percentage the value is based on the height of the containing block. If the height of the containing block is not an absolute value percentages may not work as expected. Refer to the W3C Specification for details.

It is usual to give the size of elements containg text in s or percentages. Images and other replaced elements are normally sized in pixels.

CSS rule:

Sample HTML:

Example rendering:

Notice that the left edge of the text (the contents) touches the left edge of the background (the content area).

If the content area is too small the contents will overflow the box (except in Internet Explorer).

CSS rule:

Sample HTML:

Example rendering (this example does not work in Internet Explorer):

CSS2.1 minimum and maximum width and height

 * W3C Specification CSS2.1
 * W3C Specification CSS2.1
 * W3C Specification CSS2.1
 * W3C Specification CSS2.1

CSS2.1 introduces four extra properties, , and. For example, suppose you are creating a layout with two columns side by side on the page. You want the column for the main content to be 27 wide but no more than 75% of the page width. The navigation column should be 9 or 25%. The appropriate rules would be:

The property is often used with a length in pixels to ensure that a column does not become too narrow for the images it contains.

Internet Explorer does not support these CSS2.1 properties.

Internet Explorer Quirks Mode
Internet Explorer versions 5.0 and 5.5 allow and  on non-replaced inline elements. Internet Explorer version 6 also applies these properties if it is in quirks mode. In standards mode it correctly ignores them on non-replaced inline elements.

In quirks mode and  incorrectly set the distance between the outer edges of the borders not the edges of the content area.

CSS 3 Box Models
The current draft of CSS3 introduces a new property,. This property takes one of two values, or.

When the value is set to the normal CSS1/CSS2.1 box model is used so  and  define the size of the content area.

When the value is set to the  and  properties set the distance between the outer edges of the borders, i.e. the box behaves like a quirks mode box.

Mozilla Firefox does not support but instead uses  for the same purpose.

Padding
Padding is blank space inserted between the content of the element and its border. The element's background is seen through the padding. The padding is set by four properties:
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1

The padding can either be set to a length, e.g., or a percentage, e.g. . Values must not be negative. Percentages are relative to the width of the containing block even for the top and bottom padding.

CSS rules:

Sample HTML:

Example rendering:

Shorthand property
W3C Specification CSS1 CSS2.1

The padding on all four sides can be set at once using the shorthand property. This takes a list of whitespace separated values. The first value is the top padding. The other values work clockwise round the sides, so right is second, bottom is third and left is last. The previous example could be shortened to: You can specify fewer than four values in the list for. If the value for the left padding is missing it is set equal to the right padding. If the value for the bottom padding is missing it is set equal to the top padding. If only the top padding is given all the sides are given the same padding.

always sets the padding on all four sides. If you want to alter the padding on only some of the sides you must use the individual properties.

Margins
Margin is the outermost layer in the CSS box model, located outside of border.

CSS properties that enable setting of the width of the margin:
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1

Shorthand property
W3C Specification CSS1 CSS2.1

Box shadow
Box shadow is a part of CSS3. It creates a drop shadow that follows the shape of the box. It is currently supported by WebKit and Gecko. Box shadow takes 4 arguments and supports multiple shadows.

 This box should have a sharp rectangular shadow to the lower right.

 This box should have a sharp round shadow to the lower right.

 This box should have a red diffuse round shadow to the upper left.

 This box should have a red, green and blue diffuse round shadows to the lower right.

Box Sizing
Box-sizing is a CSS3 property to make certain layouts simpler. Box-sizing is supported by WebKit, Gecko and Presto.

take 1 argument that is any of the following:
 * boxes inside arrange normally.
 * boxes inside arrange around the border.
 * inherit the parent behavior.
 * boxes inside arrange around the border.
 * inherit the parent behavior.
 * inherit the parent behavior.

CSS fragment:

HTML fragment:

This should be on the left. This should be on the right. The two boxes should be above this text side by side if your browser supports.

CSS/Disegnare la struttura della pagina

license: Creative Commons - Attribution Share-Alike - https://creativecommons.org/licenses/by-sa/4.0/

title: Cascading Style Sheets/Box Model


text:
Cascading Style Sheets/Fonts and Text

Font Properties

 * — Sets the typeface.
 * — Sets the style of the text, common values are normal and italic.
 * — Modifies the text, e.g. small-caps.
 * — Sets the thickness the text will be, values like bold and normal.
 * — Sets the font size.
 * — Sets the spacing between the baselines of adjacent lines of text.

Each of these is examined below in detail.

W3C Specification CSS1 CSS2.1

The following is a simplified description of CSS font matching. See the CSS1 font matching or CSS2.1 font matching specification for the definitive description.

The value for the property is a comma separated list of fonts in a prioritized order. The web browser will attempt to use the first font in the list. If the first font isn't available to the web browser it will attempt to use the second, and so on through the list. If none of the fonts are matched the web browser will use a default font. This might be a font selected by the user.

In the example below the web browser would try to use Verdana. If Verdana was not installed (or not available in an appropriate variant if is also specified) the web browser would try to use Helvetica. If Helvetica was not available it would try to use Arial.

Since there isn't a standard set of fonts that is available in all web browsers and operating systems it is possible that none of the named fonts will be matched. Five generic font families are defined to allow for this possibility. Web browsers will replace a generic font with the closest available font. The five generic families are: serif, sans-serif, monospace, cursive and fantasy.

You should always end a font-family list with a generic text-family. Otherwise you might, for example, end up with the user's default serif font where you wanted a sans-serif font. A generic font is always guaranteed to match so there is no point specifying alternative fonts after a generic font. On systems with a limited range of fonts it is possible that two or more generic fonts may be mapped to the same font. You can check which fonts your web browser uses for the generic fonts by looking at the example below. Are there five distinct fonts?

serif sans-serif monospace cursive fantasy

An ongoing problem for web designers is that they are not able to specify exactly the fonts that they require, because that they don't know which fonts the user will have installed. The way around this is to specify in the font-family list a more-or-less equivalent font from each possible client system. There are a number of useful references for determining this equivalence (here, for example).

For example, to use the font known on Windows as Impact, the following declaration is used.

W3C Specification CSS1 CSS2.1

CSS1 and CSS2.1 define three values for this property:, and. The initial value for this property is. Many font families do not define a separate italic version of the font, in which case the oblique version is used when is set to.

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

CSS1 and CSS2.1 define two values for this property: and. The initial value for this property is. When is applied lowercase letters appear as scaled down uppercase letters. Uppercase letters and other characters are unaltered. The effects of these values is shown below.

CSS rules:

Sample HTML: .     Other characters: 1 2 3 % ! This sentence shows the effect of setting the Cascading Style Sheets property. Other characters: 1 2 3 % !

Example rendering:

W3C Specification CSS1 CSS2.1

The property sets the darkness of the font. CSS currently defines nine levels of darkness from, the lightest, to , the darkest. The number of distinct levels depends on the. Some families may define all nine levels while most will only define one or two. The value is a synonym for  and  is a synonym for.

The list below shows the different weights for the current family:      or     or

The final two possible values for are  and. When these values are used the web browser tries to pick a font from the current family that is lighter or darker than the font of the parent element.

Since most font families only have one or two weights it is usual to only use the values and.

For example, to make  elements red instead of the bold used by most web browsers apply the following rule.

As another example you can make all hyperlinks bold.

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

Before reading this section make sure you know how to change the default font size in all the browsers you use for testing web pages.

'''Make sure you understand the difference between screen pixels and CSS pixels. See CSS Lengths and units.'''

Font size is one of the more problematic areas of web design. The most common complaint of web surfers is that the font size is too small on many pages. (See Jakob Nielsen's Top Ten Web Design Mistakes of 2005.) A frequent request from customers buying a web site is for the font to be made smaller so more information can be crammed on to the page. To make matters worse, most users aren't taught how to change the default font size used by their web browser. (If you ever teach a class how to use a web browser, changing the font size and colors is one of the most important things you can teach.) Another issue is that web designers tend to be young with comparatively good eyesight. Just because you prefer to read text that is 60% of the out-of-the-box default font size doesn't mean your target audience can read text at that size.

Some users do change their default font size and web pages should respect their choices. Ideally all the important information on a page should be at least as large as the user's default font size. Important information includes publication dates, links to the site's privacy policy, etc. Small print should be reserved for unimportant text such as statements that the page is valid HTML, conforms to WCAG Double-AA, etc. and effects such as superscripts that are normally rendered in a smaller size.

Lengths in CSS pixels or absolute units (,  ,  ,   and  ) do not respect users' preferences. In fact using these units prevents users from easily changing the size of the font if they find it too small or too large. For example, in Internet Explorer for Windows the user has to select 'Internet Options...' from the 'Tools' menu, then click on the 'Accessibility...' button on the 'General' tab and check the box to 'Ignore font sizes specified on web pages' if they want to change the size of a font given in any of these units. This isn't user friendly.

The values that do respect users' preferences are length in s or  s, percentages and keyword values. There are seven 'absolute' keyword values that scale the font relative to the user's default font size and two 'relative' keyword values that scale the font relative to the parent element. The 'absolute' keywords are The two relative keywords are and.
 * – the user's default font size in IE/win v6 Quirks Mode and IE/win v5 regardless of rendering mode.
 * – the user's default font size in Standards Mode.
 * – the user's default font size in IE/win v6 Quirks Mode and IE/win v5 regardless of rendering mode.
 * – the user's default font size in Standards Mode.

Most web designers prefer to use s. Font sizes in  s,  s and percentages are calculated relative to the font size of the parent element. is equal to. The following example demonstrates this.

Sample HTML:

Example rendering:

Since 0.5 times 5 times 0.4 equals 1 the text in the last  should be the same size as the text in the parent paragraph.

Using ems in Internet Explorer
If you use s for the  in a page viewed with Internet Explorer you need to be aware of a quirk of Internet Explorer. On a Windows PC save the two files given below in the same directory and view IE_font_size_bug.htm with Internet Explorer. (This example has been tested in IE/win v5.0, v5.5 and v6.0.)

IE_font_size_bug.css

IE_font_size_bug.htm

Set the default font size to medium, smaller and smallest. (Use the 'Text Size' submenu of the 'View' menu if you don't have the Size button on your toolbar.) The height of the text is shown in the following table. At six pixels high letters become blurred splodges on the page and are effectively unreadable.

There is a simple fix. Add an extra rule to IE_font_size_bug.css like so:

In theory setting the to  shouldn't change anything. However, if you view the page with the new stylesheet you will find the size of 'smallest' text has changed. Nine pixel high letters are quite readable if you have good eyesight and/or a large monitor.

It is a good idea to always set the of the   to a percentage to deal with this quirk. It is also a good idea to leave a comment explaining why the font size declaration is there so that someone else doesn't remove an apparently redundant rule when they take over responsibility for your stylesheet.

Problems with nesting
You can run into problems using s or percentages when you set the  property using a type selector. In the example below each of the nested  elements matches the selector and so the size of the text is halved each time. The text in the innermost division is 1/16 of the user's default font size. You will probably struggle to read the example rendering unless you increase your default font size significantly.

CSS rules:

Sample HTML:

Example rendering:

This problem is often found with lists where it is tempting to set the of the   element. When someone adds a sub-list in the future the text of the sub-list is far too small or far too large depending on the scale factor. The solution is to use an ID selector to target the outermost element of the nested group, e.g. the outermost  element for nested lists.

Problems with tables and forms
If you are using tables or forms you may find you need to use the following rule to get the text in these elements to scale properly with the user's preferences:

W3C Specification CSS1 CSS2.1

The property defines the minimum distance between the baselines of adjacent lines of text. The distance may be increased if necessary to fit images, etc. on the line. It is expressed as a ratio between the height of the font and the line spacing. The height of a font is defined as the distance between the baseline and the top of a capital letter. Some letters may have descenders that drop below the baseline. In some fonts there may also be ascenders the rise above the top of a capital letter.

In the example below the green band behind each line runs from the baseline up to the font height. The first line shows capital letters. The second line shows lowercase letters with descenders. The third line shows capital letters with accents.

The can be given as either a simple number, a length or a percentage. If it is given as a simple number or a percentage this is multiplied by the font height to determine the space between the lines. The next example demonstrates how this paragraph appears with four different values for the. The font is enlarged in the example to make the line spacing easier to see.

Look closely at the descenders in the example with a of 1. You will probably notice at least one point where a descender touches a letter in the line below. Most web browsers default to a of 1.2. A number of web designers feel that a of 1.6 is more readable, particularly if the font size is relatively small.

Shorthand property
W3C Specification CSS1 CSS2.1

The shorthand property can be used to set the five individual font properties and the  property in a single declaration. The has two methods for setting the individual properties, by specifying a combination of individual properties or by giving a single keyword that selects a predefined set of individual values. The second option is only available in CSS2.1.

Combination of individual properties
The syntax for combining individual properties is a little complicated. The properties are given in the following order:
 * none, one or more of, and  in any order;
 * optionally followed by ;
 * if is present it may be followed by a slash, , followed by the ;
 * followed by the, which must be present.

An example containing all the components is: Notice that the  means that the font size is one and half time the font size of the parent element. The  then sets the line height to 1.4 times the font size of the current element. Also notice that the font family is a comma separated list of families in order of preference.

If some of the properties are omitted they are set to their initial values. For example, is equivalent to

Keyword
The keyword values refer to the system fonts used by the web browser for items such as menus. The keyword values are:
 * ; the font used for buttons, drop-down lists, etc.
 * ; the font used to label icons.
 * ; the font used by drop-down menus.
 * ; the font used by dialog boxes.
 * ; the font used for labelling small controls.
 * ; the font used in the status bar.

The keyword values set all the individual properties to match the corresponding system font. The individual properties can then be overridden by additional declarations.

Example:

W3C Specification CSS1 CSS2.1

This property is used to justify blocks of text. The four possible values are, , and. The values are demonstrated below.

CSS rules:

Sample HTML:

Example rendering:

This property interacts with the following other properties:
 * : If the value of is  when  is   or   the web browser must treat  as being  if the current text direction is left to right (this is the normal for English) or  if the current text direction is right to left.
 * : If this is set to anything other than the web browser may only adjust the inter-word spacing when justifying text.
 * : If this is set to anything other than the web browser must try to honor the specified value when justifying text.

W3C Specification CSS1 CSS2.1

The property is used to increase or decrease the space between letters. Web browsers are not required to support decreasing the letter spacing or may only allow a limited decrease.

The value can be used to remove an inherited value from an element. If the value is set to anything other than the spacing between letters can not be altered when using  to justify the text. You can set to zero if you don't want the letter spacing altered by justification but don't want to add any extra space.

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

The property is used to increase or decrease the space between words. Web browsers are not required to support decreasing the word spacing or may only allow a limited decrease.

The value can be used to remove an inherited value from an element.

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

The may either be set to  or any combination of, ,  and. It is considered bad practice by many web designers to use. It is also considered bad practice to underline anything other than a hyperlink. Consider the second and third examples below as examples of what not to do.

If you use to indicate deleted text consider using a semantic element such as (X)HTML's   element either instead of or in combination with this property.

The most common use of is to change the appearance of hyperlinks to remove the underline from links in the main content whilst preserving them in navigation menus or vice versa.

CSS rules:

Sample HTML:

Example rendering:

An example of using all four values together. is not supported by some browsers so you may be spared that effect.

CSS rule:

Sample HTML:

Example rendering:

Any applied to an element is drawn over all of its content including any child elements, regardless of the value  set on those elements. Any additional decoration specified for child elements will be applied as well as the parent's decoration.

CSS rule:

Sample HTML:

Example rendering:

Notice that the underlining in the second paragraph is in red, the color assigned to the  element that is underlined. However, the line through the  element is black because it belongs to the parent   element, which has its color set to black.

W3C Specification CSS1 CSS2.1

The property specifies the indent for the first line of a block level element. Use, , or  to indent an entire block. The indent may be negative but web browsers are not required to support negative indents or may limit the size of a negative indent. The property is inherited. In the example below the is applied to the   elements containing the paragraphs rather than directly to the paragraphs themselves.

Note that the indent is only applied at the start of a block level element. Line breaks caused by inline elements do not cause any additional indents to appear within a block.

CSS rules:

Sample HTML: property. If you want to recreate a novel-like appearance you will need to set both properties. This paragraph has a line break in it, created with the  element. Since this doesn't start a new block level element there is no indent or undent after the line break. The line break was immediately before this sentence. You may need to adjust the width of your browser window to make the line break obvious. This paragraph should have an undent. This is a more unusual style but it can be useful. It is most often used with lists to emphasis the start of a list item either instead of        or in conjunction with a bullet. This paragraph has a line break in it, created with the  element. Since this doesn't start a new block level element there is no indent or undent after the line break. The line break was immediately before this sentence. You may need to adjust the width of your browser window to make the line break obvious.

Example rendering:

W3C Specification CSS1 CSS2.1

There are four values for the property:
 * : do nothing.
 * : converts any lowercase characters to uppercase. Other characters are unaltered.
 * : converts any uppercase characters to lowercase. Other characters are unaltered.
 * : converts the first character of each word to uppercase. Other characters are unaltered. In particular uppercase characters elsewhere in a word remain uppercase.

The exact effect of depends on the language of the element. How the language is determined depends on the document being styled. HTML documents use the attribute to specify the language for an element. The language is inherited by child elements unless a attribute is used to alter the language. XML documents use  in the same manner. XHTML 1.0 documents may use either the HTML attribute or the XML   attribute.

Note that copying transformed text to the clipboard may vary throughout browsers. Firefox copies the text to the clipboard as if it were not transformed, and Chrome copies it to clipboard as it appears.

CSS rules:

Sample HTML:

Example rendering:

Compare the effect of setting to  with setting  to.

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

The property only applies to elements whose  value is  or. The behaviour of is significantly different for s and is described in the section on ../Tables.

What not to do
The most common mistake when using is to apply it to a block-level element and then wonder why it doesn't work. The following example shows what goes wrong. CSS rules:

Sample HTML:

Example rendering:

As you can see the red inner division is firmly aligned with the top of the blue division.

Correct usage
The correct usage of is to adjust the relative positions of sections of text and embedded content within a line of text. To understand you need to understand CSS line boxes. The following example shows two block-level elements, paragraphs. Each block-level paragraph contains an inline element,. A border and background are applied to the inline elements so the line boxes are visible.

CSS rules:

Sample HTML:

The property adjusts the alignment of inline elements relative to other items in the same line box. The next example illustrates how it can be used to create superscripts and subscripts.

CSS rules:

Sample HTML:

Example rendering:

The full set of values for is:

CSS2.1
CSS2.1 also allows the value of to be a length or percentage.

W3C Specification CSS1 CSS2.1

The property controls the handling of whitespace (normal spaces, tabs, form feeds and newlines but not non-breaking spaces or other special spaces). In the absence of CSS, HTML and XML documents are rendered with runs of whitespace replaced by a single whitespace character. Blocks of text are word-wrapped so that the text fits within the width of the containing block. For example, the two paragraphs in the sample HTML below would be rendered in the same way.

Example rendering:

The property has five values. The value specifies that text should be handles as usual for an HTML or XML document. The table below shows how the other values compare to normal rendering.

The two values added in CSS2.1, and, aren't widely supported at the moment.

Internet Explorer for Windows versions 5.0 and 5.5 does not support. IE/win v6.0 only supports in standards mode.

The HTML  element behaves as though the following CSS rule is applied.

The example below compares and.

CSS rules:

Sample HTML:

text-shadow
Text shadow is a new effect that is part of CSS3. It's arguments are the same as box-shadow's and supports multiple shadows.

 * text-shadow: x-offset y-offset blur/diffusion color [, repeat for multiple];

Text with Shadow! Bold! Italic! Underline! Strike!

 Text with Sharp Shadow! Bold! Italic! Underline! Strike!

Now let's try multiple shadows, note that you must keep moving the shadows to prevent them from all being drawn in the same place (unless that is what you want ;) ):
Text with Many Shadows! Bold! Italic! Underline! Strike!

anaglyphs
You can use  to generate three-dimensional (stereoscopic) red-cyan anaglyphic text.

" " makes the un-shadowed text transparent, so that only the red and cyan  shadows are visible. Note that the cyan shadow is called "aqua" in CSS. The number of pixels offset left or right is then the amount of three-dimensional depth, or how far away from the screen that the text will appear to float. You should only need a small number of pixels. Also know that with red-cyan anaglyphic text, you will not be able to use  or   for hyperlink or background colors.

This text has two pixels of red-cyan separation.
This text has four pixels of red-cyan separation.
This text has six pixels of red-cyan separation.

You will need to be wearing red-cyan 3D glasses in order to see the 3D text. Since most visitors to a website will not be wearing 3D glasses, make sure that a non-anaglyphic version of the text is accessible.

Web Fonts
Web fonts are a feature of CSS2 that allow a rule to be set to allow an embeddable font in a web page, freeing a designer from having to rely on a subset of fonts that ship with most OSes. Fonts supported by this feature are either TrueType (.ttf) or OpenType (.otf). Web fonts are currently only supported by WebKit (Safari, Shiira, Chrome, et al.). Internet Explorer supports web fonts only with the Embedded Open Type (.eot) format, something unused by any other browser.

Sample CSS:

Now, to use the font we simply go about business as usual:

Then any headings in that document would display in our example "WikiFont" in a supporting browser.

title: Cascading Style Sheets/Fonts and Text


text:
User:Seven-League Bot/monobook/correcteur.js

/* */

//cookies document.write(' ');

/* ****************************************** */ /* EDUCA33E : 23/03/06                       */ /* Fonction de remplacement automatisé       */ /* à partir des pages search et Whatlinkshere */ /* et Catégorie (lettre par lettre)          */ /* ATTENTION :                               */ /* Enregistrement automatique du remplacement */ /* ****************************************** */ function ORTHOPatrol {       if ( window.location.href.indexOf('Search') < 0 && window.location.href.indexOf('Special:Whatlinkshere') < 0 && window.location.href.indexOf('Category:') < 0) return;

var r = prompt("ORTHO : Chaîne à remplacer (expression régulière) ?"); // exemple (A|a)cb(d|e) var s = prompt("ORTHO : À remplacer par ?"); // exemple $1bc$2 // d'où de part l'exemple : // Acbd => Abcd // acbd => abcd // Acbe => Abce // acbe => abce

var page_nom = document.getElementById( 'content' ).getElementsByTagName( 'h1' )[ 0 ]; var page_name = page_nom.firstChild.nodeValue;

var items, item, i, links, user, name, talk, contribs, insertLoc, link;

items = document.getElementById( 'bodyContent' ).getElementsByTagName( 'ul' )[ 0 ].getElementsByTagName( 'li' );

function NewLink( txt, url, plainlinks, linkColor ) {               var a = document.createElement( 'a' ); a.appendChild( document.createTextNode( txt ) ); a.href = url; if ( plainlinks ) a.className = 'plainlinks'; if ( linkColor ) {      if ( typeof linkColor == "string" ) a.style.color = linkColor; else   a.style.color = '#FF0000'; // old default behavior }               return a;        }

for ( i = 0; i < items.length; i++ ) {               item = items[ i ]; links = item.getElementsByTagName( 'a' ); user = links[ 0 ]; name = user.firstChild.nodeValue; insertLoc = user.nextSibling; // ' newusers ' item.insertBefore( document.createTextNode( ' [' ), insertLoc ); item.insertBefore( NewLink( 's:/'+r+'/'+s+'/', '/w/index.php?title='+name+'&action=edit&or1='+escape(r)+'&or2='+escape(s), true, 'blue' ), insertLoc ); item.insertBefore( document.createTextNode( '] ' ), insertLoc ); } } if ( window.addEventListener ) window.addEventListener( 'load', ORTHOPatrol, false ); else if ( window.attachEvent ) window.attachEvent( 'onload', ORTHOPatrol );

// Récupération des paramètres passés par url. function TJSExtraireParam { url = window.location.href; var exp=new RegExp("[&?]+","g"); var exp2=new RegExp("[=]+","g"); var tabNom=url.split(exp); var    tabParam=new Array; if (tabNom!=null) { for (var i=1;i<tabNom.length;i++){ var tabTemp=tabNom[i].split(exp2); tabParam[tabTemp[0]]=unescape(tabTemp[1]); }       }        return tabParam; }

// Remplacement de texte r pour s. // s = expression régulière. function replaceortho(s,r){ var txt = document.editform.wpTextbox1; txt.value = txt.value.replace(new RegExp(s, "gi"), r); }

function changeSummary(sampleText) { document.editform.wpSummary.value = sampleText; }

// Récupération des paramètres d'URL pour remplacement function autoSaveOrtho { try { var title = decodeURI(window.location.href.split("title=")[1].split("&action=")[0]).replace(/\s/g, "_") } catch (e) { var title = decodeURI(window.location.href.split("/wiki/")[1]).replace(/\s/g, "_") }       if ( window.location.href.indexOf('or1=') >= 0 ) { if (!document.getElementById("toolbar")) return; var urlParam = TJSExtraireParam; replaceortho(urlParam["or1"],urlParam["or2"]); changeSummary('correction orthographique semi-automatique s:/'+urlParam["or1"]+'/'+urlParam["or2"]+'/'); //un ptit cookie pour revenir (hmmmmmm c'est bon les cookies !) cookies.set("autoSaveOrtho", (cookies.get("autoSaveOrtho") ? cookies.get("autoSaveOrtho") : "") + "|*" + title + "*|") document.editform.submit; } else if (cookies.get("autoSaveOrtho").indexOf("|*" + title + "*|") > -1) { //on corrige le cookie pour pas revenir 2 fois cookies.set("autoSaveOrtho", cookies.get("autoSaveOrtho").replace("|*" + title + "*|", "")); window.location.href = "/w/index.php?title=" + title + "&diff=cur"; } }

addLoadEvent(autoSaveOrtho);

function lastdiff {       var a = document.getElementById("p-cactions"); if (a) {         b = a.getElementsByTagName("ul"); if(b.length > 0) {           b[0].innerHTML = b[0].innerHTML + '' + '' + 'Diff'; }       }      }      addLoadEvent(lastdiff);

function getArticleName {	var strOut = document.title // case search if (strOut == "Rechercher - Wikipédia") return document.getElementById("lsearchbox").value // case article being modified strOut = strOut.replace("modification de ", "").replace(" - Modifier", "")

strOut = strOut.replace(" - Prévisualiser", "") strOut = strOut.replace(" - Wikipédia", "") return strOut }

function searchLink {       var div = document.getElementById("p-search") if (div) div = div.getElementsByTagName("div")[0]; if (div) {               var input = document.getElementById("searchInput") if (input.addEventListener) input.addEventListener("keyup", setSearchLink, false); else if (input.attachEvent) input.attachEvent("onkeyup", setSearchLink); var a = document.createElement("a"); a.setAttribute("href", "/wiki/Special:Search?search=&fulltext=Search&offset=0&limit=500") a.innerHTML = "full search" a.id = "fullSearch" a.className = "searchLink" div.appendChild(a); } }

function setSearchLink { var a = document.getElementById("fullSearch"); a.href = a.href.split("?search=")[0] + "?search=" + document.getElementById("searchInput").value + "&fulltext=" + a.href.split("&fulltext=")[1] }

addLoadEvent(searchLink);

/* */


text:
User:GregorR

GregorR == Gregor Richards == http://www.codu.org/

title: User:GregorR


text:
Talk:Introduction to Physical Science/Atoms

It seems someone mistook the weight and charge of the electron.


text:
User:Imroy

See my Wikipedia user account.

title: User:Imroy


text:
User talk:Imroy

You'll have better luck contacting me on my Wikipedia account talk page.

title: User talk:Imroy


text:
User:Msmithma

=About Dr. Martín Hoecker-Martínez= I am a Assistant professor of physics at the University of Redlands. Prior to that I was a research fellow at University of Michigan in the Climate and Space Sciences and Engineering Department. My Ph.D. is in physical oceanography from the College of Earth Ocean and Atmospheric Science at Oregon Stat Universty I have a masters degree in applied physics from Caltech and bachelors degree in physics from Harvey Mudd College. l also taught physics at colleges, universities and community colleges in southern California from 2005 to 2008.

=Projects=

Pure Mathematics

 * Real Analysis

Physics

 * Physics Study Guide

Earth Sciences

 * Introduction to Oceanography

Essays

 * Units and Equations (not complete)

Wikiversity
=Links= =Copyright=
 * Physics
 * #wikibooks irc channel

title: User:Msmithma


text:
Physics Study Guide/Basic Units

=The SI System of Measurement=

Fundamental units
These are basic units upon which most units depends.

Time
Time is defined as the duration between two events. In the international system of measurement (S.I.) the second (s) is the basic unit of time and it is defined as the time it takes a cesium (Cs) atom to perform 9,192,631,770 complete oscillations. The Earth revolves around its own axis in 86400 seconds with respect to the Sun; this is known as the mean solar day, and the 86400th part of one day is known as a second.

Length
In the international system of measurement (S.I.) the metre (m) ('meter' in the US) is the basic unit of length and is defined as the distance travelled by light in a vacuum in 1/299,792,458 second. This definition establishes that the speed of light in a vacuum is precisely 299,792,458 metres per second.

Mass
In the international system of measurement (S.I.) the kilogram (kg) is the basic unit of mass and is defined as the mass of a specific platinum-iridium alloy cylinder kept at the Bureau International des Poids et Mesures in Sèvres, France. A duplicate of the Sèvres cylinder is kept at the National Institute of Standards and Technology (NIST) in Gaithersburg, Maryland. See Wikipedia article.

Current
In the international system of measurement (S.I.) the ampere (A) is the basic measure of electrical current. It is defined as the constant current which, if maintained in two straight parallel conductors of infinite length, of negligible circular cross-section, and placed 1 metre (m) apart in vacuum, would produce between these conductors a force equal to 2×10-7 newton (N) per metre of length.

Unit of Thermodynamic Temperature
The kelvin (K), unit of thermodynamic temperature, is the fraction 1/273.16 of the thermodynamic temperature of the triple point of water.

Unit of Amount of Substance
1. The mole (mol) is the amount of substance of a system that contains as many elementary entities as there are atoms in 0.012 kilograms (12 grams) of carbon 12.

2. When the mole is used, the elementary entities must be specified and may be atoms, molecules, ions, electrons, other particles, or specified groups of such particles.

Luminous Intensity
The candela (cd) is the luminous intensity, in a given direction, of a source that emits monochromatic radiation of frequency 540 x 1012 hertz and that has a radiant intensity in that direction of 1/683 watt per steradian. (A steradian (sr) is the SI unit of solid angle, equal to the angle at the centre of a sphere subtended by a part of the surface equal in area to the square of the radius.)

Derived Units
These are units obtained by combining two or more fundamental units.

Charge
The SI unit of charge is the coulomb (C). It is equal to ampere times second: $$1 \ \mathrm{C} = 1 \ \mathrm{A} \cdot \mathrm{s}$$

Velocity
The SI unit for velocity is in m/s or metres per second.

Force
The SI unit of force is the newton ($$N$$), named after Sir Isaac Newton. It is equal to $$1 \ \mathrm{kg} \cdot \mathrm{m}/\mathrm{s}^2$$.

Energy
The SI unit of energy is the joule (J). The joule has base units of kg·m²/s² = N·m. A joule is defined as the work done or energy required to exert a force of one newton for a distance of one metre. See Wikipedia article.

Pressure
The SI unit of pressure is the pascal (Pa). The pascal has base units of $$\mathrm{N} / \mathrm{m}^2$$ or $$\mathrm{kg} / \mathrm{m} \cdot \mathrm{s}^2$$. See Wikipedia article.

Prefixes
=Astronomical Measurements=

The SI units are not always convenient to use, even with the larger (and smaller) prefixes. For astronomy, the following units are prevalent:

Julian Year
The Julian year is defined by the IAU as exactly 365.25 days, a day being exactly 60*60*24 = 86,400 SI seconds. The Julian year is therefore equal to 31,557,600 seconds.

Astronomical Unit
The Astronomical Unit (au or ua), often used for measuring distances in the Solar system, is the average distance from the Earth to the Sun. In 2012 this was defined as exactly 149,597,870,700 metres. Previously it was 149,597,870,691 m, ± 30 m.

Light Year
The light year (ly) is defined as the distance light travels in a homogeneous isotopic non-attenuating medium (a vacuum) in one Julian year. Due to the word "year", the light year is often mistaken for a unit of time in popular culture. It is, however, a unit of length (distance), and is equal to exactly 9,460,730,472,580,800 m.

Parsec
The parsec (pc), or "parallax second", is the distance of an object that appears to move two arc-seconds against the background stars as the Earth moves around the sun, or by definition one arc-second of parallax angle. This angle is measured in reference to a line connecting the object and the Sun, and thus the apparent motion is one arc-second on either side of this "central" position. The parsec is approximately 3.26156 ly.

title: Physics Study Guide/Basic Units


text:
Talk:Telugu/Introduction

Nice work guys.... keep it going namaste.

title: Talk:Telugu/Introduction


text: Modern Photography/Exposure tables

title: Modern Photography/Exposure tables


text:
User:Elias Enoc

Is a colaborator of Wikibooks.

title: User:Elias Enoc


text:
User talk:Luv2shoot84

Hi Isabel!! thanks for editing your User Page! I hope everybody follows your lead. Nice to see you here. You're the first one I've seen actually set up your Talk Page, and it's great! Take care, and leave me a message on my Talk Page sometime.

Pete 21:24, 7 September 2006 (UTC)

title: User talk:Luv2shoot84


text:
User:EmilySipes

Hello my name is Emily Sipes. I am currently a Teacher's Assistant for the "Social and Cultural Foundations of Education" class and wikibook project. I am working on a Master's degree in Elementary Education PreK-6. I hope to teach the fourth or fifth grade. I received my undergrad degree in Anthropology. I am participating in this project for experience in creating a user-friendly class experience and curriculum. I am excited about using some type of Wiki project with my own students- even if it just for fun and enrichment to get students excited about learning for their own personal growth.

Please feel free to give me tips or comments. I would love to hear from you!

2-15-2007

I have had a great time working with WikiBooks. As of this semester, we are working on our second edition of our student authored textbook. Most students seem to take it in stride, while others are very enthuisastic about the whole process and are already busy editing other students' articles. I have learned alot about editing, creating pages, and solving problems. And I am even considering creating a book with my elementary school students this fall. I think it will be a rewarding expereince for us all. - Emily

title: User:EmilySipes


text:
Talk:Java Programming/Data and Variables

Variable Naming Conventions
Would this be the right place to request some information on variable naming conventions? I'm coming from a visual basic background, so this case-sensitivity thing is completely new to me. I assume that the naming conventions are different in Java than in VB.


text:
Practical Electronics/Binary-coded Decimal

Binary-coded Decimal or BCD is a way of representing a decimal number as a string of bits suitable for use in electronic systems. Rather than converting the whole number into binary, BCD splits the number up into its digits and converts each digit to 4-bit binary.

Thus, for example, 345 becomes

0011 0100 0101

This is 3 digits longer than the real binary equivalent of 345, 101011001, but it has several advantages:

 * It can easily be used to drive displays, as each digit is encoded separately.
 * It allows easy conversion to decimal; true binary to decimal conversion is difficult and gets increasingly difficult as the number gets longer.
 * It allows easy scaling by factors of 10

It also has disadvatages:

 * It is difficult to perform arithmetic operations (such as adding) on BCD numbers, as it is not as easy to recognise carries, etc.
 * It is longer than true binary, and so require more storage space.

Converting binary number (example: 255 is 11111111 binary) to binary-coded decimal (reads as 10, 101,101) can be done by dividing by 10 (decimal). The remainder is the digit starting at the ones place, and the quotient is to be divided by 10 again and the quotient would be the next digit. This step repeats until the quotient is 0. In this example:

255/10 = 25 R: 5 [xx5] 25/10 = 2 R: 5 [x55] 2/10 = 0 R: 2 [255]

To convert from binary-coded decimal to binary, have each "digit" multiplied by 10x where X is the place value (0 for ones, 1 for tens, 2 for hundreds...) and add all of them all up (2*102)+(5*101)+(5*100) = 255.

ICs
Several ICs are available to handle BCD counting:

 * 4028 - BCD-to-decimal decoder
 * 4029 - BCD/true-binary counter
 * 4510 - BCD decade counter
 * 4511 - BCD 7-segment display driver


text:
Practical Electronics/Circuits to make

This part of Practical Electronics is a repository for circuits that have been made and tested, and can be made by you, using the diagrams presented here.

They range from simple plug-in modules for prototyping to more sophisticated modular counters and so on.

 * Plug-in Modules

 * Modular Multifunction Counter

title: Practical Electronics/Circuits to make


text:
User:Sire22

Hello, I am a voracious reader of wikibook and I am developing a habit for adding information, please do leave comments, etc.

title: User:Sire22


text:
Practical Electronics/Circuits to make/MMC

The Modular Multifunction Counter or MMC is a custom device that combines several counting functions in a format that that is compact and highly extendable.

The functions performed by the MMC are:

 * Binary/BCD
 * Up/Down
 * Presetable
 * Resetable
 * Able to be extended to an arbitrary number of digits
 * Decoding and display of the counter

The MMC is a modular design, which means that it is made up of several components which can be interchanged to give different functionality. It is made up in two dimensions of blocks of three digits: the boards stack vertically for every block of three digits, performing all functions for those digits, while they also join horizontally for extension to larger numbers.

The bottom board of rightmost stack controls the settings for all digits to the left of it. By plugging a board in to the left-hand side of the bottom board, the new board automatically becomes a slave to the old board (all settings on the new board are overridden), and vice versa.

Each stack is made up of at least four boards:

 * Settings - this board either allows the user to select the mode of counting or accepts settings from a master board and implements those.
 * Counter - this board contains the 4029 counters and gives a BCD output.
 * Decoder - this board takes the BCD from the 4029 counters and converts it to 7-segment inputs.
 * Display - this board displays the decoded count.

Please bear in mind that the last two boards can be changed for something else, for example a board that outputs a binary number as a row of red or green LEDs.

Because of the large size, circuit diagrams and any notes on the design of the cicuit are located here.

PCB artwork and component layouts are available here. You will need Adobe Acrobat to read some of them. This is available at Adobe's website.

There is also a photo gallery.

Improvements
If you think you can improve on any part of this circuit, please do not hesitate to contact User:Inductiveload to suggest it. This could be as small as a way to lose a jumper wire on a PCB or as large as a suggested new module option.


text:
Principles of Economics/PPF

The PPF
The Production possibilities curve or frontier (PPF) is a graphical means of depicting the concept of diminishing returns and opportunity costs. The basic quandary here is how to use a limited (hence, scarce) set of resources to satisfy infinite wants by as much as possible.

A single PPF curve is for an unchanging set of resources. If the resources change, so does the PPF. Insufficient resources for a second product mean a vertical/horizontal curve; insufficient resources for a single product means a curve that lies on the origin (these are trivial cases).

A two-dimensional PPF works with two products, each of them taking an axis (which one doesn't matter). The curve, or frontier, is formed from all the possible combinations of resources that produce the most products. The definition of most products is indeterminate due to the subjective value associated with both; hence, the curve of points. All points along the curve are productively efficient, but depending on society's goals, only one point will be allocatively efficient.

All points outside of the curve are unattainable (because they require more resources than are available) without trade with an external producer (such as is the case with international trade). All points within the curve are attainable but productively inefficient.

The basic frontier

For smaller entities such as individuals, the PPF curve will be almost exactly a straight line (at least for the majority of goods), which will reflect the budget constraints. However, for large entities that make a noticeable difference on the quantity of resources available, diminishing returns become apparent. Here is the PPF curve for such an entity. Note that at high values of either good, much of the other good must be sacrificed for a bit more of that one good.

Shifts in the frontier

When a change in the economy causes more or less of a good to be produced when others are held constant, that is considered a shift in the one good's production possibility. The positive version shifts the frontier outward along the axis the good is placed at, so here an increase in good 1's production possibility stretches the PPF along the x axis. It is possible for that to actually increase production of good 2, depending on how society apportions its resources.

Growth in the frontier

General economic growth increases all of the available goods (both in this case). The growth does not have to be proportionate, nor even hold the same shape, as this graph demonstrates.

Flattening of the PPF

When a technological advance makes it relatively easier to exchange between two goods, a flattening of the PPF occurs as is demonstrated in the graph. When a firm takes a smaller percentage of industry market share, its PPF also flattens because its actions have a less significant effect on the total resource/good supply to the point that it has to exert fewer and fewer sacrifices of one good to obtain the next unit of the other good. It should also be easy to imagine situations when the opposite is true.

title: Principles of Economics/PPF


text:
Talk:QBasic/Files

ahhh! i need some help with making files. i am almost donw with figuring out how to use all of qbasic to make a game, but i cant get it to make the file to hold my text file! ive tried pretty much everthing but i need some help. got any ideas?

title: Talk:QBasic/Files


text:
Practical Electronics/Circuits to make/MMC/PCBs

This page contains links to the PCB artwork and component layouts for the MCC. It is arranged by board. Each PDF contains:

 * The solder-side layout for making a PCB mask.
 * The artwork showing copper tracks (red) and wire links (blue).
 * The component layout and bill of materials.

Directory of Files

 * [[Image:MMC_Board 1_PCB.pdf|Board 1 - Settings Controller]]

 * [[Image:MMC_Board 2_PCB.pdf|Board 2 - Counter Module]]

 * [[Image:MMC_Board 3_PCB.pdf|Board 2 - Decoder Module]]

 * [[Image:MMC_Board 4_PCB.pdf|Board 2 - Display and Output Module]]

 * [[Image:MMC Counter PCB Artwork.pdf]]