1. Home
  2. Knowledge Base
  3. Cascading Style Sheet (CSS) – Definition

Cascading Style Sheet (CSS) – Definition

Cascading Style Sheet Definition

Cascading Style Sheet refers to a style sheet language that offers a description of a document encoded in a markup language such as HTML. Besides Javascript and HTML, it is the fundamental technology of www or the world wide web.

A Little More on What is CSS

CSS is used to differentiate between the presentation and material of the document including format, color scheme, and fonts. This differentiation makes the content more accessible, offers more control for depicting the presentation features, and allows multiple websites to use the same formatting style by mentioning the right Cascading Style Sheet in an individual .css file, and minimize the extent of complications and manipulations in the structure of the content.

When the formatting and content are easy to distinguish, it makes it easier to showcase one markup page in unique styles for several cases such as in print, by voice, on-screen, and on Braille-based tactile gadgets. In case, the content needs to be viewed through a smartphone or a mobile gadget, CSS will have its own set of guidelines for alternate formatting purpose.

The term ‘cascading’ originates from a particular priority strategy that ascertains the type of style rule to be applied if at least one rule aligns with a specific element. One can estimate or predict this scheme in an effective manner.

The World Wide Web Consortium (W3C) regulates and controls the CSS specifications. RFC 2318 enlisted internet media type text/css for utilization purpose with CSS in March, 1998. The W3C offers a CSS validation facility for free for CSS documents.

Besides HTML, markup languages such as XHTML, XUL, SVG, etc. also support using CSS.

Use

When CSS didn’t exist, almost every presentational feature of HTML documents was present in the HTML markup. Also, a variety of font colors, borders, sizes, etc. were supposed to be clearly mentioned time and again within the HTML markup. With CSS, authors can shift data to some other file, thereby leading to a more convenient HTML.

For instance, HTML in a specific structure defines headings referred to as h1 elements, sub-headings as h2, and sub-sub-headings as h3, and so on. One can select their preferred font, color, size, and emphasize on other elements both on the screen, and at the time of printing.

Earlier, document presenters who had to allocate typographic attributes like h2 headings were supposed to use HTML presentational markup again and again for every time the similar heading type occurred. Consequently, this led to more complications, errors, and maintenance issues in the documents. Also, the size of the documents got bigger. To resolve these issues, CSS was brought into the picture that made it easier to distinguish between presentation and structure of the document. CSS has the ability to describe a color, text alignment, font, spacing, borders, and various typographic features. It can do so individually for the print as well as on-screen. It further informs about the style that are not visible in real such as reading pace and focus on aural text readers. The W3C has disapproved using all types of presentational HTML markup.

Sources

One can obtain CSS based data from several sources including internet browser, the author and the user. The data received from the author can be segregated into several forms such as media type, selector specificity, inheritance, significance, etc. One can store the CSS based data either in a different file or can include it in an HTML document. One can also import sheets of different styles. The style of CSS varies according to the output device being used. For instance, the screen version will have distinct features from the printed version so as to enable authors to customize the presentation correctly for every medium or version.

The style sheet that involves the highest priority has the control over how much content can be displayed. Declarations that are not included in the highest priority sources get transferred to a lower priority source, like the user agent style. This whole process is known as cascading.

The primary objective of CSS is to enable users to have more control over presentation. A person who finds it hard to read the headings in red italics can use another style sheet. As per the website and the internet browser, a person can select among different style sheets offered by the designers. Also, he or she can ignore all given styles and access the website using the basic or default styling approach, or correct only the red italic heading style without impacting other characteristics.

References for Cascading Style Sheet (CSS)

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

https://techterms.com/definition/css

https://www.theserverside.com/definition/cascading-style-sheet-CSS

Academic Research for Cascading Style Sheet (CSS)

Cascading style sheets level 2 revision 1 (css 2.1) specification, World Wide Web Consortium. (2011).  This paper explains the CSS2 (Cascading Style Sheet) level 2 that enables users and authors to add style, such as spacing, fonts and sound effects to structured files, for example, XML (Extensible Markup Language) applications and HTML (Hypertext Markup Language) documents. It simplifies maintaining and publishing a website as it separates the presentation style from the document content. It provides certain style templates for multimedia and elements like automatic counters, table layout and numbering as well as properties of a user interface.

Constraint cascading style sheets for the web, Badros, G. J., Borning, A., Marriott, K., & Stuckey, P. (1999, November). In Proceedings of the 12th annual ACM symposium on User interface software and technology (pp. 73-82). ACM. W3C introduced CSS (Cascading Style Sheets) as a mechanism to control the HTML documents appearance. This paper shows the way, the constraints provide a strong unifying formalism to specify and understand, declaratively, style sheets for internet documents. Constraints can specify complex behaviour, for example cascading contradictory style rules and properties inheritance. The authors explain the CCSS (Constraints Cascading Style Sheet) model compatible with all CSS 2.0 specifications virtually. It provides more flexible layout specs. The designer can use multiple layouts to meet user requirements. Finally, the authors elaborate on the Amaya browser demonstrating the CCSS feasibility.

Cascading style sheets, level 2 CSS2 specification, Bos, B., Lie, H. W., Lilley, C., & Jacobs, I. (1998). Available via the World Wide Web at http://www. w3. org/TR/1998/REC-CSS2-19980512, 1472-1473. This paper provides a detailed definition of the CSS (Cascading Style Sheets) level 2. It is basically a style sheet language which allows users and authors to link style (for example, aural cues, spacing and fonts) to structured documents, such as XML (Extensible Markup Language) applications and HTML (Hypertext Markup Language) documents. CSS2 separates the documents presentation style from the documents’ content, thus, simplifying the site maintenance and web authoring.

Multipurpose Web publishing using HTML, XML, and CSS, Lie, H. W., & Saarela, J. (1999). Communications of the ACM, 42(10), 95-101.

SeeSS: seeing what i broke–visualizing change impact of cascading style sheets (css), Liang, H. S., Kuo, K. H., Lee, P. W., Chan, Y. C., Lin, Y. C., & Chen, M. Y. (2013, October). In Proceedings of the 26th annual ACM symposium on User interface software and technology (pp. 353-356). ACM. CSS (Cascading Style Sheet) is a basic web language which describes the web pages presentation. The designers mostly reuse CSS rules in various parts of a webpage and across various pages throughout a website for providing consistency in look & feel and reducing repetition. When the developers modify a CSS rule, presently, they have to track manually and inspect visually all possible site parts, the change may affect. The authors propose SeeSS which is a system to track the impact of CSS change automatically across a website and allow the developers to visualize all easily. Finally, they sort the affected page fragments by severity and highlight the differences before and after making a change using animation.

Cascading style sheets: a novel approach towards productive styling with today’s standards, Keller, M., & Nussbaumer, M. (2009, April). In Proceedings of the 18th international conference on World wide web (pp. 1161-1162). ACM. This research proposes a method of creating CSS (Cascading Style Sheets) documents automatically if the designer specifies the desired effect on the elements of the content. When a web user agent applies the CSS rules and makes their effect computation, this method handles the way back. It can make CSS productivity better as the CDS authoring process always involves it implicitly. This method is an innovative and new way to reuse markup chunks together with the presentation. It has the potential for the reorganization and optimization of CSS documents. The findings are that the automatically created code is nearly the same as the manually authored code.

On the analysis of cascading style sheets, Geneves, P., Layaida, N., & Quint, V. (2012, April). In Proceedings of the 21st international conference on World Wide Web (pp. 809-818). ACM. The development and maintenance of a CSS (Cascading Style Sheets) is a significant problem as the developers lack the powerful methods. The authors present a new method to fill this lack. They borrow ideas from the subjects of compile-time verification and logic for analyzing the CSS. They introduce an original tool on the basis of latest tree logics advances which can detect statically many errors (e.g. semantically equal selectors and empty CSS selectors). It can also show properties concerning sets of documents, e.g. styling information coverage. The developers can use this new tool with the runtime debuggers to guarantee a high quality of Cascading Style Sheets.

Web presentation layer bootstrapping for accessibility and performance, Hall, C. A. (2009, April). In Proceedings of the 2009 International Cross-Disciplinary Conference on Web Accessibililty (W4A) (pp. 67-74). ACM. The developers overcome incompatibilities of most of the browsers using detection by the user-agent or available client attributes. This paper proposes a technique named as the Web Bootstrapper which enables a developer to write a single website while providing various experiences or skins without running expensive client-side code or altering source. This process delivers an exact collection of metadata and static resources that are essential for a unique experience. This method determines resources on the basis of platform, capability and form factor by collecting and targeting the often-immutable features of the client, not particularly its version or identity. Bootstrapping allows server-side, rule-based externalized configuration enhancing client performance.

Discovering refactoring opportunities in cascading style sheets, Mazinanian, D., Tsantalis, N., & Mesbah, A. (2014, November). In Proceedings of the 22nd ACM SIGSOFT International Symposium on Foundations of Software Engineering (pp. 496-506). ACM. CSS (Cascading Style Sheet) language is used to describe the formatting and look of HTML documents. This paper presents an automated methodology for removing duplicate CSS code. This technique detects 3 types of CSS duplication and suggests refactoring opportunities to remove these duplications. This method uses preconditions ensuring that the refactoring application preserves the styling of the original document. The authors test their approach to 91 CSS documents and 38 real-world systems of the web. The findings are that the there prevails CSS code duplication widely. There are many refactoring opportunities which can decrease the size of the CSS documents and enhance the code maintainability.

Today’s style sheet standards: the great vision blinded, Marden, P. M., & Munson, E. V. (1999). Computer, 32(11), 123-125. This paper shows that the alternatives to XSL and CSS meet the criterion more closely. The syntax of the PSL style language has been specifically developed for the style sheet project and contains conventional computational characteristics including conditionals and math expressions. Contrary to XSL, PSL does not focus on transformations. It uses constraints instead of flow for specifying the layout. The authors have used the Proteus language and PSL. The Thot Structured file toolkits’ P language is another style language. However, the authors invite the web community to explore more alternative approaches to Cascading Style Sheets.

Lurching toward Babel: HTML, CSS and XML, Korpela, J. (1998). Computer, 31(7), 103-104. This research has been carried out to discuss Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and Extensible Markup Language (XML). There are several designers who advocate using the CSS along with XML as an alternative to the HTML. So, the authors lurch towards Babel about the use of these languages together.

Was this article helpful?