It may be tempting to simply include the cellpadding attribute within the table, though there is a CSS equivalent that can be used :-

border-spacing: 3px;


This allows the spacing between cells to be controlled the same as would be possible with cellspacing but with a CSS only solution.

One of the commonest reasons for using cellspacing is to remove any spacing at all from table cells, with cellspacing=0. Historically this has been when tables are used for layout purposes. Whilst this is no longer advisable for layout, there are times when tabular data can benefit for zero spacing. With CSS this can be accomplished as follows :

border-spacing: 3px;
border-collapse: collapse;

The full affect of table cellspacing with a CSS only solution.

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.

The values of the text-transform property can be any one of: none, capitalise, uppercase or lowercase. When these are applied to a CSS class or definition, it becomes possible to ensure that all text is displayed consistently. The following examples will all use paragraph headings <h3> with inline CSS for convenience. CSS will be used to transform the text appearance.

this text is all written in lower case

Title has the following CSS property and HTML/text: <h3 style="text-transfrom: uppercase;">this text is all written in lower case</h3>

THIS TEXT IS ALL WRITTEN IN UPPERCASE

Title has the following CSS property and HTML/text: <h3 style="text-transfrom: lowercase;">THIS TEXT IS ALL WRITTEN IN UPPERCASE</h3>

this text is all written in lower case

Title has the following CSS property and HTML/text: <h3 style="text-transfrom: capitalize;">this text is all written in lower case</h3>

NB: it is important to note the spelling of capitalize with a z – spelling the value capitalise is not a valid value.

Whilst this property is particular useful for headings and it also value in lists <ul> / <ol> <li> – and navigation / menu text. By giving the user a consistent text appearance for these items it helps to make a website interface much more intuitive.

There are three variations to the 'overflow‘ attribute and four possible values;

The variations are:

• overflow: Set property for both vertical and horizontal scrolling. Widely supported.
• overflow-x: and overflow-y: Set property for each axis; vertical and horizontal. Variable browser support.

Acceptable property values are:

• Visible: text will render outside the element beyond DIV dimensions;
• Hidden: Contents will be clipped, unable to be seen outside DIV dimensions
• Scroll: Contents will be clipped, with a scroll-bar to see the rest of the content
• Auto: No scroll bar, unless content is larger than DIV dimensions.

NB: Some browsers do not support the overflow-x and overflow-y properties, which can lead to unexpected layout problems when you only want the DIV to scroll on one axis. To ensure maximum compatibility use both overflow and overflow-x and/or overflow-y. The following example displays a DIV which by default has auto scrolling, but for browsers that support overflow-x, only scrolls horizontally:

overflow: auto;
overflow-x: scroll !important;

Code fragment:

<div style="overflow: auto; width: 600px; height: 50px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pretium est ac mi. Sed eget sem vitae justo viverra nonummy. Sed adipiscing. Nullam pretium adipiscing ligula. Aliquam vitae dui. Nam enim arcu, hendrerit et, iaculis lobortis, posuere euismod, lacus. Praesent scelerisque lectus a urna. Morbi interdum. Aliquam adipiscing. Aliquam in mi. Pellentesque ac lectus id purus hendrerit
euismod.</div>

An example can be seen in action here…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pretium est ac mi. Sed eget sem vitae justo viverra nonummy. Sed adipiscing. Nullam pretium adipiscing ligula. Aliquam vitae dui. Nam enim arcu, hendrerit et, iaculis lobortis, posuere euismod, lacus. Praesent scelerisque lectus a urna. Morbi interdum. Aliquam adipiscing. Aliquam in mi. Pellentesque ac lectus id purus hendrerit euismod.

• Three digit hex
• Six digit hex
• Integer
• Float

The two most common are the three digit and six digit hex values. They take the format #RGB and #RRGGBB where R stands for red, G stands for green and B stands for blue. The color codes need to be prefaced with a # sign, to indicate that they represent a hex value. The shortened three digit version is used when each of the RGB value pairs are the same, thus, #ff00ff could be abbreviated to #f0f. A discussion of RGB values are beyond the scope of this article, but a commonly used set of colors is the ‘web safe’ palette. This consists of the 216 colors which will reliable display correctly on all monitors, including older 256 color screens.

Some common values are:

• Black: #000
• White: #fff [white!]
• Red: #f00
• Blue: #00f
• Yellow: #ff0

To color text, or foreground colors use the color property:

p {color:#f00}

To color the background use the background-color property:

p {background-color:#00f}

Borders also have color properties, set by using the border-color, or border-top-color, border-left-color, border-right-color, border-bottom-color values.

Final there are 16 officially named colors designated by the W3C, these are :-

• aqua
• black
• blue
• fuchsia
• gray
• green
• lime
• maroon
• navy
• olive
• purple
• red
• silver
• teal
• white [white!]
• yellow

The use of these definitions is a replacement to the deprecated tag <b> and <i>

font-style

The font-style is used to make text italic, oblique [Whilst this is a different definition, where the text is intended to be a slanted normal font, the result in most browsers is the same as italic.] or normal. Note that not all fonts have an italic version, so results using uncommon fonts may vary.

p {font-style:italic} sample
p {font-style:oblique} sample
p {font-style:normal} sample
p {font-style:inherit} sample

font-weight

In order to specify how bold a font is, the font-weight property can be used. Font weight can be specified in several ways, either by keyword or by numerical value. Available keywords are normal, bold, bolder, and lighter. The numerical values were created to avoid confusion with font names and are values starting at 100 and going to 900 in increments of 100. A value of 400 is the same as normal, and a value of 700 is the same as bold.

p {font-weight:400} sample

strong {font-weight:700} sample

eg.

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

font-family

font-family defines the font that is to be used on a given element. This needs to be the actual name of a font and if it has spaces then it will need quotes around it. A list of fonts to use should be provided in the event that the first font is not found, so that a suitable substitute may be used. The list should end with a generic font-family such as serif, sans-serif, cursive, fantasy, or monospace. Basic fonts include arial, times, “times new roman”, courier, helvetica, and verdana.

p {font-family:arial,verdana,sans-serif}

font-size

Font-size can be set using values such as xx-small or large but more often it is better to use one of three specific units: em, pixels, or percentages. Both em and percentages are relative to the parent element; because of this, be careful when nesting styles and defining font-sizes, as each one will be relative to the parent element. So if you have a base size of 10px, 2em would equal 20px and 200% would equal 20px.

Pixels will give more control on most standard displays from screen to screen by bypassing the users default font size. Because the font bypasses the users default it is not generally recommended. If someone has a default font size of 40px and your page is set to 10px it’s going to be much too small for the user. They may have to size up the page in order to see it clearly.

Where possible a relative font-size should be used. With an increase in use of mobile phones and other web-browsing devices, there is no guarantee that website visitors are using a ‘standard monitor’ any more.

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

The selector is the element that is being styled, in this case it is the p element. If this selector was limited to a p elements of a particular class, for example someClassName, this would be written as :

p.someClassName { ... }

A further refinement would be to limit this selector to a particluar element id, such as someIDName :

p#someIDName { ... }

Multiple selectors can be included for a single declaration by separating them with a comma :

p,
p.someClassName,
p#someIDName { ... }

Another selector which can be used is the wildcard ‘*’. The following example selector would be applied to ALL elements within p.someClassName :

p.someClassName * { ... }

The example rule set above will add a background color to all paragraphs and increase their font size by 120%.

The declaration block is everything between the curly braces “{…}”. This rule set has two declarations within the declaration block, each with a property and a value. The properties come before the colon and the values come after the colon, so our first property is background-color and it has a value of #ffcc00 (a hex color value). It is possible to many declarations for a given selector.

This is the basic structure:

/* your comment here */

It is especially important to comment any hacks that may have been employed when coming up with complex styles. Although hacks should be avoided to ensure that stylesheets are futureproof there may be occasions when it becomes necessary; for example when a client insists on a feature!

There is obviously a slight additional overhead when adding extra text (and therefore bytes) to CSS files, in terms of bandwidth; however the time saving on future maintenance, more than compensates for such additional resources in most circumstances. A later article will focus on CSS file compression and optimisation techniques for sites with high traffic to help improve page load time and bandwidth usage.

Another great use for comments is organizing your files. Douglas Bowman of Stopdesign employs a great technique; it’s kind of like section headers, but for CSS. Simply add a one word title to a section in a comment with an = sign in front of it can more easily be searched for.

/* =lists */

Douglas likes to add dashed line underneath it to make it stand out a little more.

/* =lists
——————– */

Plain and simple, but it sure helps.

Another great tip comes from Garrett Dimon who recommends the use of a color glossary. Basically just put a list of the colors used in your design at the top of your CSS file for quick reference.

/* =colors
——————–
Dk blue: #871b2
Lt blue: #1485cc
Yellow: #fff419
*/

NB: credit is hereby given to those named above for sharing their ideas. By sharing we all learn more. Kudos.

<p style="background-color:#cc9900">A background-color inline CSS style has been applied to this element.</p>

To embed CSS styles in a page it is necessary to create a style block in the head section of the document. This is a better approach than inline styles because it allows for the control of all CSS styles for a whole document in one place.

<head>
<title>Title of Document</title>
<style type="text/css">
p {background-color:#cc9900}
</style>
</head>

Lastly, the recommended method for adding CSS styling to documents is to include a link to an external style sheet in the head of the document. This method also has the benefit that many documents can use the same style sheet definitions.

<head>
<title>Title of Document</title>
<link rel="stylesheet" type="text/css" href="http://www.xhtmltips.co.uk/myspace/background_style.css" />
</head>

The rel attribute defines the relationship between the document and the external link. In this case the external link is a style sheet for the document. The type attribute specifies that we’re linking to a document that should be interpreted as text/css. The most import attribute is href, however, which defines the URL to the stylesheet.

A caption is a visible quick-take of your table and should always be the first element in your table markup.

<table>
<caption>Top threats to consumer security.</caption>
...
</table>

Your table will look something like this with the added caption:

Risk assessment of consumer threats and Internet safety.

To provide a little more information to those alternative browsers we can include the summary attribute. This attribute just gives a little more information about the data in the table and will not be displayed in browsers such as Internet Explorer and Firefox.

<table summary="Results of a web developer survey assessing consumers risks and Internet safety.">
<caption>Risk assessment of consumer threats and Internet safety.</caption>
...
</table>