Create new JBoss Tools Documentation Jira issue
This will launch the Jboss Tools Jira page - to complete your feedback please login if needed, and submit the Jira.
JBoss.orgCommunity Documentation
In this chapter we will discuss CSS Editing Perspective views, more information about style sheets can be found in Page Styling section of Editor chapter.
The CSS Editing Perspective combines a set of views which allow you to see the structure of your css files,edit them and see the results. To use this perspective you need to choose Window >Open Perspective> CSS Editing .All of the views are fully synchronized with each other:the changes being made in one view are reflected in othes at once.
As you know, there are three ways of inserting a style sheet:
External style sheet (.css file)
Internal style sheet (using the <style> tag in the head section of an HTML/XHTML/JSP page)
Inline style (using style attribute)
Using CSS Editing Perspective you can change your style sheet, inserted in any of the possible places described before, in three ways:
directly in your Editor
using CSS Properties view
using Properties view
Using this view you can easily skip between the selectors described in the source files, see the list of properties in any selector just by clicking the triangle near it.
You can use the Source viewer with the Outline view to navigate around the file. To do this you should just left click the selector or property you want and it will be automatically highlighted in the source code:
Properties view provides a full list of properties of a chosen selector. The properties are divided into logic groups for better navigation.
With the help of Properties view you have also the possibility to edit the css file by adding/editing/removing properties in the selector. Left click the "Value" field near the property you want to edit and write the changes in the text field.
CSS Properties view has five tabs:
CSS Text/Font properties define the appearance of text, its font family, boldness, size and the style.
For example, to define the "font-family"
property you should click Choose font family
button( 
) near Font Family text field
and select the fonts you want to use from the list.
When you click Ok the chosen fonts should appear in Font Family text field and in the sourse css file. To define other properties in CSS Text/Font tab you should just click button near the corresponding field you want and select the appropriate option in the list. Or if you are absolutely sure of the property's value to use you can just write it in the text field.
You should use CSS background properties and Background tab to define the background effects of an element.
Boxes tab is used to define CSS border properties, the box model and dimensions. The CSS border properties allow you to specify the style and color of an element's border.
As well as in Text/Font tab, it's also possible to define the property in two ways:
Property Sheet tab contains the categorized list of properties. Like in Properties view it's possible to edit the properties values.
Edited Properties tab contains only "overflow-y" property, which determines clipping of the element's content at the top and bottom edges.
It's also possible to edit the properties in the tab.
