CSS3.

If you are not using a CSS3 enabled browser like mozilla or Firefox you will not see that this text is in columns. Each column is 15em wide and 1em between each column.

The first letter of this section is different from the rest. This uses :first.letter. Although the whole paragraph is given the class only the first letter will have the style assigned to it.

May 20th, 2006 @ by Denise Witham
You will notice in this paragraph that :first.letter is used again. But this time if follows the date line the background colour is different.

Note: Try to resize the browser window, and notice how the text will flow in as many columns as necessary.
While Internet Explorer doesn't support many (any) CSS3 properties, you can get started using Firefox 1.5 and other 'Mozilla' browsers. Even Apple's 'WebKit' supports this property although it hasn't yet made it into Safari. Under IE the boxed section above this paragraph will only appear next to it when you change the width of the page - and then only for a short time. IE does not support multiple columns.

Definition and syntax for border-radius

One of the most keenly anticipated CSS3 properties is border-radius. No longer will web designers have to resort to complex table structures using custom-made corner graphics in order to produce rounded corners. Used in the Note box.

As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property:

CSS3 (not yet finalised)Mozilla equivalent
border-top-right-radius-moz-border-radius-topright
border-bottom-right-radius-moz-border-radius-bottomright
border-bottom-left-radius-moz-border-radius-bottomleft
border-top-left-radius-moz-border-radius-topleft
border-radius-moz-border-radius

At this time the CSS3 properties above do not work in any of the major browsers. The 'Mozilla' versions however work very well in Firefox 1.5 and presumably in other Mozilla-based browsers.

Each of the CSS3 properties take either one or two length values (generally 'px' or 'em' values). If a single value is supplied then that becomes the radius of a rounded corner. If two values are supplied then they become the horizontal and vertical radii for an elliptical corner.

The Mozilla properties only support round (as opposed to elliptical) corners and adding a second value will result in a square corner again.

This paragraph is the last child of the acticle div and therefore is italic

CSS3: H1 normal - Blue

H1 - One Quarter Opaque

Examples using -moz-border-radius

The following examples will only work if you're using Firefox or another Mozilla browser that supports -moz-border-radius properties.

Example 1
-moz-border-radius: 1em;
Example 2
-moz-border-radius-topright: 2em; -moz-border-radius-topleft: 2em;
Example 3
-moz-border-radius: 2em 0;
Example 4
-moz-border-radius: 3em 1em;

Unfortunately that's about the limit of what we can do with border-radius until the final CSS3 specification is implemented. The Mozilla properties used here do not conform to the standard (hence the -moz- prefix) and they only support round (not elliptical) corners.

Note: These properties can be used not just for 'boxes' but for many other HTML objects including form elements.

Colour Borders.

And Links - Add something after the link text - My Site
Add something before the link text - denise@witham.org.uk
and different colours for links dependant on link address
Sales for My company
compared to
returns for my company

Next there is the :after and ::after. This browser has

Demo of 'target' highlighting

This page has four sections. You can jump to each of them and that section will be highlighted:

Section 1

This is the text for section 1.

Section 2

This is the text for section 2.

Section 3

This is the text for section 3.

Section 4

This is the text for section 4.