Austin CSS3 Design

What is CSS3?

by

Cascading Style Sheets (CSS) is a language for style sheets used to describe the presentational elements of a document written in a markup language. The most popular use of CSS is to style websites coded in Hypertext Markup Language (HTML) and Extensible Hypertext Markup Language (XHTML), but CSS can also be used for any kind of Extensible Markup Language (XML) document, as well as plain User Interface Language (XUL) and Scalable Vector Graphics (SVG).

As CSS became more prominently used after its inception, its capabilities were naturally developed to meet the growing demands of web designers, and more importantly, web surfers. The first incarnation of CSS, known as CSS1, was recommended as a standard by the World Wide Web Consortium (W3C) in 1996. By the following year, improvements and further developments, known as CSS2, began. In 1998, developers and tech gurus began further improvements known as CSS3. Each level of CSS is known as a profile, typically intended for specific devices or interfaces.

CSS3 is under continuing development and has become increasingly popular with the advent of mobile technologies. With smartphones, tablets and netbooks growing in popularity, mobile website design and so-called responsive design rely on the liquid layout options provided by advanced CSS profiles. The third incarnation of CSS allows for the automatic adjustment of a web page, depending on the screen size and resolution for a particular device.

CSS3: An Introduction and Overview

In the early days of the Internet, nearly all web designers used simple HTML to code the various elements of a web page. If the designer wanted all text to display a certain way, he or she had to manually insert lines of code for each instance of text, in order for it to properly display in a web browser. The development of CSS style language in the late 1990s provided a way for designers to list such style rules for the entire site in one document. In simple terms, CSS provided a single reference document that instructed a web browser to display certain elements in a certain way, throughout the website.

For example, rather than inserting font and color instructions for each area of text, web designers could create a CSS document. That document would then explain to a web browser that all text marked as a header should display as blue, 12pt, Times New Roman font. Designers could further explain that any text not otherwise marked should display as 10pt Arial font, in standard black. Similar instructions could be coded for displaying the background for all pages, displaying various types of page layouts, or establishing image display properties. At its most basic level, CSS provided a series of predictable if/then rules for web browsers to follow when displaying a particular website or page.

New Features of CSS3

Each CSS profile builds on its predecessor. Unlike previous profiles, a CSS3 designer uses modules to govern the semantic presentation of a website or page. The use of modules is the primary difference between CSS1 and 2, versus 3. The purpose of modules is primarily to allow for the rendering of the same print and on-page displays, but with less coding. In short, modules are like shortcuts for CSS.

Not all modules are stable, but the most commonly used include Selectors, Color and Namespaces. Namespaces allow a front end web designer to define various elements in a stylesheet through the use of prefixes to prevent confusion. Selectors determine what styles apply to which sections of an HTML document. The color module defines foreground color and properties such as opacity. These three modules became standard W3C recommendations in 2011. Although still primarily focused on the decorative, rather than structural aspects of a page, the continued development of the third generation of CSS further expands layout capabilities.

The Benefits of CSS3

As improvements continue, each CSS3 designer will have the ability to capitalize on the continuous improvements in the flexibility and strength of this style language. While there are drawbacks, including less flexibility in layout design compared to other languages, there are numerous benefits and advantages. Style sheets allow for consistency throughout a website regarding fonts, borders, colors and other elements. A single document means a front end web designer can make site-wide changes to certain elements, simply by editing one entry. That means the designer saves time, clients save money and more effort can be spent on developing a useful website for users.

The use of modules, the basis of the third generation of CSS, further cuts down on the time needed to design or edit a website. Much like site designers no longer need pages of HTML code to create a simple web page, designers using modules in their style sheets no longer need create a long or complex CSS document. Additionally, sites built using CSS modules require less time to load and use less bandwidth, an attractive proposition for site owners with limited bandwidth allowances.

The Demands of Mobile Website Design

The third generation of CSS presents a workable solution to the demands of mobile website design. When cell phones with web-capable browsers first came to market, many site owners developed mobile versions of their existing sites. In essence, that meant creating a duplicate website in a format that could display on a much smaller screen while still having an aesthetic appeal for users. As more mobile devices, such as tablets and netbooks, came to market, the demand for mobile-friendly web design increased. Trying to accommodate multiple screen sizes, vastly different screen resolutions and similar variables through traditional site design methods became more difficult.

Creating separate versions of existing websites for each possible viewing variable is simply impractical. However, with the use of fluid layouts, a common characteristic of the third generation of CSS, designers can create a single site design that is flexible enough to respond to a user-chosen environment. In short, the more fluid designs associated with CSS 3 allow design elements to automatically adjust, based on the screen size and resolution settings of the viewing device used. Known as responsive web design, these types of considerations are the new challenges facing not only mobile web design, but web design in general.

CSS3 and Responsive Design

Responsive web design is more concept and technique than it is a technological advancement. Prior to the influx of mobile devices and increased demand for mobile web design, most site designers focused on parameters established by the print industry. Screen sizes and resolutions were fairly universal, based on how a static page looked, either on screen or on the printed page. With the advent of mobile technology, designers began to realize that websites were not limited by the same constraints as print media.

Designers have always had the option of choosing either a fluid layout or a fixed layout. Fixed layouts were the most popular, as they were the easiest to predict in terms of browser compatibility. Basically, these layouts made certain assumptions about screen size and resolution, presenting a fixed viewing window, centered on the screen. Mobile devices, however, do not meet those fixed layout assumptions. As such, more fluid designs are needed to meet the increasing demands of a variety of devices. With users demanding more responsive designs, including fluid layouts that adjust to the device and a variety of input methodologies to accommodate keyboards, game controllers or touch, style languages must adapt to allow designers to create appropriate user experiences.

Fluid layouts, however, are not enough for truly responsive website design. Users of CSS 2 could establish how a site should display on a given device by choosing a media type. In other words, the stylesheet could provide if/then rules for specific screen sizes. Where CSS 2 allowed for the specification of media types, CSS 3 allows for further expansion through media queries. The advent of queries allows a site to instantly analyze the device used to access it, and render a viewing experience specifically designed for that type of device.

In short, combining CSS 3 with other advanced techniques and languages, such as HTML5, provides designers with the flexibility, growth capabilities and responsive solutions that today’s web surfers demand. As technology continues to develop, designers must have the ability to develop sites that are relevant beyond the latest craze or fad. Style languages and capabilities must be as fluid as the layouts they render, for which the third generation of CSS offers an appealing solution.