XHTML help, using XHTML and CSS

CSS Tip: CSS Equivalent to CELLSPACING=0

admin — Wed, 20 Feb 2008 14:10:53 +0000

When using the TABLE tag, there are two attributes that are commonly added; cellspacing and cellpadding. For padding, there is an obvious match with the CSS definition padding. Indeed the attribute for padding-top, padding-bottom, padding-left and padding-right all behave as expected. However there is no directly corresponding property for cellspacing. One might assume that the margin property would provide the same functionality and layout control, but it does not apply to table cells.

(more…)

CSS SHOUTING! - changing text case with CSS.

admin — Wed, 24 Oct 2007 11:16:31 +0000

Ever had to wade through pages of text on a website to amend the appearance of titles or paragraph headings, to make sure they all look consistent?

It can be no fun, especially if you have a site which has content added by multiple authors, all with slightly different preferences in typing.

Should text be: ALL UPPERCASE? all lowercase? Or Capitalised? With CSS you can define the appearance of text with the text-transform property.

(more…)

CSS Tip - Scrollable DIVs; using overflow, overflow-x and overflow-y

admin — Mon, 01 Oct 2007 12:53:14 +0000

An alternative to FRAMES and IFRAMES within a XHTML document where page layout is fixed, but content needs to be within a scrollable area, is to use a DIV and set the CSS attribute ‘overflow’. This is relatively straight forward to do and works in all modern browsers. In the event that CSS is disabled or the content is read by a search engine spider, the DIV behaves like any other block level element. This avoids the problem associated with FRAMES and IFRAMES where a search engine does not relate the frame content to the parent page.

(more…)

CSS Basics - CSS color / colour codes

admin — Wed, 12 Sep 2007 13:22:10 +0000

Black text on a white background can get kind of boring. It looks a little old-school too. Here is how to spice up your site with a little color. There are several color values that you can use

Three digit hex
Six digit hex
Integer
Float

(more…)

CSS basics - font-weight and font-style

admin — Wed, 22 Aug 2007 09:35:03 +0000

The appearance of text can be further controlled on webpages with the font-style and font-weight properties which provide the ability to italicize and bold text.

The use of these definitions is a replacement to the deprecated tag and

(more…)

CSS Basics - font definitions

admin — Mon, 06 Aug 2007 12:46:47 +0000

Since font tags are deprecated, CSS should now be used to specify document fonts. There are several properties available of which, the most commonly used are the font-family and font-size.

eg.

font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;

(more…)

CSS Basics - Structure of CSS style definitions.

admin — Tue, 24 Jul 2007 10:32:43 +0000

The basic building blocks of CSS are rule sets. Each rule set is comprised of a selector and a declaration block. Each declaration block has zero or more declarations, or styles. Here is a basic rule set:

p { background-color:#ffcc00; font-size:120% }

(more…)

CSS Basics - How to comment CSS style definitions.

admin — Mon, 16 Jul 2007 18:06:22 +0000

One important practice when creating Cascading Style Sheets (CSS) is to include comprehensive comments in the files. This will help to keep things organized and well documented, which is priceless when it comes to maintaining a site for several years, and avoiding future frustration!

This is the basic structure:

/* your comment here */

(more…)

CSS Basics - Where to put the style definitions.

admin — Thu, 28 Jun 2007 10:03:10 +0000

Fundamental to XHTML is the concept of separating presentational elements from structural elements. This is achieved by the use of Cascading Style Sheets (CSS). CSS can be included in documents in several ways; inline, embedded, and external. It is not recommended to use the inline method for styling documents because it defeats the purpose of separating presentation from structure. If there is no other alternative, it is possible to include the style attribute on almost any element.

(more…)

XHTML Basics: Accessibility for tables; captions and summaries

admin — Wed, 20 Jun 2007 17:35:18 +0000

If you want to create great tables that are understandable in alternative browsers, such as text-only and voice browsers, you’ll want to include table headers. Our accessibility tweaks don’t stop there though. Two more elements that will make your tables more usable and informative are captions and summaries.

(more…)