# Customizing Forms Using CSS

> You can customize the appearance of your form using custom CSS. This tutorial demonstrates how to set a different background color for components inside the form.

You can customize the appearance of your form using custom CSS. This tutorial demonstrates how to set a different background color for components inside the form.

1. Type the CSS classes that you want to use inside the form, in the Custom CSS property field.

   For this example paste the following CSS classes:

   ```
   .change {
   background-color:red;
   }
   .spring {
   background-color:green
   }
   ```
2. Hover over a form component and click Edit. Type one of the classes added at step 1 inside the Custom CSS Class field.
   1. For this example, edit a Text Field component, and paste the `change` CSS class inside the Custom CSS Class field. Watch the component turn red after saving it.
   
      ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-215642-cb9c4844.webp)
   
   2. Edit a **Text Area** component, and paste the `spring` CSS class inside the Custom CSS Class field. Watch the component turn green after saving it...
      
   ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-215646-80b980d8.webp)

To see the making of and the result of this tutorial, watch the video below:

  <iframe
    src="https://documentationexamplerepo.blob.core.windows.net/examples/Forms/customizing_forms_using_css_result.mp4"
    title="Accelerate building automations with UiPath Integration Service"
    style={{
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      border: 0,
    }}
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerPolicy="strict-origin-when-cross-origin"
    allowFullScreen
  ></iframe>