CSS, abbreviation for Cascading Style Sheets, is a style sheet language that helps define how to display HTML and XML elements in a document/file. Style sheets, in general, are a very powerful tool for the web-designer. CSS gives you the ability to be completely consistent with the presentation semantics (look and feel) of your site, while giving you much more control over the layout as compared to straight HTML. It was designed primarily to enable the separation of document content from document presentation which would help provide more flexibility and control in the specification of presentation characteristics. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice and on Braille-based, tactical devices.

Format and Discovery

Browsers and CSS

Browsers are typically designed for use of displaying general HTML and other coding languages, not really for the designing aspect. However, due to the recent web 2.0 revolution, many browsers have changed and upgraded to allow styling and beautification of websites. Even with this, not all browsers are compatible with all styling languages. CSS is a very flexible language that can provide much if used right. This language uses many commands that are not always compatible with all browsers. Getting cross-browser compatibility is a hard task. In one browser, the layout might look good, but in another, the structure might be completely disoriented. This is where the decision making comes into play. Although you can have complete full browser compatibility, it can be a big headache. Often you have to choose whether you want to go through the headache of getting it fully compatible or just ignore the issue at hand. A designer is typically faced with the decision making of choosing the focus browser (browser you test while coding your layout) and the browsers that need more attention after having it coded on one browser. I frequently use compatibility charts to help me decide my focus browser and those I need to work on after.

Getting Started with CSS Style Sheets

CSS is fairly similar to general HTML commands. You have your standard styling tags such as typography, dimensions and geometry. However, unlike HTML, CSS provides a lot more flexibility. Every designer has their own preference. I generally start off creating a browser reset style sheet (see browser reset section). I then start with defining the body tag styling and the general styling commands (such as typography, links, blockquote, code, headings, paragraphs and clearfix’s).

How It Looks

This how a typical tag, class and id looks:

P { Property: Value; }
.CLASS { Property: Value; }
.ID { Property: Value; }
selector [, selector2, ...][:pseudo-class] {
property: value;
[property2: value2;
...]
}
/* comment */

A creative thinker & UX designer striving to bring forth deserving tools to the lime light. Co-founder of @BeeBackApp.

A creative thinker & UX designer striving to bring forth deserving tools to the lime light. Co-founder of @BeeBackApp.