# Customizing Forms Using Local CSS Files

> The **LocalCSSFilePath** field of the **Create Form** activity comes to greet the necessity of customizing the form to your preference.

The **LocalCSSFilePath** field of the **Create Form** activity comes to greet the necessity of customizing the form to your preference.

There are some things you should consider while using the local CSS file:

* The global styles apply immediately after setting the CSS file path.
* Specific component styles must be configured as classes. Use a relevant name. (for example, `.username-label` or `.submitButton-color`).
* Form preview doesn't display the style changes when you set the CSS file path as a variable. To preview the changes, use hardcoded values for the path of your CSS file.
  :::note
  The **LocalCSSFilePath** property is available starting with [version 1.3.0](https://docs.uipath.com/activities/other/latest/workflow/release-notes-uipath-form-activities#v130) of the **UiPath.Form.Activities** pack.
  :::

## Tutorial

#### To design the form with specific appearance requirements:

1. Create a CSS file containing your style settings and save it on your local device. For example, to modify the label colors and to add a custom background to the form, we created the following CSS file:
   ```
   body {
       background-image: url('https://images.pexels.com/photos/6590885/pexels-photo-6590885.jpeg');
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
   }
   .lastname-label
   {
      color : red;
      font-size : 15px;
      font-weight : 10px;
   }
   .firstname-label
   {
      color : green;
      font-size : 17px;
      font-weight : 30px;
   }
   .city-label
   {
      color : blue;
      font-size : 19px;
      font-weight : 50px;
   }
   .eligible-label
   {
      color : purple;
      font-size : 12px;
      font-weight : 30px;
   }
   ```
2. In the **Create Form** activity > **Format** property > **LocalCSSFilePath**, input the path to the CSS file (for example, `"/file://C:\User heCssFile.css"`).

   You may also store the path to the local CSS file as a variable, and input the variable name in the **LocalCSSFilePath** field.
   
   ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-186954-664cd617.webp)
3. Open the Form Designer and navigate to the component targeted by your customization.
4. In the **Display** tab of the targeted component > **Custom CSS Class** field, write the name of the custom CSS class configured in the file. This binds the data in the CSS file to your form. For example, to customize the label for the City drop-down, input the corresponding CSS class `city-label`.
   
   ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178368-7ed658d1.webp)
5. Save the component.
6. Repeat steps 3 to 5 for every component you need to customize using your local CSS file.
7. Save the form.

## Sample workflow

To check the complete workflow or to have a future reference, download the [XAML example](https://documentationexamplerepo.blob.core.windows.net/examples/Forms/CustomCSSFilePath.zip)