|
|
|
Comprehensive CSS Guide
Tutorial written and contributed by
Marcus Kazmierzak of Web Blazonry.
Edited/ minor additions by JK.
Please see tutorial footnote for additional/bio info on author.
This tutorial will guide you, from the ground up, how to
code CSS (Cascading Style Sheets). A subsidiary of HTML, the technology has
quickly become a must-learn for amateur and professional webmasters alike.
 Introduction
CSS are text files, or special text in a HTML file, which allows you to
specify styles, formatting, 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. Furthermore, CSS is now supported (to some degree)
by most browsers (IE4+, NS4+), making it a very practical technology.
|
