[How To] Create & Using the custom css classes

[Alexander Bulei]

In this tutorial, we show you how to create and use custom css classes in your projects.

1. You need create (or use existing) the custom css file (e.g: my-custom.css')
2. Add your css classes.
3. Save in wwwroot folder, e.g: 'customcss/my-custom.css'
4. Load the saved css fle into project via ContentFiles.
   
   delphi code

   IWForm1.ContentFiles.Add('customcss/my-custom.css');

   
   
5. Done, now you can use/add your custom css classes in components.

Another way, by using the ExtraHeader property of IWForm:

• Just put your css classes inside <style></style> tag:
  delphi code

  with ExtraHeader do
    begin
      Add('<style type="text/css">');
      Add(' .my-css-class1 { color: #FFF; font-size: 12px; }');
      Add(' .my-css-class2 { background-color: red; }');
      Add(' .my-css-class3 { border: 1px solid #000; }');
      Add('</style>');
    end;

Useful links:

• CSS Tutorial: http://www.w3schools.com/css/DEFAULT.asp
• IW ContentFiles property: http://docs.atozed.com/docs.dll/classes/TIWBaseForm.html

Best Regards.