6 August 2009
by 
Did you know that CSS is a language developed by web programmers who needed a way to have more control and flexibility when customizing the design and layout of sites on the net?
In recent years, font types, colors, and images were directly fed into a webpage with static HTML. Individual pages often mirrored others on the site with minimal changes made where content differed. The site design elements, that carried over from page to page, were copied to every single page of the site. This made .html pages very chunky increasing load time and required storage space.
So what changed?
With the introduction of CSS we became able to introduce page-wide style commands in the header of each page. The header was a centralized place to make changes across a full page but it still wasn’t enough to give us the freedom to make site-wide changes in a time effective way.
With the introduction of PHP (Hypertext Preprocessor) and ASP (Active Server Pages) however, webpages became fluid. Each page could be made ‘on-the-fly’ drawing on information that came from other webpages, other websites, and from databases around the world. With this freedom to weave information into a page we were able to step away from styling each page individually and create site-wide changes that influenced multiple pages with a single edit.
These days, .css is often the extension of a page in your site. It’s known as a ‘Style Sheet‘ and it influences your sites design and layout. The page itself is never seen by the average users of your site but the information affects the way they see everything.
Calling on Style!
In order for a style sheet to have an effect on a webpages design it needs to be ‘called’ as the site is loading. A simple command in the header of the site (between the <head> & the </head> tags), known as an ‘include’ or ‘link’ calls the style sheet. As the page loads it looks for the ‘include’ and adds that information as if it were a part of the original page, then translates the information in the style sheet, making changes to the way your page is viewed in your visitors browser.
If you have a chance, look at any of your websites rendered page and compare them with the raw code you can see when you ‘View Source’. The pages will differ based on the information ‘called’ during the loading of the page.
On PHP* pages an ‘include’ will often look like this:
<?php
include(“stylesheet.css”);
?>
You can use standard URL addresses to call pages and these can be used for all kinds of included content, not just style sheets.
However, Cascading Style Sheets have become so commonly used that new standards for calling them were created within the infrastructure the Internet.
Such as this <link> tag:
<link rel=”stylesheet” href=”http://www.craftingfiction.com/wp-content/themes/RLS-Rebecca/style.css” type=”text/css” media=”screen” />
Either method will effectively add the style sheet information to your Web page. Giving you an opportunity to dynamically affect changes across your site by updating the instance in a single, centralized location.
Want to learn more about Cascading Style Sheets? Let me know if you have any specific questions and I’ll add a new CSS primer soon! Or, if you’d rather I stick to writing about writing let me know.
* I’m doing examples only in PHP at this stage. If you prefer to work with ASP or need ASP examples please let me know in the comments.
Our RSS Feed location has changed!
Nice post. Many people get flustered when it comes to learning CSS, but it really is a more flexible way to work. I have to admit that it took me a long time to make the switch, and even now I sometimes use a quick HTML table as a cheat for certain jobs, but in general CSS is well worth the effort to learn (and even the headaches of getting it working cross browser!)
Nice blog BTW!
Billy shares: How to increase your web site traffic for free