# Basic example

As you can see in the screenshot below most DOM Element get assigned a class starting by kcSomething. Example kcFormHeaderClass.

No styles rules get assigned to those classes they are only here for you to use as target for your custom CSS.

<figure><img src="https://723341942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1pGOu8uVH5l8KqPEPmKi%2Fuploads%2FAe71LNoKtKQUw6aEtyWH%2Fimage.png?alt=media&#x26;token=d32fa0ae-cbea-4e16-bd78-3dd3b9e8bc2b" alt=""><figcaption><p>Inspecting the login.ftl page in chrome dev tools</p></figcaption></figure>

So if you're not very interested in all the bells and whistles Keycloakify offers, you can just create a CSS[^1] file and just start customizing the page:

<figure><img src="https://723341942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1pGOu8uVH5l8KqPEPmKi%2Fuploads%2FhHbVrJIJRONoV3sgsYDJ%2Fimage.png?alt=media&#x26;token=aa78f5d9-3172-4366-ac63-c370a9c087e8" alt=""><figcaption><p>Applying a red border to all the DOM element with the kcFormHeaderClass class</p></figcaption></figure>

<figure><img src="https://723341942-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1pGOu8uVH5l8KqPEPmKi%2Fuploads%2FJEKETiP2sz5JgLkd0BBl%2Fimage.png?alt=media&#x26;token=3df63c37-c56e-467f-bd2a-062b5439d9fb" alt="" width="375"><figcaption><p>The red border gets applied</p></figcaption></figure>

Up next:

{% content-ref url="removing-the-default-styles" %}
[removing-the-default-styles](https://doc-old.keycloakify.dev/documentation/v10/customization-strategies/css-level-customization/removing-the-default-styles)
{% endcontent-ref %}

[^1]: ...or LESS or SASS