Publish and be....

....styled!

This month in Publish and Be... (see PC Plus issue 140) I've taken a break from Internet Explorer 4.0's Dynamic HTML and delved into Cascading Style Sheets, a Web authoring feature on which Netscape and Microsoft almost agree(!) I don't think that CSSs are quite the best-thing-since-sliced-bread that some HTML gurus claim, but they can be very useful, and are more versatile than they seem at first glance. They're also much easier to understand and use than some of the reference books would have us believe.
Paul Stephens.

After months of IE4-only material, I'm very pleased to be able to say that this month's sample pages can be viewed on both Netcape Navigator 4.0 and Internet Explorer 3.0 or later (with the exception of the 'IE4 Zone' page). Click  here for a quick-pick list of this month's page links. The best reference source for Cascading Style Sheets is, as always, Microsoft's Internet Client SDK - you can view it online, or download it as a self-extracting file for local viewing (highly recommended).


Pic1.gif (4653 bytes)'Style' in HTML can mean anything from text colour to a border design or even an item's height, width and visibility. Cascading style sheets, at their simplest, let you define style rules for a paticular type of HTML tag (DIV, H1 etc), and apply them automatically to every occurrence of that tag type in the page. To see them in action, view the no-CSS page first, then click on the link to see how a simple CSS can change it. To see how the effects of style sheets are cumulative, click here to view the two-sheet page. If you want to apply the same rule to a number of HTML tag types, there's an easy way to do it. Click here to see how.

Pic3.gif (7645 bytes)As well as defining style rules for all occurrences of a particular tag type, you can create special 'classes' of style rule, which  are only applied to those tags that specify them. Click here to see the 'before' page (where all DIVs are styled by an 'all-occurrences' rule) then click here to see how a style class can be used to apply rules selectively. You can also mix all-occurrences and special class rules in the same page. Style classes can either be specific to a particular type of HTML tag ('DIV.special') or available to all tag types ('all.bigandbold'). Click here to see a page that uses all these combinations of style rule types. Another type of style rule - the named style - is also available, but with all due respect to Netscape, I strongly recommend that you don't use them! Click here to find out why.

Pic2.gif (24178 bytes)Cascading style sheets are normally held in the <HEAD> section of a web page (like scripts), but they can also be stored in separate disk files, and LINKed in. This makes it easy to achieve consistent styles across an entire web site - click here to see how it's done. You can combine external and internal style sheets in the same page too - click here to see them in action.

Style sheets can do more than just put text into eye-catching colours. One very effective use for them is defining special 'boxout' containers which you can use wherever you need them. Click here to see some examples. Containers also figure in the sometimes tricky matter of style inheritance. Click here to see style inheritance explained, including details of why cascading style sheets are called 'cascading'.

Pic4.gif (19335 bytes)Finally, cascading style sheets are a central component in Netscape's verion of Dynamic HTML - but I'm not going to cover that this month! (It'll be soon, honest!). Internet Explorer 4.0's Dynamic HTML can work with CSSs too - in a rather more versatile way, in fact - click here to see it all explained in the IE4-only Zone page.



Quick-pick list of this month's example pages.

CSS-free page
A simple CSS
Cumulative two-sheet page
Applying the same style to multiple tag types.
Why style classes are a good idea
Style classes in action.
Classes and all-occurrence rules combined
The style rule type I advise you not to use!!
Using external style sheets
Mixing internal and external style sheets
Creating magazine-style boxout panels with CSSs.
Style inheritance explained,
The IE4-only Zone!


Back to menu