What is Cascading Style Sheets (CSS)?

Cascading Style Sheets (CSS) is a style sheet language used for describing and defining the presentation of a document written in some markup language such as Hypertext Markup Language (HTML). As a matter of fact, next to HTML and JavaScript (JS), CSS is one of the core parts of the World Wide Web (WWW) to create visually engaging websites and user interfaces for both web applications and mobile applications.

CSS was realized for the purpose of separating presentation and content to allow improved content accessibility, deeper flexibility, and control of presentation characteristics, enabling multiple HTML documents to be formatted by one CSS file, and reduce complexity and repetition in structural content. This in turn also allowed for the markup language to be presented in different styles such as on-screen, print, voice, or even on braille-based tactile devices. CSS also allows changing of screen size depending on a user's viewing device; such as a PDA or mobile phone and its flexibility even allows for users to use their own CSS file as oppose to the author's original if they so wish.

The language’s specification defines a priority scheme to determine which style rules apply should there be more than one rule which matches an element. This is called a cascade and within it, priorities (or weights) are defined and used as rules to ensure predictable results. This specification along with all other CSS specifications are maintained by the World Wide Web Consortium (W3C), who also operates a free CSS validation service for CSS files.

Syntax

CSS' syntax is quite simple and easy to learn as it uses a variety of English words to specify the names of style properties. As such, a style sheet should be seen as a list of rules with each rule or rule-set consisting of one or more selectors and a declaration.

A selector in CSS declares which part of the markup a style is to be applied to through means of matching tags and attributes within said markup. This means that selectors may apply to all elements of a specific type within the markup file (such as all <p> tags), an element uniquely identified by its id or class attribute, or elements depending on their location relative to the document tree. To build even further on this, CSS allows the implementation of pseudo-classes in their selectors to allow further formatting on elements that are not based on the document tree. One of the most common used pseudo-class is ": hover" which is used specifically to identify when a user's mouse hovers over the attached element. Under this, CSS allows the option of having an element's presentation be further formatted by appending it to the selector as in "p:hover" or "#elementID:hover". Another point of note is the flexibility of selectors as they can be joined together in a spaced list to describe elements by location, id, element type, class, or some combination thereof. The order of these selectors is important in this practice, however, as the logic of which selector you're specifying can change depending on this.

A declaration block is simply a list of declarations wrapped in a block by two braces. These declarations are comprised of a property, a colon, and a value; and a semicolon is used to identify where one declaration ends and another one begins. Properties are specified within the CSS standard and have a set of possible values. They can affect any type of element or some types of elements depending on the property in question. On the other side of the colon, values can be keywords such as "center" or "float" or numerical values such as 200px (200 pixels) or 25% (25 percent of the window width/height). There are also some values which can be denoted in more than one way, such as color values being applied by keyword ("red"), hex ("#FF0000"), RGB and RGBA (rgb(255, 0, 0) and rgba(255, 0, 0, 0.375)), or HSL and HSLA (hsl(000, 100%, 50%) and hsla(000, 100%, 50%, 37%)).

The source of a CSS file can be from either the author of the markup, the web browser itself, or even the end-user of a web page. The author's source can then be broken down further into inline, media type, importance, selector specificity, rule order, inheritance, and property definition. As multiple style sheets can be imported, the order of priority is based upon these seven types (plus the user source type) before defaulting to the web browser's default style for a total of nine different levels. This method grants users and authors a lot of control with CSS. The highest priority stylesheet controls the content display and those which are not declared as the highest priority source are passed down onto a lower priority source (cascading). The order of priority for these sources are; from highest to lowest, importance which is denoted with the "!important" keyword to overwrite the previous priority types, inline which is a style applied in an HTML document via the HTML style attribute, media type which is a property definition that is only applied to all media types less a media specific CSS is defined, user defined which is provided by a user through their browser’s feature, selector specificity which allows a specific contextual selector (such as #heading p) to overwrite the generic definition, rule order which denotes that the last rule will have the higher order priority, parent inheritance which is determines whether a property inherits from a parent element for not being specified or otherwise, CSS property definition which states that a CSS rule or inline style will overwrite the browser's default style; and finally, the browser default style which is defined by W3C's specifications.

Versions

CSS 1 was the first specification defined by W3C back on December 1st, 1996. It was capable of supporting font properties such as typefaces and emphasis, color of text, background, and other elements, text attributes such as word spacing, letter spacing, and line spacing, alignment of elements such as text, images, and others, margin, border, padding, and positioning of most elements, and unique identification and generic classification of groups of attributes.

Since then, CSS 2 was realized and published in May two years later as a superset of CSS 1 that added further functionality. The addition of the absolute, relative, and fixed positioning of elements, the z-index, the concept of media types, new font properties such as shadow, and bidirectional text and aural style sheet support were all found within CSS 2. Following this, CSS 2.1 was realized to fix some errors of CSS 2 such as removing poorly supported or not fully interoperable features and added browser extensions which were already implemented.

CSS 3 was defined in several different documents called modules; much unlike its predecessor. Each of these modules added new features or built upon the old features of CSS 2 and thus, preserved backward compatibility.

Following this comes CSS 4 which is still in a working draft and aims to build upon the modular style of CSS 3. As such, there is no single CSS 4 specification and each of the modules are "level 4" thanks to CSS 3 (where the modules would have then been considered "level 3" as they were built on CSS 2.1). There are a few level 4 modules which build upon the presentation aspect of CSS 3's modules while there are other modules which define new functions entirely such as Flexbox and are designated as "level 1".

Limitations and Advantages

Despite the many uses of CSS, there are still some limitations with the language. For instance, selectors cannot "ascend"; that is, there's no way to select the parent or ancestor of a selector. CSS 4 does seek to answer this shortcoming but at the moment, it is a limitation the language faces. There's also no method of declaring a new scope explicitly regardless of position as the scoping rules for properties (such as z-index) all look for the closest parent element with a "position: absolute" or "position: relative" attribute. Other current limitations include pseudo-class dynamic behavior not being controllable, inability to name rules, inability to include styles from one rule into another, and the inability to target text without changing markup.

On the other hand, it does have plenty of advantages in its slew of uses. The separation of presentational and content-based markup which allows for better content accessibility, its ability to offer site-wide consistency and keep your website's theme consistent, its optimization of bandwidth by utilizing the style sheet only once, whether internally or externally, for all HTML pages, it's simple method of page reformatting by altering one line, and just how easily accessible it is.