Help Center
A conceptual illustration of planets and code brackets.


Computer markup language to make your content a consistent beauty contestant.

The nuts and bolts: Cascading Style Sheets (CSS) is a language for describing the presentation of a document written in a markup language like HTML. Along with HTML and JavaScript, CSS is a key component of the World Wide Web.

Woman coding CSS with a code editor and large screen.

Organizing your site or app isn’t as simple as organizing your desk — which some of us still fail at doing still. But what we are getting at, is that organizing your design isn’t as simple as buying a desk drawer organizer and then placing things in their respective places. In the digital world, we need to run lines upon lines of code in order to create a harmonious page. With HTML this can become a muddled and frenzied mess. Thank goodness CSS is at our disposal — making things a tad easier for us (and our eyes).

See CSS Run

Cascading Style Sheets (CSS) — not to be confused with CS:S — were created primarily to enable the separation of the document content from the document presentation. This is accomplished by using style sheet language used to describe presentation — the code that defines how your content’s overall look will be. This is commonly used for sites and pages written in HTML.

What we gain as designers is more control of the overall presentation of our product. With this gained advantage, we are able to diminish the code clutter of the page content from the page presentation. In other words, we are separating the structural content from the document content — this is how CSS has helped our eyes out.

Now, most of this may sound familiar to that of just a simple style sheet, which it is. What disconnects CSS from simple style sheets is that CSS has a cascading style guide that it follows. This is saying that elements have priorities set so that if there are more than one rule matching up to an element CSS will choose the higher weighted rule and display that markup to display for the end-user.

Because writing CSS code can be time-consuming, the adoption of CSS frameworks came about to help ease the process of writing lines and lines of these codes.

In Frameworks We Trust

Conceptual image of a css framework flag.

In other words, CSS frameworks were developed for the ease of creating sites and pages so we aren’t repeating the same lines of code over and over and over again.

At the same time, some frameworks were also built upon Ruby gems to create the most CSS standards-compliant pages and sites thanks to their CSS Preprocessors, such as SASS. These preprocessors take the static set of rules of CSS, and basically turn them into more of a programming language.

At ZURB, we’re proud to be the creators of one such helpful resource — Foundation. Not only do these frameworks help in building your pages faster, but they also help in prototyping your products with front-end code. In turn, allowing for rapid prototyping and rapid iteration.

Standing on our own ZURBsoapbox

CSS soapbox

CSS and our framework Foundation came in handy when building the page for ZURBsoapbox, our speaker series.

This was the first site we ever built on the Foundation. Using CSS code, we accomplished a few great advancements with the site creation:

  • A responsive site. Whether you access the page on a tablet, mobile device, laptop, or desktop, the site is going to look great.
  • Device-specific functions. If there are media elements on the page — such as images, audio, or video —Foundation found a way to utilize CSS code to actively hide such elements, based on what device you are using.

One (Code) To Rule Them All?

CSS One Code to rule them all.

As we have noted, CSS has many rules. All of which aren’t entirely random and drawn from thin air.

There is an organization, the World Wide Web Consortium (W3C), that manages and updates the specifications of the CSS language. With these specifications grounded, the ultimate vision is to have all browsers implement the W3C specs verbatim. But because of legacy reasons, older software that does not support CSS, this cannot happen — as of now.

Unfortunately, even with a set of general specs to follow with the CSS language, most web browsers do not have full CSS support, as they will choose which specs they feel they will support. Though, well-known browsers, such as Firefox, IE, and Opera, all have adequate CSS support. Safari and Chrome are built on the same layout engine and have excellent support. But each of these browsers operates on a layout engine that excel in different aspects of CSS.

Convoluted CSS?

With the differing rendering styles of CSS across browsers, many designers would just as soon — kiss a Wookie — cast it aside and attempt to work alone to ensure their greatest control.

Thankfully, many developers and designers came together and built upon these woes. With the introduction of CSS Frameworks, there are now tools that help circumvent the obstacles created with CSS interpretations amongst browsers. These frameworks have the ability to utilize — with the most ease — the general specs of CSS.

The U.S.S. CSS Slayer

A conceptual sketch of a CSS ship.

Bon Voyage! Au revoir! Godspeed! May you set your sails toward the seas of the web, armed to the teeth with the arsenal of a solid framework. Had you been without the framework the abundance of obstacles that you could have faced atop the seas of CSS could have ushered in certain frustration and chaos to those at the helm.

Even though CSS may still be rough around the edges for the browsers of the world, the core concepts are beyond beneficial for all of us designers. CSS has been set in place to help create beautiful and pristine designs for our sites and to help in keeping the clutter of code and content separate from one another. With frameworks at our disposal, it has never been easier to work with and interact with CSS in its glory.

Testing Your CSS Implementation

While you can’t review code yet in Helio, you can certainly test drive your implementation of it with an actual audience. Our Website Design Test Template lets you put your site in front of your target audience. You can spot check your code work easily. Simply customize the template to suit your needs!