| Example 1 |
CSS2 builds on CSS1 standard. If you click on the link View output, it shows the result of applying the CSS 2 stylesheet on the relevant XML source displayed in the previous columns of the
row.
|
| Example 2 |
CSS2 offers many possibilities how to match an element. If only the element name is given, it matches everywhere (1). The character [*] matches any element (2).
|
| Example 3 |
Names separated by whitespace match elements specified by the last name. The other names must occur somewhere on the road
from root to this element . They are ancestors of this element (1). If the element names are separated with [>], the element on the right must be directly inside the left element (a child)
(2). The character [*] can be used to achieve some interesting effects. In the (3) grand-children of AAA element are red colored. The ddd2 element while not a granchild is also colored as it inherits color
from its parent
|
| Example 4 |
The first child elements can be selected with pseudo-class selector first:child (1). If two elements are separated with character [+] then the second element is selected only if it is preceeded by the first
one (2). (3) selects all first children.
|
| Example 5 |
Pseudo-classes link and visited distinguish not visited and visited links, respectively (1).Pseudo-class hover applies when the cursor moves over the element (2).
|
| Example 6 |
The behaviour of some elements can be tailored with pseudo-classes hover, active and focus |
| Example 7 |
Elements can be distinguished according to their attributes. They can be tested if they contain an attribute (1) or even their values can be compared (2). If operator ~= is used for the comparison then the compared value must match any part of the attribute value separated
by spaces (3).
|
| Example 8 |
If elements share some property they can be specified in one place using comma separated list. |
| Example 9 |
Pseudoelements first-letter and first-line match corresponding characters in block level elements |
| Example 10 |
With before and after pseudoelements a text can be added. |
| Example 11 |
If a property is not specified for the element, it inherits this property from its parent. |
| Example 12 |
For each displayed element a rectangular box is generated. Each box has a content area (e.g., text, an image, etc.) and optional
surrounding padding, border, and margin areas (1). To display a border, it must be switched on with border-style instruction (2).
|
| Example 13 |
CSS2 recognises several border styles: solid, double, dotted, dashed, groove, ridgr, inset, outset. (1) and (2). Their color can be changed with border-color property (3).
|
| Example 14 |
The width of border can be specified by values thin, medium, thick or it can have an explicit value. |
| Example 15 |
The margin, border, and padding can be broken down into left, right, top, and bottom segments. (1) uses different borders, (2) uses paddings.
|
| Example 16 |
Border width, style, and color can be given simultaneously using shorthand notation (1). Shorthands for margins also exist: (top&bottom - left&right), (top - left&right - bottom), or (top -right-bottom-left )
(2).
|
| Example 17 |
In previous examples colors were used to distinguish elements. Property color describes the foreground color of the element's
text content, background-color the color of containing box. The color can be described in several ways one of them is through
usage of 16 keyword color names defined by HTML 4.0: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow. (1).
|
| Example 18 |
Colors can be also specified by their RGB value. This value specifies the ratio of red, green and blue in the composite
color, respectively. The ratio can be given in several notations and it is usualy selected by a color picker, (1) shows a few examples in hexadecimal notation, the highest value is FF (255 in decimal), the lowest 0.
|
| Example 19 |
CSS2 allows authors to specify colors in a manner that integrates them into the user's graphic environment. Look at the example,
then change color settings of your computer and look again.
|
| Example 20 |
Authors may specify the background-color of an element (1) or use a background image(2).
|
| Example 21 |
You can specify how many times the background image is repeated. The possibilities are: the default repeat (repeats both horizontaly
and verticaly - 1), repeat-x (horizontal repeat only - 2), repeat-y (vertical repeat only - 3) and no-repeat (4)
|
| Example 22 |
If a background image has been given, its position and eventual repeated occurence can be specified. |
| Example 23 |
Property background-attachment with value fixed prevents the scrolling of the background image. Compare 1 and 2.
|
| Example 24 |
A text can be "decorated" with text-decoration property. The value of this property can be underline, overline, line-through,
and blink (1). These values can be combined (2).
|
| Example 25 |
With text-shadow color and size of shadow can be determined. |
| Example 26 |
The distance between individual letters in a word can be determined with letter-spacing property (1), the distance between words with word-spacing property (2). The distance can be given in several units. The relative distances are em (font-size of relevant font), ex (x-height of
relevant font), and px (pixels, relative to viewing device). The x-height is so called because it is often equal to the height
of the lowercase "x". Absolute length units are only useful when the physical properties of the output medium are known. The
absolute units are: in: inches -- 1 inch is equal to 2.54 centimeters, cm: centimeters, mm: millimeters, pt: points --
the points used by CSS2 are equal to 1/72th of an inch, pc: picas -- 1 pica is equal to 12 points.
|
| Example 27 |
The text-transform property can have following values: uppercase, lowercase, and capitalize. Capitalize changes the first
character of the word to uppercase, uppercase everything to uppercase and lowercase everything to lowercase.
|
| Example 28 |
The white-space property can change the normal behaviour (several following whitespaces are collapsed to one and lines are
wraped) either to pre (no collapsing and no wraping) or to nowrap (collapsing but no wrapping).
|
| Example 29 |
The text-align describes how inline content of a block element is aligned. |
| Example 30 |
The 'font-style' property requests normal (sometimes referred to as "roman" or "upright"), italic, and
oblique faces within a font family.
|
| Example 31 |
The 'font-variant' property with value small-caps changes lowercase font to letters similar to uppercase but with smaller
size.
|
| Example 32 |
The 'font-weight' property specifies the weight of the font. It can be a number 100, 200, 300, ..., 900, where each number
indicates a weight that is at least as dark as its predecessor. The keywords normal and bold are equal to 400 and 700, respectively.
The keywords bolder and lighter specify the next or previous value, respectively.
|
| Example 33 |
The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have
the following ordering, from narrowest to widest :
1.ultra-condensed
2.extra-condensed
3.condensed
4.semi-condensed
5.normal
6.semi-expanded
7.expanded
8.extra-expanded
9.ultra-expanded . The relative keyword 'wider' sets the value to the next expanded value above the inherited value ; the
relative keyword 'narrower' sets the value to the next condensed value below the inherited value .
|
| Example 34 |
The property font-size describes the size of the font. Keywords [ xx-small | x-small | small | medium | large | x-large
| xx-large ] refer to an entry in a table of font sizes computed and kept by the user agent.
|
| Example 35 |
The font-size property can have relative values larger and smaller.These values are interpreted relative to the table of font
sizes and the font size of the parent element.
|
| Example 36 |
The font-size property can be also given in absolute and relative units.
|
| Example 37 |
The property font-family specifies the font to be used. There are 5 generic families (serif, sans-serif, cursive, fantasy,
monospace) which are used when the specified font set is not available.
|
| Example 38 |
A single font may not contain glyphs to display all the characters in a document, and not all fonts are available on all
systems. Authors can specify a list of fonts, all of the same style and size, that are tried in sequence to see if they contain
a glyph for a certain character. This list is called a font set.
|
| Example 39 |
With the font property system fonts can be specified: caption, icon, menu, message-box, small-caption, and status-bar.
|
| Example 40 |
The shape of the cursor moving over an element can be changed to following values: auto, crosshair, default, pointer, move,
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help.
URI can be used to defined user defined cursor.
|
| Example 41 |
The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely
parallels the visual layout of the table. (1) lays out a simple table, (2) draws borders as well.
|
| Example 42 |
Table caption can be positioned: top (1), bottom (2), left (3), and right (4).
|
| Example 43 |
The value table of display property defines a table in a box context (1), the value inline-table in inline context (2).
|
| Example 44 |
Data in table cells can be vertically aligned.
|
| Example 45 |
Data in table cells can be horizontally aligned to the left, right, or center(1). They can be also aligned along a vertical axis according to a specified character(2).
|
| Example 46 |
There are two distinct models for setting borders on table cells in CSS. They are selected with border-collapse property.
The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model.
|
| Example 47 |
In the separate border model properties border-spacing (to specify distance betweeen individual borders) and empty-cells (if
borders around empty cells should be shown) can be used.
|
| Example 48 |
An element can be displayed as a block or inline. If the element display property is not specified, inline display is assumed.
|
| Example 49 |
Lists are specified with display:list-item
|
| Example 50 |
With list-style-type type of list marker is specified.
|
| Example 51 |
Relative position means that the box
is offset relative to its normal position. When a box is relatively positioned, the position of the following box is
calculated as though the previous one were not offset. This offset is given by properties top (offset below the top edge),
right (offset to the left of the right edge), bottom (offset above the bottom edge), and left (offset to the right of the
left edge).
|
| Example 52 |
In this example the order of elements is changed with help of relative positioning.
|
| Example 53 |
Absolutely positioned boxes are taken out of the normal flow.
This means they have no impact on the layout of later siblings.
|
| Example 54 |
The position of fixed boxes is calculated according to the 'absolute' model, but in addition, the box is fixed with respect
to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled).
|
| Example 55 |
A float is a box that is shifted to the left or right on the current line. Remaining content may flow along its side (or be
prohibited from doing so by the 'clear' property).
|