TopStyle contains powerful tools for building standards-compliant web sites.
Bring your ideas to life with HTML5 & CSS3. TopStyle 5 supports the newest versions of core standards that drive modern web experiences. You'll get access to all the latest tags and properties, including assistance from built in tools like Insight, Inspector & validators.
TopStyle 5 comes with multiple new features, tweaks and improvements that let you work more efficiently. Here's just a sample of what's in store for you...
Hyperlinking (Go to Declaration) & Property Help
TopStyle's unique hyperlinking greatly simplifies navigating between documents. Click an HTML class attribute to navigate to the definition of that class in an external style sheet, or click an anchor tag or CSS link to open the linked file for editing. Clicking on a CSS property name in the editor window while holding the Ctrl key down will display detailed help about the selected property.
Smart Copy and Paste - now 100% faster!
We believe that even smallest details can be improved and Smart Copy and Paste is our answer. You no longer need to highlight/select a word to copy it. With your cursor in a word all you have to do is press Ctrl+C (or Ctrl+X) and TopStyle will figure out what to select and copy. Smart Paste (Ctrl+Shift+V) will replace the current word. You won't believe how much you'll miss this feature in other editors!
Validation: Style Checker and W3C + CSE + HTML5 validators
CSS is actually quite simple, but getting it to work in multiple browsers is a challenge. This is where TopStyle shines! TopStyle's Style Checker is a powerful tool which validates your style sheets against multiple browsers, flagging any invalid properties or values it finds. What's more, TopStyle enables you to pass your style sheets directly to the W3C's validation services so you can quickly check against the official specifications.
CSS3 Media Queries
CSS3 allows you to specify a style sheet for certain conditions. For example, you can have one style sheet for large displays and a different style sheet specifically for mobile devices. TopStyle 5 allows you to tailor to different resolutions and devices without changing the content.
CSS Selector Panel
The CSS Selector Panel displays all selectors in your document. Clicking any selector in the list will dive to the correct spot in a long document. But there is more: you can easily comment out or create new selectors too!
HTML Structure Panel
The HTML Structure Panel appears below the code editor, and displays the hierarchy of HTML tags that lead up to your editing position. Selecting the parent tag is easy! When you click on one of the buttons in the HTML Structure Panel, TopStyle 5 will select the corresponding HTML tag (and its contents) in the editor.
One of the most daunting things about building and maintaining a web site can be wading through huge, disorganized style sheets. Nothing is worse than opening up a style sheet someone else has worked on and thinking, "what the heck happened here?". One of TopStyle's most powerful features is its ability to group CSS selectors into a folder structure.
and much more ..
- Preview CSS while you write it.
- Easily create pleasant color schemes for your site.
- Style Checker validates your CSS syntax against multiple browsers.
- Use Site Reports to see at-a-glance where CSS styles are used in your site.
- Style Upgrade quickly replaces all outdated HTML code with equivalent CSS styling.