Web and Graphic Design Blog

Developer Center

PGD — Sat, 28 Nov 2009 23:38:00 +0000

We have some interesting reference pages for developers.

Currently we have a safe web colour chart, printable ASCII codes and characters and a list of standard fonts with their respective substitute fonts.

Click the link below:

Developer Center

Adding CSS

PGD — Sat, 28 Nov 2009 21:11:30 +0000

Inline Styles:

An example of an inline style is below:

The css property “background-color” is only applied to the div “myDiv”. Inline styles should be used only when the more conventional methods (below) will not help.

Internal Style Sheet

When you have a page which has a unique style, using an internal style sheet may be the best option. See example below:

As you can see the style sheet must be added between the tags. This code will set all

tags within the current page to have a left margin of 20pixels and set the background image of the body.

External Style Sheets

When you need styles applied to many pages, an external style sheet is ideal. If an external style sheet is linked to all the pages on a site, one change here can change the look of the entire website. An example of an external style sheet is below:

p {color:red;font-size:14px;}

External style sheets should have a .css extension. They should only contain css code.

To link an external style sheet to a page, use the following code:

Again, notice the above line is located between the tags.

How css cascades

When a tag has a number of css styles applied to it, which one will it use?

The priority order for css is as follows (1 is highest and 4 lowest priority):

1. Inline style

2. Internal Style Sheet

3. External Style Sheet

4. Browser Default

So an inline style will override everything else.

Note: If the external style sheet is linked in after the internal style sheet, the external style sheet will have the higher priority.

CSS Image Preloads

PGD — Fri, 20 Nov 2009 12:42:23 +0000

It can be useful on occasions to preload an image. This means the image is loaded with the page. Not after it.

For example, you have two images. One of a car and one of a motorbike. When you hover over the car with the mouse, it changes to the motorbike. The first time you hover over the car however, there is a delay while the motorbike image is downloaded. This is because the motorbike image was not preloaded.

Javascript can be used to preload an image. This is not ideal however as it’s a little tricky and not all browsers support javascript.

The easiest solution is to use CSS. The code below will preload the motorbike image:

A better way is to create a class. Assign this to any images that need preloading:

Image preloading can also be used to load images for a different page. Once the browser has cached the image it will be there whenever it’s required. For example, you may preload product images in your index.html file, ready for when a user clicks on your products page.

By putting the image preload CSS code at the bottom of the index.html file, the preloading will happen after the content has been sent to the screen. Therefore the user is not waiting for content to appear.

Hope this helps and thanks for reading.