# 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://content.gitbook.com/content/N2jP04ve5XD0mhCzbqnp/blobs/3JXw6BNODrND7aI4vGBl/image.png" 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://content.gitbook.com/content/N2jP04ve5XD0mhCzbqnp/blobs/Sw1TVsdRKQXsSLsIN3zM/image.png" alt=""><figcaption><p>Applying a red border to all the DOM element with the kcFormHeaderClass class</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/N2jP04ve5XD0mhCzbqnp/blobs/wqbkLk9N7WxxBpZ94lhp/image.png" 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/v11/customization-strategies/css-level-customization/removing-the-default-styles)
{% endcontent-ref %}

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