TopStyle Lite is a free, light-weight Cascading Style Sheet (CSS) creating and editing tool. It has many features that are sufficient for web design and development use. TopStyle Lite was primarily designed for use as an inline style editor from within third-party HTML editors. A color picker can be used to select colors anywhere on the computer screen.

Platform: Windows

TopStyle Lite is a free, light-weight Cascading Style Sheet (CSS) creating and editing tool. It has many features that are sufficient for web design and development use. TopStyle Lite was primarily designed for use as an inline style editor from within third-party HTML editors.

Useful Features:

• Active Style Definition

  Worried about CSS cross browser and CSS version compatibility issues? Active Style Definition solves the problem. When you select a definition from the definition dropdown list, any CSS properties that you typed in the editor that aren't supported by the active style definition will be color-coded red.

  

  The active style definition also determines which properties and values are displayed in the style inspector and style insight. For example, if you choose "Internet Explorer 4" from this dropdown, only properties and values that are understood by Microsoft Internet Explorer 4.x will be displayed in the Properties sheet.

  

• Style Inspector

  The style inspector can display all properties of an element that is supported by the Active Style Definition you have selected. In screenshot below, the right column of each property of font HTML element includes a dropdown containing values that are appropriate for the active style definition. The dropdown provides us with values to choose from.

  

• Color selection

  Style inspector also includes both pre-defined and custom color selection. The PhotoShop like Color Picker is one of the most useful features. It allows you to grab a color from anywhere on the screen and it shows you the color code. Very handy.

  

  On the top-right corner of following screenshot, you can see the color picker tool. To grab a color from anywhere on the screen, hold to minimize TopStyle Lite. Another great feature to use.

  

• Auto style popup (Style Insight)

  Auto style popup simplifies the entry of style properties and values as you type them into the editor. Use the arrow keys or PageUp and PageDown to navigate the list, or begin typing the name of the property or value.

  Style Insight will display automatically if you Enter key, hit spacebar, or pause after entering a property or value. You can also force insight to display by hitting Ctrl+Space.

  

• Preview

  TopStyle's internal preview gives you immediate feedback on your style sheet. The preview is generated from the current style sheet, showing a list of every element and class. Note that if a body element is defined for the style sheet, it will be accurately reflected in the preview.

  As you enter new properties and values, the preview will automatically update to reflect any changes.

• Selector List

  The selector list shows a breakdown of all selectors within the current style sheet grouped by selector type (element, class or ID). Clicking on a selector will locate it in the editor.

  

Third Party Integration with TopStyle

TopStyle offers unsurpassed power as a stand-alone editor, plus it also offers first-class CSS editing from within a number of popular Web authoring tools:

• Macromedia Dreamweaver MX
• Macromedia HomeSite
• HTML-Kit (build 290+)
• NoteTab Pro
• CSE HTML Validator
• PSPad
• Webformer
• Scribe!2
• Actipro Spider Writer 5.0
• Visicom Media's AceHTML
• C.W.E.P.
• Multi-Edit 9.0

Using TopStyle with other Web Authoring Tools

• Microsoft Visual Studio. NET
• Microsoft FrontPage
• Microsoft Visual InterDev
• Adobe GoLive

Other Applications that Integrate with TopStyle

• FTP Voyager
• VisNetic WebSite (formerly O'Reilly WebSite)
• Performance Organiser HTML Generator

Click here to download TopStyle Lite from Newsgator website.