Lembaran Gaya Lata/Peraturan Warisan

	Sila terjemahkan bahagian/rencana ini.   Sehari selembar benang, lama-lama menjadi kain!
Sumber bantuan: Pusat Rujukan Persuratan Melayu @ DBP

CSS Styles and Tags

---

The term CSS cascade refers to the decision process, the software within web browsers that decides which of the many CSS (cascading style sheet) styles to apply to each part of a web page. It is complex because there are many places that styles are written, and there are errors, conflicts, and duplicates to contend with, not to mention the hierarchy of browser, user, and author rights that always exists. The browser's software has to decide which style to use for every format on the page.

There are several places that the software always looks for styles. The browser itself has the default styles located in its own client style-sheet, and these are used only when no other formats have been specified. User-styles are contained in style sheets within the user's computer. Author-styles arise from three locations and are treated as one category; styles written in the head section of the web-page, all of the imported style-sheets, and the in-line styles within the body-content of the page. In addition to these three categories, both the user and author styles can be marked in a way that gives them additional priority, the so-called important marking, and these can be considered as separate categories, with distinct priorities, making five in all. See the figures below for consolidation on these five main sources.

Web pages are text files, and the formats to apply are notified to the browser software by the addition of special pairs of markings called tags. For example <p> would denote that paragraph formats were required between that tag and its closing tag, </p>. When the software encounters such a tag, it looks for style declarations within the five category spaces, (those mentioned above), that contain the paragraph tag, and lists them in the order that it finds them. There is a full set of tags for every purpose and the software makes such lists for every tag-pair, or HTML element as they are called, that it finds on the web-page. Having made lists of the relevant styles for each element on the page, the software must then decide which of the many to apply.

CSS and HTML Attributes

Before the introduction of CSS style-sheets the formatting of web page elements was carried out with so-called HTML attributes. These are styling rules, specific for each HTML element, and they are themselves capable of formatting a page. They were, and are available for use in web pages, and can be added to tags in much the same way as CSS in-line styles. Some HTML attributes, (STYLE=, ID= and CLASS=), have been designed to interface with CSS; these allow the writing of in-line styles, and the declaration of IDs and CLASSES within the tags of the page.

Because HTML attributes and CSS styles might be found together in web pages it is as well to comment on their relative precedence in use. CSS values supersede simple HTML attribute values when they apply to the same style on the same element. In fact, it is only when no CSS style has been expressed that an HTML attribute could apply its formats.

Some other HTML attributes have long had no convenient equivalent in CSS, so are still much used. Examples include the display of block elements like tables at a page's center with the attribute expression align=center, and other attributes for the merging of table cells.

The CSS cascade applies only to the resolution of CSS styles, while listings of HTML attributes and their element defaults are to be found in texts on HTML code itself.

A CSS Cascade Summary

Templat:Noframeleft The cascade primarily makes use of the notion of precedence. That is to say, it depends on an in-built set of priorities at each of the main stages of the selection process. It does this in two main stages; it sets the sources (origins) of the styles into a prioritized list, for example, normal author's styles have more precedence than normal user styles, and the browser's defaults least of all. Then within these individual style-locations, some styles are given higher priority than others.

The browser works its way through all of the web-page's element-tags, one by one, and uses their tag-names to find any style declarations that might apply to them. Say the browser has come to a paragraph tag, a tag composed of a letter p within angled brackets. The browser checks all of the likely sources of styles for declarations written with the p inclusion, simple or compound (mentioned with other terms). These include user styles, and author styles, (itself comprised of downloaded style-sheets, head-styles, and in-line styles). Additionally, if there are class or id declarations within the tag, then their styles are found and included. The browser keeps the relevant styles that it finds in one of five categories according to where they were found, (so-called origins or sources).

An important point is that the browser always lists styles within a source category in the exact order that they were encountered in its travels from top to bottom of the web page, and from the top to the bottom of each style-sheet. It also honors the style sheet sequence found in the heading of the web page when adding to its lists. These latter facts have consequences for the browser's resolution of conflicts. Recall again that all of this listing activity takes place for each tag on the page.

Style declarations can have a special marking to give them added priority over normal declarations; they use the !Important keyword to identify them, and so they are called !Important declarations. In making the separate categories the browser segregates the !important declarations from any normal declarations to make the five origin-categories in total. Notice that the browser takes all of the head styles, the external style sheets and in-line styles as one composite set of author's styles. The browser recognizes the following source categories, in descending order of precedence, when searching for relevant styles.
Templat:Noframeright

1. The user's !Important style declarations. These style expressions consist of all user style-sheet entries with the !Important keyword appended to them. User style-sheets are local to the computer, and identified to the browser with a path statement in its settings.
2. The author's !Important style declarations. The three style sources attributable to the author are in the first instance treated as a single group. These are; in-line styles, document head styles, and linked style-sheets. Again, this set consists only of those declarations where the !Important keyword is added.
3. The author's Normal style declarations. Those in the author's set without an !Important marking.
4. The user's Normal style declarations. Those in the user style-sheet without an !Important marking.
5. The Browser default styles. Styles in the User Agent (UA) Style Sheet  and the selectable default settings of the browser..

Within each of these five origins (see the list above), the relevant styles are then assigned weights according to their specificity for the tag in question. Specificity in this context means the extent to which the style definition has narrow latitude; for example, when finding styles for a paragraph that is nested within some part of a table, a style-sheet entry that is written specially for that purpose would be given a higher specificity than a more general style entry for paragraphs; (more on this later). Continuing with the paragraph example, after filtering for specificity within each source-list there may still be several competing styles in some or all of the source-lists for the same paragraph, so the precedence of the origin levels themselves is used to decide which of them will be applied in this paragraph's final format.

Notice that in the above hierarchy that the user's styles with the !Important keyword marking are given the highest priority of all, and that they can only fail by omission. That is to say, other styles can be used but only when a format was not specified there. In general the styles selected to represent an origin-level in the cascade can only impose on the eventual outcome if no source above it in priority has set a value of its own. (Refer to Figure 1 for the structure of a typical style-block, and Figure 2 for a depiction of the final selection process.)

CSS Tutorials

A selection of brief tutorials is given below. The intention is to provide short pieces that instruct in the basics of the subject matter, rather than indulging in lengthy discourse.

Lihat juga

• W3 - Cascading Style Sheets: Cascading style sheet standards and imminent change notices.
• W3 - CSS Tutorial Page: An invaluable resource for CSS syntax and use.