'text-transform' Value: capitalize | uppercase | lowercase | none | inherit Initial: none Applies to: all elements Inherited: yes Percentages: N/A Media: visual
This property controls capitalization effects of an element's text. Values have the following meanings:
capitalize Puts the first character of each word in uppercase. uppercase Puts all characters of each word in uppercase. lowercase Puts all characters of each word in lowercase. none No capitalization effects. The actual transformation in each case is written language dependent. See RFC 2070 ([RFC2070]) for ways to find the language of an element.
Conforming user agents may consider the value of 'text-transform' to be 'none' for characters that are not from the Latin-1 repertoire and for elements in languages for which the transformation is different from that specified by the case-conversion tables of ISO 10646 ([ISO10646]).
Example(s):
In this example, all text in an H1 element is transformed to uppercase text.
This specification defines Cascading Style Sheets, level 2 (CSS2). CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.
CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface.
Status of this document
This document has been reviewed by W3C Members and other interested parties and has been endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited as a normative reference from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.
Assigning property values, Cascading, and InheritanceOnce a user agent has parsed a document and constructed a document tree, it must assign, for every element in the tree, a value to every property that applies to the target media type.
The final value of a property is the result of a three-step calculation: the value is determined through specification (the "specified value"), then resolved into an absolute value if necessary (the "computed value"), and finally transformed according to the limitations of the local environment (the "actual value").
Specified values may be absolute (i.e., they are not specified relative to another value, as in 'red' or '2mm') or relative (i.e., they are specified relative to another value, as in 'auto', '2em', and '12%'). For absolute values, no computation is needed to find the computed value.
Relative values, on the other hand, must be transformed into computed values: percentages must be multiplied by a reference value (each property defines which value that is), values with relative units (em, ex, px) must be made absolute by multiplying with the appropriate font or pixel size, 'auto' values must be computed by the formulas given with each property, certain keywords ('smaller', 'bolder', 'inherit') must be replaced according to their definitions.
In most cases, elements inherit computed values. However, there are some properties whose specified value may be inherited (e.g., the number value for the 'line-height' property). In the cases where child elements do not inherit the computed value, this is described in the property definition.
A computed value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the computed width. The actual value is the computed value after any approximations have been applied.
Some values are inherited by the children of an element in the document tree. Each property defines whether it is inherited or not.
Suppose there is an H1 element with an emphasizing element (EM) inside:
The headline is important!
If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent element, so if H1 has the color blue, the EM element will likewise be in blue.
To set a "default" style property for a document, authors may set the property on the root of the document tree. In HTML, for example, the HTML or BODY elements can serve this function. Note that this will work even if the author omits the BODY tag in the HTML source since the HTML parser will infer the missing tag.
Example(s):
For example, since the 'color' property is inherited, all descendants of the BODY element will inherit the color 'black':
BODY { color: black; }
Specified percentage values are not inherited; computed values are.
Example(s):
For example, given the following style sheet:
BODY { font-size: 10pt } H1 { font-size: 120% }
and this document fragment:
A large heading
the 'font-size' property for the H1 element will have the computed value '12pt' (120% times 10pt, the parent's value). Since the computed value of 'font-size' is inherited, the EM element will have the computed value '12pt' as well. If the user agent does not have the 12pt font available, the actual value of 'font-size' for both H1 and EM might be, for example, '11pt'.
Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent. The inherited value, which is normally only used as a fallback value, can be strengthened by setting 'inherit' explicitly.
Example(s):
In the example below, the 'color' and 'background' properties are set on the BODY element. On all other elements, the 'color' value will be inherited and the background will be transparent. If these rules are part of the user's style sheet, black text on a white background will be enforced throughout the document.
BODY { color: black !important; background: white !important; } * { color: inherit !important; background: transparent;
CSS can be used with any structured document format, for example with applications of the eXtensible Markup Language [XML10]. In fact, XML depends more on style sheets than HTML, since authors can make up their own elements that user agents don't know how to display.
Here is a simple XML fragment:
Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived.
To display this fragment in a document-like fashion, we must first declare which elements are inline-level (i.e., do not cause line breaks) and which are block-level (i.e., cause line breaks).
The first rule declares INSTRUMENT to be inline and the second rule, with its comma-separated list of selectors, declares all the other elements to be block-level.
One proposal for linking a style sheet to an XML document is to use a processing instruction:
Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived.
A visual user agent could format the above example as:
Notice that the word "flute" remains within the paragraph since it is the content of the inline element INSTRUMENT.
Still, the text isn't formatted the way you would expect. For example, the headline font size should be larger than then rest of the text, and you may want to display the author's name in italic:
In this tutorial, we show how easy it can be to design simple style sheets. For this tutorial, you will need to know a little HTML (see [HTML40]) and some basic desktop publishing terminology.
We begin with a small HTML document:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
To set the text color of the H1 elements to blue, you can write the following CSS rule:
H1 { color: blue }
A CSS rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document.
The HTML 4.0 specification defines how style sheet rules may be specified for HTML documents: either within the HTML document, or via an external style sheet. To put the style sheet into the document, use the STYLE element:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
For maximum flexibility, we recommend that authors specify external style sheets; they may be changed without modifying the source HTML document, and they may be shared among several documents. To link to an external style sheet, you can use the LINK element:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
The LINK element specifies:
the type of link: to a "stylesheet".
the location of the style sheet via the "ref" attribute.
the type of style sheet being linked: "text/css".
To show the close relationship between a style sheet and the structured markup, we continue to use the STYLE element in this tutorial. Let's add more colors:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
The style sheet now contains two rules: the first one sets the color of the BODY element to 'red', while the second one sets the color of the H1 element to 'blue'. Since no color value has been specified for the P element, it will inherit the color from its parent element, namely BODY. The H1 element is also a child element of BODY but the second rule overrides the inherited value. In CSS there are often such conflicts between different values, and this specification describes how to resolve them.
CSS2 has more than 100 different properties, including 'color'. Let's look at some of the others:
Bach's home page
Bach's home page
Johann Sebastian Bach was a prolific composer.
The first thing to notice is that several declarations are grouped within a block enclosed by curly braces ({...}), and separated by semicolons, though the last declaration may also be followed by a semicolon.
The first declaration on the BODY element sets the font family to "Gill Sans". If that font isn't available, the user agent (often referred to as a "browser") will use the 'sans-serif' font family which is one of five generic font families which all users agents know. Child elements of BODY will inherit the value of the 'font-family' property.
The second declaration sets the font size of the BODY element to 12 points. The "point" unit is commonly used in print-based typography to indicate font sizes and other length values. It's an example of an absolute unit which does not scale relative to the environment.
The third declaration uses a relative unit which scales with regard to its surroundings. The "em" unit refers to the font size of the element. In this case the result is that the margins around the BODY element are three times wider than the font size.
Bab 1 Visual Basic Dasar 1 Teknik Dasar Visual Basic 2 Operasi String 3 Konversi 4 Validasi String dan Angka. 5 Operasi Array 6 Date dan Time 7 Timer dan Alternatifnya. 8 Mengirim Keystroke. 9 Argumen Command Line 10 Error Handling. 11 API Win32 12 Menangguhkan Eksekusi 13 Mengatur Project Visual Basic Bab 2 Form dan Kontrol 14 Tip Dasar Form. 15 Kontrol ListBox 16 ComboBox AutoComplete 17 Menggunakan ListView 18 Efek CommandButton 19 Scrolling ToolTip 20 Editor Menu 21 Ikon di Menu.. and....
