Spire,
CSS is about far more than colors and fonts.
CSS allows for full control over the positioning of elements within a page. An element may be a simple, singular tag (an image), a more complex structure (
e.g. a form, a table) or a group of elements that serve a single purpose (a header, a news article).
Essentially we identify these elements on a page and apply styles to them. The more complex structures are identified as divisions of a page (the div tag). By identifying and tagging (using either the id or class attribute) each structural part of a page can be positioned with in the page.
All of this requires a basic, working knowegde of
CSS so try
this site.
For some specifics on
CSS layouts the following sites are useful
http://glish.com/css/
http://www.csszengarden.com/
http://css.maxdesign.com.au/floatutorial/
http://www.alistapart.com/articles/negativemargins/
http://www.alistapart.com/articles/journey/
http://www.allmyfaqs.com/faq.pl?Tableless_layouts
Why
CSS?
CSS breaks the link between the content and it's presentation. What does this mean? This means that the
HTML page contains the logical markup of the content
i.e. headings, paragraphs, images etc. But not where these should be positioned on a page.
For a really good example of this in practice see
http://www.csszengar…/098/098.css&page=1,
http://www.csszengarden.com/?cssfile=/101/101.css&page=1 and
http://www.csszengar…/102/102.css&page=1. At first glance you'll see three very different pages... But take a closer look.... View the source of each page and you'll notice it's exactly the same page with different stylesheets applied. This is a really 'in your face' example of the seperation of content and presentation.
Why is this important?
1) Ease of modification - This is less important in the
CMS arena since we're working with a database but the prinicpal here is important. If each page contains layout information then you have to update each and every page containing that layout.
As an example let's take a medium sized (100 pages say) handcoded site using a tables based setup. Now let's move one 'block' from the left column to the right. In order to do this we'll need to edit each page containing that 'block' of
HTML code. In a
CSS layout (as you've seen above) a simple stylesheet change can change the location of any 'block' of content on a page
2) Accessibilty - This is the biggest driver behind
CSS based tableless layouts. You and I use a web browser to access our content from the web. This isn't the case for every user. There are many other user agents in use from mobile phones, pdas etc. but there are also a bunch of non-visual user agents
e.g. screen readers that take our web content and serve it out in a completely different way to that of a standard browser.
An important factor in accessibility is ensuring that your site functions for these non-visual user agents in addition to the more traditional ones. Although screen readers are getting better and better they still struggle to understand the intent of table when it may of be used for layout or may have been used for content - how does a computer program distinguish the intent that you had when you designed your site.
The misinterpretation of tables (see 3) is one reason for doing away with them for accessibility sakes but there are others.
Accessibility guidelines provide a recommended order for the placing of content on a page so that they perform optimially within the sreen reader enviroment - imagine that every piece of text in every left block you had being read back at your before you actually got to the content you where interested in on a page.
Now, as discussed already,
CSS breaks the link between content and presentation so we can have the content rendered first in the
HTML but laid out between the blocks for visual user agents. Table based layouts inherently tie the layout of the page to the order of content in the markup. So although someone said tables can be made accessible this isn't really true (there are differnet levels of accessiblity).
3) Semantically correct usage of markup elements - I'll sum up this one simply; a table is a table is a table, a list is a list is a list.... etc. To expand on this a little bit.. Each markup element should be used for the purpose for which is was designed
i.e. tables should be used to represent tabular data. Lists should be used to present a list of items
Using markup elements for this purposes for which they're designed makes it easy to style the entire site, makes it easier for browers and other user agents to render the resultant markup and ensures that you get the best consistency across all user agents.
Why should we care?
If you know your target audience then you may not. If your only designing a site for a known set of people then you can design the site with them in mind. If this isn't the case then there are many reasons why you should care.
a) If your site is a business site can you afford to turn away customers simply because thier not accessing thier site via the user agent that you deem acceptable.
b) If your site is a public sector (goverment, education etc.) then you have a moral and ethical duty to provide access to content to ALL your citizens, students etc.
In fact there is legislature in a number of countries stipulating accessibilty requirements for goverment web sites so it's important to be aware of this. The most published being the
American Rehabilitation Act Section 508.
Summary.
Sorry for the long post (but you asked). This gives you a basic intro to what
CSS layouts are from a technical perspective and why thier an important part of modern web development
-Mark
--
Visit
My homepage and
Zikula themes.
