CSS Tutorial: Introduction

Cascading Style Sheets (CSS) are text files, or special text in a HTML file, which allows you to specify styles, attributes, and positioning of HTML objects.

What do you mean style?
Style is what gives an item its distinctive look or feel. For text it could be what font is used, what color, size, or spacing. It also applies to other HTML objects such as links, images, backgrounds, margins and borders.

How can I benefit by using CSS?
Some of the benefits to using CSS are more consistency, better layout and visual design, plus easier HTML coding. Also you can do things with style sheets that could never be done before.

• consistency This would apply for larger sites, and many different developers, which is the environment I am currently working in for the Department of Education.

  A site-global style sheet could be set up, which all pages would refer to. This sheet could include the look and feel you want for the complete site. Each page would maintain the same attributes throughout the site. The ability to change one item, on one page can change the same attribute on your whole site.

• easier coding No more elaborate tables, and complicated HTML. This will also greatly benefits the large multi-contributor web environments.

  The HTML code using style sheets is much simpler. The code reverts back to what it was in the early simple days. Just using header tags (H1, H2, ...), and paragraph tags with style sheets can produce a rich document, with the help of a SPAN and DIV tag here and there. (but that's getting ahead of myself)

• rich design and layout Cascading Style Sheets bring professional layout and design control to HTML documents.

  Here's a brief listing of what you can do with style sheets that you could only do with an elaborate work around, or not at all.

  • exact positioning of elements
  • font control (size, color, family)
  • white space control, margins, leading
  • background control (placement, repeat, ...)

One of the best features of style sheets is its ability to degrade nicely with older browsers. Most CSS styled documents still appear perfectly readable and formatted when viewed in a browser that does not support style sheets. It may not look as nice, but the content is still there.