What is CSS?

by Jesse Smith

CSS stands for Cascading Style Sheet, and it is the standard used to determine the appearance of HTML-based web pages.

Modern website design theory posits that content, appearance, and script-based functionality should all be kept separate from each other in the code. CSS is one way to separate appearance from content: stylesheets may be used to determine a web page's layout and appearance, instead of using additional HTML markup (such as now-deprecated implementations including font tags, layout tables, and the dreaded framesets).

To the coder, one major benefit of CSS is precisely that the styles cascade throughout a web page. That way, all the text on an entire web page can be set to, for example, 10pt Arial in dark blue, and the specification must be declared only once. Without CSS, every single instance of text would have to be wrapped in font tags.

So, CSS simplifies HTML markup, making the code easier to read, write and maintain. By using the same stylesheet for all the pages on a site, a web designer may build a website with a professional degree of consistency.

CSS does much more than determine text color. It can position the elements of a page, it can be used to specify background images; most designers now use the a:hover CSS attribute to replace complicated JavaScript rollovers.

But let's start at the beginning.

Linking Your Style Sheet

Technically, CSS does not have to be contained within a separate document, although as discussed above that is the preferred method. For single-use styles or for testing and development, CSS may be applied anywhere in the document with the use of style tags:

However, as mentioned previously, the Document Object Model of HTML coding prefers to separate style from content, so CSS is more commonly linked in the document's html head:

Cross-Browser Compatibility

One of the first things web designers must learn is that web browsers do not all render content in the same way. When in doubt, consult the W3C standards and attempt to use the most widely compatible standards compliant commands possible.

Some older browsers do not support modern CSS; it may be better to hide your stylesheets from such "legacy" browsers entirely. This may be accomplished through the use of an @import rule, which legacy browsers will simply ignore:

Styling Elements

We've already mentioned that a single command in your stylesheet will apply the style of your choice to every instance of a given element.

You can refer to an html element using any of four ways: assign a property to all elements with a given tag name; refer to the element's tag name in the context of its ancestor elements; assign and refer to a class name, which several elements may share; or assign and refer to a unique id property which is specific to the element you wish to style.

Let's make a sample box right here using an inline style for demonstration purposes only. In this example, we create two <div> elements and style those elements by specifying their attributes with CSS in reference to each element's unique id.

This is the CSS:

And this is the HTML:

<div id="box">
<p>This is my box.</p>
<div id="mini">
Box within a box.<br>
</div>
</div>

This is my box.

Box within a box.
Note that this smaller box is centered within the larger box, but that the text within the smaller box is aligned to the left.

Much more may be said on the topic of CSS. For an elegant overview of what stylesheets are capable of, pay a visit the Zen Garden of CSS Design.

For a professional website utilising CSS design techniques, contact Basementia Design.