KompoZer User Guide

 1 - Introduction

 2 - Quick start

 3 - Using KompoZer

 4 - Stylesheets

• Introduction
• Creating internal styles
• Named classes
• External styles
• Other style selectors
• Removing styles
• Inheritance
• element

 5 - Scripts

 6 - Inserts

 7 - Templates

 8 - Site Manager

 9 - Preferences

10 - Publishing

     Appendices

Home

Site map

Quick index

Copyright

Postscript

KompoZer User Guide - Section 4

4    Style and stylesheets

4.1    Introduction to style

Note Where the icon occurs click it to reveal differences in the behaviour of Nvu if this interests you.

The use of styles is already well established in word processing and desk top publishing. In web site design it assumes 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/CSS21/.

A full introduction and many useful references may be found at http://en.wikipedia.org/wiki/Cascading_Style_Sheets

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 the same style may be applied to several.

Style 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 border 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 and the sizes of these boxes may be specified.

Note You can see the outlines of the blocks by selecting ‘View - Block outline’.

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.
‘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.

On the status bar KompoZer shows classes along with the tag to which they are applied.

4.1.3    Using style

4.1.3.1    Inline style

Within a page 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 KompoZer hides all this from you.

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

4.1.3.2    Internal style

The second way to use a style is to embed a list of style definitions within the HEAD section of a page. (These definitions are referred to as 'style rules' or just 'rules')

These rules 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.

Note If you look at the HTML source code you will see a structure like

when the class "mynicepara" has been applied. The corresponding code where no class is applied is

. 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. To help maintain the site it is good to give it a name that describes its function NOT the resulting appearance.

4.1.3.3    External style – 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 rules which 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 has the extension ‘css’.

How does a page know to use this style sheet? A line of code which, KompoZer 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>

4.1.3.4    Cascading style sheets

You may wonder – if you have an external style sheet, perhaps internal rules and inline 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 inline 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 rule 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.

KompoZer will actually allow you to link several external sheets to a page. The browser reads these in the order encountered and acts on the most recent information read. Internal sheets still obtain priority irrespective of the order they appear in the code.

The full rules for prioritisation are rather complex. Perhaps in an attempt to assist here KompoZer 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

4.2.1    Internal styles

As we will see later style rules are stored in style sheets. KompoZer includes a CSS editor called CaScadeS which allows you to create stylesheets and define rules. Before you define a rule you must have a stylesheet but if you are working on a page which has none CaScadeS will create one for you.

To create a style rule for an element

1. Click the CaScadeS button on the Composition toolbar. The CSS Stylesheets window opens.
2. Click on the artist's palette button . In the 'Sheets and rules' pane you will see an internal stylesheet has been created for you.
3. To create a rule click ‘Style applied to all elements of type’
4. Beside the blank box click the drop down arrow. You will see listed a number of common elements. To create a style for one of these click it alternatively enter the tag for any other element.
5. Click ‘Create Style rule’
6. You are now presented with a window headed ‘Selector’ followed by the tag for the element. The window actually lists the style declarations for that element, but of course that is now blank.

To define how you want elements to look:

1. Select in turn as required the tabs for ‘Text’, ‘Background’, ‘Border’ etc and specify exactly how you wish that element to appear. The next section amplifies some details of how to do this.
2. Return to the general tab to see the full declarations that you have set for the Selector
3. If you click the ‘General’ tab you will see all the declarations for the rule. You can edit these here but it is better to leave the job to CaScadeS because if you make any errors the declaration will be deleted
4. When you are satisfied click ‘OK'

Once created, rules may be edited by reopening CaScadeS, Click and expand the stylesheet and click the rule involved.

In the ‘Sheets and rules’ pane on the left you should see a structure showing each tag as it is defined.

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 declarations for the ‘body’ and apply it to all elements. In most cases declarations specified here with trickle down to everything else (they are ‘inherited’) unless you specify it explicitly elsewhere. Generally this works but can generate surprises.

Note The tabs available in CaScadeS allow a large number and all the most important style properties to be set. The CSS specification however includes many others. If you are familiar with these you can type declarations manually into the box (incorrectly) headed 'Style rule'. On closing CaScadeS the validity of the declaration will be checked and those which are valid will be added to the stylesheet.

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 has a set of 3 fonts which have fundamentally similar characteristics. The choices are:

• Sans serif proportional fonts.
• Serif proportional fonts.
• Fixed spacing fonts.

Each set has three entries. The first two are alternative similar fonts; 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 the author’s 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 set using the model from the ‘Predefined’ selector.

To build a set of fonts.

1. Note the structure of the ‘Predefined’ sets. The lists are built with each font name terminated by a comma and each set finished with a generic type.
2. Select a generic type from the following: serif, sans-serif, cursive, fantasy, monospace.
3. Select preferred fonts corresponding to the generic type required.
4. With the Text tab selected check ‘Use custom font family’ and in the box type the name of your preferred fonts each followed by a comma, finish with a generic type.

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

Note 2 You may enter as many fonts as you wish.

Note 3 Using ‘cursive’ or ‘fantasy’ options is not recommended since the level of standardisation between visitors will render the results very uncertain.

Note 4 If you use a font which has a name which includes spaces (such as Times New Roman) the name must be enclosed within quotes e.g. "Times New Roman". If you fail to do this the result will probably still work but validation will fail.

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.

Absolute and relative sizes.

When setting font sizes for text lying directly in the body element 1em, 100% and 'medium' generally yield identical results. Font sizes are inherited so text in elements which themselves sit in the body will, unless specified separately, use the same sizes. Elements may however sit, not directly in the body but, within other elements such as a table or a division. Where such a table or division has a font size set on itself this may be inherited by text within that table or division. For instance, if a div has font size set to 150% and a paragraph within the div has font size set to 1em then the text will actually be rendered at 1.5em due to it inheriting the scale from the div.

Note A division is formed using the

element. See section 4.5

An example of how this can work is given in the adjacent figure. Text sits in table cells, which sit within a table which sits within a division. One of the tables and one of the cells has font size specified. Others do not.

Not all sizes scale in this way. Sizes set as a percentage or in em or ex do scale and are referred to as relative sizes. Sizes specified using the xx-small system do not scale and are referred to as absolute sizes

Note All sizes will zoom using the browser text size options with the exception of sizes specified in pixels. In this case browsers vary in response.

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 buying 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.

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 colour as a hexadecimal number. 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 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 17 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 17 CSScolours and names:

Black

Gray

Maroon

Red

Orange

Yellow

Lime

Green

Teal

Olive

Aqua

Blue

Navy

Fuchsia

Purple

Silver

White

.

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.

Warning. The opacity option uses a property not included in the CSS2 Specification, which is either not implemented or implemented incorrectly by most browsers.

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.

Note 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 Vertical 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 size to be allocated to the content area of a box. This can be an absolute width or a percentage of the containing box.

Note The spin buttons beside each box allow fine adjustments to be made easily. In most cases the effect can be sen in real time on the screen.

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. When you create a style rule at step, 4 instead of entering the tag for one element, just list all required and separate the tags by commas. Later you can specify, for example the size of, each heading individually in a separate rule.

EDITING SELECTORS

If you have already set up the style declarations required, perhaps for h1, but now want it to apply to additional elements just click the `Edit selector’ button above the `Sheets and rules’ pane and type in the additional tags separated by commas.

4.2.3    Named Classes

Tip: Class names can contain letters, digits, hyphens and underscores but not spaces and must not start with a digit or a hyphen followed by a digit. They are case insensitive. N.B. Class names do not include the initial dot.

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 and apply them selectively. These styles are known as ‘Classes’.

Using Nvu – To create a class

1. Open the CSS Editor, and if necessary create a style sheet, as described in section 4.2.1
2. Click on the stylesheet to select it. (If there is more than one stylesheet click on the one in which you wish to create the class.)
3. Decide on a name for the class.
4. Click on RULE, leave ‘Named style’ selected and enter your chosen class name in the box.
5. Click on ‘Create style rule’. You should see the name of your style appear in the pane on the left but note that the name is preceded by a dot (full stop)

To create a class

1. Click the CaScadeS button on the Composition toolbar. The CSS Stylesheets window opens
2. If the stylesheet in which you wish to create the class exists click it followed by the artist's palette button .  Else:
3. Click on the artist's palette button. In the sheets and rules box you will see an internal stylesheet has been created for you
4. To create a class click ‘Style applied to all elements of class’
5. In the box you will see a full stop entered for you. Now either
   
   • Follow that by a name of your choice which must start with a letter or
   • Click the drop down arrow beside the box to get a list of already defined classes and click one of these
6. Click ‘Create Style rule’
7. You are now presented with a window headed ‘Selector’ followed by your class name. The window actually lists the style declarations for that rule, but of course that is now blank

Now proceed as in section 4.2.1 ‘To define how you want elements to look’. In that case 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 enter some details for your new class that will allow you to recognise it on the screen if it is applied. For instance use the border tab to produce a border styled as solid, 2px wide, coloured red.

It is possible to set styles for several classes at the same time just as it was for elements. Proceed as in 4.2.2 but precede all class names by a dot e.g. .style1, .style2 (KompoZer automatically adds the dot for the first).

4.2.3.1    Applying Classes.

KompoZer provides two methods for applying classes. Method 1 is the simpler; sometimes it is difficult to select the item to use this method in which case method 2 is preferable.

Apply a class - Method 1

1. If necessary close CaScadeS.
2. Select the item to which the class is to be applied. For a heading or paragraph simply click in the text, to apply a class to an inline section of text (span) highlight the text.
3. Use the class selector box on the Format toolbar (see figure), click the drop down arrow and select the class required.
4. The result of applying the class should be seen in any view mode.

Note Although KompoZer is not a browser it replicates the browser display very well. However styles applied to links are not rendered correctly.

Apply a class - Method 2

Note This mode cannot be used to create the span element needed to style an inline section of text but can style such a section once the span exists.

1. If necessary close the CSS editor.
2. EITHER in 'HTML Tags' view Click on the yellow marker for the element for which you want to set a class. (If the element does not become selected, as indicated by outlining or highlighting on the screen, press the control key while selecting.)
   OR in Normal or Preview mode click in a block you wish to style then click on the Status bar on the right-most element listed.
3. Now both the block involved and the corresponding element and on the status bar should be highlighted. (See figure above.)
4. Right-click the highlighted element on the status bar and select ‘Classes’. You should see a list of all classes pop up (This includes classes on internal and linked stylesheets.) Any class already applied to the element appears, marked with a tick (✓), at the top of the list above the divider line; other available classes are below the line.
5. To add a new class, click the class; To remove a class, click the class above the divider.

Once a class has been attributed to an element it is shown on the the tag on the status bar.

Note Elements can actually have several classes applied. If you do this you should 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.

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.

To create an external style sheet

1. Open the CSS Editor. (Tools > CSS Editor).
2. Make sure that you are in ‘Expert Mode’ and Click ‘Style elt.’
3. Type a title in the box and click ‘Create Stylesheet’.
4. Click ‘Export Stylesheet …’
5. Give it a name with extension 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, in the head area you would see a line referring to the external file and linking it to your page.

Warning – Unfortunately Nvu makes a meal of inserting the filename. It puts the absolute address of the file as it appears on your hard drive. 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 (note the ‘line’, which may spread over several lines, 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’ pane 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 another page or intend to use right across your site you can link your page to that.
To link to an existing external style sheet

1. Open the CaScadeS. (Tools > CSS Editor).
2. Make sure that you are in ‘Expert Mode’ and Click ‘Link elt.’
3. Click ‘Choose file’ and browse to the location of the stylesheet you want to use.
4. Click 'Open' then ‘Create stylesheet’. You should then see the stylesheet name appear in the ‘Sheets and Rules’ pane 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

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

4.2.4.1    Create a new external style sheet

To create an external style sheet if the file has no internal or external stylesheet.

1. Click the CaScadeS button on the Composition toolbar. The CSS Stylesheets window opens showing that an internal stylesheet has been created for you
2. Click on the name of the stylesheet ‘Internal stylesheet’
3. Click the drop down arrow beside the artist’s palette button and select ‘Linked stylesheet’
4. Click ‘Create stylesheet’
5. Click the name of the stylesheet again
6. Click ‘Export stylesheet and switch to exported version’
7. Give it a name with extension css and save it, preferably in the same folder as your page
8. Click ‘Save’

Once the sheet has been created you may use it to store any style rules that you wish.

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, in the head area you would see a line referring to the external file and linking it to your page.

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.
Do this

1. Click the CaScadeS button on the Composition toolbar. The CSS Stylesheets window opens showing the existing internal stylesheet
2. Click on the name of the stylesheet ‘Internal stylesheet’
3. Click ‘Export stylesheet and switch to exported version’
4. Give it a name with extension css and save it, preferably in the same folder as your page
5. Click ‘Save’

4.2.4.3    Link to an existing stylesheet

If you have a stylesheet that you created for another page or intend to use right across your site you can link your page to that.
To link to an existing external style sheet

1. Click the CaScadeS button on the Composition toolbar. The CSS Stylesheets window opens
2. Click the drop down arrow beside the artist’s palette button and select ‘Linked stylesheet’
3. Click ‘Choose file’ and browse to the file that you need.
4. Click ‘Open’
5. Click ‘Create stylesheet’
6. Click ‘OK

You can now close the CSS editor, but, of course you can work on the stylesheet in the usual way.

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 when the page is saved.

Once you edit a stylesheet in KompoZer its name is marked by a red symbol indicating that it has not been saved. When you close CaScadeS changed sheets are saved immediately.

Warning If the sheet is linked to several pages, any others which are open at the time will not recognise the change until they have been closed and re-opened. (File > Revert)

4.2.5 Other style selectors

4.2.5.1 Introduction

Element styles (section 4.2.1) and named classes (section 4.2.3) are the two main ‘selectors’ used for styles. A selector may be thought of as the link which attaches a particular style declaration to a particular item on a page.

Note Strictly the class selector consists of the class name and a prefixed dot.

In addition to these the CSS specification provides a large range of more complex selectors most of which lie outside the scope of this Guide. For details see the CSS Specification section 5. (See appendix 2.) There are however a few cases which are needed more frequently and for less complex sites and these are covered in the next two sections.

4.2.5.2 Link styles

Browsers render links in default colours and 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 selectors called link ‘pseudo-classes’.

The more important pseudo-classes are

Selector	Descripton
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

Note The following procedures are based on the use of internal style sheets. Very similar procedures may be used with external stylesheets.

To create link pseudo-classes

1. Proceed as if creating a class (see section 4.2.3)
2. At step 4, if using Nvu select ‘Style applied to all elements matching the following selector’ and, in the box enter the selector as listed above.
3. At step 5 the selector name should appear as entered.

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 a:hover rule.

To create link pseudo-classes

1. Proceed as if creating a class (see section 4.2.3)
2. At step 4 select ‘Custom style rule’ and, in the box enter the selector as listed above.
3. At step 5 the selector name should appear as entered.

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 a:hover rule.

Warning in Nvu 1.0 the ‘Down’ button is disabled. Using KompoZer both buttons work correctly.

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

Note These styles will now be applied to links automatically. They do not have to be applied manually as do classes.

4.2.5.3 Form control styles

Setting up forms to appear as required may require styles to be set for specific controls. These are set exactly as just described for links it is merely necessary to set styles for the required selectors. Some of the main ones are listed following.

Control	Element	Selector
Submit button	Input	input[type=submit]
Reset button	Input	input[type=reset]
Text input	Input	input[type=text]
Text area	textarea	textarea
Label	label	label
Field set	fieldset	fieldset
Legend	legend	legend

4.2.5.4 ID styles

Ids (or Unique identifiers) haven’t been mentioned so far.

Since an id is a unique identifier it can be used once only (on any page). Most commonly ids are used in conjunction with the div element to mark a particular area on a page such as a table of contents, a menu or some such. It is helpful in such cases to give the id a name which indicates its use.

To create a style based on an ID

1. Select a name for the id. This must follow the same rules as for a class. See section 4.2.3.
2. Proceed as if creating a stylesheet and styling an element (see section 4.2.1).
3. At step 6 enter the name of the ID preceded by the number sign e.g. #menu.

To apply an ID

While, in principle, ids are similar to classes it is not possible in Nvu to apply an id via the class selector box but the method is still easy.

1. If necessary close the CSS editor.
2. Click in the div to which you wish to apply the id.
3. On the status bar click the
   tag. If there are more than one, select that furthest to the right. Both the tag and the content of the div should be highlighted.
4. Without moving the cursor right-click and select 'id'.
5. From the pop-up list select and click the id required.

Tip: id names may use the same characters as class names.

To create a style based on an id

1. Click the CaScadeS button on the Composition toolbar. The CSS Stylesheets window opens
2. If the stylesheet in which you wish to create the class exists click it followed by the artist's palette button .  Else:
3. Click on the artist's palette button. In the sheets and rules box you will see an internal stylesheet has been created for you
4. Click the CaScadeS button on the Composition toolbar. The CSS Stylesheets window opens.
5. To create a rule for an id click ‘style applied to an element with specified id attribute’
6. Beside the blank box click the drop down arrow. You will see listed all the ids in use on the page. If you want to use one of these click it. Else:
7. If you want to create a style for an id not yet in use enter the name for the id in the box.
8. Click ‘Create Style rule’
9. You are now presented with a window headed ‘Selector’ followed by the tag for the element. The window actually lists the style declarations for that id, but of course that is now blank.

To apply an ID

While, in principle, ids are similar to classes it is not possible to apply an id via the class selector box but the method is still easy.

1. If necessary close the CSS editor
2. Click in the div to which you wish to apply the id
3. On the status bar click the
   tag. If there are more than one, select that furthest to the right. Both the tag and the content of the div should be highlighted
4. Without moving the cursor right-click and select 'id'
5. From the pop-up list select and click the id required

Warning You can apply each id only once on a page. KompoZer at version 0.7.10 will ensure that this occurs however if you apply an id that is already in use no warning is given and the id will be applied as requested with the first instance being removed.

4.3    Removing styles

CaScadeS allows you to remove styles in a similar way to adding them.
In the ‘Sheets and rules’ pane 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.

Warning this deletion is not reversible using ‘Undo’.

If you remove an external stylesheet the link on the page is removed. The external file is left intact and can be re-linked if required as described in section 4.2.4.3.

4.4     Inheritance

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’.

Inheritance means that style properties set at a high level in the structure e.g. at ‘Body’ level will be applied at 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. Section 4.2.1.1 has already shown a small demonstration of the effect.

Inheritance is very useful as it allows properties to be set once in a style sheet rather than having to be applied to every element that you want to use that property.

You will have to consult a detailed specification (such as appendix F ‘Full property table’ of the CSS2.1 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 division

element

The

element has been mentioned only in passing so far. A div establishes a 'division', i.e. a section of a page, to contain a number of elements. (Within the div styles are often applied in particular ways as will be touched on later.) 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 of how to create and populate a div using. Other aspects of divs are likely to be beyond the interest of beginners.

4.5.1 Creating divs

To create a div

1. 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.
2. Click the first drop-down box on format 1 toolbar.
3. Click the last option at the bottom of the list - Generic container (div).
4. 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, for example, 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). The class selector box may be used to apply a class to a div but it will not display the class which has been set. The preferred method to use is via the highlighted tag on the status bar which can be used to add or remove classes

To inspect or change a class

Use the status bar to access the class.

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

Tip: If you do get ‘trapped’ in the last division on page need to work between two touching divs in the flow there is a way to escape. Click on the last item in the division and then on the marker for the div on the status bar. Next press the down arrow key. This will take the pointer to below the div though the cursor will not be visible.

You can use the same technique to escape from other block elements.

To leave a div

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

Unique divisions

A common use of divs is for unique regions of a page. Examples might be a menu, a table of contents or the main text area. In such cases rather than applying a class to a div it is more appropriate to use an 'id'.

4.5.2 Styles within a div

A div is a useful way of applying a different set of styles within a limited region on a page. Of course a set of classes could be designed and applied to the elements within the region but this is laborious and bloats the code. A simpler way is to establish a set of styles for the elements in the div and to tag them in such a way that they apply only within the div. This is done using an appropriate selector. Suppose the div has a class ‘divclas’. Examples of appropriate selectors are:

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

Or when using ids

#menu p
#contents li

These may be set up in the same way as for pseudo-classes see section 4.2.5.2.

4.5.3 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 KompoZer creates a layer it does so by attaching an inline 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 KompoZer 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, KompoZer attaches an inline style. Any styling so added will override the class styling.

Previous

Next

Top of page

Home

Site map

Quick index

Copyright

Postscript

KompoZer User Guide - Based on KompoZer version 0.7.10 - Updated 11-March-2008