CSS Style Rules

<?xml:stylesheet href="pentahome.css" type= "text/css"?>

The file pentahome.css or any other css file can contain any information written based on the CSS syntax and rules. In this topic, we will explore the rules of CSS and the different properties and values that can be used for style definitions.

<b>Syntax</b>

The basic syntax of CSS is the object or objects to be styled, followed by an opening curly bracket I(), followed by a colon ( : ), followed by a property value followed by a semi colon (; ), with different properties being repeated.

[ object(s) to be styled I ( ( [ property name I : [ property value I ; ) + )

In the above syntax, the first part of the rule is called the selector, as it selects the document object that is to be styled. The second part, the part inside the curly brackets, is called the declaration, as it declares what properties are to be applied.
<b>Keywords</b>
Keywords have the form of identifiers. Keywords must not be placed between quotes("..."or "..."). Thus, red is a keyword, but "red" is not. (It is a string.) Other illegal examples are:

width: "auto";

border: "none";

font family: "serif";

background: "red";
<b>Blocks</b>
A block starts with a left curly brace ({) and ends with the matching right curly brace 0). In between there may be any characters, except that parentheses (( )), brackets
([]) and braces ({}) must always occur in matching pairs and may be nested. Single (') and double quotes (") must also occur in matching pairs, and the characters between them are parsed as a string.

Here is an example of a block. Note that the right brace between the double quotes does not match the opening brace of the block, and that the second single quote is an escaped character, and thus doesn't match the first single quote:

( causta: "I" + ({7} * '"\") )

A rule set (also called "rule") consists of a selector followed by a declaration block. A declaration block (also called a {} block in the following text) starts with a left curly brace (0 and ends with the matching right curly brace (}) In between there must be a list of zero or more semi colon sepa rated (;) declarations.

The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a () block.

CSS2 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future versions of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS2. For example, in the following code, since the "&" is not a valid token in a CSS2 selector, a CSS2 user agent must ignore the whole second line, and not set the colour of H3 to red:

H1, H2 (colour: green )

H3, H4 & H5 (colour: red I

H6 (colour: black )
<b>Declaration, Properties and Comments</b>
A declaration is either empty or consists of a property, followed by a colon (:), followed by a value. Around each of these there may be white space / spaces. Because of the way selectors work, multiple declarations for the same selector may be organised into semi colon (;) separated groups. Consider the following example:
A property is an identifier. Any character may occur in the vaIue, but parentheses("( )"), brackets (I I"), braces ("{}"), single quotes (') and double quotes (") must come in matching pairs, and semi colons not in strings must be escaped. Parentheses, brackets, and braces may be nested. Inside the quotes, characters are parsed as a string. The syntax of values is separately specified for each property, but in any case, values are built from identifiers, strings, numbers, lengths, percentages, URIs, colours, angles, times, and frequencies. A user agent will ignore a declaration with an invalid property name or an invalid value. Every CSS2 property has its own syntactic and semantic restrictions on the values it accepts. For example, assume a CSS2 parser encounters the following style sheet definition:

H1 { colour: red; font style: 12pt ) /* Invalid value: 12pt */

P (colour: blue; font vendor: any; /* Invalid prop.: font vendor */

font variant: small caps I

The second declaration on the first line has an invalid value '12pt'. The second declaration on the second line contains an undefined property 'font vendor'. The CSS2 parser will ignore these declarations, effectively reducing the style sheet to:

H1 ( colour: red; )

P ( colour: blue; font variant: small caps )

Comments begin with the characters "/* " and end with the characters " *P'. They may occur anywhere between tokens, and their contents have no influence on the rendering. Comments may not be nested.

<b>Integers and Real Numbers</b>

Some value types may have integer values or real number values. Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. both integers and real numbers may be preceded by a " " or " + " to indicate the sign.

Lengths refer to horizontal or vertical measurements. The format of a length value is an optional sign character ('+'or' ', with'+' being the default) immediately followed by a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, deg, etc.). After the '0' length, the unit identifier is optional. Some properties allow negative length values, but this may complicate the formatting model and there may be implementation specific limits. If a negative length value cannot be supported, it should be converted to the nearest value that can be supported. There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will scale more easily from one medium to another (e.g., from a computer display to a laser printer). Relative units are:
The 'em' unit is equal to the computed value of the 'font size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. This unit is sometimes also called the quad width in typographic texts. The 'ex' unit is defined by the font's 'x height'. The x height is so called because it is often equal to the height of the lower case 'Y'. However, an 'ex' is defined even for fonts that don't contain an 'Y'. For example:

H1 { line height: 1.2em { { means that the line height of H1 elements will be 20 percent greater than the font size of the H1 elements. {

H1 (font size: 1.2em I { means that the font size of H1 elements will be 20 percent greater than the font size inherited by H 1 elements. {

Pixel (px) units are relative to the resolution of the viewing device, which is most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should re scale pixel values.

For reading at arm's length, 1px thus corresponds to about 0.28 mm (1/90 inch). When printed on a laser printer, meant for reading at a little less than arm's length (55 cm, 21 inches), 1 px is about 0.21 mm. On a 300 dots per inch (dpi) printer, that may be rounded up to 3 dots (0.25 mm); on a 600 dpi printer, it can be rounded to 5 dots.
Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:

The format of a percentage value is an optional sign character ('+' or ' ', with '+' being the default) immediately followed by a <number> immediately followed by '%'. Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

Since child elements inherit the computed values of their parent, in the following example, the children of the P element will inherit a value of 12pt for 'line height', not the percentage value (120 percent):

P ( font size: 10pt )

P {line height: 120 percent}
URLs (Uniform Resource Locators) provide the address of a resource on the Web. An expected new way of identifying resources is called URN (Uniform Resource Name), Together they are called URIs (Uniform Resource Identifiers). This specification uses the term URI. The functional notation used to designate URIs in property values is "urI()", as in the following example:

BODY I background: url(" http://www.pentabooks.com/pinkish.gif ")}

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by')' The two quote characters must be the same.

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URls. Relative URIs are resolved to full URIs using a base URI. For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

For example, suppose the following rule:

BODY { background: url(" yellow"))

is located in a style sheet designated by the URI: http://www.pentabooks.com/ style/basic.css. The background of the source document's BODY will be tiled with whatever image is described by the resource designated by the URI http://www.pentabooks.com/style/Yeflow.
<b>Colours</b>
A <colour> is either a keyword or a numerical RGB specification. The list of keyword colour names is: aqua, black, blue, fuchsia, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colours are defined in HTML 4.0. In addition to these colour keywords, users may specify keywords that correspond to the colours used by certain objects in the user's environment. For example.

BODY {colour: black; background: white )

H1 I colour: maroon )

The RGB color model is used in numerical colour specifications. These examples all specify the same colour:

H3 { colour: #f00} 1

H3 {colour: #ffOO00)

H3 I colour: rgb(255,0,0) )

/* #rgb */

P #rrggbb */

/* integer range 0 255

H3(colour:rgb(100%,O%,O%)I /*float range 0.0% 100.0%

The format of an RGB value in hexa decimal notation is'#' immediately followed by either three or six hexadecimal characters. The three digit RGB notation (#rgb) is converted into six digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fbo expands to #ffbbOO. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the colour depth of the display.

The format of an RGB value in the functional notation is 'rgb ('followed by a commaseparated list of three numerical values (either three integer values or three percentage values) followed by')'. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(l00%,100%,100%) = #FFF. White space characters are allowed around the numerical values.

<b>Times Frequencies and Strings</b>

Time values are often used with style sheets. Their format is a <number> immediately f ollowed by a time unit identifier. Time unit identifiers are:

ms: milliseconds

s:seconds

Frequency values are sometimes used with CSS. Their format is a <number> immediately followed by a frequency unit identifier. Frequency unit identifiers are:

Hz: Hertz
Strings can either be written with double quotes or with single quotes. Double quotes cannot occur inside double quotes, unless escaped (as '\"). Analogously for single quotes ("\"). For example:

"this is a 'string"'

" this is a '\' string\" "

'this is a "string"'

'this is a \'string\"

To include a new line in a string, use the escape "\A" (hexa decimal A is the line feed character in Unicode, but represents the generic notion of "new line" in CSS). It is possible to break strings over several lines, but in such a case the new line itself has to be escaped with a backslash (\).

Domain Name Search