ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Styles / CSS styles
  • Overview
  • The management of states
  • Text tab
  • Fonts
  • Size
  • Decoration
  • Other parameters of the font
  • Paragraphs
  • Background tab
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
This window allows you to describe a CSS style that will be used for the controls of your WEBDEV project.
This window is used to:
  • Modify the characteristics of an existing style. All you have to do is select the style, the status and the characteristics of the selected style, then validate.
    Remarks:
    • If the style is not "Local" to the control, these modifications will be applied to all the controls that use the modified style.
    • If the style is "local to the control", only the style of the control will be modified. However, the style will be included in the HTML page (consequence: page slower to load).
  • Create a new style: Click [Create], enter the name and characteristics of the style and validate.
  • Rename a style: Click the [Rename] button and specify the new name of the style.
    Caution: this option is not recommended. Indeed, this option cancels all the links between the controls that use the style and the renamed style. For the controls that were using the style before it is renamed, this style will be changed into a "Local" style.
This help page presents the different options available in the "Text" tab and in the "Background" tab. The preview is used to dynamically view the characteristics of the style.
The management of states
A variation of style can be defined for each status managed by the CSS style sheet. The <Undefined> properties use the properties of the "Normal" status. In the "Normal" status, if a property is <Undefined>, the corresponding options defined in the browser of the Web user will be taken into account.
Remark: Some states are not available for all types of controls. The table below presents the possible states according to the controls and to the browsers:
RolloverActiveNon-visited linkVisited linkFirst childFirst letterFirst row
CaptionXX
HTML staticX (FireFox only)XX
Graphic buttonXXXX (Internet Explorer only)X (FireFox only)
Java button
Text buttonX (FireFox only)X (FireFox only)X (FireFox only)
LinkXXXXX (FireFox only)X
ImageX (FireFox only)X (FireFox only)X (FireFox only)
Clickable imageX (FireFox only)X (FireFox only)X (FireFox only)
ThumbnailX (FireFox only)X (FireFox only)X (FireFox only)
Formatted controlXX
Edit controlX (FireFox only)X (FireFox only)X (FireFox only)
Radio ButtonX (FireFox only)
Check Box
List BoxX (FireFox only)X (FireFox only)X (FireFox only)
Combo BoxX (FireFox only)X (FireFox only)X (FireFox only)
TableX (FireFox only)XX
PagerXX
TreeViewXXXX (Internet Explorer only)X (FireFox only)
Horizontal ruleX (FireFox only)
BreadcrumbXXXXX (FireFox only)
Text tab

Fonts

Select one of the available font families.
A font family is an organized set of fonts. If the first font is not available on the computer of the Web user, the second font is sought. If this font is available, it is used; otherwise, the next font is sought.
The [...] button is used to create new font families as well as duplicate and modify the existing families.
For more details, see Font family.

Size

Select the size of the font. The available sizes are:
  • A defined size, specified in a specific unit (pixels, centimeters, millimeters, inches, point, pica, percentage, ...).
  • A size relative to the current font (when the page is displayed):
  • xx-small: Extremely small size
  • x-small: Extra small size
  • small: Small size
  • medium: Standard size
  • x-large: Large size
  • xx-large: Extra large size
  • -1: the smallest size
  • +1: the largest size

Decoration

Additional options for formatting the font. These options are used to underline the links or to strike them out for example.
  • None: no additional decoration
  • Strikethrough: the text is struck out: a line is drawn across the text. Example: a
  • Underline: the text is underlined. Example: B
  • Blinking: the text blinks (this option produces a blinking effect on the Netscape browser only)
  • Highlighted: a line is drawn above the text

Other parameters of the font

ColorSelect the color of the font.
WeightThickness of the character. You have the ability to select:
  • a preset weight (normal, bold, heavy, light)
  • a thickness (from 100 to 900)
IndentIndent for the first line. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, ...
StyleStyle of the characters: normal, italic, oblique
Inter-character spacingSpacing between the letters. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, etc.
VariantMode for displaying the characters: standard or small caps.
Line spacingSpacing between the lines. Specify a value that can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, etc.
CaseFormatting of the character: 1st letter in uppercase, uppercase, lowercase or none (by default)
HyphenationManaging word hyphenation. You can use standard hyphenation or cut the words if necessary.
AlignmentPresentation of the text: aligned to the left, aligned to the right or justified (aligned to the left and to the right).
Vertical alignmentAlignment of the text in height in relation to the available area.

Paragraphs

You have the ability to manage the spacing before and after each paragraph. All you have to do is specify the value of the spacing and the selected unit.
Background tab
The following characteristics can be modified in the "Background" tab:
ColorSelect the background color of the control.
ImageImage displayed in the control background. The selected image must be found in the image directory of the project (<ProjectName>_WEB).
TiledRepetition of the image in the control. The image can be tiled:
  • in tiles (repeated option)
  • horizontally (repeated X option)
  • vertically (repeated Y option)
Fixed positionIf this option is checked, the image will not be scrolled when the scrollbar is used.
Horizontal and vertical positionPosition of the image in relation to the control. The value can be expressed in pixels, centimeters, millimeters, inches, point, pica, percentage, ...
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help