What is CSS?

Stands for CSS (Cascading Style Sheet.) Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML.

CSS helps Web developers create a uniform look across several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document. Once the style is defined in cascading style sheet, it can be used by any page that references the CSS file. Plus, CSS makes it easy to change styles across several pages at once. For example, a Web developer may want to increase the default text size from 10pt to 12pt for fifty pages of a Web site. If the pages all reference the same style sheet, the text size only needs to be changed on the style sheet and all the pages will show the larger text.

While CSS is great for creating text styles, it is helpful for formatting other aspects of Web page layout as well. For example, CSS can be used to define the cell padding of table cells, the style, thickness, and color of a table's border, and the padding around images or other objects. CSS gives Web developers more exact control over how Web pages will look than HTML does. This is why most Web pages today incorporate cascading style sheets.

The history of CSS

At first glance of the title, you might wonder, a history lesson in CSS? Well to appreciate the current state of CSS let’s literally go back in time to know how it all started, its purpose of creation, its evolution, and what the future might hold.

We can trace the roots of CSS back to the year 1994 when  Håkon Wium Lie   proposed it while working with  Tim Berners-Lee  at CERN.

At the same time, several stylesheets were proposed and discussions on public mailing lists and World Wide Web Consortium (W3C) resulted in the first W3C CSS Recommendation being released in the year 1996. Bert Bos also made an influential proposal and became the co-author of CSS1 and therefore regarded as one of the creators of CSS.

Before the creation of CSS, Stylesheets had existed in the 1980s at the inception of Standard Generalization Markup Language in the form of DSSL (Document Style Semantics and Specification Language) AND FOSI (Formatting Output Specification Instance), both were not suitable for pulling stylesheets from multiple sources. Which led to the creation of CSS, thus removing this barrier.

Over the years CSS has evolved with additional features that have elevated its status from a simple styling language. Some effects like Animations, Transitions, Transforms that were only possible with JavaScript are now possible with just plain CSS.

 CSS VERSIONS

When we give a detailed or brief history of a technology associated with the Web (or software in general), we cannot do without mentioning its Versions that have existed over time and CSS is no different. Versions of software can give us a timeline of the development of the software and each version number can indicate what was added or removed from the software.

CSS1

CSS1 or CSS Level 1 was released in 1996 and had features for customizing text on a web page and changing the background color. It also had properties for spacing words, letters, and lines of text. Web browser support was minimal and thus prevented the popularity of CSS Level 1 for several years.

CSS2

CSS level 2 (CSS2) specification was developed by the W3C and published as a recommendation in 1998. Its added properties for positioning allowed CSS to be used for page layout. It also introduced styles for other media types and more sophisticated methods for selecting elements for styling.

CSS2.1

CSS 2.1 was a revision that fixed some errors in CSS2. It removed features that were poorly supported and adds already implemented browser extensions. Due to the nature of the W3C Process for standardizing technical specifications, CSS 2.1 Specification switched from Working Draft status and Candidate Recommendation status for several years until February 25, 2004, when It became a Candidate Recommendation only to be reverted to a Working Draft on June 13 of the same year.

It attained a Candidate Recommendation status on 19 July 2007 and was updated twice two years later in the year 2009. The following year, on 7 December 2010, it was again reverted to the Last Call Working Draft due to some changes and clarifications.

CSS 2.1 went to Proposed Recommendation on 12 April 2011. After being reviewed by the W3C Advisory Committee, it was finally published as a W3C Recommendation on 7 June 2011.

CSS3

Work on CSS3 began in 1998 a year after CSS2 was published. CSS3 is an extension of CSS 2.1 that adds features like Transforms, Animations to name a few and it's not a single specification like its predecessors (CSS1 and CSS2) but rather a different module of features that can be worked on by different authors at different paces. Each module is a standalone specification for a subsection of CSS, like color, selectors, or backgrounds as shown in the image below.

How does CSS work?

To understand the basics of how CSS works, you must first understand a little about modern HTML. Web developers layout pages according to the "box model." A Web page is a series of boxes, each containing a discrete element. These boxes are nested, one inside another.

For example, a page's header is a box, and it contains several smaller boxes comprising all the elements that make up a header: logo, navigation, social media buttons, shopping cart buttons, etc. Using CSS, a developer assigns styles to the "header" box. In this example, let's assume that the developer makes the text inside the header purple, Arial font and fifteen points high.

Here's where the "cascading" part of cascading style sheets comes into play. The font styles applied to the header cascade down to all the elements contained inside the header. Elements containing text such as navigation, links or calls to action will all be purple, Arial and fifteen points high.