Sunday, November 20, 2005
Introduction to CSS
Introduction
Cascading Style Sheets (CSS) is a means of separating presentation elements (like bold, italic, underline and many more) from the actual content of a webpage, and gives many more presentation options compared to HTML (which was never intended for presentation).
CSS when defined correctly overrides the viewers browser's default settings for displaying HTML tags like p, hr, table, a, headings etc. Properties such as color, background, margin, border, and many more can be applied to elements making them more versatile and attractive than with HTML alone.
Finally it adds new attributes such as text spacing, line–height, different border types and styles, padding, margins and list attributes to name bit a few. New attributes are added as CSS is updated … CSS3 is the latest …. although CSS1 is most widely implemented and some CSS2 is used in more updated versions of the browsers, although unfortunately with some inconsistencies among different browsers.
See http://www.corecss.com/properties/full-chart.php for a very comprehensive list of CSS properties implemented by different browsers.
A single small text file of styles can control the appearance of all pages on a website linked to that external file, without CSS each of these pages would be partly comprised of formatting codes that would have to be downloaded with each page, adding greatly to data transfer. It is less cluttered, and making it easier with a few keystrokes in your style sheet to change all the pages’ presentation no matter how many pages on your site. It also makes it easier to change the content of the page as you don’t have to hunt out your content sections amongst the formatting codes needed without CSS, and with appropriate naming for classes and divisions you can easily find a section of text you may need to change.
In these posts I have used "[" instead of "<" so as not to confuse the browser into thinking what follows is a style statement. So just swap "[" and "]" for "<" and ">".
For example, while you could use [hr width="75%" size=”2” align=”center”] for every horizontal rule, this is a lot of work. With style sheets, you only need to specify the values once in a file (style sheet), and the style can be applied to an entire site. And if you decide that width="90%" would be better, then you only need to change the value in one place – the style sheet.
With style sheets, authors can use the text-indent property to indent text, rather than resorting to [img src="blank.gif" width=”10” alt=""] work-around.
CSS is intended by its creators (W3C) to replace HTML table-based layouts, frames, and other presentational hacks. In fact purist CSS users discourage the use of tables for anything but the presentation of tabular data i.e. no tables to ensure you page with images etc presents properly on screen.
It is also enables you (or will in the future) to create aural style sheets for the sight impaired, which give the speech capable browser commands to follow e.g. Pitch, Volume and Speech rate. Style sheets made for printers makes a printer friendly version of the page like margins, page breaks set to suit A4 paper for example.
In terms of SEO it means your page is full of content, not [font], [centre], [color] etc, so a search engine robot can do its job properly, picking up on important words.
CSS is here to stay as HTML 4.01 has depreciated some elements in favour of the equivalent CSS command.
CSS was introduced with IE3, NN4 and OPERA 3 versions, and currently versions above IE5, NN6, FF1 and OP5 support all CSS1 implementations.
Versions 6 of most browsers support many BUT NOT ALL CSS2 implementations, and different browsers differ in what and how they interrupt CSS2. This leads to a whole culture (in internet discussion groups) of work-arounds, making alternate CSS for different browsers or Operating Systems (NN v IE v Opera v Firefox, MAC’s v Windows), “IE white-space bugs”, “3px-text-jog bug” etc, all of which is deviating from the “beauty and simplicity” of CSS.
This tutorial series is BASIC CSS so I won’t go into this. There is a whole lot of basic CSS that IS implemented correctly by the modern browsers, and hopefully it will get better as browsers catch up to W3C implementations.
What does it look like?
---------------------------
HTML tags have a default style and display according to some basic rules.
One way (see below for other) they can be overridden is via an inline style using the STYLE attribute on the tag, which many of you may already use is.
[p style="font-color:black; font-size:2;font-family:sans-serif;"]Some text.[/p]
However, this method only affects that particular instance of a tag, therefore each occurrence must be styled, and on a big page it can look a mess. Style sheets provide ways to apply styles to all instances of a given tag, or to named subsets.
the same HTML page with CSS might look like this:
[p]content content content[/p]
The content will appear the same on both web pages ***when an appropriate CSS file is used in the second page***
with something like this in it :
p {font-family: sans-serif; font-size: 12px; color: black;}
and downloaded ONCE with the page.
Notice above how the 2nd CSS example is sooo much smaller and simpler:
[p][font color=”black" size="2" face="sans-serif"]content content content[/font][/p]
verses
[p]content content content[/p]
