---
title: Defining styles for the editor
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
The editor allows you to apply a selected style to the text using the **Style** drop-down list. You can use either built-in styles or your custom styles:
The styles offered in the list are defined in the minified **\CMS\CMSAdminControls\CKeditor\styles.js** file. For illustration purposes, the structure of the unminified file looks like this:
```csharp title="List of existing styles"
CKEDITOR.stylesSet.add( 'default',
[
{ name: 'Italic Title', element: 'h2', styles: { 'font-style': 'italic' } },
{ name: 'Subtitle', element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },
{
name: 'Special Container',
element: 'div',
styles: {
padding: '5px 10px',
background: '#eee',
border: '1px solid #ccc'
}
},
{ name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
{ name: 'Big', element: 'big' },
{ name: 'Small', element: 'small' },
{ name: 'Typewriter', element: 'tt' },
{ name: 'Computer Code', element: 'code' },
{ name: 'Keyboard Phrase', element: 'kbd' },
{ name: 'Sample Text', element: 'samp' },
{ name: 'Variable', element: 'var' },
{ name: 'Deleted Text', element: 'del' },
{ name: 'Inserted Text', element: 'ins' },
{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' },
{ name: 'Language: RTL', element: 'span', attributes: { 'dir': 'rtl' } },
{ name: 'Language: LTR', element: 'span', attributes: { 'dir': 'ltr' } },
{
name: 'Styled image (left)',
element: 'img',
attributes: { 'class': 'left' }
},
{
name: 'Styled image (right)',
element: 'img',
attributes: { 'class': 'right' }
},
{
name: 'Compact table',
element: 'table',
attributes: {
cellpadding: '5',
cellspacing: '0',
border: '1',
bordercolor: '#ccc'
},
styles: {
'border-collapse': 'collapse'
}
},
{ name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
{ name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }
]);
```
> **Note:** Every time you modify the _styles.js_ file (or any other file that is used for the editor), you need to clear the cache of your browser so that the changes are applied.
If you need to set more styles for one object, separate individual style definitions with a comma:
```javascript title="Defining more styles for a single object"
{ name : 'Object', element : 'element', styles : { 'style 1' : 'value' , 'style 2' : 'value' } }
```
Every style has its name and element for which it is used. The styles are offered in the drop-down list based on the current position of the cursor. If you select some image, the styles for the _**img**_ element will be offered. If you select some text, the styles for the _**h3**_ or _**span**_ element will be offered.
If you choose to apply e.g. the _**Red Title**_ style to the following HTML code:
```html
We provide web development services.
```
the result will be as follows:
```html title="The resulting html code after applying the Red Title style to a text"
We provide web development services.
```
As you can see, the text was encapsulated with the _**h3**_ element with the **style** attribute set to _**color: red**_.
However, you may want to apply CSS class names instead of hard-coded styles. If you want to add a new style, the definition of the style needs to be inserted into the _styles.js_ file in front of the last square bracket. In this case, your style definition will look like this:
```javascript title="Style definition when using CSS"
name : 'Green text',
element : 'h3',
attributes :
{
'class' : 'GreenText'
}
```
In your CSS stylesheet, you need to define the _GreenText_ class name like this:
```css title="Styling the Greentext class inside the CSS stylesheet"
.GreenText { color: green; }
```
and the result will be:
```html title="The resulting text after applying the style"
We provide web development services.
```