Local CSS definitions

Description

Define any local CSS classes. NOTE, you can include SASS syntax in your CSS definition. For more information on SASS syntax see http://sass-lang.com/

CSS, or Cascading Style Sheets, present a means of adding styling to HTML files without having to make a large mess inside of the html itself. This is easy to do when different elements inside an html file require multiple styling definitions like font, color, background, and so on. CSS takes all of these properties and places them in a single class enclosed in curly brackets inside a CSS file. An element, such as a <div>...</div> tag, can then include a class definition that links to a specific CSS class that provides all of the required styling information.

There are two types of CSS classes used extensively in Alpha Anywhere and with UX components. These are abstract CSS classes and physical CSS classes. Abstract classes are essentially placeholders. When you build a component, the different html elements that are used to display the component each receive an abstract CSS definition. These abstract CSS classes are extremely raw looking and can be viewed by setting the Resolve abstract CSS class names property to be unchecked.

Abstract CSS classes are not seen in most components because their values, unless otherwise specified, are assigned to physical CSS classes. When you assign a style to a component, using the [Style name] property, Alpha Anywhere automatically maps the physical CSS classes conforming to that style on to each of the available abstract classes. If you want to change any of these physical CSS classes, it is easy to create a new class and then assign a given abstract class to your newly defined physical CSS class, overriding the Alpha Anywhere default altogether.

The 'Local CSS definitions' property allows you to define new physical CSS classes for controls in your component. These physical CSS classes can be assigned to specific abstract classes using the Class map property. This will override the default physical CSS class definition that Alpha Anywhere generates for a given component. Alternatively you can create a CSS class name first, in the Class map property, and then add a CSS definition in the 'Local CSS definitions' property.

The CSS Editor 

Clicking on the 'Local CSS definitions' property, on the UX Properties page in the CSS/SVG section, will open the CSS Editor.

The Code Tab 

You can open the 'Code' tab at the bottom of the CSS Editor. The Code tab allows you to create new CSS class definitions. Once a new class is defined you can modify the CSS directly in the Code tab or use a propsheet to add styling in the Design tab. CSS class definitions start with a period '.' followed by the name of the CSS class and then a pair of curly braces '{}' that contain the class definition.

Two CSS classes
The same classes with some defined styling.

The Design Tab 

Once you define a CSS class in the CSS Editor's 'Code' tab, you can then add styling information to the class definition. The 'Design' tab lets you modify CSS classes using the same style editing property sheet that is used in other parts of the UX Builder and in Alpha Anywhere. To edit a class simply highlight it in the CSS class list on the right side of the tab and then make changes to that classes properties.

The Design Tab

On the design tab toolbar you can also click the green '+' icon to add a new class to the list. The red minus '-' sign deletes an existing class and the pencil icon allows you to change the name of a class. You can also use the import icon to add external css definitions to the CSS Editor and the ruler icon to scale fonts in a stylesheet.

CSS Properties 

Font
 
Font Family

Defines the font to use when rendering text.

Font Size

Size of the font when rendered.

Font Style

Style used when rendering a font.

Font Weight

How thick the font appears.

Font Variant

Whether the font is rendered using small caps.

Color
 
Color

Foreground color of text.

Background
 
Background Color

Sets the background color.

Background Image

Path of an image to place in the background

Background Repeat

How the background image is tiled.

Background Position

How the image is position in the element.

Background Attechment

How the background acts in relation to the window.

Text
 
Text Indent

Length of indent applied to first line of text.

Text Alignment

How text aligns.

Text Decoration

How render is decorated (underline, overline, line-through...).

Text Transformation

Capitalization effects, capitalize, uppercase, and lowercase.

Letter Spacing

Sets the space between letters.

Word Spacing

Space between words.

White Space

How the element should handle whitespace.

Padding
 
Padding Top

Sets the padding for the top of the element.

Padding Left

Sets the padding to the left of the element.

Padding Right

Sets the padding to the right of the element.

Padding Bottom

Sets the padding on the bottom of the element.

Margin
 
Margin Top

Margin for the top of the element.

Margin Left

Margin on the left of the element.

Margin Right

Margin to the right of the element.

Margin Bottom

Margin at the bottom of the element.

Visual Formatting
 
Display

What type of display bow the element uses.

Visibility

Whether or not the element is visible.

Float

Whether the display box should float.

Clear

Whether content appears adjacent to a float display box.

Overflow

How the element handles overflow.

Vertical Align

Vertical positioning inside a line box.

Cursor

Cursor to display on mouse over.

Positioning and Size
 
Position

Positioning method.

Top

Element's top.

Left

Element's left.

Right

Elements right.

Bottom

Elements bottom.

Width

Elements width.

Height

Elements height.

Line Height

Line spacing.

Z-Index

Stacking order of element.

List and Generated Content
 
List Style Type

List style to apply to markers.

List Style Image

Image to use as list marker.

List Style Position

Location of list markers.

Table
 
Table Layout

How a table is to be laid out.

Caption Side

Position of a table caption.

Border Collapse

How table borders are displayed.

Border Spacing

Spacing between cell borders

Empty Cells

How to render the border of an empty cell.

Row Span

Rows spanned by a cell.

Column Span

Columns spanned by a cell.

Paged Media
 
Page Break Before

Defines the page break before an element.

Page Break After

Defines the page break after an element.

Page Break Inside

Defines the page break inside an element.

Size

The size and orientation of a page, two lengths followed by an orientation: auto, landscape, and portrait.

Marks

Marks to be printed.

See Also