Cascading Style Sheets

When users look at a website, they rarely know the intricacies of how it is built, how each piece is put together and linked up so that what see and interact with is responsive and robust. In general, websites have a “back-end” and  “front-end”. The front-end refers to what is, expectedly, the “front” of a webpage – the layout that you see, the colors, the placement, the animations, etc. The back-end is the core of the functionality of a website, the “behind-the-scenes” worker. It handles inputs that the user gives from the front-end and makes sense of that information and stores it. For example, on a simple log-in page like the one for WordPress, the front-end would be the looks of the actual page itself, and the back-end would handle the email and password you put in through the form, register that you are a valid user, and redirect you to your dashboard.

Image

Let’s focus on the front-end of a website. The look and feel of a website is almost always built using a combination of HTML, CSS and Javascript that work together. The HTML is the bare-bones skeleton of a website. It specifies the text, the forms and any actual content that is necessary for a webpage. The CSS (Cascading style sheet) styles the webpage, specifying colors, fonts, background images, drop shadows, etc. The Javascript is used to make animations, transitions, and more complex interactions on a website. All webpages need HTML, and almost always need CSS, but Javascript isn’t always necessary, especially for static pages.

Image

In a paper by Håkon Wium Lie on the topic of CSS (Cascading Style Sheets), style sheet languages for structured documents on the web is discussed in depth. Style sheets have existed in one form or another since the 1980s, and were developed as a means for creating a consistent approach to providing style information for web documents. As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance at the cost of more complex HTML. Variations in web browser implementations made consistent site appearance  difficult, and users had less control over how web content was displayed. Robert Cailliau wanted to separate the structure from the presentation. The ideal way would be to give the user different options and transferring three different kinds of style sheets: one for printing, one for presentation on the screen and one for the editor feature.

To improve web presentation capabilities, nine different style sheet languages were proposed to the World Wide Web Consortium. Of nine proposals, two were chosen as the foundation for what became CSS: Cascading HTML Style Sheets (CSS) and Stream-based Style Sheet Proposal (SSP).

CSS allowed a document’s style to be influenced by multiple style sheets. One style sheet could inherit or “cascade” from another, permitting a mixture of stylistic preferences controlled equally by the site designer and user. One style sheet could inherit or “cascade” from another, permitting a mixture of stylistic preferences controlled equally by the site designer and user. By the end of 1996, CSS was ready to become official.

The CSS 1 specification was completed in 1996, but it was more than three years before any web browser achieved near-full implementation of the specification. Internet Explorer 5.0 for Mac, shipping in March 2000, was the first browser to have full CSS 1 support. Other browsers followed soon afterwards, and many of them additionally implemented parts of CSS 2. CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS 1, CSS 2, CSS 3. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types, which were added in CSS 2.

In CSS3, there are many options such as  animation, gradients, media queries, shadows, transitions, the font-face rule that allows you to embed fonts on a web page, and more.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s