A brief exert from one of my presentations on WebDev, discussing the differences between CSS styles and WebDev Styles

CSS Styles and WebDev Styles

This is one area of WebDev that is a bit confusing and I wish, had been implemented a bit differently. If you have worked with WinDev, you have worked with styles already. WebDev styles are more or less the same thing. However when you talk about the Web and styling, CSS styles are the standard. As pcSoft has continued to improve WebDev to support web standards in the last few releases, they have added more and more CSS ability. However, what we end up with is a combination of both CSS styles and WebDev styles, and some confusion between the two. Here is my short explanation of the two and some tips on how I use them.

CSS Styles

CSS styles are a web standard. You can incorporate CSS files, into your WebDev design and we will do that, when we start looking at some advanced topics. Those CSS files are added from the Project Description as Free CSS style sheets, which we will cover later. There are also CSS styles that are included with the Skin you chose and you can create you own which would be Project CSS styles.
When you are working with a web designer, for instance that is creating the corporate brochure site, and you need your application to have the same look and feel, then they will likely provide you with a CSS file. In order to use those CSS styles, and see their effect, within the IDE at design time, you would need to create Project CSS styles.
Another reason you might need to create CSS styles would be, if you are creating a site that will be White Labeled for several clients, and you want to support a certain amount of customization of the look and feel of the site. Then you would need to create project CSS styles, which could be overridden with a CSS file load with the page at runtime.

Yet another example reason to use CSS styles, might be final page download size. Depending on how you use CSS and WebDev styles the resulting HTML pages could be a few 100K smaller. If you are targeting users that you know will have poor internet connections, then that might be important. That isn’t something we are concerned with with this site.
Our site doesn’t fit any of the above examples, so we are using the technique that I have found to be the easiest as far as development effort goes. You should explore this topic more to make sure it fits your needs or not.

Final Note about CSS styles

When we start working with WebDev styles you will notice they reference CSS styles, you might think we would want to create a CSS style, for the same reason that we created a custom Palette, so that we would only have one place to change the font in the future. However the CSS style drop down on the WebDev Style edit screen seems to only be there to set the initial values. Changing the CSS style later doesn’t change the WebDev styles using that CSS style. At least that has been my experience. Bottom line, I have spent quite a bit of time experimenting with CSS styles and other than a few exceptions like those list above, I have found using them creates more effort than benefit.

WebDev Styles

WebDev styles are a combination of CSS setting and WebDev setting that control the way a control looks. By creating WebDev styles for all of your standard controls, you are not only able to keep a consistent look and feel but, change all of them in the future if needed, by simply editing the styles. Creating the Interface Test page allows us to work on the look and feel and define those standard WebDev Styles at the same time.

TIP: Always create a WebDev Style

Even if the skin style is exactly what you want, still create it as a project WebDev style. If you ever need to change the font, etc. in the future, if you used skin styles, you can’t edit them. If all your controls are based on project styles you can edit the styles, and everything on the site based on those styles will change.

• WEBDEV
• WX