CSS – Cascading Style Sheets
CSS (Cascading Style Sheets) is a computer language used to describe the presentation of HTML and XML. The CSS standard defines are published by the World Wide Web Consortium (W3C). Introduced in mid 1990, CSS is commonly used in web design and well supported by web browsers in the 2000s.
Issues and principles — The issues
One major goal of CSS is to allow the formatting of documents out. It is for example possible to describe only the structure of an HTML document, and describe the entire presentation in a separate CSS stylesheet. The styles are applied at the last moment in the web browser of visitors viewing the document. This separation provides a number of benefits, to improve the accessibility, switching of presentation, and reduce the complexity of the architecture of a document.
Thus, the advantages of style sheets are multiple:
- The document structure and presentation can be managed in separate files.
- The design of a document is a first time without worrying about the presentation, which can be more effective.
- In the case of a website, the presentation is standardized: documents (HTML pages) refer to the same style sheets. This feature allows a more rapid fitness looks.
- A single document can be given the choice between several style sheets, e.g., for printing and one for reading on screen. Some browsers allow the visitor to choose a style among many.
- HTML is considerably reduced in size and complexity, as it contains more tags or attributes of presentation.
Decline presentation styles depending on the receptor
CSS defines the rendering of a document according to the media and return its capabilities (type of monitor or voice device), those of the browser (text or graphics), and the preferences of the user.
The stylesheets can be differentiated for the following media, depending CSS2.1:
- All: whatever the media
- Screen: screen desktop
- Print: printing paper
- Hand-held: very small screens and limited capabilities to customers
- Projection: when the document is projected
- TV: when the document is displayed on a television type device
- Speech: for rendering via a speech synthesizer (replacing aural, originally planned by CSS2.0 CSS2.1 then depreciated)
Other media types are theoretically under the CSS2.1 specification, but are not implemented by user agents: Braille and embossed Braille for the tablets and embossers, and tty TTY.
In each medium, styles of presentation determined by the author of the document are combined with those of the default user agent and those from the user preferences and personal configuration.
The capacity of the receiver can be taken into account by the authors, intended for user agents that implement the CSS3 module “Media queries: it allows to condition the inclusion of a style sheet constraints on particular resolution or color reproduction capability.
Allow cascading styles
The “cascade” is the combination of different sources of styles applied to a document, depending on their respective priority. Alternative cascade can be combined:
- By origin of styles, from the user agent, the author and the user. Top priority given to styles of the user is a major factor in the accessibility of the documents presented using CSS.
- By media: a generic stylesheet can be applied to multiple media restitution (screen display, printing, projection) and be combined with leaves of each media.
- Depending on the architecture of a set of web documents: a generic stylesheet can be applied to all pages of a website, be combined with leaves of each section of it, and that with styles unique to this or that specific page.
- Depending on the architecture of the leaves themselves: an external stylesheet to the document can be combined with an internal style and the styles applied directly to each of its components (style “online”). A stylesheet can also import one or more other outer leaves.
Technical principles and syntax of CSS
The Basics: CSS boxes and flows
The rendering of a document is determined by the stylish box concepts and flows. The CSS rendering engine establishes a “structure of formatting” reflecting the document’s logical tree. Each element of this structure generates one or more areas with display properties or voice playback parameters. Posting or reading from the stream carried boxes successively generated for each element as it appears in the linear order of the formatting structure.
As the case of figures, these different types of boxes:
- May have properties of margins, border, background, width or height, etc.. In a speech delivered, equivalent properties to determine breaks in the reading before or after the content, select a voice, or regulate its flow volume.
- Can be moved from their default position in the stream, or have a particular behavior in this (permit issued in columns adjacent boxes overlap with neighbors, or be hidden, for example).
Properties and Values
Characteristics applicable to CSS boxes are expressed as couples property: value.
Properties are expressed using words such as English-tools “width” (width), “font-size” (size of the font) or “voice-volume” (volume rendering vocal).
Values can be expressed as appropriate using standard units also, or specific keywords to CSS. For example, a background color or text can be expressed using the RGB model or keywords black, blue, fuchsia, etc..
The CSS properties have been prepared on a compromise between two opposing constraints: easy reading style sheets by user agents by multiplying the individual properties, or help them write the authors using a smaller number of combined properties. For example, the position of a background image is determined by a single property (background-position), combining the two values of abscissa and ordinate, and not by two distinct properties. Similarly, there are shorthand properties allow authors to simplify the writing of a series of properties can make the shortcut, for example, summarized in a single rule all font properties, size, row height, snack, fat and italics. But the use of the “/” makes much more complex parsing stylesheets by user agents.
Selectors and blocks of rules
The properties are grouped in blocks of rules, defined by the braces (). Each block is preceded by a selector identifying the structural elements to which the subject properties should be applied:
p (font-size: 110%; font-family: Helvetica, sans-serif;)
Although the CSS code does not describe the entire presentation of a document, it is itself a style sheet full. It sets for the elements p (paragraph), the size parameter to the value 110% and the parameter value Helvetica font, or if Helvetica is not available a generic font without serifs.
p is an example of a simple selector. Other simple selectors can target more specifically one or more elements using the ID and class assigned to structural elements: identifiers (id) are used to characterize a single element (a menu, a word, etc.), while that class (class attribute) are used to characterize a set of elements (like menus organized in a similar manner).
Contextual selectors, formed by combinations of simple selectors, can target elements by position in the document: img has not designate such images in the links.
To enable the cascade of styles, rules allow the calculation of specific CSS rendering engine to determine the priority to be applied concurrently to different selectors for a single element, and sort and rules apply to him [4]. This calculation is based on the sum of the values given to different simple selectors forming the contextual selector:
- Each type of simple selector has its priority value: 0,0,0,1 for an item, 0,0,1,0 for a class, 0,1,0,0 a unique id.
- The word! Important added in the rule gives a specificity of 1,0,0,0.
- Origin of the style is ultimately decisive: this style attribute in the HTML document takes precedence over other sources of author styles to allow overloading of local styles common to a series of web pages. On the other hand, at equal priority, a user style overrides a style author, who carries on the style default user agent.
Style sheets are text documents, whose syntax is simple and intuitive to allow their reading and writing as well as directly by the author using a software.
Continued…
