The Cascading Style Sheets 1 , usually called CSS of English Cascading Style Sheets , form a computer language that describes the presentation of documents HTML and XML . The standards defining CSS are published by the World Wide Web Consortium (W3C). Introduced in the mid -1990s , CSS is becoming widely used in web design and well supported by web browsers in the 2000s .

Issues and Principles 

Issues 

Separation between structure and presentation

One of the main objectives of CSS is to allow formatting out of documents. For example, it is possible to describe only the structure of a document in HTML , and to describe the entire presentation in a separate CSS style sheet. The styles are applied at the last moment, in the web browser of the visitors who consult the document. This separation provides a number of benefits that can improve accessibility , change presentation more easily, and reduce the complexity of a document’s architecture.

Thus, the benefits of style sheets are multiple:

  • The document structure and presentation can be managed in separate files;
  • The design of a document is done at first without worrying about the presentation, which makes it possible to be more efficient;
  • In the case of a website , the presentation is standardized: documents (HTML pages) refer to the same style sheets. This feature also allows a quick reshape of the visual appearance;
  • The same document can give the choice between several style sheets, for example one for printing and one for reading on the screen. Some web browsers allow the visitor to choose one of several styles;
  • HTML code is greatly reduced in size and complexity because it no longer contains tags or presentation attributes.

Presentation according to the media

CSS makes it possible to define the rendering of a document according to the reproduction medium and its capacities (type of monitor or vocal device ), those of the browser ( text or graphic), as well as the preferences of its user.

Stylesheets can be differentiated for the following media, according to CSS2.1 31  :

  • all : whatever the media;
  • screen : desktop computer screens;
  • print : for paper printing;
  • handheld : very small screens and clients with limited capabilities;
  • projection : when the document is projected;
  • tv : when the document is displayed on a television- type device  ;
  • speech : for rendering via a speech synthesis (replacement aural, initially planned by CSS2.0 and then deprecated by CSS2.1).

Other types of media are theoretically provided for by the CSS2.1 specification, but are not implemented by user agents: brailleand embossedfor braille tablets and embossers, as well as ttyfor teletypewriters .

In each medium, the presentation styles determined by the author of the document are combined with the default ones of the user agent and those resulting from the preferences of the user and his personal configuration.

The capabilities of the receiver can be taken into account by the authors, for the user agents implementing the CSS3 module ”  media queries  ” 32  : it makes it possible to condition the taking into account of a style sheet to constraints concerning in particular the resolution or color rendering capability.

Cascade styles

The “cascade” is the combination of different sources of styles applied to the same document, according to their respective degree of priority. Different cascade modes can be combined:

  • by origin of the styles, from the user agent, the author and the user. The top priority given to user styles is one of the main factors in the accessibility of documents presented using CSS;
  • by media: a generic style sheet can be applied to several rendering media (on-screen display, print, projection) and be combined with sheets specific to each medium;
  • according to the architecture of a set of web documents: a generic style sheet can be applied to all the pages of a website , combined with sheets specific to each section of it, as well as with styles specific to this or that specific page;
  • depending on the architecture of the sheets themselves: a style sheet external to the document can be combined with an internal style sheet and styles applied directly to each element that composes it (“online” styles). A style sheet can also import one or more other external sheets.

Technical principles and syntax of CSS

Fundamentals: CSS boxes and streams

The rendering of a stylish document is determined by box and flow concepts. The CSS rendering engine establishes a “formatting structure” reflecting the logical tree of the document . Each element of this structure generates one or more zones with configurable display or rendering properties. The display or reading is performed from the stream of boxes successively generated for each element as it appears in the linear order of the formatting structure.

According to the cases, these different types of boxes:

  • may have margins, border, background, width, or height properties, etc. In voice rendering, equivalent properties can be used to determine pauses in reading before or after the content, to choose a voice, to adjust its bit rate or sound level;
  • can be moved relative to their default position in the stream, or have a particular behavior in it (allow rendering in adjacent columns, superimpose on neighboring boxes, or be hidden for example).

Properties and values 

The characteristics applicable to CSS boxes are expressed as pairs propriété: valeur.

Properties are labeled with English tool words such as ”  width  “, ”  font-size  “, or ”  voice-volume  “.

The values ​​can be, depending on the case, expressed using otherwise standardized units, or keywords specific to CSS. For example, a background or text color can be expressed using the RGB template or the keywords black, blue, fuchsia , and so on.

CSS properties have been established according to a compromise between two opposite constraints: to facilitate the reading of the stylesheets by the user agents by multiplying the individual properties, or to facilitate their writing by the authors by resorting to a smaller number of properties combined. For example, the position of a background image is determined by a single property ( background-position), combining the two abscissa and ordinate values, and not two distinct properties. Similarly, there are shortened properties that allow authors to simplify the writing of a series of properties: the shortcutfontFor example, you can summarize all font, size, line height, case, fat, and italic properties in a single rule. However, using the “/” character makes it much more complex parsing stylesheets by user agents 33 .

Selectors and Rule Blocks

Properties are grouped into blocks of rules, delimited by braces {}. Each block is preceded by a selector designating the structural elements to which the properties concerned must be applied:

1 / * I am a comment that comments on the code and does not do anything * / 
2 body { 
3     / * Background color: * / 
4     background-color :  green ; 
5 } 
6 p { 
7     / * Text color: * / 
8     color :  red ; 
9     / * Text size in px (pixel): * / 
10     font-size :  20 px ; 
11 } 
12 button { 
13     / * Contour: * / 
14     outline :  none ;
15     / * Border * / 
16     border :  none ; 
17     / * Color of background: * / 
18     background-color :  black ; 
19     / * Text color: * / 
20     color :  white ; 
21 } 
22 / * Hover means hovering over a button * / 
23 button : hover { 
24     / * Background color: * / 
25     background-color :  green ; 
26 } 
27 / * Selection means selecting the text * / 
28 *:: selection { 
29     / * Background color: * / 
30     background-color :  black ; 
31     / * Color of the text: * / 
32     color :  white ; 
33 }

CSSOO

The object-oriented CSS (in English OOCSS ), is a method created in 2009 34 on the model of object-oriented programming , allowing to reuse its styles in several contexts 35 .

BEM 

The BEM (Block, element, modifier) ​​is a CSS writing technique invented in 2010 36 , which declares styles as a tree structure to improve their performance. Example:

1 . product  { 
2 
3     & -productLabel  { 
4         ... 
5     } 
6 
7     & -productPicture  { 
8         ... 
9     } 
10 }

NB: the ampersand (&) represents the parent object in Sass and LESS .

Example with HTML and CSS

Contents of the index.html file  :

<! doctype html> 
< html > 
    < head > 
        < charset meta  = "utf-8" /> < link rel = "stylesheet" href = "style.css" /> < title > Example html and css </ title > < / head > < body > < button class = "btn" id = "btn1" > First button </ Button > < br /> < br
          
        
    
    
          /> 
        < Button  class = "btn"  id = "BTN2" > Second Button </ button > < br /> < br /> 
        < button  class = "btn"  id = "btn3" > Third Button </ button > 
    </ body > 
</ html >

Content of the style.css file  :

. btn { 
    height :  50 px ; 
    color :  white ; 
    font-size :  20 px ; 
    cursor :  point ; 
    transition :  background-color  2 s ; 
    outline :  none ; 
    border :  none ; 
} 
* :: selection { 
    background-color :  lightgreen ; 
    color :  darkblue ; 
} 
. btn :hover { 
    transition :  background-color  2 s ; 
} 
# btn1 { 
    background-color :  lightgreen ; 
} 
# btn1 : hover { 
    background-color :  darkgreen ; 
} 
# btn2 { 
    background-color :  lightblue ; 
} 
# btn2 : hover { 
    background-color :  darkblue ; 
} 
# btn3 { 
    background-color : red ; 
} 
# btn3 : hover { 
    background-color :  orange ; 
}

Opening the HTML file in a browser shows the styles configured with the cSS file.

CSS limits

Independence between presentation and structure

CSS originally aspired to independence between structure and presentation of a document.

Thus, the site of the CSS Zen Garden , created in 2003 by Dave Shea  (in) , is the demonstration of the possibility of freely modifying the rendering displayed of the same web page, only thanks to CSS and without any modification of its code HTML 37  : it presents, in December 2006, 986 different designs of its homepage 38 . However, most of these designs are based entirely or partly on replacing the textual content of the page CSS pictures that reproduce the enriching its appearance 39 : graphic freedom is always partially based on the transformation of text into image. On the other hand, the CSS Zen Garden remains a style exercise limited to a single document, the structure lined with elements and semantically neutral attributes, which serve only to support n CSS selectors 10 .

While there are many examples of HTML documents for which several style sheets have been developed, there are few examples of generic style sheets that are independent of the document structure. The default user agent styles are an example of this, but they are limited to simple typographic effects without a n- layout definition 11 . In general, style sheets are closely related to the structure of the document to be styled and are difficult to reuse on differently structured documents. It is more through the creation of CSS HTML patterns that this potential independence of styles towards the specific structure of documents is exploited.

More generally :

  • the difficulties and the lack of implementation of some of the CSS properties limit the freedom of layout, and lead to the use of binding properties as to the HTML structure (for example, the property floatimposes a precise order of the content as well as in column, many rendering effects are based on a semantically neutral markup overload, such as divet span);
  • the reuse of a single structure on different media or hardware through style sheets is limited by the constraints related to the content itself and the ability of the user agents to render it, and by the need for a presentation negotiation between client and server. Specific adaptation methods for content, structure and user-side rendering have been necessary, such as, for example, the Extensible Rendering Architecture (ERA ) developed by Opera . Internet Explorer follows a similar path with its version 7 which redesigns the printed rendering of a web page in order to optimize it.

Accessibility 

CSS promotes the accessibility of a web pageby giving the user ultimate control of the rendering of a document in his browser: it is thus possible to adapt it to constraints or preferences concerning, for example, the display size of the characters or the colors. By separating structure and presentation, CSS also promotes the writing of structured documents in a semantic way, potentially more exploitable by technical aids: the freedom of presentation of the elements of titration allows for example to strictly respect the formal hierarchical order of these which in turn allows technical aids to establish a navigable table of contents. Finally, by giving the authors the means to enrich the formatting of the text, CSS makes it possible to limit the use of the texts put in images n.

However, some CSS uses may also compromise the accessibility of the content:

  • by substituting pseudo-content for the latter which is accessible only to users who can perceive the visual CSS rendering: this is the case, for example, of information that would be conveyed by background images;
  • disrupting the necessary consistency between the linear order of information in the structured content and the visual order of the displayed CSS rendering. Technical aids such as screen readers only have access to this linear order: information that only makes sense in terms of its CSS positioning is not understandable for their users;
  • In an accessibility approach based on the relevance of the HTML structure , the range of possibilities for formatting content with CSS can obscure the need to tag content with meaningful elements. For example, it is possible to visually delineate a quote by italicizing or enclosing it in quotation marks, but the information on the origin of this text will only be visible, within the meaning of the accessibility standards, via the use elements q or blockquote, which are the only ones to define an HTML quote and indicate the source via the appropriate attribute ( cite).

The methods of application of the directives of accessibility of the web contents ( RGAA , UWEM for example) thus define rules of use of the styles CSS 40 .

Simplicity

CSS responds to a desire to have a simple presentation format, both in its functionality and in its syntax, to encourage direct manipulation by authors and users. However, this simplicity is called into question by several factors:

  • the difficulty in determining and controlling the cascade result when style sources multiply. The final rendering of a specific content depends on the combination of several sheets and can then become difficult to evolve. The interdependence of stylesheets can make it difficult to anticipate the result of a modification made to one of them. The authors are then faced with a choice between this interdependence that optimizes the amount of code and the redundancy of styles that facilitates its maintenance 41  ;
  • Difficulty writing user styles without advanced skills The users are in theory the first beneficiaries of the CSS, which gives them the possibility to adapt the presentation of the web pages. However, the styles of the mechanism is hardly ready for the development of graphical environment that would facilitate the handling of CSS properties 42 . In practice, the use of user styles remains marginal.