Cristina's Cascading Style Sheets

Please note: Every link on this page opens in a new window. If your "Pop-up killer" is too efficient it can also stop new windows. When this happens, please press "Ctrl" and click on the link you want.

The purpose of Cascading Style Sheets

The HTML code is developed and renewed by the World Wide Web Consortium - W3C. Due to requirements mainly by big websites, the organization has been striving to separate content and page structure. This is done with CSS ( Cascading Style Sheets ) specifying the display ("the look" of the page). Info about style sheets is found in

, English,

, and Español.

With the content separated from the display instructions it was thought easy to prepare different kinds of documents for different uses and systems ( platforms ), like webpages and XML documents, while the content is identical in the different documents. An other reason for separation of content and structure is the increasing use of Content Management Programs. These programs require separation of content and structure.

With a website having about 100 interlinked pages it's still possible - with a very good memory - to manage and up-date content ( including links ) manually. When you get more ( even 10.000+ ) pages it's no longer possible without a special computer program.

The more complicated content management system you get the more time you will spend managing your system, instead of spending your time developing better content. Some blogging tools ( for instance Wordpress ) can be used as a simple Content Management System to update and manage your websites.

With less than 100 webpages you still don't really need to use full style sheets and content management, you can use Desktop Search. Most search engines offer a free desk top search engine program but I would hesitate to download any of those. I prefer for myself something independent from search engines.

Pro and Con with Cascading Style Sheets

Furthermore, I do not recommend using special font or some funny font and link colours. Everyone reads easiest and fastest the kind of text ( font ) he/she is accustomed to. When you do not specify the font in any way, you don't need CSS at all. See also Don Pedro's Writing your Page Code.

The only instance I can think of, where style sheets are better than HTML, is when you make pages especially intended to be "viewed" by screen reader. In addition to that, there can be some occasion when there's reason to use a single or may be two CSS tags for some special effect that's not possible to produce by HTML. See 3-column layout with CSS or you can employ a 3 column CSS code generator, which gives you a template you can then use for every page.
Style Sheets for printer friendly copies or pages.

CSS would also be useful for those site owners who have a lot of dynamic content ( changing content ) like: blogs, forums, pictures of products ( e-stores ) where big groups of pages need layout changes at same time. With CSS that work could be done faster and cheaper.

Otherwise changing the outlook ( design ) of all your pages - once the website is already well known and recognized by visitors - would be like changing the image of your main product or may be for your company. What if Coca Cola suddenly decided to change the look and feel of their bottles?

When you absolutely have to use full style sheets you can compress the code, thus getting faster download or you can download a code "compressor". Generally one can say the more complicated the code, the greater the headache. I have read about a website where the CSS code on every page was 27 print-out pages!

When you have to put either the style sheets or a call up code ( with style sheets as external scripts ) in your <HEAD> section it doesn't work on free servers. If you use your external style sheets to hide something from the search engines -beware: in December 2006 Google started to index external style sheets with the express purpose to detect spam.

List of links to CSS coding and de-bugging sites. See Common CSS problems. Style sheet scripts for experimentation with translations into French, Italian, and Spanish.

A very comprehensive reference source for CSS.

Browser problems

When the browsers save the style sheets in the cache ( browser memory ), only the first webpage of a website downloads a little bit slow, while all subsequent pages from the same site should display very fast, because the display instructions ( CSS ) are already in the browser's cache.

Unfortunately all browsers do not work the way the planners intended them to do. Mozilla Firefox is saving style sheets separately. It's what usually happens when architects and other planners want people to do something in a certain way. Most people find it easier to do it their own way instead. Because different browsers download the style sheets' differently the result is a CSS page is sometimes displayed more slowly than a page in simple HTML.

Firefox v. 3.0, Opera, and Safari do read Cascading Style Sheets reasonably well, but problems still persist.

CSS 2 was furthermore not designed with three-column lay-out in mind. CSS 3 has therefore been added in 2007 with a grid positioning module. But it will take a long time before browser manufacturers have got that included. And even longer before those browsers come into common use.

Because all browsers have some ( different ) bugs, there are certain CSS properties that doesn't work very well. The most common way to deal with this is to write browser specific CSS code and employ a "browser sniffer". In other words the CSS code is hidden in JavaScript, which makes it even longer and more complicated.

A good example of problems with this approach is the release of IE7. Most webpages that were built with unconditional browser specific code broke down. This was because IE7 is slightly more standards compliant than IE6. In other words the problem wasn't IE7, the problem was the old bugs in IE6 had been fixed in IE7. Of course, a browser specific code isn't standards compliant either. All webpages that relied on tables based layout and transitional doctype tag worked just fine.

When deciding between CSS positioning and layout tables use your common sense. If you want to experiment, that's fine as long as the result is intended for yourself and your peers only. If you want the maximum number of visitors to enjoy your webpage use what works best - that's still layout tables. Layout tables are and will stay ( for the foreseeable future ) the easiest and the most reliable way to arrange horizontal display of content blocks on a computer screen. See also about XHTML and layout.

Firebug 1.0 β, free (donations accepted) CSS editor and JavaScript debugger. Works as a Firefox extension. Solutions to Bugs & Cross-Browser, Cross-Platform Issues (CSS).

CSS Rules for Sub-Headings

When you use <h2> for your subheadings you get one empty line above and below the headings. To clearly indicate the text and the subheading belongs together you can delete the empty line below the heading (for instance this page). For this you cannot use HTML, you have to use Cascading Style Sheets.

When you use a free server you cannot put the Style Sheet into the <HEAD> section. BUT you can put a short Style Sheet into the <body> section immediately after the <BODY> tag.

Example:


<body>

<style type="text/css">

h2{

   margin-bottom:0px;

   }

   .underheader{

   margin-top:2px;

   }

</style>

Text body starts ...

When leaving empty space after the <body> tag it's interpreted as one empty space and that's where the server banner comes, in other words the banner code will not cut off your style sheet in the middle.

According to W3C recommendations the style sheets should go into the <HEAD> section so when you put them into the <body> section the page will not validate. But because of the server banner your page wont validate anyway, so it doesn't matter. All browsers will, however, display your layout correctly.

CSS for Handheld Devices

From the server logs at my maritime website I have noticed some visitors coming through "Nokia browser" and there are some "Unknown" browsers, which could at least partly be handheld devices. There are, however, so many different browsers for mobile phones and other small appliances browsing the web it's impossible to adjust your webpages for them all.

Anyway you cannot make your webpages look exactly same ( identical ) in every browser. You can only try your best to keep the webpages useful for almost all of your visitors. One way is to change your code so your menu comes last in the code but at least on computer monitors appear in your left side column (see Advanced Layout Tables). This I have tested and the menu in this case will appear, for instance in the Nokia Communicator after the text, which is OK on such a small screen.

Another problem with handheld devices is for instance ad banners, especially if they contain graphics. Text ads work fine but graphics takes too long time to download with a phone (it's also more expensive) plus the graphics can cause some other problems. I'm not at all sure every mobile phone user have switched off images when surfing the Web.

For these users you can add a separate style sheet, get advice on CSS for handheld devices. You add the CSS code on your own pages, most of these browsers will download a "handheld" style sheet.

Cascading Style Sheets (CSS) - Pro and Con

The purpose of Cascading Style Sheets

Pro and Con with Cascading Style Sheets

Browser problems

CSS Rules for Sub-Headings

CSS for Handheld Devices