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.
![](https://docs.keycloakify.dev/~gitbook/image?url=https%3A%2F%2F723341942-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1pGOu8uVH5l8KqPEPmKi%252Fuploads%252FAe71LNoKtKQUw6aEtyWH%252Fimage.png%3Falt%3Dmedia%26token%3Dd32fa0ae-cbea-4e16-bd78-3dd3b9e8bc2b&width=768&dpr=4&quality=100&sign=15d10b12&sv=1)
So if you're not very interested in all the bells and whistles Keycloakify offers, you can just create a file and just start customizing the page:
![](https://docs.keycloakify.dev/~gitbook/image?url=https%3A%2F%2F723341942-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1pGOu8uVH5l8KqPEPmKi%252Fuploads%252FhHbVrJIJRONoV3sgsYDJ%252Fimage.png%3Falt%3Dmedia%26token%3Daa78f5d9-3172-4366-ac63-c370a9c087e8&width=768&dpr=4&quality=100&sign=f3ee6163&sv=1)
![](https://docs.keycloakify.dev/~gitbook/image?url=https%3A%2F%2F723341942-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1pGOu8uVH5l8KqPEPmKi%252Fuploads%252FJEKETiP2sz5JgLkd0BBl%252Fimage.png%3Falt%3Dmedia%26token%3D3df63c37-c56e-467f-bd2a-062b5439d9fb&width=768&dpr=4&quality=100&sign=cd50f18f&sv=1)
Up next:
Removing the default stylesLast updated