Please note
This file is out of date
to find the latest version please visit my home page

---

4    Styles and stylesheets

4.1    Introduction to styles

Styles are already well established in word processing and desk top publishing. In web site design they assume an even more important role and can control almost every aspect of presentation.

Styles in HTML documents should comply with the requirements of the W3C style specifications. These are detailed in ‘Cascading Style Sheets, level 2 CSS2 Specification’ which is available at http://www.w3.org/TR/REC-CSS2. Nvu users are spared the detail since the program ensures that the requirements are met. With the current version of Nvu there are a few quirks which the user will need to attend to before producing polished (or even working) published pages. We deal with them later.

4.1.1    Power of styles

Styles specify how particular elements on a page appear on the screen, in print or whatever. This guide limits itself to on-screen considerations. By ‘elements’ we mean parts of the page structure, typically headings and paragraphs, but also stretching to many others including tables, bulleted and numbered lists etc. In fact most HTML ‘Tags’ may be specified though they may share style definitions when necessary.

Styles may typically define such aspects of presentation as the font face, size and variant the font colour, the background colour, whether an element is to be aligned right, centre or left, whether spaced away from other elements, surrounded by a box and, if so, what type or colour. Elements may be given an absolute position relative to the page (which allows elements to overlap). Elements such as paragraphs, tables and images are considered to exist within boxes or blocks whose sizes it is possible to specify.

Note You can see the outlines of the blocks by selecting ‘View - Block outline’. However this does not work for all blocks.

4.1.2    Classes

As well as allowing you to specify the style of elements it is possible to define styles and apply them selectively to only some elements. This is done through ‘Classes’ – a ‘Class’ is just a style that can be applied as and when you choose to.

‘Classes’ are applied to ‘Tags’ (a marker attached to an element). The element to which the class is applied appears in the format defined by the class. Other similar elements without the class applied appear in the default format i.e. either the default specified by the browser or the style that the user has defined for the corresponding element.

4.1.3    Using styles

4.1.3.1    In line styles

Within a page document styles may be used in three ways. These ways can be mixed and matched as you wish. The first, easiest and crudest is to define a style for the nonce, there and then. Such a style is listed in the code (in Source view) with the tag to which it applies (using the structure “style = ….” if you look at the code).

Don’t worry Nvu hides all this from you.

If you have an other item with the same style this code must be repeated. This bloats the page. This is known as an ‘in-line style’. For the most part Nvu users do not have to be concerned with this method although Nvu will sometimes use it without you knowing.

4.1.3.2    Internal styles

The second way to use a style is to embed a list of style definitions within the HEAD section of a page. These style definitions may be of one of two sorts. The first sort applies to all elements of a particular type (e.g. p, h1, table) the second is the class as discussed above.

If you look at the HTML code you will see a structure like <p class=”mynicepara”> when  the class “mynicepara” has been applied. The corresponding code where no class is applied is <p>. If you look at the structure of the style sheet for a class you will see the class name preceded by a dot (full stop)  e.g. “.mynicepara” while a generally applied style will look like 'p'. Generally applied styles must, of course, carry the name of the element to which they apply whereas a class can have any name you like to give it.   

4.1.3.3    External styles – Linked stylesheets

While the first two methods are valid and have their uses, the third is the preferred method specifically because it is economical, reuses the same styles for many pages and helps in achieving consistency of appearance right across a complete web site. The method uses an external style sheet which is ‘Linked’ to a page, or to several pages (though each page must include the linking information for itself).

An external style sheet contains the same list of definitions as would otherwise have been included in the internal list referred to above. (It is actually a simple text document such as you could construct using a text editor like Windows Notepad.) The file is usually located in the same folder (directory) as the page to which it is linked (though it can be elsewhere) and it usually is of file type ‘css’ (uses the extension ‘css’). Again this is not a requirement but it makes it easy to manage if you keep to this convention. How does a page know to use this style sheet? A line of code which, Nvu will insert for you in the head section of your page, will see to this.

The code looks like <link rel="stylesheet" type="text/css" href="mystylesheet.css">

Warning This is one of the few places where Nvu 0.9 makes a mess of things. What it inserts will work fine as long as your pages remain on your own computer but, if you move them to a new folder or upload them you will need to edit this line manually. See Section 4.2.4.1

4.1.3.4   Cascading style sheets

You may wonder – if you have an external style sheet, perhaps internal style definitions and in-line styles will there be confusion? This is where the cascading comes in. Your browser should first use whatever its default style would be. If it finds a matching style in an external sheet it should use that instead, it should then look at internal styles and, if any coincide with anything it is planning to use that should override them. Lastly in-line styles prevail.

How could that be used? Well perhaps your site establishes a style using an external style sheet. Perhaps you have one page about emergency procedures and you decide that all its paragraphs should be in red. You simply add an internal style on that page redefining the 'p' tag to be red but also link the page to your normal style sheet. All your normal styles will be applied except that all paragraph text will be in red, nothing else will  be non-standard.

Nvu will actually allow you to link several external sheets to a page. The CSS specification sets up rules for prioritising these in the event of a style being defined on more that one sheet. Some browsers do not respect the rules. Consequentially both the browsers and designer are likely to become confused. Take great care before adopting this practice.

Perhaps in an attempt to assist here Nvu allows you to switch off style sheets while testing pages. With the CSS editor open (see later) select a stylesheet and check the ‘Disabled’ box.

4.2    Creating styles

Styles are created and edited using the built in Style sheet editor called CaScadeS. CaScadeS has two modes of operation ‘Beginner Mode’ and ‘Expert Mode’. When it opens it opens in expert mode, should you wish to switch to Beginner Mode uncheck the check box. The difference is that in Beginner mode External style sheets cannot be created.

To start creating styles:

Open Tools > CSS Editor

Click 'Style elt', ‘Create Stylesheet’

Click RULE

The General tab opens and offers the options ‘Named Style’ or ‘Style applied to all elements of type’ or ‘Style applied to all elements matching the following selector’. To style paragraphs select the second of these and in the box type “p” (without the quotes) and click ‘Create style rule’.

To style a main heading repeat the process i.e. select RULE, ‘Style applied to …’ but this time type ‘h1’ (that’s digit one) in the box. ‘Create Style Rule’.

In the window on the left you should see a structure indicating that your internal style sheet incorporates two elements 'p' and ‘h1’. These are the style definitions for your Paragraph text and Heading 1 text. (OK they are both still blank so will do nothing.)

To define how you want these elements to look click the element in the left hand window. If you select the General tab the selected element is shown. Now, by selecting the ‘Text’, ‘Background’, ‘Border’ etc you can specify exactly how you wish that element to appear. I won’t go through all the options, just mention a few.

First, do note you are not obliged to specify any particular properties. You specify as much or as little as you wish. It’s just that the browser will revert to defaults if you don’t. There are fairly complicated rules for what it uses, and browsers don’t always follow the rules, however chances are that you’ll be happy with whatever it does – if you’re not – change it!

You may like to try setting rules for the ‘body’ and apply it to all elements. In most cases rules specified here with trickle down to everything else (they are ‘inherited’) unless you specify it explicitly elsewhere. Generally this works but can generate surprises.

4.2.1.1    Text Tab

Font family.

You are offered three ways of specifying

• Unspecified
• Pre-defined
• Use custom font family

In common parlance ‘font families’ are referred to as ‘fonts’. CSS always refers to them as ‘font families’. The correct typographic term is ‘Typeface’. (The English word for ‘font’ is “fount” but sadly the American word has come into general use in the UK.)

‘Unspecified’ leaves everything to the browser

‘Predefined’ has a drop down selector offering one of three choices. Each choice lists a series of 3 font families which have fundamentally similar characteristics. The choices are of sans serif proportional fonts, serif proportional fonts or fixed spacing fonts. Actually each list specifies only two font families, the third entry is a statement of the generic font type – the browser should look for the first font listed, if it can’t find it, look for the second and, if that can’t be found, use a font of the generic type of the final entry. Thus something suitable will always be found.

‘Custom font family’ is an option to be avoided or used with extreme caution. The list offered is taken from the fonts installed on your computer. If you choose one which is not available on your visitor’s computer there is no control over what will be used.

On the other hand, if carefully used, this option is very flexible and you can build your own preferences using the model from the ‘Predefined’ selector. Note this model separates font family choices by commas and always finishes with either serif, sans-serif or mono-­space. You should do the same if your stylesheet is to work properly and you must get the spelling exactly correct. To build your preference list select ‘Use custom font’. From the drop down list select your preferred font. Then in the box type a comma and a space and type in your next preferred font. Continue thus, separating each font name with a comma and finish as I’ve just described.

Note You will probably wish to include one font available on Windows systems and an equivalent available on Macintosh computers.

Font size. There are three sections offering different types of option. The first block is a miscellany offering various units. Because display screens vary in size and resolution and because people’s eyes and preferences differ, browsers offer ‘View’ options allowing the user to alter the text size. If this facility is disabled the user may not be able to see the page as he or she would wish. Some of the options in this first group (e.g. px, pt, cm in, mm, pc) either apply to print media or are for fixed size units. These may disable browser zooming or result in unpredictable sizes. You will probably find the last set of named styles (starting xx-small) is most satisfactory, alternatively use the percentage or em scales. As you select and alter the size you can see the result directly on your page.

Font Colour.

Either enter a colour into the box or click on the button to the right. If You click on the button the ‘Text Color’ window opens and you have three more options. (It’s like ordering an ice cream in the USA or making a phone call in the UK.) You can specify in terms of Hue, Saturation and Brightness (HSB), Red, Green Blue values (RGB) (range 0 to 255). Alternatively click on one of the 70 boxes of colours offered. 

Note These are so-called “web safe” colours because they work on lower performance displays. Actually the full range of 216 web-safe colours is not provided but, in any case, modern displays normally work in at least 24-bit colour so there is little justification for this limitation.

The next option is to click on the rainbow type area. Whichever you choose, the selected colour appears immediately on the square. Fine adjustments may be made using the RGB or HSB values. A box labelled Hex value shows the Hex value of the colour. Actually you could have done this directly without opening the ‘Text Color’ window – when you close the window you’ll see the hex value (preceded by a ‘#’) in the box along with a sample of the colour on the button.

Named colours. You’re welcome to skip this note but there is one other method! You might have noticed, as you clicked on one of the 70 colours, that occasionally in the box labelled ‘Name’ the name of a colour appeared. (Try black or red to check.) The CSS recommendation recognises 16 colours and the names of these can be entered directly here, or, in fact, into the selector box without entering the ‘Text Color’ window. The valid names are “aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow”.

Other text options

These appear below the colour option and are fairly self-explanatory.

4.2.1.2    Background Tab

Colour

This is selected in the same way as for Font colour.

Image

You can specify an image file as a background. This will appear behind anything else. Under ‘Tile’, if you select ‘Don’t tile’ you get a single copy of the file which you can position with the buttons below. If you select ‘Tile’ the image repeats in the directions selected.

4.2.1.3    Border

Items can be bordered and the options available provide great flexibility. Styles, thickness and colours may be set independently for each side.

Warning For a border to show both width and style must be specified.

4.2.1.4    Box

The block structure in which most elements are located has already been mentioned (section 3.4.1). The Box options control the display within these blocks.

For those boxes which require a dimension to be entered: First type the number, then select the unit from the drop down box.

Margin Controls the distance between the element’s box, i.e. where any border would be, and either the surrounding box or adjacent boxes.

Note Margins ‘collapse’. If a heading has a bottom margin set to 20px and is followed by a paragraph with a top margin set to 10px the separation between them is controlled by the greater (20px) not the sum (30 px).

Padding Controls the distance between the box content and its border.

Width and height Allow a specific width to be allocated to a box. This can be an absolute width or a percentage of the containing box.

Float allows blocks to be treated rather like images and to float them to the right or left hand side of a page (or to the edge of the enclosing block). Other elements may therefore appear to wrap around them.

Position, Offset and z-index are parameters related to the use of layers. These have been covered in section 3.10.6.

4.2.2    Styling multiple elements

Instead of setting styles for one element at a time it may be easier to specify several at the same time. Perhaps all your headings are in one font (e.g. serif) and all others in an other (sans-serif). You can specify h1, h2, h3, h4, h5 and h6 as serif font in a single action by listing them and separating by commas after selecting RULE, “Style applied to …” . Later you can specify, for example the size of, each heading individually in a separate rule.

4.2.3    Named Classes

I’ve suggested above that you start by applying styles to all elements of a specific type. Such style definitions will apply automatically wherever that element is found on a page. This provides for great consistency within a document but maybe a touch of dullness! You can also define your own styles that you apply selectively. These styles are known as ‘Classes’.

To define such a style first decide on a name to call it. Then Click on RULE, leave ‘Named style’ selected and enter your chosen class name in the box.

Note Style names can contain letters and numbers but not spaces. They are case insensitive.

Click on ‘Create style rule’. You should see the name of your style appear in the window on the left but note that the name is preceded by a dot (full stop).

Everything else follows as described above except for one thing. In the previous discussion you could watch the effect of your styles appear immediately on your page (assuming that you had a page which used the corresponding elements). Now, of course you have none so first we must learn how to apply a class to an element.

First do enter some details for your new class that will allow you to recognise it on the screen if it is applied.

4.2.3.1    Applying Classes

Close the CSS editor and work on your page. Switch to 'HTML Tags' view. Click on one of the yellow markers on the page. This should select the corresponding element and on the status bar the tag should be highlighted. (See figure) Right click on this (on the toolbar) and select ‘Classes’.

You should see your newly defined style pop up (if you had defined several you would have a choice), click it – your style is applied.

If you change your mind and want to apply a different class. Repeat the method. When the list of classes pops up you should see the applied class at the top of the list marked with a tick. Select it again – this should de-select it. Then select the class you want.

Note Elements can actually have several classes applied. If you do this you need to ensure that the class properties don’t conflict with each other. Most people will probably prefer to apply only one class at a time. You may need to check that you don’t apply more by mistake.

An alternative way of applying styles is to select the element as above then use the drop down class selector box at the left hand end of the unnamed toolbar.

4.2.3.2    Removing classes

A similar procedure may be used to disconnect an element from a class. Using the highlighted tag method simply select the ticked class, this deselects it.  Using the class selector box select the style again, this should cancel it. Alternatively, after selecting the element, right-click on the highlighted tag on the status bar and select ‘Advanced properties. The selected class will be listed select it and click ‘Remove’.

4.2.4    External styles

There are three ways to start working with external style sheets.

4.2.4.1    Create a new external style sheet

External style sheets are created in almost exactly the same way as internal sheets. Open the CSS Editor.

Make sure that you are in 'Expert Mode' Click 'Style elt.' Type a title in the box and click 'Create Stylesheet'. Click ‘Export Stylesheet …’ Give it a name with type css and save it, preferably in the same folder as your page.

Now click on ‘RULE’ and you should be on familiar territory.

When we created internal styles they were entered on our page in the HEAD section. Now the styles are being created in an external file. If you looked, in ‘Source’ View, you would see a line referring to the external file and linking it to your page.

Warning Unfortunately, at the moment, Nvu makes a meal of inserting the filename. It puts the absolute address of the file as it appears on your harddrive. When you upload or move your page the stylesheet won’t be found. You will need to edit the HTML Source code in the line starting <link rel="stylesheet" (note the ‘line’ may spread over several lines the ‘line’ finishes type="text/css">) Delete all the code like file:///C:/Documents%20… right up to and including the / before the filename. The result should contain text like href="filename.css". If your stylesheet is in a sub-folder the text should be like  href="subfolder/filename.css".

4.2.4.2    Change an internal style listing into an external stylesheet

If you already have set up your page using internal styles you can convert them into an external stylesheet and link to that.

Open the CSS Editor. In the ‘Sheets and rules’ window click on the stylesheet and under the general tab click on ‘Export stylesheet and switch to exported version’ and proceed.

4.2.4.3    Link to an existing stylesheet

If you have a stylesheet that you created for an other page or intend to use right across your site you can link your page to that.

Start the CSS editor  (Tools > CSS Editor). In Expert Mode select ‘Link elt’, Click 'Choose File' and browse to the location of the stylesheet you want to use, click 'Open' then ‘Create stylesheet’. You should then see the stylesheet name appear in the ‘Sheets and Rules’ window to the left. You can now close the CSS editor, but, of course you can work on the stylesheet in the usual way.

NB The same warning applies as in section 4.2.4.1

4.2.4.4 Saving stylesheets

Once you have linked and saved a stylesheet, if changes are made later, the changes will appear in your document immediately and the sheet will be re-saved automatically. If the sheet is linked to several pages, any others which are open in Nvu at the time will not recognise the change until they have been closed and re-opened.

4.3    Removing styles

The CSS editor allows you to remove styles in a similar way to adding them.

In the ‘Sheets and rules’ window select the rule you want to remove and click ‘Remove’.

Similarly you can remove a stylesheet. Select the sheet and click ‘Remove’. If you select an internal stylesheet it is deleted from the file completely. Incidentally this deletion is not reversible using ‘Undo’.

If you remove an external stylesheet the link on the page is removed irreversibly but the external file is left intact.

4.4 Inheritance

Inheritance of style properties can in some circumstances be used to advantage at others it may appear confusing.

A web page has a hierarchical structure e.g. text in a table cell sits under the ‘Table’. You see some of this structure in ‘HTML Tags view’.

What this means is that style properties set at a high level in the structure e.g. at ‘Body’ level will be applied at all lower levels unless specifically re-specified. So a font family set the ‘Table’ element will be applied to everything in the table but if you include a paragraph in the table and set a different font for the ‘p’ element then that will be applied.

You will have to consult a detailed specification to see what is inherited and what is not but, in general, you can assume that all properties are inherited except things like Background, Border, Margin, Padding, Width and positioning.

4.5 The <div> element

The <div> element has been mentioned only in passing so far. A div divides off a section of a page for special treatment e.g. for applying a special set of styles (See 4.6.2). The remainder of this section is not intended as a full explanation of what a div is or how to use it rather it is an explanation, for those who know that, of how to create and populate a div using Nvu. Other aspects of divs are likely to be beyond the interest of beginners.

4.5.1 Creating divs

To create a div

Place the cursor where the div is to be created.

Note Do not try to create a div as the last item on a page unless you do not need to add items after it.

Note it may be easier to see what is happening in HTML tags view with View > Block outline selected.

Click the first drop-down box on the format toolbar.

Click the last option at the bottom of the list - Generic container (div)

The div is created formatted as body text.

It is now possible to insert any desired item into the div e.g. Text or images. Text may then be selected and formatted as paragraphs etc. If required, divs may be inserted so that a set of nested divs is produced.

Sometimes difficulty may be experienced such that elements in a div disappear when an attempt is made to populate them. To avoid this it is undesirable to insert empty elements, so either insert e.g. one paragraph at a time or enter some dummy text as a placeholder.

To apply a class to a div

Proceed in the normal way see section 4.2.3.1.

To inspect or change a class

Note that the Class selection box is unreliable, and may not work at all. Always use the status bar to access the class.

Elements within a div may have styles applied in the all the normal ways.

To leave a div

Click in any area outside the div. This is why a div should never the the last item ion a page it will be impossible to leave it except to visit an item higher on the page.

4.5.2 Creating a layer using a div

In section 3.10.3 we noted that ‘Layers’ are contained in ‘divs’. In fact a Layer is simply a div which has a position, and optionally a z-index, style attached. When nvu creates a layer it does so by attaching an in-line style to the div.

It is equally possible to create a layer by setting up an appropriate class and attaching this to a div.

When a layer is created in this way Nvu depicts it as a normal layer and renders it with a surrounding box with sizing and position handles. Visually it is indistinguishable from any other layer.

Such layers may, of course be precisely located and are not subject to the vagaries of manual dragging.

Warning. If a layer, created using a class, is subsequently dragged or resized, Nvu attaches an in-line style. Any styling so added will override the class styling.

4.6 Special cases

So far the Guide has considered applying styles in two simple ways either directly to elements or through classes. CSS provides a number of richer structures which may be used although support for there on some  browsers is limited. We will consider here only the most common and important cases.

4.6.1 Link styles

Browsers render links in default colours and Nvu provides some options for controlling these (see 3.7.1.6). Through the use of styles full control of each state of a link is possible. This is achieved through the use of link ‘pseudo-classes’.

The more important pseudo-classes are
a:link    for all links not yet visited
a:visited    for links that have been visited
a:hover    for a link over which the cursor is hovering

To create such classes proceed as for any other class. In the box ‘Create Style rule’ type the full pseudo class as above including the colon and check ‘style applied to all elements of type’.

It is now possible to style these options fully, i.e. not only with text colour and decoration but with background, boxes, the lot.

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the ’color’ property of the A:hover rule.

The CaScadeS CSS  editor enters styles in the order encountered. The order may be altered by selecting an item and clicking the ‘Up’ or ‘Down’ button.

Warning in Nvu 0.9 the ‘Down’ button is disabled.

4.6.2 Class selectors

An other powerful CSS feature is the ‘Class selector’. This can be used, for instance, in conjunction with a <div> to apply a different set of classes to part pf a page which has been marked-off by enclosing it in a <div>.

Equally well the elements in the <div> could have been assigned to specially defined classes to achieve the desired result. This option however requires the classes to be assigned individually which is labour-intensive and bloats the code. Instead, the use of class selectors effectively redefines the classes temporally for use within that <div>. To use this method create the <div> required along with its content and decide which styles need to be specifically altered.

Create and assign a class for the <div>, Suppose this is ‘divclas’. Suppose that we need to assign special styles to the following elements p, td, a:visited.

In CaScadeS set up the following ‘classes’ checking ‘style applied to all elements of type’ for each.

div.divclas p
div.divclas td
div.divclas a:visited

In each case simply define the styles desired. They will be applied within the defined <div> area and nowhere else.

Nvu User Guide - Based on Nvu version 0.9 - Updated 01-Apr-2005