What is CSS / Cascading Style Sheet

Cascading Style Sheet (CSS) is a style sheet language used with other web languages to describe the look and formatting of a document written in a markup language. 

CSS Introduction

CSS is most often used to change the style of web pages and user interfaces written in HTML and XHTML ('eXtensible' HyperText Markup Language), CSS can be applied to any kind of XML document, including plain XML, SVG and XUL. 

CSS along with HTML and Javascript are used by most websites to create visually engaging webpages, responsive UIs (User Interfaces) for web applications, and user interfaces for many mobile applications. CSS is primarily designed to style the structure of content defined with HTML. CSS describe how each browser renders (displays) the content of wesites or web apllications. To simplify the whole thing, HTML structures the content of a website while CSS style (in a layman's term: beautify the structure) the content and describe how the content should be presented. CSS got its name from the nature of its application in HTML page, styles are applied in cascading order.



History of CSS



CSS is a World Wide Web Consortium (W3C) recommendations, which means that all the W3C members (which include all the major browsers manufacturers) have agreed to support it in their products. CSS was first proposed by Håkon Wium Lie on October 10, 1994. 

Several other style sheet languages for the web were proposed around the same time, and discussions on public mailing lists and inside W3C resulted in the first W3C CSS Recommendation (CSS1) being released in 1996. Bert Bos' proposal was influential in the design of CSS; he became co-author of CSS1 and is regarded as co-creator of CSS. 

One requirement for a web style sheet language was for style sheets to come from different sources on the web, but the existing style sheets like DSSSL (Document Style Semantics and Specification Language)and FOSI (Formatting Output Specification Instance) didn't meet up to expectations. 

Nine style sheets were proposed then, two of those nine style sheets influenced what became CSS: Cascading HTML Style Sheets and Stream-based Style Sheet Proposal (SSP). As HTML grew to encompass many aspect of web technology, CSS also grow to the extent that it gives develpopers full control over site appearance.


The Editorial Review Board (ERB) is in charge of the development of HTML, CSS and DOM (Document Object Model). Early in 1997, the ERB was split into three working groups: HTML Working group, chaired by Dan Connolly of W3C; DOM Working group, chaired by Lauren Wood of SoftQuad; and CSS Working group, chaired by Chris Lilley of W3C. 

The CSS Working Group began tackling issues that had not been addressed with CSS level 1, resulting in the creation of CSS level 2 on November 4, 1997. It was published as a W3C Recommendation on May 12, 1998. CSS level 3, which was started in 1998, is still under development as of 2014.


CSS Version History


CSS1: the first version of CSS (CSS level 1) was officially realeased and published on the 7th of December 1996. Håkon Wium Lie and Bas Bos are credited as the original developers. The capabilities supported are:

  • Font properties such as typeface and emphasis

  • Color of text, backgrounds, and other elements

  • Text attributes such as spacing between words, letters, and lines of text

  • Alignment of text, images, tables and other elements

  • Margin, border, padding, and positioning for most elements

  • Unique identification and generic classification of groups of attributes

The W3C no longer maintains the CSS 1 Recommendation.

CSS 2: (CSS level 2) CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998. CSS 2 was released as a superset of CSS 1 and it includes a number of new capabilities like:

  • absolute, relative, and fixed positioning of elements and z-index

  • the concept of media types, support for aural style sheets (which were later replaced by the CSS 3 speech modules)

  • and bidirectional text, and new font properties such as shadows.


CSS 2.1: (CSS level 2 revision 1) CSS 2.1 recommendations was proposed on 12 April 2011 and was finally published as a W3C Recommendation on 7 June 2011. It fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already-implemented browser extensions to the specification and preservation for backward compatibility.

CSS 3: (CSS level 3) CSS3, work on CSS 3 started in 1999 around the time CSS level 2 was published. CSS 3 is divided into several separate documents called "modules". Four of these modules have been published, and they are:

  • 2012-06-19: Media Queries

  • 2011-09-29: Namespaces

  • 2011-09-29: Selectors Level 3

  • 2011-06-07: Color

Some modules (including Backgrounds and Borders and Multi-column Layout among others) have Candidate Recommendation (CR) status and are considered moderately stable. At CR stage, implementations are advised to drop vendor prefixes.

Summary of all module-specifications:

 ModuleSpecification TitleStatus & Date
css3-backgroundCSS Backgrounds and Borders Module Level 3Candidate Recommendation, September 2014
css3-boxCSS basic box modelWorking Draft, August 2007
css3-cascade-3CSS Cascading and Inheritance Level 3Candidate Recommendation, October 2013
css3-colorCSS Color Module Level 3Recommendation, June 2011
css3-contentCSS3 Generated and Replaced Content ModuleWorking Draft, May 2003
css-fonts-3CSS Fonts Module Level 3Candidate Recommendation, October 2013
css3-gcpmCSS Generated Content for Paged Media ModuleWorking Draft, May 2014
 css3-layoutCSS Template Layout ModuleWorking Draft, November 2011
 css3-marqueeCSS Marquee Module Level 3Candidate Recommendation, December 2008
css3-mediaqueriesMedia QueriesRecommendation, June 2012
 css3-pageCSS Paged Media ModuleLevel 3     Working Draft, March 2013
 css3-selectors    Selectors Level 3Recommendation, September 2011
 css3-ui CSS Basic User Interface Module Level 3 (CSS3 UI)Working Draft, January 2012


Browser Support


Because not all browsers correctly parse CSS code, developed coding techniques known as CSS hacks can either filter specific browsers or target specific browsers (generally both are known as CSS filters). The former can be defined as CSS filtering hacks and the latter can be defined as CSS targeting hacks. Both can be used to hide or show parts of the CSS to different browsers. This is achieved either by exploiting CSS-handling quirks or bugs in the browser, or by taking advantage of lack of support for parts of the CSS specifications. Using CSS filters, some designers have gone as far as delivering different CSS to certain browsers to ensure designs render as expected.

CSS Framework


CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. CSS frameworks include

- Foundation

- Blueprint

- Bootstrap

- and Cascade Framework.

Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML <head>. They provide a number of ready-made options for designing and laying out the web page. While many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from.
Share on Google Plus Share on Linked in

Attend The EPIC BLOGGING Seminar (Jan 29th - 30th, 2016)

Do you want to learn how to blog professinally like me and earn real money, I mean millions of naira every month? Then start making arrangement to attend my 2days EPIC BLOGGING Seminar taking place in Lagos on January 29th and 30th 2016. You've never seen anything like this before and believe me, you'll miss the whole world if you miss it >>> CLICK HERE FOR DETAILS
    Blogger Comment
    Facebook Comment

1 comments:

  1. Nice write up. It gave an insight not only to the meaning of the topic in question but also to the underlying history and versions of css. Keep it up bro...

    ReplyDelete

Please, no email address or phone number in your comment. Tick "Notify me" to follow the conversation and get notified whenever there is new comment!