Create your own stylesheet with TopStyle Lite CSS editor

Posted on December 8, 2008 at 5:34 am

Cascading Style Sheets have become a standard format for encoding style definitions of web pages. Unlike inline style components (i.e. font tag), which does not separate your content from the presentation, CSS makes your whole site easier to maintain.  If you want to edit the look of your site, all you have to do is edit the CSS file instead of the individual pages.  Style sheets look like the one below:

P {

font-family: Verdana;

font-style: bold;

color: blue;

font-size: 12;

}

“P” is an HTML tag so this means that all of my content inside the <P> tag will have that style.  In the example above I defined 4 style elements: font family, style, color and size.  You can create style sheets for any HTML tag like <A>, <TABLE>, <TD>, etc.

TopStyle Lite is a free editor for making CSS files.  You can get it from this website: http://www.bradsoft.com/

TopStyle has a clean interface where you can put your CSS code and preview the output.  A style inspector is also available that acts like a map of of elements, classes and IDs that you create:

image

As you have seen above, this is not a WYSIWYG tool.  You will need to type the CSS code by yourself but the code editor has pop-up suggestions to guide you on this task:

image

The style inspector could act as a shortcut to jump to individual elements.  Click an element to highlight the code of the element in the code editor:

image

The properties editor under the Style Inspector window could also be used to edit the CSS code.  The style sheet code automatically changes as you change parameters of the design elements under the properties tab:

image

Once you are done you can save the CSS file directly as a CSS file:

image

TopStyle Lite is an easy to use tool for creating CSS code using very little effort.  It’s capability to provide you with predefined design elements and display the sample output real-time are a big help for serious web developers. 

Ben Carigtan shows you how it’s done.

» Filed Under Free Software Downloads

Related Posts

Comments

2 Responses to “Create your own stylesheet with TopStyle Lite CSS editor”

  1. cicom3nd3z said on : December 8th, 2008 at 11:20 am

    Probably the best CSS editor for Windows.


  2. Phao Loo said on : December 10th, 2008 at 10:40 am

    Instead of open heavy DreamWeaver of Visual Studio, I probably prefer this small utility.

    It seems you have to have a basic knowledge about CSS before using this. But CSS is pretty easy, visit and read some lessons from http://www.w3schools.com/css/, you will make CSS your loyal slave.


Please post your comments/suggestions!