Core CSS
Times have changed since the web as we know it began, a mere few years ago every element on every page had to be
given a specific set of formatting and parameters to even allow you to gain some control over it - this lead to
inconsistent designs, pages bloated with all those extra characters, not to mention being a complete nightmare to
maintain. The solution to this problem came in the form of cascading style sheets or CSS for short.
This extension to HTML enabled designers to separate content and formatting on their pages, not to mention allowing
seemless access to a variety of parameters and settings, which were previously extremely troublesome, or in some
cases impossible, to access.
This article is going to run through some of the basic ideas behind creating your first style sheet, and then from
there it will expand upon those concepts to teach you some of the more advanced ways you can use CSS to simplify
formatting within your pages.
Background
The technology that allows CSS to work in the first place has been around for a few years now, but due to factors
such as the slow increase of minimum browser specifications, poor support for CSS in the older (version ≤4
browsers), and the amount of work involved in converting to a totally CSS oriented website has meant that the mass
exodus from using embedded formatting to using style sheets for formatting has taken a while to reach its full
potential.
Now that the majority of the corporate users have upgraded to browsers which support style sheets in a sensible
manner and as websites get overhauled to enable them to more efficiently on new hardward and platforms, that
critical mass grows ever larger.
In the last three to four years, the number of users capable of viewing a site using CSS has become ever larger
until they were in the majority, meaning that when designing you can rely on stylesheets as your primary method of
formatting pages, knowing that the few users (who for one reason or another cannot view those stylesheets) will
still be able to read your site - albeit without all the bells & whistles your formatting provided.
Within that same time-frame those corporate websites which were being re-designed have been built using stylesheets,
and to be perfectly honest I think you would be hard pressed to find a commercial site which does not use
stylesheets yet still hopes to be able to compete with it's rivals - investment in technology is not just about that
technology which runs the site, it is also about the technology which assists in rendering your pages once you have
passed them to the user.
Definition of a stylesheet
Before we get too deep into this topic it makes sense to quickly explain what a stylesheet is. They are descriptions
of how to render markup, they allow you to create new formatting styles or even over-write existing ones - don't like
the way a
<CODE> tag renders? With a stylesheet you can change it!
To quote the W3C:
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
A stylesheet is normally composed of a number of formatting instructions called styles, the core of a which is a block
of self-contained instructions which can be used either in isolation or combined with other styles to enabled you to
end up with a blend of the two styles. For example you might have a block of grey text, and inside this you use an
element which has instructions to use small text - the result is that you get small grey text, as it will have
inherited certain attributes from it's parent element.
So how does all that help you out? Well I will give you some detailed examples in a moment, but for now lets go with
a trivial example.
You only need to assign that grey text style to one element, and unless you decide otherwise, all the other elements
under it will use that same font color, font size and font name! I've been around long enough to remember when you
had to assign individual attributes to each element, on every page, each time you wanted to use it - using a
stylesheet allows you to retrieve all your formatting from one place and have it automatically map onto elements on
the page with no extra typing, and if you want you can even use that same formatting on other pages too.
Advantages
There are so many it is hard to know where to start!
An obvious one is that it reduces the amount of work needed to create a page and have it look as you want it to -
you can override existing formatting, making it trivial to assemble a page from stock elements without needing to
worry about adding the correct formatting to all the elements you want to use.
Taking the previous point to the next logical step since the pages need to contain less formatting attributes
you have a smaller physical size of page, this means that your pages will be able to be downloaded faster, rendered
faster and be seen by the user faster. On the web being able to get your information to the user faster than your
competitors is a definite bonus - if my page loads before yours the user will read mine while they are still waiting
for yours to load. If mine has what they want then why will they bother to read yours?
Given that a well thought-out stylesheet is not limited to being used on just one page, it becomes possible to style
an entire site using that same stylesheet, this results in your pages all having the same formatting which makes
visitors feel more comfy with your site. If a site has all its pages styled with a similar visual theme then it looks
more professional than one whose visual theme jumps from page-to-page, which ends up with the visitor being surprised
by the changes which takes their attention away from the content. Also a single theme helps as a visitor will not
get distracted by formatting glitches you have overlooked, meaning they spend their time looking at the site
content rather than their eyes being immediately drawn to your visual glitches.
Final point is to remember that paid hosting often allows you a certain amount of bandwidth in any given month, but
over that you are charged an additional fee for every number of units you use up. If you can reduce the overall
size of each page then that means you are going to be able to get more page views out of your bandwidth - in other
words getting more page views out of the same money - whatever way you look at it that does sound good.
Disadvantages
The biggest problem facing you as with stylesheets is that although the basic formatting options work in a standard
fashion across the new browsers, you will sometimes get the odd problem with them. However if you utilise the more
advanced formatting options, nearing the cutting edge to start to find that you will be doing a little tweaking here
and there to get it all working in all the major browsers.
In one of the paragraphs above us it was mentioned that stylesheets allow the designer to save space - well this is
only true as long as the stylesheet stays relatively bloat free. If you are not careful it is very easy to find
yourself with one very large sheet you are using on every page, at which point you need to go back and see if any
of the styles can be marged to shrink the file a little.
Lastly you have one of the minor problems, but a problem none-the-less - degrading gracefully. When a user visits
your site, they should still be able to see the content - even if their browser does not render the stylesheets, or
an element of that stylesheet. The objective of a site is to stay accessible to all - overuse of effects which
drastically alter the way the markup is displayed on key elements can reduce your carefully laid out page to a
meaningless pile of text if you are unable to degrade gracefully.
Continued on
page 2 - "How to include styles & style sheets into your pages."