Cascading Style Sheets | Part 1

Cascading Style Sheets | Part 1

Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) is a computer language used to describe the presentation of HTML and XML documents. 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. One of the main goals of CSS is to allow the formatting of documents out. For example it is 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 accessibility, switching of presentation, and reduce the complexity of the architecture of a document.

Thus, the benefits of CSS are numerous:

  • The document structure and presentation can be handled 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 provide a choice of style sheets, eg 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 sets the rendering of a document according to the media reproduction and its capabilities (type of monitor or voice device), those of the browser (text or graphics), and the preferences of its user.

The stylesheets can be differentiated for the following media:

  • All: whatever the media
  • Screen: screen desktop
  • Print: Printing Paper
  • Handheld: 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 set by then depreciated CSS2.0 CSS2.1)

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 the default user agent and those from the user’s preferences and its own configuration. The capabilities of the receiver can be taken into account by the authors, intended for user agents that implement the CSS3 module. It allows conditioning the inclusion of style sheet constraints on including the resolution or color reproduction capability.

Allow the cascade of styles

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

  • Origin of styles, from the user agent, author and user. The higher priority given to style the user is a major factor in the accessibility of the documents presented using CSS.
  • By media: a generic style sheet may apply to several media reproduction (screen display, printing, projection) and combined with leaf-specific 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 item thereof, 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 sheet and styles applied directly to each of its components (styles “online”). A stylesheet can also import one or more other outer leaves.

Technical principles and syntax of CSS

Renders a styled document is determined by the box design and flow. The CSS rendering engine makes a “formatting structure” reflecting the document’s logical tree. Each element of this structure generates one or more areas with display properties or rendering customizable voice. Viewing or reading from the stream carried boxes successively generated for each item as it appears in the linear order of the formatting structure.

According to the scenarios, 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).

CSS — Properties and Values

Characteristics applicable to CSS boxes are expressed as couples property: value. The 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 elsewhere, or Keyword own CSS. For example, a background color or text can be expressed using the RGB model or keywords black, blue, fuchsia, etc.

CSS properties have been established as a compromise between two opposing constraints: easy reading style sheets by user agents by multiplying the individual properties, or help them write the authors 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 distinct properties. Similarly, there are shorthand properties allow authors to simplify the writing of a series of properties: font shorthand allows, for example, to summarize in a single rule all font properties, size, row height, snack, fat and italics. However, using the ‘/’ character makes it much more complex parsing stylesheets by user agents.

Blocks of rules and selectors

The properties are grouped in blocks of rules, delimited by curly braces {}. Each block is preceded by a selector identifying the structural elements to which the affected properties should be applied.

Although this CSS code does not describe the entire presentation of a document, it is itself a style sheet on its own. 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 items using the IDs and classes assigned to structural elements: the identifier (id attribute) are used to characterize a single element (a menu, a word etc.), while the classes (class attribute) are used to characterize a set of elements (like menus organized in a similar manner).

Contextual selectors, formed by combination of simple selectors, allow to target elements based on their position in the document: img has not designated such that the images in the links.

To enable the cascade of styles, rules of calculation of specificity allows the CSS rendering engine to determine the priority to be applied concurrently to different selectors to the same element, and sort and rules apply to it. This calculation is based on the sum of the values given to different simple selectors forming the contextual selector:

  • Each type has a simple switch priority value: 0,0,0,1 for an item for a class 0,0,1,0, 0,1,0,0 a unique id.
  • The words! Important added to the rule gives a specificity of 1,0,0,0.
  • Origin of the style is ultimately decisive: a style attribute present 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 trumps style copyright, which overrides the default style of the 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…

Sharing

Leave your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.