# Style a presentation with CSS and LESS

[Canonical article](https://slides.com/docs/custom-css)

Available on: Pro

The CSS editor lets you freely author custom styles for your presentation. It's available as an option inside of the Style panel of the editor.

The editor supports [LESS](https://lesscss.org/), and plain CSS works as well. Styles are previewed as you type. When saved, they are automatically scoped within a `.reveal {}` selector to prevent conflicts with the surrounding page.

## Custom fonts
You can load custom fonts from Typekit and Google fonts and apply them to your content using CSS.

[Find out more](/docs/custom-fonts).

## Developer mode
If you turn on the [developer mode](/docs/developer-mode) you'll be able to easily add custom classes to any focused element. This is a great way to apply your CSS to specific elements.

## Slide classes

Use the special `//= class-name` syntax to make custom class names available in the presentation editor. This example adds a class that blurs a slide:

```less
//= blurry-slide
.blurry-slide { filter: blur(5px); }
```

<img src="https://static.slid.es/help/custom-css-pro/slide-custom-class-27084ab7.png" alt="Slide classes popup with a custom blur class selected" width="1782" height="1384">

## Example selectors

These selectors target common presentation elements:

```less
// Apply a background color to all slides
.slide-background {
    background-color: indigo;
}

// Control arrow color
.controls button {
    color: #ff0000;
}

// Fill color for the presentation progress bar
.progress span {
    background: #ff0000;
}

// Body text color
.slides {
    color: #009999;
}

// Link color
.slides a {
    color: red;
}

// Turn text white if the slide has a dark background
.has-dark-background {
    color: #fff;
}

// Larger slide numbers (if slide numbers are enabled for the deck)
.slide-number {
    font-size: 20px;
}

// Add a blue border to all slides (each slide is a <section>)
.slides section {
    outline: 1px solid blue;
}

// Add a red border to all vertical stacks of slides
.slides section.stack {
    outline: 1px solid red;
}

// Include a custom font
@font-face {
  font-family: "Cabin Sketch";
  src: url("https://s3.amazonaws.com/static.slid.es/fonts/cabinsketch/cabinsketch-regular.woff") format("woff"),
       url("https://s3.amazonaws.com/static.slid.es/fonts/cabinsketch/cabinsketch-regular.ttf") format("truetype");
}

.slides h1, .slides h2, .slides h3 {
    font-family: "Cabin Sketch";
}
```

Here's where you can access the CSS editor from inside of the Style panel:

<img src="https://static.slid.es/help/custom-css-pro/css-editor-1.png" alt="CSS editor option in the Style panel" width="3414" height="1290">

A screenshot of the editor:

<img src="https://static.slid.es/help/custom-css-pro/css-editor-2.png" alt="Custom CSS editor with a live presentation preview" width="3414" height="1290">