In this tutorial we explain how to open a css file, and how to edit it whitout write code.
First of all we need ArduoCss editor. It is free and you can download it from this site. In the previous tutorial "How to install ArduoCss editor" we teach how to download and install it.
We can run it by the desktop icon or trough the windows menu start >> programs >> ArduoCss and clicking on ArduoCSS icon.
This is the startup form of ArduoCss. You can open a new css file by standard menu file >> open or clicking in the yellow "Open file" link in the startupContent.
After that a file open dialog will appear. You have to choose the right file and click "Open".
The css document will be loaded on a new tab sheet. The application allow to manage multiple style sheet: each one has its tab sheet.
note:
Yoou can work in "visual mode" or in "text mode". In "visual mode" you can build a css without write css code, all the css code is managed by the application.
Work in managed mode prevent errors and let the designer to focus on the styles without waste times on writing code. By the way lot of graphic designer think that a textual editoe is more efficent than a managed one.
So each document can be edit in both way. You can swith from one modality to another by clicking on the buttons belove the node list. By now, We assume to work in "visual mode".
As said above, each css document as a tab sheet. You edit always the selected one. In the center of the window you will find the list of the css styles. By single click you choose the style.
The right panel allow you to edit the selected node. In this panel there are all the css properies. For each properties you can assign a value. Most of property types (colors,fonts, size etc..) as a specific editor.
For example we will try to edit the "body" style changin the "border-top-color" property. We have to:
- Single left click on the node. (the style expands and all appear)
- By the rigth panel, we find the property and click on the button near the property.A littel color pciker will appear.
- By single click we select the desidred color.
After each change to the document, the "preview panel" will be updated. You can check the element styles, before the css will be applied to the html document.
In the last screenshot I turned to "text mode" to see the generated code.
An Alternative way to edit a css style is by double-clik on the style. After a double click a edit window appear. On this windos you find a tab sheet for each properties category,
on each tab sheet you can set the properties of this category.