Cascading Style Sheets

Template: Infobox file format / Maintenance / Magic number is missing template: Infobox file format / Maintenance / missing site

Cascading Style Sheets ( English pronunciation [ Kaes keɪdɪŋstaɪlʃi ˌ ː ts ], for stepped or ( in a row) nested master pages ), abbreviated to CSS, is a declarative language for style sheets (English style sheets) of structured documents. It is used mainly in conjunction with HTML and XML used ( for example, in SVG).

Basic idea in the design of CSS was to describe using HTML or XML, only the content-wise breakdown of a document and the meaning of its parts, while using CSS which the visual presentation (colors, layout, typography, etc.) is set of elements largely independent. During the early development only simple configuration instructions were possible, more complex modules have been added to the language standard later. These allow, for example, the definition of animation and the distinction between different output media.

Elements of a document can be identified, for example, due to various properties; these include next to the item name (such as "a" for all link elements ), its ID and its position within the document (eg, all image elements within link elements ), more complex features such as attributes ( for example, all link elements whose href attribute with " www.example.com " start ) or the position in a set of elements (eg the 7th element of a list ). Using CSS rules the specific values ​​for certain display attributes can therefore be determined for each element. This assessment may take place at a central location, possibly even in a separate document, which facilitates their reuse in other documents. In addition, CSS has an inheritance model for tag attributes - therefore cascading - which reduces the number of necessary definitions. CSS allows possibly also the discretionary award of parts of a document.

With CSS it is possible for different output media (screen, paper, projection, language) to specify different representations. This is useful, for example, to perform an extra hyperlinks when printing or adapt for devices with lower resolution (eg, PDAs or mobile phones ), the display of consideration for the smaller page width and height.

CSS is now considered the default style sheet language for web pages. The previously common HTML elements such as font or center are deprecated (obsolete) in other words, they should be removed in the future of the HTML standard. Font tags are already obsolete in HTML 5. Reason is the target by the language standard separation between pure content and style information.

• 2.1 Design of the CSS rules
• 2.2 selectors
• 2.3 Example
• 2.4 CSS hacks

History and versions

The first proposal for Web style sheets came to 1993, several more followed until 1995. Cascading Style Sheets ( CSS), as they are currently known, have been proposed in 1994 by Håkon Wium Lie. Bert Bos was working at this time on the implementation of a browser called Argo, which used its own style sheet language. The two decided to work together and to develop CSS.

There was at that time also other languages ​​with the same object, the inventors of CSS applied but first the idea to define rules that could be inherited through multiple style sheets away.

After the presentation of CSS by Lie at the conference " Mosaic and the Web " in Chicago in 1994, and later with Bos 1995 was attentive the World Wide Web Consortium (W3C ) CSS. Lie and Bos worked with other members in this context to CSS on. In December 1996, then the CSS level 1 Recommendation was published. This standardization proposal follow the current browser is now almost complete.

CSS2 and 2.1

CSS Level 2 ( CSS2 ) was published in May 1998. To date (January 2010), this recommendation will be fully implemented by any popular browser. Some browsers put the largest part of CSS2 to correct, whereas others offer only a lack of support from a few tissue techniques. When using the web is therefore often difficulties.

Since 2002, the W3C was working on an intermediate version of CSS Level 2 Revision 1 ( CSS2.1 ), which takes into account the experience with CSS2, corrects inconsistencies and those partial stroking techniques that have not been implemented correctly in different browsers. On June 7, 2011 CSS2.1 was published as a Recommendation. CSS2.1 itself brings no fundamentally new skills with them.

CSS3

Since 2000, CSS Level 3 in development. Developments in this area will be further advanced, which have already begun with CSS2. CSS3 will be modular in contrast to its predecessors, bringing individual tissue techniques ( for example, control of speech or selectors ) can be developed in their own version of steps. Thus, CSS approaches to in his abilities more the established DSSSL ( SGML ) and is probably still be an alternative to XML-based style sheet languages ​​such as XSL -FO in the future. Currently published and widely supported standards include CSS Color Level 3, CSS namespaces Selectors Level 3 Media Queries. In addition to these modules are more items for debate, including a layout module or various graphic filters. However, modern browsers already support many CSS3 modules that are not yet standardized by the W3C.

Successor

In spring 2012, there have been several reports, the W3C was working on a successor to CSS3. This should be released naturally under the name CSS4 and among other subjects, the selectors once more powerful and easier at the same time. In September 2012, representatives of the relevant working group of the W3C, however, have made ​​clear that it will not give CSS4: "There will never be a CSS4. " Rather, the future development of standards in the form of a gradual upgrade of the modules should be done by CSS3.

Syntax

The structure of CSS rules

Selector [, selector2 ... ]       {          Property -1: value 1;          ...          Property -n: value -n [; ]       }   / * Comment * /   / * In square brackets are optional information * / A CSS rule specifies that for specified parts of a document in a specific combination of properties to apply. It is written as a comma- separated list of selectors ( "For these types of parts ..."), followed by a brace-enclosed, semi-colon separated list of property declarations ( " ... take all of these properties! "); after the last property declaration is allowed a final semicolon. A property declaration consists of the name and the indication of the value they will accept. This name-value pairs are in turn separated by a colon.

To these parts of a rule around white space can be used freely. Often one writes the colon without space behind the property name, each property declaration on its own line and also includes the last property with a semicolon - so there will be less errors in syntax changes.

A stylesheet may contain any number of such rules. The following table contains a complete overview of all selectors with which elements ( HTML elements usually) can be selected.

Selectors

A selector identifies the conditions that must apply to an element, so that the next block is applied to CSS declarations with its presentation requirements on the element. Such conditions describe unambiguously what properties (type, class, id, attribute or attribute value ) must have elements or the context in which they must be in the document ( existence of a specific parent element or a predecessor element specific type ), so the representation provisions should apply to them. In a selector several selection criteria may be linked.

Example

CSS:

P.info {    font-family: arial, sans -serif;    line-height: 150%;    margin-left: 2em;    padding: 1em;    border: 3px solid red;    background-color: # f89;    display: inline - block; } p.info span {    font-weight: bold; } p.info span :: after {    content: " "; } HTML:

   Note < / span >    You have successfully registered. The p tags make the intervening text to one paragraph. Since it is assigned the class "info", it is represented by a CSS - compatible browser as follows:

Here, the declarations are assigned to all p elements that have a class attribute with the value info. If one were to omit the p in the selector, all members of the class info would be affected, while omitting the. Info all p elements. span elements within such paragraphs are shown in boldface; the colon is generated as a pseudo-element.

An important principle of CSS is the inheritance of property values ​​to subordinate elements and the combination of different style sheets ( cascading effect ). This can originate from different sources: the author of the stylesheet, the browser ( user agent) or the user.

CSS Hacks

An application of CSS syntax in the design of Web layouts are known as CSS hacks. They are used to compensate for differences in the presentation of Web layouts in different browsers or assign separate CSS statements for certain web browsers or exclude. The term hack denotes non-standard CSS commands that allow the interpretation weakness of a web browser is used, which is either interpreted or ignored these instructions. Thus, vulnerabilities of web browsers can be compensated, to get a list as possible in any web browser the same result.

A CSS hack combined selectors incorrectly specified, for example, in combination with additional characters, or contains statements that do not know certain web browser. A well-known example of a CSS hack is called the * html hack. The * character is used as a universal selector and is meaningless before the selector html.

CSS code example:

P {background- color: blue; } * Html p {background- color: red; } In this case, first of all browsers would represent the p elements with a blue background. Only Internet Explorer prior to version 7 also interprets the second line and color the red heels, although has no parent element, could apply to the *.

Combination with HTML or XHTML

The most common CSS is combined with HTML or XHTML. This can be done in several places, here are some examples:

• As an external style sheet for a (X) HTML file ( link element )

As an external style sheet for an XHTML file (xml -stylesheet processing instruction )