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.

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).

Although many designers would recommend you set default site sizes using the body tag, I like to leave the body tag set to auto width. The reason being, I may like to have a part of the layout that stretches 100%. If I set my body width to a set amount, then I will not get that ability to have that 100% footer width that I want in the layout. I like to containers. They provide the flexibility of having different width sizes for each portion of the layout.

In CSS you can re-define a typical tag such as p (paragraph), body, fields and h1 (heading 1). You can also create something called classes and ids designated by “.” and “#” signs respectively. A class can be used more than once on the site, however, an ID can only be called once. One thing that most designers find out the hard way is that you cannot just use number as a class or id name. The “.” or “#” must be followed by a letter. If you use a number and then a letter, it will not work.

How It Looks

This how a typical tag, class and id looks:

1
2
3
4
5
6
7
8
9
10

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

P { Property: Value; }
.CLASS { Property: Value; }
.ID { Property: Value; }

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

“Property” is the CSS element you wish to manipulate and “VALUE” represents the value of the specified property. P, CLASS and ID’s are selectors. CLASS and ID can be replaced with any name you wish to give it.

This is it for part 1 of this Starters Guide to CSS. Stay tuned for part 2.