- Introduction
- Editing Modes
- Creating Style Sheets
- Styling your document
- Creating style rules
- Styling Algorithm
- (Quick) Editing of In-line styles
- Importing other style sheets
- Organising your Style Sheets
- What you can't do with CaScadeS
This article has been written to serve more as a manual for CaScadeS than to be a tutorial. In case you are new to CSS and need a step-by-step tutorial check out the article at TheLinuxApprentice.Com. But if you already know the rudimentaries of CSS, this article should teach you how to use CaScadeS with Nvu in about 15-20 minutes.
Introduction
The open source composer, N|vu, comes with an inbuilt cascading style sheet editor "CaScadeS". This document is a tutorial for those who are new to using CaScadeS with Nvu or for those having a hard time understanding the basics of using CaScadeS with Nvu.
For styling the html file you are editing, CSS editor can be opened by clicking on Tools > CSS Editor. This opens the CSS editor with a left pane showing a tree view of any styles if already present in an existing style sheet. If no style sheets are linked to the html document being edited, new style sheets can be created as described below.
Editing Modes
CaScadeS has two editing modes:
- Expert mode
- In Expert modes, you can create sheets and rules without restriction. That is, you can create any of the all possible selectors defined in the CSS standards.
- Beginner mode
- The Beginner mode allows to create rules associated to class selectors or type element selectors1. Which means that you can create class selectors e.g. .foobar, .myclass, etc and type selectors matching the name of a document language element type. In HTML a type selector can be h1, h2, p, etc.
In case there is no style sheet for the rule, a sheet is automatically created.
Creating Style Sheets
To create a new(external) style sheet, click on the button for the new style sheet menu. In the General tab, fill in the file name in the URL text field to create a new style sheet, or fill in the full URL to link to already existing style sheet. Fill in Title, and media type if required, and click on Create Style sheet button. Be careful, the html document must have been saved before attaching a style sheet.
A raw style sheet, i.e without any rules, made by CaScadeS looks like this:
There is an option to make a style sheet as an "alternate" style sheet. Check the check box if you are using alternate style sheets.
The button gives an option of embedding an internal style sheet in the html document. If you already have a style sheet attached with the document, the internal style sheet created will be disabled by default(i.e. cannot be saved). The user will have to uncheck the check box to visualize the styling info due to the internal style sheet.
In case you already have a style sheet available for your web pages, you can instruct CaScadeS to use that style sheet instead of creating another one. To insert an already exisitng style sheet:
- Click on Tools > CSS Editor to open the style sheet editor
- Click on to add an external style sheet
- In the right pane of CSS Editor, click on to browse to already existing style sheet. Select the file and click open
- Click on to link the style sheet with the current document.
Idealy, the above process should work. However, I have noticed that although I get the style sheet filename displayed on the left pane in CSS editor the style rules are not there. All you need to do to view the style rules of the attached style sheet is click on button. And then you can apply the rules to your current web page.
As of yet, CaScadeS has been seen to use absolute paths for linking a style sheet. This statement stands for both style sheet link in the <head> section of the html document and also uri used for style definitions e.g. background-image, etc. Absolute paths cause problems most of the time as they become invalid when the file is published to the web server. So, before publishing remember to change the paths to relative ones for the webpages to be displayed as intended with the style sheet.
Styling your document
This section does not deal with the details of using CSS. The document being on CaScadeS focuses on its use and having a section about how to use CSS will take it off track. If you are new to Cascade Style Sheets, search for "CSS tutorial" on a good search engine and you will get several hits for learning CSS. Good luck!
Once you have your style sheet setup (external or internal), you can start creating rules and styling your document. For applying styles on a rule, you need to highlight the rule and then start applying rules from the right tabs on pane of CaScadeS. After applying all the rules from the tabs, you can see all the rules on the first tab(General) on the right pane. For details on how create new style rules read section Creating Style Rules
TIP: CaScadeS does not allow to edit the style sheet manually. If you find yourself tinkering with the style sheet manually, you can use another feature already there in CaScadeS.
- Use internal style sheet till you are finished designing the page.
- You can edit this style sheet in Nvu using <HTML> Source view.
- When you are done, Open CSS editor and select the internal style sheet in left pane. Then export the internal style sheet by clicking the "Export style sheet and switch to Exported version" button.
The most important thing to remember is to save the document before and after using CaScadeS. I cannot stress it more, you NEED to save the document after closing CaScadeS as the first thing. I have had experiences when I defined several rules, and after closing the style sheet editor did a little more editing. Result: Nothing was saved of my style rules I created, only the older ones were there!!
In case the styles are not being applied even after saving the document, click on button in the CSS editor. Sometimes, CaScadeS does not apply the new rules to the document even if they are saved. Reason? Don't know. The last resort I employ is to check the CSS file in a text editor see if the rules you created are all there. If they are, just close and reopen the document and they will be displayed.
Creating style rules
To create a new rule for styling, click the button. CaScadeS gives you three options for a new rule, viz.
style applied to all elements of type (enter type below)
style applied to all elements matching the following selector
The first option lets you create a class selector e.g. writing "foobar" will create a class selector ".foobar". The second option is for creating "type" selectors. A type selector matches the name of a document language element type. A type element matches every instance of the element type in the document tree. E.g. creating a type selector for h1 will match all h1 elements in the document tree.
With the last option one can create style rule for selectors of any of the following type: Descendent selectors, Child selectors, Adjacent sibling selectors, Attribute selectors, ID selectors, and for pseudo-elements and pseudo-classes.
For a detailed list of selectors and selector syntax read the W3C CSS2 recommendation section on selectors.
Styling Algorithm
Due to absence of an "Apply" or "Save" button, many users wonder why their style sheets are not created or saved. To provide a way to apply styles and getting them saved consistenly, I have written down an algorithm: CaScadeS Styling Algorithm (CSA).
CSA-1 - assumption that you already have a style sheet attached to your document.
- Save document for any changes you have made --> !important
- Open CaScadeS, the style sheet editor.
- Create and define new style rule(s) or Edit existing rule(s).
- Close CaScadeS.
- Save document again before doing any other changes --> !important
CSA-2 - assumtion that you don't have an attached style sheet.
- Save document for any changes you have made --> !important
- Open CaScadeS, the style sheet editor.
- Create an internal or external style sheet as described in section: Creating Style Sheets.
- Create style rules as described in section: Creating Style Rules.
- Close CaScadeS.
- Save document again before doing any other changes --> !important
(Quick) Editing of In-line styles
In-line style editing comes naturally to Nvu because of CaScadeS. The status bar at the bottom of the Nvu window shows which tags enclose the present position of the cursor. Even the parent tags are shown. You can right click on the tab to get the context menu.
You can do more than just edit inline styles with the status bar tag-context-menu. For example, change or remove the html tag, apply an ID or a class from a style sheet(both should be already defined in the attached style sheet), use for defining some template regions, etc. The various options in the context menu are:
- Select - Selects the whole text enclosed by the tag.
- Remove Tag - Remove tag from the text.
- Change Tag - Change the tag for that text. You can type in the new tag right in the status bar and press Enter to apply the change.
- In-line Styles - Opens corresponding tabs from CaScadeS style
sheet editor for easy styling.
- Text Properties
- Border Properties
- Background Properties
- Box Properties
- Aural Properties
- Extract and Create Generic Style
- Templates - You can Make an area editable or Remove an editable area in a template.
- ID - Apply an ID from style sheet to the text enclosed in the tag.
- Classes - Apply a class from style sheet to the text enclosed in the tag.
- Advanced Properties - Edit Html Attributes, In-line Styles and Javascript events (for advanced users).
Even users with little knowledge of HTML and CSS can make use of this feature and design their web page like pros. The ability to apply in-line styles using CaScades makes Nvu the easiest WYSIWYG browser for styling.
Importing other style sheets
The @import rule imports style rules from other style sheets. It should preceed all rule sets in the style sheet. In case there are multiple @import rules in the style sheet, all except the first one are ignored.
This section is a place holder for using the rule button. However, it is not working yet. The section will be updated as soon as it starts working. In case it works for you, please do let me know.
Organising your Style Sheets
Often when the number of style rules become large, finding a particular style for editing takes time. One has to scroll up/down to go to the particular style. CaScadeS offers the and * buttons for organising your style rules.
You can group similar style rules by moving them up or down the list of styles. Thus if you are editing your text, you will easily remember which group you need to go to, to edit the style rules, and all related style rules will be there in that area.
* button is not working yet.
What you can't do with CaScadeS
You cannot insert comments in style sheet generated by CaScadeS. The only way to insert comments is to edit the css file manually. There is no option to add non-standard rules e.g. -moz-border-radius, etc.
1 I was able to create ID selector tags too in Beginner mode. This is possibly a bug.
