Cascading Style Sheets (CSS)

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

History of CSS

A concept among others, present since the origin of the web

The concept of a style sheet has been around since the beginning of the World Wide Web: the first WorldWideWeb web browser allows documents to be formatted using what would today be considered a “user style sheet”. Similarly, the browsers Viola in 1992 and Harmony in 1993 use a similar mechanism to determine the rendering of fonts, colors or alignment of text.

However, these are not styles determined by the author of the document. HTML also did not include presentation elements in its early years, so there was increasing pressure for browsers to allow authors to determine the layout of web pages themselves, in an approach derived from electronic print publishing.

It is in this context, in 1994-1995, that the brand new Netscape Navigator introduces the first HTML presentation elements at the initiative of Marc Andreessen, while the first proposals for external styles appear concurrently:

• the stylesheet proposal of Pei Wei (creator of Viola);
• Robert Raisch’s (O’Reilly) Stylesheets for HTML;
• Håkon Wium Lie’s Cascading HTML Style Sheets (CHSS).

The appearance of CSS responds to a desire to “propose an alternative to the evolution of HTML from a structuring language to a presentation language”.

A third way of development is also opened at the same time: the DSSSL transformation language of SGML documents, developed by James Clark, suggests the possibility of a style language that is not only descriptive but is closer to a real programming language. This path was followed by Netscape, which in 1996 offered the W3C “JavaScript-Based Style Sheets” (JSSS), implemented by Netscape Navigator 4 in 1997.

The origins of CSS are therefore linked to three major possibilities:

• Is HTML a structuring language or a mixed formatting and structuring language?
• Should the author’s presentation choices take precedence over those of the user?
• Is the answer to requirements a formatting description language or a transformation language?

Early developments

Håkon Wium Lie’s first proposal for Cascading HTML Style Sheets caught the attention of Dave Raggett, who was then the main editor of the HTML 3.0 specification project. A proponent of a purely structural HTML, he encouraged the publication of a CHSS working paper, so that it could be presented and discussed at the second international conference on the WWW (Mosaic and the Web, Chicago, 1994). He also modified the Arena browser with Håkon Lie to test the language and demonstrated this at the third WWW conference in 1995.

At the same time, Bert Bos, who was then working on the Argo browser, and who had submitted his own Stream-based Style Sheet Proposal (SSP) to the W3C, decided to join forces with Håkon Lie. Since SSP was developed with the idea of being applicable not only to HTML, but also to other markup languages, Bert Bos and Håkon Lie took up this goal, and made it one of the key features of what then became CSS proper.

Another aspect of CSS is decisive compared to existing alternatives: CSS is the first language to include the idea of “cascade” (cascading style sheet), i.e. the possibility for the style of a document to be inherited from several “style sheets”. This makes it possible to arbitrate between several competing sources of formatting of an element, and theoretically makes it possible to compose between the stylistic preferences of authors and users.

The World Wide Web Consortium (W3C) became operational in 1995, and the www-style mailing list was created. The same year, a “W3C style sheet workshop” was held in Paris, which was decisive for the future of CSS. In particular, it affirms the desire to keep style sheets in a simple form, which excludes Netscape’s JSSS hypothesis. In addition, Thomas Reardon (Microsoft) announced the future support of CSS in future versions of Internet Explorer: therefore, when the W3C created at the end of the year the “HTML Editorial Review Board” (HTML ERB) to ratify the future HTML, DOM and CSS specifications, Netscape, represented by Lou Montulli, finally joined the CSS project led by Bert Bos and Håkon Lie.

Towards a difficult maturation

Unlike software, CSS specifications are not developed in successive versions, which would allow a browser to refer to a particular version. CSS is developed by “tiers”, which forces each new level to integrate the previous one, and each implementation to be compatible with the previous one: CSS1 is therefore developed to be a subset of CSS2, which is itself developed to be a subset of CSS3. This partly explains the slow normative advancement of CSS.

CSS1, difficult implementations during the browser wars

The final CSS1 specification was published on December 17, 1996, and defined about fifty properties. CSS1 defines itself as a “simple style sheet mechanism, allowing authors and readers to attach styles (…) to the HTML document”. This simplicity translates into the choice of a language that can be easily read and written directly by its human users, and terminology consistent with common usage in computer publishing. The possible choice to express CSS in an XML or SGML syntax, regularly evoked to avoid the implementation of a new parsing mode, is therefore definitively ruled out.

CSS1 doesn’t just describe its own grammar: this first level describes a grammar intended to allow later levels to add new functionality, while allowing future stylesheets to be read by the original implementations. These new features will not be understood by the original implementations, but can be identified as such, and ignored. CSS thus guarantees its backward compatibility.

CSS1 essentially defines the typographic rendering properties of text: fonts, color, font size, bold, spacing, borders, and list marker handling.

It is therefore not yet a question of “layout”: the float property, which will later be massively used for the overall CSS layout of web designs, is then only conceived as a way to place locally, side by side, a small portion of the content, such as an image, and the rest of the text. Given the problematic implementations of CSS1, hijacking the HTML table element to handle the overall layout remains the most common solution for web content authors for the time being.

In 1996, Internet Explorer 3.0 was the first commercial browser to partially implement CSS while CSS was still being formulated. This early implementation, led by Chris Wilson, does not correspond to the final specification. In 1997, Internet Explorer 4.0 saw the birth of a new rendering engine, Trident, at the origin of the growing but problematic support of CSS in the different versions of this browser on Windows, up to Internet Explorer 7 included.

Netscape Navigator 4.0 followed suit in 1997, despite its historical reluctance to CSS: in the context of the browser wars, it was mainly a question of preventing Microsoft from asserting itself as the most compliant browser. However, this hasty implementation, based on internal JavaScript methods, ultimately proves to be limited and very unreliable. Netscape Navigator 4.0 also brings a JSSS implementation, which will not be implemented. It will be necessary to wait for the new Gecko rendering engine of the Mozilla project to achieve a real implementation of CSS1.

In 1998, as the browser war between Netscape and Microsoft came to an end, Opera 3.5, of which Håkon Lie had meanwhile become CTO, achieved a more complete implementation of CSS1, facilitated by the publication of the first “Test suite for Cascading Style Sheets (CSS) Level 1” created mainly by Eric Meyer for the W3C. The presence of these test suites is a major asset both for implementations in browsers and for the appropriation of CSS techniques by authors (by providing detailed examples of properties and their values).

Finally, under the impetus of Tantek Çelik, Internet Explorer 5.0 for Macintosh launched in March 2000, based on Tasman, a specific rendering engine unrelated to Trident, is the first browser to fully support (more than 99%) CSS1. To ensure compatibility with previous coding practices specific to each implementation (the “tag soup”), and to allow a correct display of web documents whether or not they comply with CSS and HTML standards, it is also the first to implement the doctype switching technique. Subsequently adopted by all browsers, it subsequently becomes one of the keys to the progressive implementation of CSS: it allows the browser to keep old proprietary implementations for compatibility reasons, while having the possibility to opt, depending on the syntax of the document type declaration of the page, for rendering mode that conforms to new standard implementations.

During this period of the late 1990s, web design was primarily dependent on the use of HTML as a presentation format. The defeat of Netscape at the end of the browser war, the revival that followed via the Mozilla project, the appearance of IE5 Mac, and to a lesser extent the evolution of Internet Explorer Windows 5.x, however, began in the early 2000s a new stage in the evolution of website design practices by authors: these browsers make it possible to show that historical practices dating from the time of the browser war, mixing structure and presentation, can really be abandoned in favor of an approach based on style sheets and more general respect for web standards (in the sense of HTML and CSS).

Jeffrey Zeldman, co-founder of the Web Standards Project and founder of A List Apart in 1998, emerged as the emblematic figure of this standards movement. He also inspired a “hybrid” design approach, taking advantage of CSS techniques while temporarily remaining in the context of document formatting based on presentation tables.

CSS2, hasty ambitions

To meet the needs that the first CSS1 specification did not yet cover, CSS was assigned in 1997 to a new working group within the W3C, chaired by Chris Lilley. In 2007, this group included representatives from Apple, Google, IBM, Microsoft, Adobe, the Mozilla Foundation and Opera.

Published as a recommendation in May 1998, the second level of CSS greatly expands the theoretical possibilities of cascading style sheets, with in particular about 70 additional properties. In addition to the typographic formatting of the text initiated with CSS1, there are in particular:

• the declination in styles specific to the different media in which a web page can be rendered (printing, rendering by a speech synthesis, by a braille device, by a projection device, a mobile, etc.);
• new on-screen positioning properties to enable advanced layouts from a document developed jointly by Microsoft and Netscape;
• A set of properties that allows specific fonts to be downloaded.
• New properties to bring user preferences into the formatting of a site.

However, this functional richness meets only a limited echo in its implementations:

• The declination by media is partly a failure: the styles of voice rendering remain theoretical for lack of consideration by voice browsers and screen readers. They are also incompatible with the SSML voice interaction standard. The same applies to Braille signage and printing. Printing styles are only very partially adopted by graphical browsers, while some mobile browsers still ignore the type of CSS media dedicated to them in the early 2000s;
• only a few advanced positioning properties are recognized by all graphical browsers, thus consolidating layout practices that rely on hijacking of CSS (floating or positioned block system) and HTML (layout tables) functionalities;
• Downloading fonts leads to non-compliant and divergent implementations between Netscape and Internet Explorer, and is opposed by font publishers anxious to preserve their commercial interests.

Several causes are cited to explain these difficulties and the slow pace of CSS2 implementations:

• the “sub-specification or quasi-unimplementability of certain sections”. Håkon Lie himself highlighted in his thesis on cascading style sheets in 2005 the risks of non-implementation or loss of interoperability related to “excessive functionality”, such as list markers, cut marks for printing or downloading fonts. Similarly, the complexity of advanced selectors is difficult to reconcile with the management of the cascade;
• Lack of interest on the part of browser manufacturers in features that did not necessarily meet their strategic or business objectives;
• the interruption of the development of Internet Explorer, the dominant browser of the market, from 2001 to 2006. Håkon Lie wrote in 2005: “2001 is a turning point for CSS. This is the year that Microsoft produces Internet Explorer 6.0 which offers functional, albeit incomplete and buggy, support for CSS […]. No other browser has been able to compete with WinIE when it comes to the number of users. WinIE has, therefore, determined the subset of CSS usable by the authors. WinIE’s limited CSS support, combined with a de facto web browser monopoly, is currently the most serious issue with CSS deployment. »

CSS 2.1, back to implementations

The feedback on the implementation of CSS2 led the W3C CSS Working Group to draft a revised version of CSS 2.1 (“CSS Level 2, Revision 1”) starting in 2001, based on what was actually adopted by the various browsers. The objectives of this review are:

• maintain compatibility with parts of CSS2 that are widely accepted and enforced.
• incorporate into the standard all CSS2 errata already published;
• When implementations differ profoundly from the CSS2 specification, modify the specification to conform to generally accepted practices;
• Remove CSS2 devices that have been rejected by the CSS community due to their lack of implementation. CSS 2.1 aims to reflect CSS mechanisms that have been reasonably and widely implemented for HTML and XML in general (rather than for a particular XML language, or for HTML alone);
• remove CSS2 mechanisms that will be made obsolete by CSS3, and thus encourage the adoption of CSS3 mechanisms in their place;
• Add a (very) small number of new property values, when implementation experience has shown that they meet a need for CSS2 enforcement.

CSS 2.1 corrects CSS2 on many points of detail, removes some sections in whole or in part (the voice styles defined under the “aural” media type, the print styles, the downloadable fonts, whose more convincing definitions are pushed back to the future CSS3), and the explicit from the findings updated during the implementations (the advanced management of floating blocks via “formatting contexts”).

After 8 successive versions, CSS 2.1 is, in July 2007, a candidate recommendation, that is to say, the standard that must follow implementations.

In 2007, no browser completed the integration of CSS 2.1: it would be implemented 56% by Internet Explorer 7, 91% by Firefox 2 and 94% by Opera 9. In addition, only some graphical browsers have successfully passed or retained as an objective the Acid2 test, launched in 2005 by the Web Standards Project, at the initiative of Håkon Lie, to promote in particular the implementation of a choice of CSS 2.1 features considered as the main necessary advances: positioning of elements during display, generalization of the table rendering model to all elements, content generated via CSS. The professional use of CSS, therefore, remains limited to an arbitrary subset of it, determined by common implementations.

CSS3

The development of the third level of cascading style sheets began in 1999, in parallel with CSS 2.1.

CSS3 becomes “modular”, in order to facilitate its updates, but also its implementation by user agents with increasingly varied capacities and needs (graphical browsers, mobile browsers, voice browsers). This allows browsers to implement subsets of CSS3.

Therefore, the level of progress of CSS3 varies according to the modules and the degree of priority given to them by the CSS working group. In 2007, the most advanced modules (candidate recommendations) concern:

• Ruby annotation formatting;
• Style negotiation between servers and user agents (“Media Queries”);
• Web TV rendering;
• color management;
• consideration of user interface configuration.

In other cases, modules may reach the candidate recommendation stage, but are subsequently reduced to the working document stage due to difficulties updated following the call for implementation. This is for example the case of the typography module “CSS Text”.

Similarly, implementations vary according to the policies and needs of different browsers:

• For example, Opera implements “Media Queries”, which meet its specific needs as a cross-platform browser embedded on clients with a wide variety of display capabilities;
• Firefox, which is more oriented towards the browser operated as a platform, prefers modules appropriate for this purpose, such as the advanced selectors module.

A Dutch programmer, Jori Koolstra, proposed in 2002 the notion of dynamic cascading style sheets.

Some members of the CSS working group, as well as web developers, raised the issue of CSS3’s slow progress:

• for Ian Hickson, “the CSS working group is now suffering from chronic dysfunctions”: its too-closed nature deprives it of the contributors necessary for editing specifications, reviewing them or writing test suites;
• for Daniel Glazman, this slowness is explained by 3 original errors: the choice to develop CSS by level and not by successive versions, the priority given to the CSS 2.1 revision to the detriment of CSS3, the excessive number of CSS3 modules and the complexity of the properties that are developed there.

As of 2008, no module is considered completed by the W3C, and implementation in browsers is therefore marginal, often as a test, like -moz functions-… of the Gecko engine, whose prefix limits its use to Gecko-based browsers only.

CSS4

The writing of the fourth level of cascading style sheets began in 2010, in parallel with CSS 3 modules.

Some modules being fixed or in the process of being so, drafts are launched to continue to extend the possibilities of the latter. The work is therefore done in addition to the previous layer, or even by taking over the lower layer for the selectors.

Issues and principles

Issues

The separation between structure and presentation

One of the major goals of CSS is to enable formatting outside 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. Styles are applied at the last moment, in the web browser of visitors who view the document. This separation provides a number of benefits, making it easier to change layout, and reducing the complexity of a document’s architecture.

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 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: the documents (HTML pages) refer to the same style sheets. This feature also allows a quick reshaping of the visual aspect;
• The same document can choose 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 style from several;
• HTML is significantly reduced in size and complexity, since it no longer contains tags or presentation attributes.

Presentation by media

CSS allows you to define the rendering of a document according to the rendering medium and its capabilities (type of monitor or voice device), those of the browser (text or graphic), as well as the preferences of its user.

Style sheets can be differentiated for the following media, depending on CSS2.1:

• all: regardless of the medium;
• screen: desktop computer monitors;
• print: for paper printing;
• handheld: very small screens and clients with limited capacity;
• projection: when the document is projected;
• tv: when the document is displayed on a television-type device;
• speech: for rendering via speech synthesis (aural replacement, initially planned by CSS2.0 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: braille and embossed for braille tablets and embossed, and tty for teletypewriters.

In each media, the presentation styles determined by the author of the document combine with the default styles of the user agent and those derived from the user’s preferences and personal configuration.

The capabilities of the receiver can be taken into account by the authors, for user agents implementing the CSS3 module “media queries”: this makes it possible to condition the consideration of a style sheet to constraints concerning in particular the resolution or the ability to restore colors.

Cascade of styles

The “waterfall” 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 styles, from the user agent, author, and user. The higher priority given to user styles is one of the main factors in the accessibility of documents presented using CSS;
• per media: a generic style sheet can be applied to multiple playback media (on-screen display, print, projection) and combined with media-specific sheets.
• Depending on the architecture of a set of web documents: a generic style sheet can be applied to all pages of a website, combined with sheets specific to each section of the website, as well as with styles specific to a 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 (“inline” styles). A style sheet can also import one or more other outer sheets.

Technical Principles and Syntax of CSS

Fundamental concepts: CSS boxes and feeds

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

Depending on the case, these different types of boxes:

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

Properties and values

The characteristics, applicable to CSS boxes, are expressed as propriety pairs: value;.

The property and value are separated by a double dot ‘:‘, and a semicolon ‘; ‘ marks the end of the box.

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

Values can be expressed using otherwise standardized units or CSS-specific keywords. For example, a background or text color can be expressed using the RGB template or the keywords black, blue, fuchsia, etc.

CSS properties were established according to a compromise between two opposing constraints: to make it easier for user agents to read style sheets by multiplying individual properties, or to make them easier for authors to write by 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 separate properties. Similarly, there are shortcut properties that allow authors to simplify the writing of a series of properties: the font shortcut allows, for example, to summarize in a single rule all the properties of font, size, line height, case, bold, and italics. But the use of the “/” character makes it much more complex for user agents to parse style sheets.

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 relevant properties must be applied:

/*I'm a comment commenting the code and doing nothing*/
body
{
    /*Background color: */
    background-color: green;
}
p
{
    /*Text color: */
    color: red;
    /*Text size in px (pixel): */
    font-size:  20 px;
}
button
{
    /*Outline: */
    outline: none;
    /*Border*/
    border: none;
    /*Background color: */
    background-color: black;
    /*text color: */
    color: white;
}
/*Hover means when hovering over a button*/
button:hover
{
    /*Background color: */
    background-color: green;
}
/*Selection means to select the text*/
*::selection
{
    /*Background color: */
    background-color: black;
    /*Text color: */
    color: white;
}

Classes

HTML classes can be edited individually. And the style of the class is, in CSS declared this way: .nameOfClass.

The following code aligns the HTML title of the “Title-HTML” class in the center of the page:

Contents of index.html file:

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="Title-HTML">This title is now centered.</h1>
    </body>
</html>

Contents of the style.css file:

.Title-HTML
{
    text-align: center;  
}

OOCSS

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

BEM

BEM (Block, element, modifier) is a CSS writing technique invented in 2010, consisting of declaring styles in the form of a tree structure to improve performance. Example:

.product 
{

    &-productLabel 
    {
        ...
    }

    &-productPicture 
    {
        ...
    }
}

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

Example with HTML and CSS

Contents of the file index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="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>
        <button class="btn" id="btn2">Second button</button><br>
        <button class="btn" id="btn3">Third button</button>
    </body>
</html>

Contents of the file style.css:

.btn
{
    height:  50 px;
    color: white;
    font-size:  20 px;
    cursor: pointer;
    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 Limitations

Independence between presentation and structure

CSS initially aimed at independence between structure and presentation of a document.

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

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

More generally:

• the difficulties and lack of implementation of some of the CSS properties limit the freedom of layout, and lead to the use of restrictive properties as to the HTML structure (for example, the float property imposes a precise order of the content thus put in column; many rendering effects rely on a semantically neutral markup overload, such as div and span);
• The reuse of a single structure on different media or hardware through style sheets is limited by the constraints of the content itself and the ability of user agents to render it, and by the need for presentation negotiation between client and server. Specific processes for adapting content, structure and rendering on the user agent side have been necessary, such as, for example, the Extensible Rendering Architecture (ERA) technology developed by Opera. Internet Explorer follows a similar path with version 7, which reshapes the printed rendering of a web page to optimize it.

Accessibility

CSS promotes the accessibility of a web page by giving the user ultimate control over the rendering of a document in his browser: it is thus possible to adapt it to constraints or preferences concerning, for example, the size of the display of characters or colors. By separating structure and presentation, CSS also promotes the writing of semantically structured documents, potentially more usable by technical aids: the freedom of presentation of the titling elements 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 authors the means to enrich the formatting of the text, CSS makes it possible to limit the use of texts put in images.

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

• by replacing it with pseudo-content that is only accessible to users who can perceive the visual CSS rendering: this is the case, for example, of information that would be conveyed by background images;
• by disrupting the necessary coherence between the linear order of information in 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 would only make sense according to its CSS positioning is not understandable for their users;
• In an accessibility approach based on the relevance of the HTML structure, the range of content formatting possibilities with CSS can lead to the need to tag content with meaningful elements. For example, it is possible to visually delimit a quote by italicizing it or by enclosing it with quotation marks, but information on the origin of this text will only be perceptible, within the meaning of accessibility standards, through the use of the q or blockquote elements, which are the only ones that define an HTML citation and indicate its source via the appropriate attribute (cite).

The methods of application of web content accessibility guidelines (RGAA, UWEM for example) therefore define rules for the use of CSS styles.

Simplicity

CSS responds to a desire to have a simple presentation format, both in its functionalities and in its syntax, in order to promote direct manipulation by authors and users. However, this simplicity is challenged by several factors:

• difficulty in determining and controlling the result of the cascade 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 style sheets can make it difficult to anticipate the result of a change to one of them. Authors are then faced with a choice between this interdependence, which optimizes the amount of code, and the redundancy of styles, which facilitates its maintenance;
• Difficulty writing user styles without advanced skills. Users are theoretically the first beneficiaries of CSS, which give them the ability to adapt the layout of web pages. However, the style mechanism does not lend itself to the development of graphical environments that would facilitate the manipulation of CSS properties. In practice, therefore, the use of user styles remains marginal.

Standardization

Frameworks

CSS frameworks are pre-prepared libraries designed to enable easier and more standards-compliant styling of web pages using the Cascading Style Sheets language. They include Blueprint, Bootstrap, Cascade Framework, and Foundation. Like programming language and scripting libraries, CSS frameworks are typically embedded as external .css sheets referenced in the “<head>” HTML. They provide a number of out-of-the-box options for web design and layout. Although many of these frameworks have been released, some authors use them primarily for rapid prototyping, or for learning, and prefer “handmade” CSS that is appropriate for every published site without the design, maintenance, and download fees associated with many unused features in the style of the site.

Design methodologies

As the size of CSS resources used in a project increases, a development team often needs to decide on a common design methodology to keep them organized. The goals are ease of development, ease of collaboration during development, and the performance of style sheets deployed in the browser. Popular methodologies include OOCSS (object-oriented CSS), ACSS (atomic CSS), oCSS (organic waterfall stylesheet), SMACSS (scalable and modular architecture for CSS), and BEM (block, element, modifier).

References (sources)