Creating and modifying CSS styles

HammerKit�s design editor gives full control on CSS-styles. With CSS styles, you can define the typography, colors, background images, borders, alignment and various other design properties of the content elements.

Creating a new CSS style

1. Click the add style button above the CSS styles list once to open the CSS style properties view.
   
2. Specify the Text style properties, Box style properties and advanced settings.
   
3. Click the save button once to save the settings and to create a new style.
   You return to CSS styles list.

Editing CSS styles

1. Click the style NAME once to open the CSS style properties view.
   
2. Specify the Text style properties, Box style properties and advanced settings.
   
3. Click the save button once to save the changes.
   You return to CSS styles list.

Specifying style properties

1. Specify the element type by selecting the option from the Style for element select box.
   • Select All elements if you want to specify a CSS style to be applied to any content element.
     • Select all elements with class to specify a CSS style that can be applied to any element with class.
       Specify the class name in the text field.
       
     • Select elements with id to apply the style to all elements with specified id.
       Specify the element id in the text field
   • Select a specific HTML element to apply the style to it.
2. Specify the pseudo when creating link, visited, active and hover style for an already existing style.
   
3. Write the style description in the Description field. The description is visible in the CSS style pull down menus of various tools as a style name. If you leave the description field empty, the HTML element tag, class name or element id are used.

Defining TEXT STYLES

1. Specify the font properties
   • Select the font face from the Face select box.
     The font faces are defined as font families. If the primary font of the font family is not available in the operating system of the visitor�s computer the secondary font face is used. The font families contain alternative font faces having similar characteristics. (See Font families)
     
   • Specify the font Size value in pixels (px), points (pt), centimeters (cm), picas (pc), millimeters (mm), inches (in), ems (em), exs (ex) or percentage from the parent value (%).
     
   • Select the Weight option
     The options are: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
     
   • Select the Style option
     The options are: normal, italic, oblique
     
   • Select the Variant option
     The options are: Normal, small caps
2. Specify the text properties
   If no values are specified, the default values are used.
   
   • Click the checkboxes active to define the Decoration setting.
     The options are: underline, overline, line through, blink
     
   • Specify Line height value in pixels (for example 12px) or in percentage value (for example 120%).
     
   • Specify the Text indent value for the first line in pixels (For example 20px) or in percentage value (For example 5%). The default unit is px.
     
   • Specify the Letter spacing value. The decimal values are allowed.
     
   • Specify the Word spacing value. The decimal values are allowed.
     
   • Specify the alignment setting from the Text align select box.
     The options are: Left, right, center, justify
     
   • Specify the vertical alignment setting from the Vertical align select box
     The options are baseline, middle, sub, super, text top, text bottom, top, bottom
     
   • Specify the Transfom setting. The options are:none, capitalize, lowercase, uppercase
     
   • Use the White space select box to set the white space to normal, preserve or No wrap
     
   • To specify the Text color, click the rectangle in the right side of the Text color title to open the Choose color pop up window.(See: using the Color chooser)

Setting box style properties

Use Box properties settings to create an predefined outline, margin, padding, background color and images for the text, image and table elements.

1. Click the BOX STYLES tab once to open the box style settings.
   
2. Specify the value for the left, right, top and bottom padding in pixels (for example 12px) or as percentage value (for example 5%).
   The padding is the empty space between the content and the outer edge of the box.
   
3. Specify the value for the left, right, top and bottom margin in pixels (for example 12px) or as percentage value (for example 5%).
   The margin is the empty space around the box.
   
4. Write the left, right, top and bottom width of the border line of the box in pixels (for example 5px)
   
5. Select the color for left, right, top and bottom border line. (See: Using the Color chooser)
   
6. Select the border style from the Style select box.
   The options are: Dotted, dashed, solid, double, groove, ridge, inset, outset.
   The appearance of the border style varies in web browsers.
   
7. You can specify the fixed size for the box in the Width and Height fields in pixels or as a percentage value. Leave the fields empty to use the size defined in the element.
   
8. You can specify the float value
   The options are: none, left, right
   
9. You can set the clear value
   The options are: none, left, right, both
   
10. Select the background color option from the Background color select box. The default value is Define color.
    • Select Define color to specify the color. The color rectangle appears.
      Click the rectangle to open the Choose color pop up window and define the background color for the box (See: Using the Color chooser)
      
    • To set the background to transparent choose transparent.
11. Click the Browse� button of the background image field to open the File chooser for specifying the background image. ( See: using the file chooser)
    
12. Set the background image to repeat, no repeat, repeat horizontally or repeat vertically from the Repeat select box.
    
13. Set the horizontal position of the background image to left, right or center or specify the position of the left corner of the image from the left corner of the box horizontally and vertically in pixels (for example 20px) or as a percentage value (for example 10%).

The advanced style settings

You can specify other style settings available in CSS.

Deleting CSS styles

1. In the CSS Styles list, click to activate the checkboxes of the styles to be deleted.
   
2. Click the delete button once to remove the selected styles.